| koolmix | Дата: Воскресенье, 01.04.2012, 00:11 | Сообщение # 1 |
|
| Но пару дней назад я вспомнил о некоторых замечательных CSS свойствах. Полистав спецификацию, я понял, что задача решаема, при этом будет сохранена семантика в HTML. Единственное (но самое важное!) ограничение — абсолютно правильно работает пример только в Opera 7.0. Я тестировал в более ранних версиях этого браузера (нумерация в списках нарушается), а также в Mozilla 1.0 и Internet Explorer 6.0 (априори не должно работать) — увы и ах. Возможно, в более свежих версиях Gecko-based браузеров всё хорошо, я не могу сказать.
Решается всё следующим CSS кодом
ol>li{
display:block
}
ol>li:before{
content:counters(item,".") ". ";
counter-increment:item
}
ol{
counter-reset:item
}
Обратите внимание на пробел во фрагменте ". ". С его помощью мы создаём отступ между нумерацией и текстом. CSS 2 селекторы (ol>li) используются для того, чтобы не обрабатывались элементы вложенных ненумерованных списков.
HTML код получается простым и семантически верным:
- one
- one-one
- one-one-one
- one-one-two
- one-one-three
- one-two
- one-three
- two
- three
- three-one
- three-two
- three-three
Теорию про счётчики и автоматическую нумерацию рассказывать не буду. Кому интересно — см. спецификацию.
|
| |
| |
