中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

熟悉css的開發(fā)者一定知道圖像替換技術(shù)，也深知它的意義，Dave Shea 曾在他的一篇文章對此做了詳細(xì)的總結(jié)，參看 Dave Shea’s excellent summary ，Paul Young 在分析現(xiàn)存的所有方法的優(yōu)缺點之后，提出了一種新的方法，并將其命名為“狀態(tài)域方法”（The State Method），本文將詳細(xì)介紹該方法的原理：

現(xiàn)存方法的缺點：

1. 容易失效，例如：圖像禁用或者替換圖像含有透明區(qū)域；
2. 過于復(fù)雜不能迅速可靠的執(zhí)行；
3. 通過js遍歷文檔樹，在頁面加載時出現(xiàn)的閃動不盡人意；
4. 可能與一些瀏覽器不兼容

新的圖像替換方法：

新的圖像替換技術(shù)需要借助于js來實現(xiàn)，但很容易執(zhí)行，只需要將一小段js引入到頭部即可。一旦js執(zhí)行，響應(yīng)的規(guī)則前將附加“.image-on”，只要客戶端的圖片未被禁用，規(guī)則就會生效，下面是一條應(yīng)用到h1“狀態(tài)域方法”的聲明：

h1 {
 width: 100px;
 height: 50px;
}

第一條規(guī)則總是生效，第二條只有在image未被禁用時生效�！皌ext-indent”使文字偏移于屏幕之外，“overflow:hidden”主要用來在FF下放置錨點在被點擊時其焦點偏移于屏幕之外。

第二條規(guī)則包繞在@media screen中，主要用來保證圖像替換只發(fā)生在屏幕閱讀器中，而不是在打印狀態(tài)下執(zhí)行。如果不這樣處理，頁面打印時，多數(shù)用戶將看到一個很大的空隙而不是有意義的文本。

該項技術(shù)執(zhí)行起來很快。因為文本偏移于屏幕之外，圖像可以包含透明元素，透過圖像本身，你看不到任何文本。Js執(zhí)行很快，幾乎是瞬時的，它充分利用瀏覽器本身的特性。

方法解析

“狀態(tài)域方法”是在一種假定的狀態(tài)下，快速使css規(guī)則生效的方法，其上下文背景為document，這樣避免了瀏覽器遍歷DOM樹。應(yīng)用“狀態(tài)域方法”有兩個理由：

1. 針對用戶的反應(yīng)，頁面部分內(nèi)容再格式化；
2. 基于客戶端瀏覽器、設(shè)備、和其它狀況而附加額外的樣式。

“狀態(tài)域方法”通過使用下面的script給html附加一個class。

   document.enableStateScope = function(scope, on)
   {
     var de = document.documentElement;
     if (on)
     de.className += " " + scope;
     else
     de.className = de.className.replace(
       new RegExp("\\b" + scope + "\\b"), "");
   };

這段js有一點小問題，在示例頁中切換功能并不生效，我重新修改了一下，代碼如下：

function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
document.enableStateScope = function(scope, on) {
var de = document.documentElement;
On ?  addClass(de,scope) : removeClass(de,scope);  
};

上面的hasClass、addClass、removeClass方法借用的是《Pro JavaScript Techniques》提供的方法。如果你使用過jquery，方法將更簡單。

“狀態(tài)域”可以通過下面的方法來切換：

if (condition == true) {
document.enableStateScope("myScope", true);
}

如果“狀態(tài)域”為“on”，狀態(tài)域的名字將附加到規(guī)則的選擇器之前，下面這條規(guī)則在條件為真時會將錨點的顏色變成blue。

a { color: red; }
.myScope a { color: blue; }

正如你所預(yù)想的那樣，狀態(tài)域圖像替代技術(shù)是通過檢查圖像是否被禁用而工作的。如果未被禁用，將激活“image-on”狀態(tài)域，這很直接了當(dāng)。

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 下一頁 圖像替換新技術(shù):狀態(tài)域方法 [2]

◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。