CSS: content vs behavior // Mash
Не люблю, когда засоряют html ненужными вещами (эй, отставить 'View Source'. Все не без греха). Например, когда для каждого элемента таблицы начинают прописывать один и тот же класс. Смысл?
Наверняка вы видели в каталогах такие перечни:
<a href="nature_1.jpg">
<img src="pictures/new.gif" alt="" width="10" height="10" border="0" />
Picture 1</a><br />
<a href="nature_2.jpg">
<img src="pictures/new.gif" alt="" width="10" height="10" border="0" />
Picture 2</a><br />
< … поскипано … >
<a href="nature_N.jpg">
<img src="pictures/new.gif" alt="" width="10" height="10" border="0" />
Picture N</a><br />
Господибожемой. <img src="pictures/new.gif" … /> умножаем на N. Правильно. Для человека, сидящего на dial-up это достаточно ощутимый кусок. А картинка одна. Это было «во-первых». Во-вторых, это не список, а просто набор ссылок через <br>. Гораздо логичнее выглядит следующая запись:
HTML
<ul class="topics">
<li><a href="nature_1.jpg">Picture 1</a></li>
<li><a href="nature_2.jpg">Picture 2</a></li>
< … поскипано … >
<li><a href="nature_N.jpg">Picture N</a></li>
</ul>
CSS
ul.topics { list-style: url("pictures/new.gif") disc }
Для всех элементов списка класса 'topics' справа будет отображаться значок (new, download, mp3, jpg, etc.). Если по каким-либо причинам изображение, указанное в URI не может быть отображено (здравствуй, Opera), то пользователь увидит дисковые маркеры.
Но, как говорится, здесь есть один нюанс. В этом случае значки-картинки не будут являться ссылками, в отличие от первого «неряшливого» кода. Как быть? Открываем спецификацию («Генерируемое содержимое, автоматическая нумерация и списки»), читаем о псевдоэлементах before и after:
Как видно из их имён, псевдоэлементы :before и :after специфицируют размещение содержимого до и после содержимого дерева документа элемента. Свойство 'content' в соединении с этими псевдоэлементами специфицирует, что же будет вставлено.
Пишем:
CSS
ul.topics { list-style: url("pictures/new.gif") }
ul.topics { list-style: none }
ul.topics a:before { content: url("pictures/new.gif") }
Получили список без отображения маркеров у его элементов и картинкой «внутри» ссылок. Первая строка — для IE, который не понимает этих псевдоэлементов. Для него картинки так и останутся лишь в роли маркеров.
Списки это ещё полбеды. Представьте себе страницу, кишащую ссылками в тексте, свёрстанную одним из приверженцев связки <a>+<img>. Иногда это удобно, наглядно, но вот если их много… Как быть?
IE5+ поддерживает механизм behavior, не являющийся стандартом CSS, но позволяющий описать поведение стиля в зависимости от событий, которые происходят при отображении Web-страницы.
CSS
#content a:after { content: url("pictures/new.gif") }
#content a { behavior: url("linksmaker.htc") }
linksmaker.htc
<public:component />
<public:attach event="oncontentready" onevent="LinkIt()" />
<script language="JScript">
function LinkIt(){
innerHTML=innerHTML+'<img src="pictures/new.gif" alt="" width="10" height="10" border="0" />';
}
</script>
Вот так это выглядит в целом. Изящно, не правда ли?
И ложка дёгтя напоследок: Apache and other non-Microsoft web servers almost certainly need a new MIME type (text/x-component) added for .htc files.
12 мая 2003