我是如何在实际项目中使用before/after伪元素的

这篇文章发布于 2012年11月16日,星期五,12:02,归类于 Web综合。 阅读 96264 次, 今日 2 次 34 条评论

 

一、诉说前言

before/after伪元素相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪元素应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪元素的意识,要使用顶多也就是跟风的“清除浮动”应用。

我想,这可能受兼容性思维影响——IE6/7浏览器并不支持,还是等什么时候IE6/IE7换届下台的时候再说吧~~

虽然八尾九尾都是残体,并不影响十尾的成型。一粒老鼠屎掉进锅里,你就真让这一锅红烧肉毁了——把有翔的这部分给阿黄(中华田园犬)吃就可以了。

本文简单展示我在实际项目中,应用before/after伪元素时候,如何CSS命名的,HTML有哪些处理,如何对付IE6, IE7浏览器的。

二、大致处理流程

  1. CSS部分
    类似这样子的命名:

    .example:before, .example before {}
    .example:after, .example after {}

    一个有冒号,一个是空格分隔。前者IE8+及其他现代浏览器;后者为IE6-7准备的。

  2. HTML部分
    如果before/after伪元素含有content内容(不是空字符),则content内容在HTML标签上呈现(方便IE6/7下获取),例如:

    <div class="example" data-content="◀"></div>

    CSS部分的content属性值应该如下:

    .example:before, .example before { content: attr(data-content); ... }
    .example:after, .example after { content: attr(data-content); ... }
  3. JS部分
    JS是为IE6/7准备的,所做的事情很简单,网元素内部插入两个元素,标签名为”before“或”after“或同时。方法代码如下:

    var $beforeAfter = function(dom) {
        if (document.querySelector || !dom && dom.nodeType !== 1) return;
        
        var content = dom.getAttribute("data-content") || '';     
        var before = document.createElement("before")
            , after = document.createElement("after");
          
        // 内部content
        before.innerHTML = content;
        after.innerHTML = content;
        // 前后分别插入节点
        dom.insertBefore(before, dom.firstChild);
        dom.appendChild(after);
    };

于是,您想要的效果就可以实现了,例如下面的例子。

三、实际应用之含尖角的tip类提示效果

下面是效果图,IE6下以及FireFox16下的效果截图:
IE6下tip类提示效果截图 张鑫旭-鑫空间-鑫生活 FireFox16下tip提示效果after/before下效果 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里:before/after生成的tip类提示效果demo

IE6/7的CSS与IE8+基本上都是公用的,唯一不同就是选择器一个空格间开,一个冒号伪类,如下:

.tip:before, .tip before,
.tip:after, .tip after{...}

然后,JS如下一调用即可:

$beforeAfter(document.getElementById("tip"));

OK,全部兼容,完事OK。

一般而言,after以及before生成的元素只能是一些不影响功能或是重要视觉的效果。因此,IE6/7下JS驱动不关紧要效果的生成是相当OK的。

赶着帮老婆带饭,抛砖引玉,就这些!

(本篇完)

分享到:


发表评论(目前34 条评论)

  1. 静听雨落说道:

    谢谢你,张含韵

  2. 小小码农说道:

    不错,在下受教了,经常看你的博客,学到不少东西啊,太赞了.

  3. LeuisKen说道:

    实际用了博主的解决方案 非常感谢 顺便说一下 ie8下 如果是用的两个分号(伪元素)的写法 a::before这样是不会起作用的 而ie8又不会被document.querySelector这个检测筛选出来 所以我在用的时候就用ua单独处理了一下ie8 当然 把css里面的写法改一下也会好 这个就全看个人喜好了

  4. 芊含说道:

    before,after都得写吗。我只用了after,但是在IE6下,before也被调用了,出现元素前后都插入了同样的内容。请您回复一下,谢谢,我是小白一枚

  5. 小简说道:

    楼主,我想在一个页面上重复用这个效果为什么不行?

    改成:$beforeAfter(document.getElementByTagName(“span”));

    或者:$beforeAfter(document.getElementByClassName(“tip”));

    都不行(指在IE6/7下)

  6. uu说道:

    上下的结构的呢,怎么处理好

  7. ??说道:

    这个是不是需要引入什么jQuery文件啊?我的在IE7中测试没有尖角的出现哦~

  8. 路人甲说道:

    if (document.querySelector || !dom && dom.nodeType !== 1) return;
    这段代码是起到什么作用呢, 能否指点一二?

    • 张 鑫旭说道:

      @路人甲 如果是IE8+浏览器或者dom不存在或DOM非元素节点,返回。这么一看,这里的书写可能有错误。

      • 路人甲说道:

        这里的return应该是对于ie8+已经支持before和after伪类的都忽略调用吧。
        我再问下下,这个querySelector函数网上说的IE8开始支持这个规范,但是我本地测试了,好像还是undefined,IE8+,应该是不包括IE8的吧,附上版本号8.0.6001

  9. yhben说道:

    对象不支持“appendChild”属性或方法
    对象不支持“getAttribute”属性或方法
    ie7下测试

  10. Gil说道:

    font-family: xms;中的xms是字体?不明白为什么这样写?

  11. 黄冈说道:

    还是图片好点

  12. 沙拉酷儿说道:

    我按照此方法设置了,肿么没见效

  13. 说道:

    很有感觉的博客,有学到,以后常关注。。。

  14. nick说道:

    你好,在chrome和firefox中展现的◀的font-face字体效果都是良好的,但在ie8中未体现效果,仍是默认的字体哦。

  15. lynzz说道:

    如果操作系统是英文,data-content=”◀” 这种会出现乱码吗?

    • 张 鑫旭说道:

      @lynzz 使用的是@font-face自定义字体,不识别字符也没关系的,即不会乱码,除非浏览器不支持@font-face,同时字符不认识。◀字符的支持性算是不错的,因此,乱码出现几乎是很小概率事件。

  16. lovefishs说道:

    谢谢楼主的文章,学习了
    报个bug:demo 地址打开404,盼修复

  17. etai说道:

    Hi,我向你公开的zhangxinxu@zhangxinxu.com这个邮箱发了封邮件,不知是否收到,盼复。

  18. anchen说道:

    楼主,图片跟效果地址失效了。

  19. yetazhan说道:

    before 和 after 其实是伪元素,不是伪类,高手真多啊

  20. 请教说道:

    请问select垂直居中的文章是哪一篇

  21. airyland说道:

    思路很nice,觉得如果是静态效果的话,还是html中加个span标签简单。

  22. mescoda说道:

    before 和 after 其实是伪元素,不是伪类

    这两个概念好容易搞混。。于是最新的规范里也对伪元素用了两个冒号做区分

    http://www.w3.org/TR/css3-selectors/#gen-content

  23. yozoh说道:

    博主好喜欢张含韵- –

  24. tcdona说道:

    思路有意思啊,xx 一直在思路上有突破 赞!