Ordered lists, counters and expresn for IE

Imagine the situation: in the layout of the page that you need to impose, there is an ordered list. All anything, but in the design style of the text in the list is different from the style of the numbers, acting as a marker for each item.

And well, if the difference is small - in the font size, color or other property of the font. 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 into a block in which to redefine the corresponding styles.

But what if the differences are not only in the font? In this case, most often, the maker-ups hammer into the semantics and add an element with the corresponding number to each item in the list, and the necessary styles are already assigned to it. Such a solution has a lot of flaws - this is spit on the semantics, and the need for implementation on the server side.
')

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

However, as you can guess, in one beautiful browser all this does not work. A one-time expedition, which will create an emulation of a pseudo-element :before with a counter, will help us correct the situation.

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','<span class="list-item-before">' + (++t.parentNode.IEcounter || (t.parentNode.IEcounter = 1)) + '</span>');
}(this)
);
}

A few points to pay attention to:

1. Together with the selector .list-item:before we prescribe the selector .list-item-before , by the class name of the generated element.
2. Due to the fact that simple browsers have standard list markers removed by the rule .list-item { display:block; } .list-item { display:block; } , and in IE this moment does not work - the one-time expedition was implemented through the list-style-type property, due to which in simple cases (when it is not necessary to float elements or use some other properties, the markers in IE are reset) with disabled In IE, JavaScript will not work, and standard markers will be displayed.
3. We must not forget to put the expeditions in conditional comments, it is harmful for karma and browsers based on the Webkit engine :)
4. Here is a simple example .