Спецификация CSS2.1 содержит технику, которая позволяет разработчику комбинировать три свойства CSS и псевдо-элемент для создания счетчика с автоинкрементом, подобного тому, который используется в упорядоченном списке. В отличие от счетчика списка, который имеет применение только для элементов <ol> или <ul>и только с простым инкрементом, новый метод организации счетчика, введенный в CSS2.1, может быть использован с любым набором элементов и имеет более широкие возможности организации счета. Данный метод может сбить столку, так как он использует несколько свойств и отличается от обычного кода CSS. В уроке мы постараемся прояснить использование такого счетчика и указать его преимущества и недостатки. Синтаксис Код CSS счетчика выглядит следующим образом: 1 div.section { 2 counter-reset: headings 0; 3 } 4 5 h2:before { 6 counter-increment: headings 1; 7 content: "Глава " counter(headings, decimal) ": "; 8 } Как уже упоминалось, используется три свойства CSS: counter-reset, counter-increment, и content. Если какое-либо из указанных свойств будет пропущено, то метод не будет работать. Разбор синтаксиса Итак, разберемся с синтаксисом и тем, для чего предназначены пары свойство/значение: Индикатор контекста Первый блок объявлений (селектор div.section) указывает, какая секция в разметке содержит набор элементов, которые будут иметь целое значение с автоинкрементом. Важно понимать отличие объявления данного блока от следующего. Данный конкретный элемент (<div>) не будет иметь предшествующего целого значения счетчика. Это просто "контейнер" или "контекст", в котором расположены элементы, использующие счетчик. Но для контекста нужно определить имя счетчика, который будет использоваться для элементов, объявленных в следующем блоке. Сброс счетчика Свойство counter-reset должно использоваться в сочетании с селектором, который определяет контекст, как уже описывалось выше. Первая часть значения является пользовательским именем, которое вы задаете для счетчика. Это обязательная часть. Имя может быть любым, кроме зарезервированных слов для CSS (например, вы не можете задавать счетчику имя “none”, “inherit”, или “initial”). Вторая часть значения для свойства counter-reset является необязательной. По умолчанию устанавливается величина “0″. Данное число указывает точку отсчета для счетчика. Важно помнить, что счет начинается со следующего целого значения после величины сброса. Таким образом если вы установили значение "0", счетчик начнет с “1″. А если было установлено "-5", счетчик начнет с "-4", и так далее. Нумерованные элементы Второй блок объявлений (селектор h2) использует псевдо-элемент :before для указания места размещения специфического контента (используется свойство content) перед всеми целевыми элементами (в нашем случае - это элементы <h2>). Увеличение счетчика Свойство counter-increment указывает, с каким контекстом в действительности ассоциирован счетчик. Таким образом, первое значение (обязательное) является соответствующим пользовательским именем счетчика из свойства counter-reset в идентификаторе контекста из первого блока объявлений. Второе значение свойства counter-increment задавать не обязательно. Оно представляет величину на которую надо увеличивать счетчик (или уменьшать - если вы задали отрицательное значение). По умолчанию устанавливается “1″. Содержание вставки С помощью свойства content мы точно указываем, что должно вставляться перед каждым элементом в заданном наборе (элементы <h2>). Единственным обязательным значением для свойства content является функция counter(), но, обычно, добавляется что-нибудь еще (например, пробелы) до или после (смотрите выше приведенный пример), чтобы придать счетчику отличный вид. Функция counter() Функция counter() может принимать два аргумента, разделенных запятой. Первый аргумент указывает на текущее значение именованного счетчика. Второй аргумент является не обязательным и указывает формат вывода значения счетчика. По умолчанию используется “decimal”, но можно указать “upper-roman”, “upper-alpha”, и так далее (также как и для свойства list-style-type упорядоченного списка). Вы также можете использовать функцию counters() и организовывать вложенные счетчики, но в рамках данного урока мы их рассматривать не будет. Графическое обобщение Если все выше сказанное кажется сложным, то на приведенной ниже инфограмме описываются основные элементы счетчика CSS: Описание синтаксиса счетчика Поддержка браузерами и недостатки Несколько счетчиков, которые используются для одного контекста (для построения каскада нумерации) должны объявляться вместе. Следующий пример работать не будет: 1 div.numbered { counter-reset: headings 0 } 2 div.numbered { counter-reset: subheads 0 } Только второй счетчик будет действовать, потому что он переопределяет предыдущий. Таким образом, оба счетчика нужно объявлять в одной строке: 1 div.numbered { counter-reset: headings 0 subheads 0 } Потенциальный недостаток использования счетчиков - смешивание контента и его представления. Особенно, данное утверждение касается свойства content. Линия раздела между контентом и представлением размывается. Три указанных свойства и псевдо-элемент, которые описывают функционал счетчика CSS, не поддерживаются в IE версий 7 и старше, и могут иметь проблемы в IE8, Opera, и Safari. Firefox и Chrome поддерживают все описанные свойства без проблем. Преимущества и практическое использование Счетчики CSS имеют очевидное преимущество, которое заключается в отсутствии необходимости беспокоиться о нумерации различных пунктов в контенте. Подобно упорядоченным спискам, контент не имеет реальных цифр. Можно вставлять элементы, удалять элементы, менять их местами, а цифровые указатели будут автоматически исправляться сами. Некоторые примеры практического использования: Именование и нумерация глав (как в нашем примере) Нумерация строк таблицы или ее ячеек Нумерация заголовков HTML Улучшение/изменение внешнего вида или увеличивающегося значения для обычных упорядоченных списков Можно ли использовать счетчики CSS? Так как они не поддерживаются в IE6 и IE7, то для клиентских сайтов не стоит использовать счетчики CSS, или нужно искать им подходящую замену. Но для веб сайтов и приложений, нацеленных на более техничную аудиторию (например, сайт для использования на мобильных устройствах, браузеры которых поддерживают CSS3) такие счетчики могут стать эффективным способом создания системы нумерации пунктов контента без использования программирования. На демонстрационной странице можно посмотреть пример использования счетчиков CSS для заголовков.