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

Jit*_*yas 25 css

css content属性是否会破坏内容和分离规则,因为css用于表示不生成内容?

css content属性的其他好用途是什么?我只在clearfix黑客中见过它.

Pek*_*ica 11

css"content"属性是否会违反内容和分离规则,因为css不是为了生成内容而是为了呈现?

好点子.如果它用于实际数据,我会说它确实如此.

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

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

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

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

此外,请记住,content在从其他位置查看内容时,通过该属性添加逗号和引号可能看起来很糟糕 - 例如在搜索结果页面中.

如果你真的需要它,我会说只是谨慎使用它.


Jus*_*son 8

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

.entry ul li:before, #sidebar ul ul li:before {
    content:"» ";
}
Run Code Online (Sandbox Code Playgroud)

替代文字http://i41.tinypic.com/24e7xb6.png


rio*_*ter 6

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

p a:after {
  content: " (" attr(href) ")";
}
Run Code Online (Sandbox Code Playgroud)

一些链接(http://www.somesite.com)


Tom*_*Tom 5

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

li.chapter:before {content: "Chapter" counter(chapter) ": ";}
Run Code Online (Sandbox Code Playgroud)

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

  • 与此同时,我正在开发一些UX用户希望在一系列"事物"之间输入管道(|)的东西.使用first-child删除内容,我得到`something | 某事| 某事`,而不必改变我的代码."适合工作的正确工具". (2认同)