Автоматизатор

В HTML есть очень хороший таг ol, создающий нумерованные списки, например

1. первый пункт
2. второй пункт
3. третий пункт

в результате отобразит

1. первый пункт
2. второй пункт
3. третий пункт

Однако, что же делать, если нужен список, пронумерованный в обратном порядке? Для таких вещей в CSS 2.1 были введены счетчики. Идея в том, что у любого элемента может быть указано CSS свойство counter-increment с указанием шага увеличения счетчика. Причем, согласно CSS стандарту можно указывать нулевой и отрицательный шаг.
Поэтому, к списку, приведенному выше, добавим класс, который и будем "мучить" стилями:

1. первый пункт
2. второй пункт
3. третий пункт

.decrement {
counter-reset: item; /* item это просто название. Названием счетчика может быть любая строка, кроме зарезервированных 'none', 'inherit' и 'initial' */
}
.decrement > li {
list-style-type: none; /* Для элементов списка уберем стандартную нумерацию */
counter-increment: item -1; /* и сделаем нашу */
}
.decrement > li:before {
content: counter(item) ". ";
}

Однако, результат будет ровно таким, каким его поняла машина:

1. первый пункт
2. второй пункт
3. третий пункт

Для того, чтобы все встало на свои места, необходимо указать начальное значение счетчика.
Так как, значение счетчика будет вначале "затронуто" самим LI элементом, то есть уменьшено на единицу, а потом уже выведено через li:before - установим его в кол-во пунктов плюс один

.decrement3 {
counter-reset: item 4;
}

1. первый пункт
2. второй пункт
3. третий пункт

Однако, это крайне не удобно, иметь начальное число в описании класса, ибо количество пунктов в списках может легко менятся.
Я пробовал найти способ автоматического выбора начального значения счетчика, исходя из количества пунктов списка, однако сделать это полностью через один стилевой файл так и не удалось. Решения тут два:
1. использовать встроенный стиль элемента (

) для каждого такого списка.
2. использовать скрипт, которые после загрузки бы страницы ставил необходимое число (для jQuery: jQuery( ".decr" ).css( 'counter-reset', 'item ' + (jQuery( ".decr" ).children( "li" ).length + 1) );).

Плюсы и минусы - очевидны. В первом случае - нет скриптов, но необходимо не забывать менять стиль при изменении количества элементов, во втором - нумерация автоматическая, но есть скрипты.
Я же, пожалуй, буду использовать оба метода - так надежнее: для "куцых" терминалов (текстовых) будет срабатывать (я надеюсь) первый вариант на стилях, а если же когда-нибудь я забуду подправить, второй вариант таки будет подправлять меня на нормальных терминалах. Терминалы читай броузеры.