如何从css生成内容和计数组件中得到益处

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

特别声明:此篇文章由D姐根据的英文文章原名《How To Benefit From CSS Generated Content And Counters》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2013/04/12/css-generated-content-counters以及作者相关信息

——作者:

——译者:D姐

用css生成内容是在css2规范中首次提出的。几年来,这个特性只有少数的web开发者使用,原因就是浏览器对于他们的兼容性不好。随着2009年IE8的发布,生成内容被再次提出,而且很多有趣的实现也首次采用生成内容的方式。在这篇文章里面,我们将讨论如何使用生成内容

生成内容是什么?

在技术角度来说,生成内容是简单的通过css在dom树上创建一个抽象的结构。因此,在实践中,生成内容只存在于网络文档布局中

利用js访问生成的内容,可以通过获取content属性的文本值

var test = document.querySelector('#test');
var result   = getComputedStyle(test, ':before').content;
var output = document.querySelector('#output');
output.innerHTML = result;	

查看在线案例

插入生成内容

在实际元素内容前后插入内容,使用:before 和:after伪元素。为了区别伪元素,我们可以使用下面的伪标签。

<p>
  <before>Start</before>
    Actual content
  <after>End</after>
</p>	

我们的样式可能这样:

p:before {
  content: "Start";
}

p:after {
  content: "End";
}	

查看在线案例

记住,如果你用css3的规范验证css文件,那么:before 和 :after伪元素应该写成::before 和 ::after。否则,css验证器会报错。

正如你所见,插入的这两个字符串都是content的属性。这个属性接受如下值:

  • none, normal:伪内容不生成;
  • <string>:表示一个包含在引号中的文本字符串;
  • url():这个方法可以让我们插入一个外部资源(通常是一个图片),也可以使用background-image;
  • counter():counters()这些方法插入计数器(详见下文);
  • attr(attribute):这个方法让我们可以插入给定元素的属性值;
  • open-quote, close-quote, no-open-quote, no-close-quote:这些值可以自动产生引号标记

记住,产生元素会占据页面的一定空间,而且他们的存在会影响浏览器对父元素的尺寸计算值。

插入字符串

在前面的例子中,我们在现有元素的内容前后插入两个简单的字符串。生成内容也可以让我们通过转义符号插入更复杂的内容:

p:before {
  content: "\00A7";
  padding-right: 0.2em;
}	

查看在线案例

在双引号之间的转义符号是16进制的unicode值。我们也可以把简单的字符串跟unicode符号结合:

p:before {
  content: "( " "\00A7" " )";
  padding-right: 0.2em;
}	

查看在线案例

如果你需要,可以在Alan Wood的网站上查到所有的unicode符号的列表

请注意,所有的文本内容都需要用content的属性插入,空格和tabs也可以通过键盘插入到页面中。

使用web字体插入icon

Web字体可以通过生成内容来插入图标。依赖于web字体库,你可以插入简单的字符或是unicode序列:

@import url(http://weloveiconfonts.com/api/?family=brandico);

p:before {
  content: "\f303";
  padding-right: 0.3em;
  font-family: 'brandico', sans-serif;
  font-size: 22px;
}	

查看在线案例

在这里例子中,我们插入了twitter的icon。我们的代码可能如下这样写:

.icon-twitter:before {
  content: "\f303";
  
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-generated-content-counters.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部