by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=739

一、哗啦哗啦的简介

zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围。
content属性早在CSS2.1的时候就被引入了，可以使用 :before 以及 :after 伪元素生成内容。此特性目前已被大部分的浏览器支持：(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外，目前Opera 9.5+ 和 Safari 4已经支持所有元素的 content 属性，而不仅仅是 :before 和 :after 伪元素。

在 CSS 3 Generated Content工作草案 中，content属性添加了更多的特征，例如：插入以及移除文档内容的能力，以创建脚注，结语，及段落注释。但是目前还没有浏览器支持content的扩展功能。

本文将展示content内容生成的基本使用，以及一些您可以应用的特别的技术。

二、还有一点小小的提醒

在进入正题之前，我要做一回啰嗦的老女人，讲点可有可无无伤大雅的提醒。

三、最基本的 – 生成内容

content使用如下：

此段样式的作用是在每个h2标签的前面添加文字“我是额外文字”。
您可以狠狠地点击这里： content最基本使用Demo

content属性的值除了使用文本值外，还可以使用标签的一些属性值，方法是attr()，参见如下代码：

结果如下截图（截自Firefox3.6）：

对应a标签内的文字值的最后添加了此标签的href属性的值。
您可以狠狠地点击这里： 标签属性值生成content内容Demo

注意： 当使用attr()获取标签属性名的时候，千万不要添加引号!

您还可以使用计数器产生动态数字或运用url(/path/to/file)路径插入图片。要想获得更多信息，请继续看下面的应用实例。

四、使用计数器创建号码内容

如果您想插入一系列递增的值，比如说“美女1，美女2，美女3，美女4……”，您就可以使用计数器在每个列表项的前面插入递增的序号值。CSS代码如下：

HTML代码如下：

结果如下图（Firefox3.6下截图）：

您可以狠狠地点击这里： content产生递增序号demo

五、为多语言内容插入正确的引号

不同的语言使用不同的引号字符。比如英文的引号就是 "" ，而中文引号就是 “” 。使用content可以使得不同的语言使用对应的一些字符。例如，我们需要对下面的些文字添加其对应语言的引号，该怎么办呢？

<p lang="en"><q>It’s only work if somebody makes you do it.</q></p>
<p lang="no"><q>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.</q></p>
<p lang="ch"><q>欢迎来到上海，欢迎参观世博会！</q></p>
我们不妨试试下面的代码：
/* 为不同语言指定引号的表现 */
:lang(en) > q {quotes:'"' '"';}
:lang(no) > q {quotes:"«" "»";}
:lang(ch) > q {quotes:"“" "”";}
/* 在q标签的前后插入引号 */
q:before {content:open-quote;}
q:after  {content:close-quote;}
结果如下图所示：
您可以狠狠地点击这里：content生成对应语言字符demo
此技术可以应用于各类元素，而不仅仅是q标签，另外，Safari 3以及IE7（以及以下）是不支持此技术的。
六、用图片替换文字
关于图片替换技术，您可以参见这里：several image replacement techniques，里面提供了几种方法。而这里展示的则是另外不同的用图片替换方法，使用的是content。
您可以参见下面的代码：
div.logo {
   content:url(logo.png);
这种图片替换技术的优点在于文字内容确实被替换了。因此，您没有必要设定高宽为图片的显示创造空间，或是使用text-indent或是padding隐藏最初的文字。
然而，就目前而言，还是有不少需要注意的：
1. 你不能对图片进行重复或平铺，或是使用image sprite。
2. 目前仅在Opera 9.5+ 和 Safari 4+浏览器下起作用，因为这些浏览器支持所有元素的content方法，而不仅仅局限于:after或是:before。
替换的图片无法应用alt属性，所以一些特殊的使用屏幕阅读器的用户可能无法理解您替换的图片的含义。
七、显示相对应的链接图标
指的是针对不同的链接类型，在链接的后面显示对应链接类型的图标，例如，链接的对象是一个图片，则显示图片的小图标，如果链接对象是视频，则显示视频小图标，如果链接就是个URL网页链接，则显示链接的小图标。您可以参见下面的代码：
CSS代码：
p a[href $=".pdf"]:after {
    content:url(../image/icon_pdf.png);
p a[rel = "external"]:after {
    content:url(../image/icon_link.png);
HTML代码：
<p>您可以查看此PDF文件：<a href="/sample.pdf">web站点的性能优化.pdf</a>，或是在线查看，<a href="http://www.zhangxinxu.com/wordpress/" rel="external">点击这里</a>。</p>
结果如下图所示：
您可以狠狠地点击这里：CSS content显示链接图标demo
八、使用属性值作为content内容
使用属性值当作content内容指的是将标签的title, src, href, alt等值当作内容显示在标签的内部，这是很强大的一个功能。由于此技术目前远未到普及的程度，所以这里简单介绍一下，您可以参见下面的两小段样式代码：
a:after {
   content: "(" attr(href) ")";
abbr:after {
   content: "(" attr(title) ")";
这里理解和使用都不难，关键就是CSS3 的attr()方法。
前瞻：强大的CSS3 attr()方法。
CSS3 Values and Units草案扩展了attr()表达式的范围，除了返回字符串，还可以返回诸如CSS colors, CSS integer, length, angle, time, frequency以及其他一些单元。
通过使用自定义的data属性，可以实现一些非常强大的效果，诸如简单图表图形的渲染，动画效果的实现。例如我们可以设置根据元素的attribute值设定background-color的颜色值，这在显示在线调色板上会大放异彩；我们还可以根据attribute值指定元素的大小，就像定义图表每个条形的长度一样。总之，attr()的潜力惊人。
九、最后一点唠叨
相信本文对您理解content属性会有不少的帮助。只是在中国，在IE6依旧盛行的中国，由于IE6/7对content的不支持，限制了这一强大功能的流行，但我相信，在未来几年内，会迎来它的春天的。随着对CSS3的逐步深入的了解，会发现，CSS3的潜力与强大真是超乎想象。我可以预见再未来几年，会有类似于寒武纪爆发的CSS新技术涌现出来，那时，可真是前端开始走向兴盛的时代。
参考文章：
1. CSS generated content techniques
本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

本文地址：http://www.zhangxinxu.com/wordpress/?p=739
相关文章




    
翻译-你必须知道的28个HTML5特征、窍门和技术 (0.572)
翻译-js表达式闭包(expression closures)的进一步亲密接触 (0.392)
页面可用性之outline轮廓外框的一些研究 (0.245)
CSS3 box-shadow实现纸张的曲线投影效果 (0.231)
CSS之before, after伪元素特性表现两则 (0.223)
CSS content换行实现字符点点点loading效果 (0.223)
CSS ::marker伪元素简介 (0.223)
让IE6/IE7/IE8浏览器支持CSS3属性 (0.205)
PIE使IE支持CSS3圆角盒阴影与渐变渲染 (0.205)
Selectivizr-让IE6~8支持CSS3伪类和属性选择器 (0.205)
页面可用性之img标签longdesc属性与HTML5 (RANDOM - 0.118)