CSS counters и случаи их использования
HTML&CSS

CSS counters и случаи их использования

Оригинал: Understanding CSS Counters and Their Use Cases, Louis Lazaris

В CSS есть ряд возможностей, которые мы по тем или иным причинам используем не очень часто. Я думаю, что счетчики CSS (CSS counters) для большинства из нас попадают в эту категорию и, скорее всего, по двум причинам:

  • случаев для их использования не много.
  • их синтаксис немного сложнее.

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

Ускоренный курс по счетчикам в CSS

CSS-счетчики позволяют динамически нумеровать элементы в CSS подобно тому, как работает нумерованный список, однако они очень сильно отличаются от списков. Счетчики используют псевдо-элемент в сочетании с определенной функцией-счетчиком, чтобы добавить до или после элемента динамический «подсчет» для указанного набора элементов.

Вот пример кода, похожий на тот, что я буду с использовать в демо в конце этой статьи:


.container {
    counter-reset: issues 0;
}
 
.issue:before {
    counter-increment: issues 1;
    content: "Issue " counter(issues, decimal);
    display: block;
}

Первый блок определяет область видимости счетчика. Это означает, что счетчик будет увеличиваться только для элементов внутри контейнера с классом .container. Я назвал счетчик «issues», этот идентификатор необходим, чтобы связать контейнер с элементами, которые будут подсчитываться.

Во втором блоке используется псевдо-элемент :before (я мог бы также использовать псевдо-элемент :after), в свойстве content задается содержимое элемента.

Для определения содержимого псевдо-элемента я использую функцию content(), синтаксис которой похож на функции в JavaScript или другом языке программирования. Функция counter() принимает два аргумента: идентификатор счетчика, определенный ранее (в данном случае, «issues») и стиль счетчика, которые может принимать любое значение , принимаемое свойством list-style-type нумерованного списка. В примере я использую значение по умолчанию «decimal».

Если вы не до конца поняли, как работают счетчики, возможно, инфографика ниже вам поможет:

Принцип работы счетчиков в CSS

Если этого не достаточно, вот несколько дополнительных ресурсов с детальной информацией, в том числе моя собственная статья, где я первоначально опубликовал аналогичную инфографику:

Последняя ссылка на черновик спецификации, которая вводит ряд новых особенностей, связанных со счетчиками, есть риск, что они не будут поддерживаться в будущих версиях спецификации. Возможности, которые я использую в статье, являются кроссбраузерными вплоть до IE8.

Определение значения счетчика

Когда впервые думаешь о реализации счетчика на CSS, сразу приходят в голову две основные проблемы:

  • Нумерованные списки уже выполняют эту функцию, зачем добавлять новый инструмент для нумерации объектов?
  • Сгенерированный контент не является доступным, плюс при такой реализации смешивается содержание и представление.

Первая из этих проблем на самом деле и не проблема вовсе. Если вы хотите пронумеровать последовательный список элементов, целесообразно использовать нумерованный список (элемент

    с вложенными элементами
  1. ). Счетчики CSS предназначены для нумерации не последовательных объектов, которые могут располагаться где угодно в DOM-дереве, могут быть пересортированы, но при этом нумерации должна сохраниться.

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

    Другая проблема, связанная с доступностью, уже не кажется столь серьезной, как это было раньше. Вывод, сделанный в статье Леони Уотсон (Leonie Watson) :

    «Доступность сгенерированного содержимого поддерживается большинством браузеров, и, соответственно, распознается скрин ридерами.»

    Однако, поддержка не 100%, поэтому, если вы используете псевдо-элементы для генерации содержимого, этот «контент» должет иметь больше декоративное значение, не критичное для понимания или функционирования сайта. Использование счетчиков в таких случаях, как описан ниже, вполне приемлемо.

    Простой use case

    Недавно я смотрел на спецификацию W3C’s Selectors Level 4 spec и обратил внимание, что «проблемы» и «примеры» вкраплены в содержание. Я видел такое и раньше, но на этот раз решил поисследовать немного. Эти элементы нумеруются, поэтому я подумал, как добавлять и удалять их без необходимости повторно перенумеровывать весь набор каждый раз. Я предположил, что это реализуется с помощью JavaScript или генерируется на стороне сервера.

    Нет. Они используют счетчики CSS, как показано на скриншоте ниже:

    Пример использования счетчиков CSS

    На этой странице пронумерованы проблемы (красные блоки) и примеры (желтые блоки). Использование отдельного идентификатора для каждого набора позволяет легко добавлять, удалять, или даже изменять порядок пунктов и CSS будет автоматически добавлять правильные номера к пунктам.

    Также на этой странице представлен список проблем в конце страницы, в котором используется тот же идентификатор счетчика, но счетчик имеет отдельную область видимости и нумерация обновляется. Дублирование списка проблем добавляет немного работы при поддержке, но, опять же, порядок элементов поддерживать так же просто, как в содержимом статьи.

    Демо

    Я воссоздал пример W3C, что бы вы могли разобраться с тем, как работают счетчики, и увидеть, как легко их можно использовать для создания динамических списков различных элементов с помощью HTML и CSS.

    See the Pen CSS Counters drag-and-drop demonstration by SitePoint (@SitePoint) on CodePen.

    В этом демо я использовал jQuery UI Sortable, чтобы реализовать возможность перетаскивания и пересортировки любого параграфа на странице, включая блоки проблем и примеров. Обратите внимание, как нумерация изменяется по мере перетаскивания элементов (хотя в процессе перетаскивания нумерация ведет себя довольно странно). Я также добавил дублирование списка проблем внизу страницы так же, как это сделано на W3C.

    Заключение

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

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться