Вольный перевод статьи Automatic numbering with CSS Counters. Автор: David Storey

Введение

Очень часто в различных документах нам приходиться использовать нумерацию, например, для оформления оглавления. Нумеровать можно и вручную, но такой способ доставит немало хлопот, если понадобиться удалить или добавить новый пункт. В CSS2.1 существует способ, который позволяет автоматизировать этот процесс – это использование CSS counters. Стоит уточнить, что CSS counters не поддерживаются браузером IE, однако в 8й версии это обещают исправить.

Нестандартные тексты, броские заголовки и душещипательные рассказы. Все это на Максим.ру

корпоративный новый год, проведение нового года – мероприятие ответственное, оно должно учитывать специфику самой компании, возрастные группы и социальные статусы приглашенных. Обратитесь к профессионалам!

Torrent Ratio Keeper – уникальная программа, позволяющая увеличить и сохранить высокий ratio на приватных торрентах

CSS counter шаг за шагом

Первым делом необходимо обнулить счетчик и дать ему название, используя свойство counter-reset:

body { counter-reset: section; }

Таким образом, для элемента body счетчик имеет значение 0, а название счетчика – section. Название может быть любым, какое вы пожелаете. Свойство counter-reset может иметь также еще одно дополнительное значение, обозначающее, с какого числа начнется нумерация. Например, если вы хотите, чтобы нумерация начиналась с 5, то необходимо прописать следующее:

body { counter-reset: section 4; }

Цифру 4 мы пишем потому, что счетчик всегда начинается с цифры на единицу больше установленной.

Следующий шаг – определение элемента, который будет нумероваться. Для этого используется свойство counter-increment:

body { counter-reset: section 4; }

h2 { counter-increment: section; }

Дополнительно, можно установить значение, на которое будет увеличиваться счетчик, например:

h2 { counter-increment: section 2; }

Т.е. счетчик будет каждый раз увеличиваться не на 1, а на 2. (Пример: 5, 7, 9, 11 …)

Свойство также может принимать отрицательные значения и 0. Если счетчик устанавливается и инкриминируется (растет) в одном и том же элементе, тогда его значение будет постоянно сбрасываться. В следующем примере значение счетчика всегда будет равно 2м:

h2 {
    counter-reset: section;
    counter-increment: section;
}

Отображение счетчика

Как только все необходимые параметры для счетчика установлены, необходимо прописать правила для его отображения. Это можно сделать с помощью функции counter() и псевдо-класса before:

body { counter-reset: section 4; }

h2 { counter-increment: section; }

h2:before{ counter(section) " "; }

Если вы используете один и тот же элемент ( как было в примере выше), тогда счетчик увеличится до момента отображения.

Взгляните на рабочий пример.

Сложная нумерация (2 счетчика и более)

Функция counter() может быть использована более 1 раза. В следующем примере я использую 2 счетчика для нумерации разделов и подразделов.

Счетчик для подразделов обнуляется для каждого нового раздела:

body { counter-reset: section; }

h2 {
    counter-increment: section;
    counter-reset: sub-section;
}

h2:before h3:before{ content: counter(section) “.“ counter(sub-section) “ “; }

h3:before{
    counter-increment: sub-section;
}

Использование вложенных счетчиков

Существует также функция counters() для вложенных счетчиков. Это хорошо подходит для работы с элементами списков (ol), где каждый список может иметь многоуровневую структуру. Но данный способ не будет работать для примера выше, .т.к. подразделы не вложены в элемент раздела.

Для вложенных счетчиков можно прописать следующие правила:

ol {
    counter-reset: section;
    list-style-type: none;
   }

ol li { counter-increment: section; }

ol li:before{ content: counters(section, ".") ". "; }

Данный код будет увеличивать счетчик для каждого элемента списка, и не имеет значения насколько сложна структура списка. Но очень важно, чтобы счетчик сбрасывался в нужном месте, т.е. в начале каждого нового вложенного элемента. В нашем случаем, необходимо обнулять счетчик на каждом вложенном элементе ol.

В нашем примере первый вложенный список начинается с пункта 1.1, затем 1.2, 1.3 и так далее. Вложенный список третьего уровня начинается с t 1.1.1 и далее идут 1.1.2, 1.1.3 и т.д.

<ol>
<li>item 1
<ol>
<li>sub item 1
<ol>
<li>sub-sub item 1</li>
<li>sub-sub item 2</li>
<li>sub-sub item 3</li>
</ol>
</li>
<li>Sub item 2</li>
</ol>
</li>
<li>item 2</li>
</ol>

Взгляните на пример использования вложенных счетчиков.

Стилизация счетчика

Существует возможность задать стиль маркера для счетчика, передавая второй параметр в функциях counter() и counters(). Значения передаются те же, что и для свойства list-style-type. Хотя все они валидны, для счетчика имеет значение передавать только подмножества, а такие значения как disc, square и circle не изменятся, независимо от сложности структуры счетчика. Например, можно задать следующий стиль:

ol li:before{ counter(answer, lower-alpha) “) “; }

Посмотрите пример, где функция counter используется для передачи параметра для стилизации счетчика.

Использование счетчиков для замены начального значения нумерованного списка

Если вам необходимо установить начальное значение для элемента ol, отличное от 1 и вы используете “strict” доктайп, то в процессе валидации, вы получите предупреждение о том, что такой код не валиден. Существуют доводы относительно того, является ли начальное значение настолько показательным, кроме того в текущей спецификации HTML5 о нем не заявлено . Даже если стартовое значение будет разрешено в HTML5, это не поможет в случае, когда страница имеет доктайп HTML4. Если вам необходимо, чтобы страница была валидна, используйте transitional доктайп или CSS counters.

Например, если вам нужно, чтобы счетчик начинался не с 1 по умолчанию, а с 4х, то используйте следующий код:

body { counter-reset: list-order 3; }

ol li {
    counter-increment: list-order;
    list-style-type: none;
}

ol li:before{ content: counter(list-order) “ “; }

Важно также убрать маркеры, чтобы избежать двойной нумерации.

Посмотрите пример замены начального значения для нумерованного списка

Заключение

В приведенной статье, я рассказывал как обозначить и присвоить стили счетчикам в CSS, вместо добавления нумерации вручную. Это удобно, если вам необходимо пронумеровать разделы в статьях или оглавление. Использование приведенных примеров сэкономит массу времени на верстку таких структур. Кроме того, это более гибкий способ указать тип маркера в CSS, вместо того чтобы использовать дополнительные скрипты. Также я описал способ того, как переопределить стартовое значение для нумерованного списка. CSS counters очень просты в использовании, если разобраться, но подводным камнем здесь является отсутствие поддержки данной техники в браузере IE.