現存方法的缺點：

容易失效，例如：圖像禁用或者替換圖像含有透明區域； 過于復雜不能迅速可靠的執行； 通過js遍歷文檔樹，在頁面加載時出現的閃動不盡人意； 可能與一些瀏覽器不兼容

新的圖像替換方法：

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

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

@media screen { 
 .images-on h1 {
   text-indent: -10000px;
   background-image: url(image.png);
   overflow: hidden; 
 }
}

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

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

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

方法解析

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

針對用戶的反應，頁面部分內容再格式化； 基于客戶端瀏覽器、設備、和其它狀況而附加額外的樣式。

“狀態域方法”通過使用下面的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有一點小問題，在示例頁中切換功能并不生效，我重新修改了一下，代碼如下：