Question

css content属性是否违反内容和分离规则，因为css用于演示而不生成内容？

css content属性的其他好用途是什么？我只在clearfix黑客中看过它。

Answer 1

css“content”属性是否会违反内容和分离规则，因为css不是为了生成内容而是为了呈现？

好点。如果它用于实际数据，我会说它确实如此。

关于内容的

The quirksmode page很好地显示了这些限制。您目前无法添加任何类型的样式 - 它将适用于太少的浏览器。您只能添加字符数据。

quirksmode的作者发表了一个有趣的观点：

我觉得我们根本不应该使用内容声明。它向页面添加内容，CSS用于向页面添加演示文稿，而不是内容。因此，如果您想动态生成内容，我觉得您应该使用JavaScript。 CSS是这项工作的错误工具。

我一般都同意这一点，但有时可能会出现您不想依赖JavaScript来完成工作的情况。 Martin显示的逗号示例是我发现使用content合理的情况（虽然我个人会感觉更好，如果已经从服务器端提供逗号 - 这是我个人会坚持的。）

另外，请注意，在从其他位置查看内容时，通过content属性添加逗号和引号可能会显得很糟糕 - 例如在搜索结果页中。

如果你真的需要它，我会谨慎地使用它。

Answer 2

这个显示的一个受欢迎的地方是WordPress的默认主题

.entry ul li:before, #sidebar ul ul li:before {
    content:"» ";
}

alt text http://i41.tinypic.com/24e7xb6.png

Answer 3

这对结构化内容有好处。我为W3C的下一个打印CSS规则编写了一些测试用例，而对我来说很酷的一个就是能够将“章节”和类似的东西放到某些元素中，特别是当与counters配对时。一个简单的例子就是：

li.chapter:before {content: "Chapter" counter(chapter) ": ";}

这些都不是特定于印刷品的，而是所有展示信息。如果您不希望章节前面带有“章节”一词，请将其从CSS中取出。在样式表中控制它意味着您的打印版本可能与您的屏幕版本具有不同的章节标题，您的移动设备可能会再次不同，而无需了解应用程序逻辑中的查看器设备。

Answer 4

它可以在打印样式表中用于显示链接的URL，例如：

p a:after {
  content: " (" attr(href) ")";
}

部分链接（http://www.somesite.com）

Answer 5

我看到的一个常见用途是使用：before和：after标签来格式化报价，并使用某种程式化的报价框。它可以是一种快速简便的方法来获取您将以其他方式构建图像的程式化元素。

blockquote:before, blockquote:after {
    content: '"';
}

我认为这是可以使用的，因为它并没有真正破坏内容和样式分离的规则。我的感觉是，如果它是页面设计的一部分，而不是内容，它可能适合内容：

Answer 6

CSS是表现数据。任何与演示相关的内容在CSS文件中都可以。例如，假设我想在我的«标记周围添加»和<h1>;这纯粹是表现性的。您可以使用:before和:after选择器执行此操作。

还应该注意content也可以显示图像：

content: url('my/image.png');

我想在旁注中补充一点，我认为使用content属性来覆盖现有内容是一种非常糟糕的做法。

Answer 7

我正在使用它在管理面板菜单中显示accesskey

.menu a[accesskey]:after { content:' [' attr(accesskey) ']'; }

Answer 8

一个有趣的用例，虽然可能不推荐，但是对于contenteditables的占位符文本。

[contenteditable]:empty:after
{
    color: #aaa;
    content: 'Enter some text';
}

Answer 9

与zneak said一样，也可以替换图像。我觉得在iPhone 4和其他每个虚拟像素有一个以上真实像素的设备上用更高分辨率的变体替换“内容图像”（不是“资产图像”，应该通过css背景图像完成）是切实可行的。

电子。 G：

<img id="people9" src="//lorempixum.com/200/150/people/9/" width="200" height="150" alt="People"/>
@media all and (-webkit-min-device-pixel-ratio: 2) {
  /* e. g. iphone 4 */
  #people9 { content: url(//lorempixum.com/400/300/people/9/); }
}

至少在iPhone 4和Android Nexus S上有效，但我认为它是实验性的，并没有在其他设备上测试过。这是一个完整的例子：

https://gist.github.com/1206008

Answer 10

我只想补充已经说过的内容。

使用层叠样式表，您可以将样式应用于许多类型的文档。

常见用例是将CSS应用于HTML页面。在这种情况下，一般的想法是仅将content属性用于审美目的。

另一个用例是将CSS应用于XML文档。在这种情况下，文档通常不包含页面结构的元素（div，h1等...）。因此，在这种情况下，通过更频繁地使用content CSS属性，您可以更好地定义页面以及元素和数据之间的关系。

例如，您可以在表格前添加说明段落，或在个人姓名后附加电子邮件地址。请注意，在HTML页面中，这些页面结构元素应该是HTML文档本身的一部分，而它们通常在XML文档中被省略，因此可以使用content CSS属性添加它们。

Answer 11

一个有趣的用例是用户界面的本地化。

css`content`属性有什么用处？

11 个答案: