CSS教程:新的图像替换方法

【 tulaoshi.com - Web开发 】

熟悉css的开发者一定知道图像替换技术，也深知它的意义，Dave Shea 曾在他的一篇文章对此做了详细的总结，参看 Dave Shea’s excellent summary ，Paul Young 在分析现存的所有方法的优缺点之后，提出了一种新的方法，并将其命名为状态域方法（The State Method），本文将详细介绍该方法的原理：

现存方法的缺点：

新的图像替换方法：

新的图像替换技术需要借助于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(""), "");
   };

这段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，方法将更简单。

状态域可以通过下面的方法来切换：

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

如果状态域为on，状态域的名字将附加到规则的选择器之前，下面这条规则在条件为真时会将锚点的颜色变成blue。

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

正如你所预想的那样，状态域图像替代技术是通过检查图像是否被禁用而工作的。如果未被禁用，将激活image-on状态域，这很直接了当。