Упорядоченные списки, счётчики и экспрешн для 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)
    );
    }

Несколько моментов, на которые надо обратить внимание:

1. Вместе с селектором .list-item:before мы прописываем селектор .list-item-before, по имени класса сгенерированного экспрешном элемента.
2. За счёт того, что у простых браузеров стандартные маркеры списка убираются правилом .list-item { display:block; }, а в IE этот момент не работает — одноразовость экспрешна была реализована через свойство list-style-type, за счёт чего в простых случаях (когда не надо флоатить элементы или использовать какие-то другие свойства, таки обнуляющие в IE маркеры) при отключённом в IE яваскрипте экспрешн не сработает и будут показываться стандартные маркеры.
3. Нельзя забывать класть экспрешны в условные комментарии, это вредно для кармы и браузеров, основанных на движке Webkit :)
4. А вот и простой пример.