Ordered Lists, Counters, and Express for IE

Imagine the situation: in the layout of the page that you need to make up, there is an ordered list. Everything would be fine, but in the design the style of the text in the list is different from the style of numbers acting as a marker of each item.

And okay, if the difference is small - in font size, color or other font property. In this case, the easiest way to implement this is to set the style for the list item (this will be the style for the marker), and then frame the entire contents of the item in a block in which to override the corresponding styles.

But what if the differences are not only in the font? In this case, most often, typesetters hammer out semantics and add an element with the corresponding number to each item in the list, and the necessary styles are already set for it. This solution has a lot of disadvantages - this is a spit on semantics, and the need for implementation from the server.


The most logical and correct solution in this case is the use of a pseudo-element :beforeand implementation of the counter through the relevant specification rules .

However, as you might guess, in one beautiful browser all this does not work. To fix the situation, a one-time operation will help us, which will create an emulation of a pseudo-element :beforewith a counter.

So, we give to all browsers:

.list {
    counter-reset:list_item;
    }                    
    .list-item {
        display:block;
        }
        .list-item:before,
        .list-item-before {
            content:counter(list_item);
            counter-increment:list_item;
            }

And only for IE:

.list-item {
    list-style-type:expression(
        function(t){
            t.runtimeStyle.listStyleType = 'none';
            t.insertAdjacentHTML('afterBegin','' + (++t.parentNode.IEcounter || (t.parentNode.IEcounter = 1)) + '');
        }(this)
    );
    }

A few points to pay attention to:

1. Together with the selector, .list-item:beforewe prescribe the selector .list-item-before, by the class name of the generated access element.
2. Due to the fact that in standard browsers the standard list markers are removed by the rule .list-item { display:block; }, but in IE this point does not work - one-time access was implemented through a property list-style-type, due to which in simple cases (when you do not need to float elements or use some other properties, zeroing tokens in IE) when disabled in IE javascript, the expression will not work and standard markers will be displayed.
3. Do not forget to put expressions in conditional comments, this is harmful for karma and browsers based on the Webkit engine :)
4. Here is a simple example .