CSS生成的内容技术

介绍

该content物业是在CSS 2.1引入生成的内容添加到:before和:after伪元素。所有主流浏览器（Firefox 1.5+，Safari 3.5+，IE 8+，Opera 9.2+，Chrome 0.2+）都支持此功能。此外，歌剧9.5+支持在内容属性的所有元素，而不仅仅是:before和:after伪元素。

在CSS 3生成内容工作草案中，该content属性已添加了更多功能 - 例如，可以在文档周围插入和移动内容以创建脚注，尾注和部分注释。但是没有浏览器实现了扩展的功能content。

在本文中，我们将介绍使用生成的内容的基础知识，然后分析出可以使用它们的具体技术。

几个警告

在我们深入了解这个主题之前，值得指出的是生成的内容

只能在启用了CSS的现代浏览器中工作

不通过DOM可用。这是纯粹的表现形式。具体来说，从可访问性的角度来看，当前的屏幕阅读器不支持生成的内容。

生成的内容 - 基础知识

content 是这样使用的：

h2:before {

content: "some text";

}

这将在页面上每个元素的开始之前插入“一些文本” h2。

而不是输入content属性的文本值，还可以使用属性值attr()，如下所示：

a:after {

content: attr(href)

}

这将在a元素href结束后插入每个元素的内容。

请注意，在引用它时需要使用不带引号的属性名称attr()。

您也可以使用counter或使用插入图像生成动态数字url(/path/to/file)。我们来看一些例子。

用计数器编号内容

如果要在重复的元素序列中插入增量值，例如问题1，问题2，问题3，则可以使用计数器增加计数器值，然后使用content以下方式显示计数：

ol {

列表样式类型：无;

计数器重置：分段计数器

}

li：before {

内容：“章”柜台（摊位）;

反增量

}

在第一条规则中，使用该counter-reset属性将计数器重置为1 。在第二个规则中，每个li元素都有一个打印出来的字符串，其中X是计数器的当前值。第二条规则中的最后一个属性 - 将计数器的值增加1，然后再转到列表中的下一个元素。Chapter Xsectioncountercounter-incrementsectioncounterli

如果您正在插入计数器的内容，请注意，如果该元素已display:none指定，它们将不会递增。

当然，在不支持此CSS功能的浏览器中，不会显示编号。这样会让您感到困惑，如果您的网页中的某个地方，请参阅第十章以了解更多详细信息。这是生成内容纯粹是装饰性的或内容的实际部分之间的细微差别，它应该写在实际的HTML中。

我已经写了一个演示来说明创建带有生成内容的计数器。有关此主题的更多细节，请阅读David Storey关于使用CSS计数器自动编号的优秀文章。

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

不同的语言使用不同的字符进行引号。英文报价将写为：

“只有有人让你做到这一点，

挪威语的引用是用这种方式写的：

«Hvis du forteller meg nok en vits，såskal jegslådeg til jorden»»

而不是在HTML中使用带有硬编码引号的简单文本，您可以使用该q元素

<p><q>It’s only work if somebody makes you do it</q></p>

<p><q>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.</q></p>

并指定适合您CSS中每种语言的引号

/* Specify quotes for two languages */

:lang(en) > q { quotes: '“' '”' }

:lang(no) > q { quotes: "«" "»"}

/* Insert quotes before and after <q> element content */

q:before { content: open-quote }

q:after { content: close-quote }

您可以将这种技术用于任何元素，而不仅仅是q（尽管这是最明显和语义的用途）。请注意，Safari 3（及以下）和IE 7（及以下）不支持quotes属性。

查看我的报价插件演示，看看这个在行动。

用图像替换文本

有几种图片替换技术，你可以使用，每个都有自己的优点和缺点。这是使用图像替换文本的另一种方法content。

div.logo {

内容：网址（logo.png）;

}

使用此技术进行图像替换的优点在于它可以真正替代文本。因此，您不必诉诸于使用height和width创建图像的空间，text-indent或padding隐藏原始文本。

但是，有一些缺点：

您不能重复图像，或使用图像精灵

它将仅适用于Opera 9.5+，Safari 4+，Chrome，它支持content所有选择器上的url作为价值的属性，而不仅仅是:before或:after

没有办法使用这种方法来包含替代文本，因此屏幕阅读器将无法理解您的内容替换图像。

要了解更多信息，请使用内容查看我的图像更换演示。

显示链接图标

您可以使用内容属性的属性选择器根据其所属的文件格式或外部文件格式在链接之后渲染图标。

a[href $='.pdf']:after {

content:url(icon-pdf.png);

}

a[rel="external"]:after { /* You can also use a[href ^="http"]:after */

content:url(icon-external.png);

}

所述第一规则使用与子串匹配一个CSS3选择- href $='.pdf'意味着href具有属性.pdf在端部的值的。

由于正则表达式，^并$分别指字符串的开始和结束。使用CSS 3 子字符串匹配属性选择器，[attribute^=value]并[attribute$=value]允许您匹配属性内容以指定值开始或结束的[attribute*=value]元素，同时选择该属性中任何位置的元素。

这是一个在链接上显示PDF和外部图标的演示。

使用属性值作为内容

我们已经提到，content: attr(val)允许您在屏幕上显示元素属性的值。这可以用很多有用的方式使用 - 这里有几个例子。

打印CSS中的URL /缩写

正如文章中提到要打印在相隔列表，您可以使用生成的内容一旦他们打印出来，可以丰富您的页面。例如，在打印CSS中打印以下链接的URL：

a:after {

content: "(" attr(href) ")";

}

您可以使用相同的方法来打印abbr元素的扩展。只需将以下内容添加到您的打印样式表中：

abbr：after {

内容：“（”attr（title）“）”;

}

查看我的打印URL和缩写扩展演示，了解更多信息。

展望未来：attr()CSS3 强大

的CSS3值和单位草案扩展的范围attr()表达-在除了返回字符串，它也可以返回值，如单元类型的CSS颜色，CSS整数，长度，角度，时间，频率，以及其它单元。

除了自定义数据属性，这可以真正强大的渲染简单的图表，图形和动画。例如，我们可以根据属性值设置元素的背景颜色。这可能在在Web上显示调色板的应用程序中有用。我们还可以根据自定义数据属性中设置的值指定元素的大小 - 例如，条形图中条形的长度可以由表示条形的元素的属性设置。不幸的是，这个功能是低优先级的，不久之后就不会很快完成。

结论

希望这篇文章能够让您更好地了解该content属性，以及您可以使用该属性。鉴于IE 8现在也支持content，所以我们真的很清楚，在我们的生产工作中可以使用这个CSS功能。只需在适当的情况下使用它，并注意所产生的内容仍然具有的可访问性影响。

以上就是CSS生成的内容技术的详细内容，更多请关注其它相关文章！