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% совершенен. Однако любой веб-разработчик, заслуживающий своей соли, может легко увидеть, что это действительно ужасный код. В какой момент использование сгенерированного контента перестает быть удобным и начинает быть оскорбительным?
Обратите внимание, что, как говорится, текст внутри #CONTENT элемента только заменяется Presto движок рендеринга, в то время как Webkit, Gecko и Trident оставить текст внутри элемента (даже несмотря на то, W3C определяет, что содержание следует заменить). Другие механизмы рендеринга не тестируются.
Это первый раз, когда вы когда-либо видели CSS или HTML неправильно? * Кашель * столы * кашель *. – cimmanon
@cimmanon Конечно, нет: P Thoguh Я раньше ударил себя ради признания «Скажи, что ты хочешь о табличных макетах, они просто всегда работают» – Supuhstar