Представьте ситуацию: в макете страницы, которую вам надо сверстать, есть упорядоченный список. Всё бы ничего, да в дизайне стиль текста в списке отличается от стиля цифр, выступающих в роли маркера каждого пункта.
И ладно, если отличие небольшое — в размере шрифта, цвете или другом свойстве шрифта. В таком случае самый простой способ реализовать подобное — задать стиль для элемента списка (это будет стиль для маркера), после чего обрамить всё содержимое пункта в блок, в котором переопределить соответствующие стили.
Но что, если отличия не только в шрифте? В таком случае, чаще всего, верстальщики забивают на семантику и добавляют в каждый пункт списка элемент с соответствующей цифрой, и уже ему задают необходимые стили. У такого решения есть масса недостатков — это и плевок на семантику, и необходимость реализации со стороны сервера.
Самым логичным и правильным решением в таком случае является использование псевдоэлемента
Однако, как можно догадаться, в одном прекрасном браузере всё это не работает. Исправить ситуацию нам поможет одноразовый экспрешн, которые создадут эмуляцию псевдоэлемента
Итак, всем браузерам отдаём:
И только для IE:
Несколько моментов, на которые надо обратить внимание:
И ладно, если отличие небольшое — в размере шрифта, цвете или другом свойстве шрифта. В таком случае самый простой способ реализовать подобное — задать стиль для элемента списка (это будет стиль для маркера), после чего обрамить всё содержимое пункта в блок, в котором переопределить соответствующие стили.
Но что, если отличия не только в шрифте? В таком случае, чаще всего, верстальщики забивают на семантику и добавляют в каждый пункт списка элемент с соответствующей цифрой, и уже ему задают необходимые стили. У такого решения есть масса недостатков — это и плевок на семантику, и необходимость реализации со стороны сервера.
Самым логичным и правильным решением в таком случае является использование псевдоэлемента
:before
и реализации счётчика через соответствующие правила спецификации.Однако, как можно догадаться, в одном прекрасном браузере всё это не работает. Исправить ситуацию нам поможет одноразовый экспрешн, которые создадут эмуляцию псевдоэлемента
:before
со счётчиком.Итак, всем браузерам отдаём:
.list {
counter-reset:list_item;
}
.list-item {
display:block;
}
.list-item:before,
.list-item-before {
content:counter(list_item);
counter-increment:list_item;
}
И только для IE:
.list-item {
list-style-type:expression(
function(t){
t.runtimeStyle.listStyleType = 'none';
t.insertAdjacentHTML('afterBegin','<span class="list-item-before">' + (++t.parentNode.IEcounter || (t.parentNode.IEcounter = 1)) + '</span>');
}(this)
);
}
Несколько моментов, на которые надо обратить внимание:
- Вместе с селектором
.list-item:before
мы прописываем селектор.list-item-before
, по имени класса сгенерированного экспрешном элемента. - За счёт того, что у простых браузеров стандартные маркеры списка убираются правилом
.list-item { display:block; }
, а в IE этот момент не работает — одноразовость экспрешна была реализована через свойствоlist-style-type
, за счёт чего в простых случаях (когда не надо флоатить элементы или использовать какие-то другие свойства, таки обнуляющие в IE маркеры) при отключённом в IE яваскрипте экспрешн не сработает и будут показываться стандартные маркеры. - Нельзя забывать класть экспрешны в условные комментарии, это вредно для кармы и браузеров, основанных на движке Webkit :)
- А вот и простой пример.