CSS 新的图像替换方法

时间:2021-05-08

参看 Dave Shea’s excellent summary ,Paul Young 在分析现存的所有方法的优缺点之后,提出了一种新的方法,并将其命名为“状态域方法”(The State Method),本文将详细介绍该方法的原理:

现存方法的缺点:

  • 容易失效,例如:图像禁用或者替换图像含有透明区域;
  • 过于复杂不能迅速可靠的执行;
  • 通过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有一点小问题,在示例页中切换功能并不生效,我重新修改了一下,代码如下:

    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”状态域,这很直接了当。
    上一页12 下一页 阅读全文

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章