使用伪元素的行在哪里？

-5

现在，CSS允许创建类似DOM的元素，而无需使用HTML进行显式地创建。这些伪元素感觉他们可能导致一些可怕的网页设计。例如，采取以下页面：使用伪元素的行在哪里？

<!DOCTYPE html> 
<html> 
<head> 
<title>First Paragraph of Lorem Ipsum</title> 

<style type='text/css'> 
    #CONTENT::before { 
     background-color: #BBB; 
     border-color: #777; 
     border-style: none none solid; 
     border-width: 0.25em; 
     display: block; 
     content: "The first paragraph of Lorem Ipsum"; 
     left: 0; 
     margin: 0 0 1em 0; 
     padding: 1em 0; 
     position: fixed; 
     text-align: center; 
     text-transform: Capitalize; 
     top: 0; 
     width: 100%; 
    } 
    #CONTENT { 
     border-color: #BBB; 
     border-style: none solid; 
     border-width: thin; 
     content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non urna vitae ipsum euismod euismod a et nisi. Praesent lorem dolor, porta ut luctus viverra, sollicitudin sed justo. Donec semper augue eros, vitae rutrum metus. Maecenas purus augue, auctor sit amet iaculis a, interdum vel purus. Vivamus ac risus et purus commodo ultrices euismod ut nulla. Nunc id ligula nunc, at molestie metus. Cras ut lacus non diam fringilla aliquam ac a turpis. Mauris viverra tellus at nisl dictum condimentum. Pellentesque libero lorem, fringilla at varius nec, tristique nec augue. Nullam quis ullamcorper sem. Nam tincidunt fermentum mi, aliquet luctus orci rutrum non. Mauris sit amet lorem est, a porta risus. Sed mi leo, feugiat ac accumsan ut, consequat eget odio. Ut nec nisl risus. Sed sed nisl augue, id pellentesque eros."; 
     display: block; 
     font-family: sans-serif; 
     font-style: normal; 
     margin: 4em auto; 
     max-width: 8in; 
     padding: 1em; 
     text-align: justify; 
     text-indent: 0.5in; 
    } 
    #CONTENT::after { 
     background-color: #BBB; 
     border-color: #777; 
     border-style: solid none none; 
     border-width: 0.25em; 
     bottom: 0; 
     content: "©2013 Bad Design Studios"; 
     display: block; 
     left: 0; 
     margin: 1em 0 0 0; 
     padding: 1em 0; 
     position: fixed; 
     text-align: left; 
     width: 100%; 
    } 
</style> 

</head> 
<body> 
    <i id="CONTENT">Text here currently is currently only properly replaced by Presto</i> 
</body> 
</html>

活生生的例子：http://jsfiddle.net/Qm4vp/38/

根据W3C验证，这个代码是100％的完美。然而，任何值得他的盐的Web开发人员都可以很容易地看到这实际上是可怕的代码。 生成内容的使用会在什么时候停止方便并开始滥用？

需要注意的是，因为它说，在#CONTENT元素中的文本只由普雷斯托替换渲染引擎，而Webkit的，蛤蚧，和Trident离开元素（即使W3C定义中的文本内容应该更换）。其他渲染引擎未经测试。

来源

2013-02-25 Supuhstar

这是您第一次看到CSS或HTML使用不当吗？ *咳嗽*表*咳嗽*。 – cimmanon 2013-02-25 21:11:17

@cimmanon当然不是：P Thoguh我早些时候因为承认“说你想要的表格布局，他们只是总是工作”而打了自己“ – Supuhstar 2013-02-26 15:03:04

以下是content属性http://www.w3.org/TR/CSS2/generate.html#content的规范。

该属性用于与所述：前和：后伪元素到生成文档中的内容。

我相信如果Presto正在替换实际元素的内容，这不是一个正确的行为。

至于什么时候应该使用它 - 这与图像相同的问题 - 每当图像是纯粹的表示，它应该被移动到CSS。当它为文档增加意义时，它应该放在HTML中。问题是，这个规则允许不同的解释，所以你必须使用你的最佳判断。

来源

2013-02-25 21:19:02

这就是CSS2.1，虽然我同意。 CSS3工作草案的图表和示例代码在http://www.w3.org/TR/css3-content/#nesting似乎表明，替换元素的内容（不仅仅是伪元素）是一个预期的效果。 – Supuhstar 2013-02-26 15:04:01

使用伪元素的行在哪里？

回答

相关问题