Упорядоченные списки, счётчики и экспрешн для IE

Заметки - Фишки CSS

Представьте ситуацию: в макете страницы, которую вам надо сверстать, есть упорядоченный список. Всё бы ничего, да в дизайне стиль текста в списке отличается от стиля цифр, выступающих в роли маркера каждого пункта.

И ладно, если отличие небольшое — в размере шрифта, цвете или другом свойстве шрифта. В таком случае самый простой способ реализовать подобное — задать стиль для элемента списка (это будет стиль для маркера), после чего обрамить всё содержимое пункта в блок, в котором переопределить соответствующие стили.

Но что, если отличия не только в шрифте? В таком случае, чаще всего, верстальщики забивают на семантику и добавляют в каждый пункт списка элемент с соответствующей цифрой, и уже ему задают необходимые стили. У такого решения есть масса недостатков — это и плевок на семантику, и необходимость реализации со стороны сервера.


Самым логичным и правильным решением в таком случае является использование псевдоэлемента :before и реализации счётчика через соответствующие правила спецификации.

Однако, как можно догадаться, в одном прекрасном браузере всё это не работает. Исправить ситуацию нам поможет одноразовый экспрешн, которые создадут эмуляцию псевдоэлемента :before со счётчиком.