Совет: используйте CSS счетчики для стилизации пошаговых списков

Дата публикации: 2016-05-13

От автора: в этой небольшой статье мы познакомимся с CSS счетчиками – полезным, но пока не очень известным свойством. После нашего демо мы разберем реальные примеры сайтов, на которых применяются CSS счетчики.

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

Сначала посмотрим на то, что у нас должно получиться:

Ничего сложно, правда? Но есть небольшое «но»: при создании маркеров мы будем использовать семантическую разметку и по возможности максимально избегать ненужных div’ов и span’ов. Разберем гибкий и понятный метод!

CSS счетчики

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

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

Синтаксис

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

Создание нового счетчика. На рисунке выше показано, как создать счетчик для нумерованного списка и задать область его применения. Мы использовали свойство counter-reset.

Первое значение – имя счетчика

Следом идет опциональный параметр, который задает стартовую точку счетчика (по умолчанию 0). Обратите внимание на то, что счетчик всегда считает вверх, т.е. нашим первым значением будет 1.

Стилизация дочерних элементов. На втором рисунке видно, что мы добавляем стили для псевдокласса ::before на элементе списка li.

Свойству content было присвоено значение. Используя CSS счетчики со свойством content, мы можем конкатенировать сгенерированные числа со строками.

Указывается имя счетчика

И задается тип decimal (десятичная система счисления). Положительные значения совпадают со значениями для свойства list-style-type.

В свойстве counter-increment мы опять указываем имя счетчика

Затем опционально можно указать шаг инкремента. По умолчанию стоит 1.

Разметка

На основе вышесказанного разметка будет такой:

<ol>
  <li>
    <h4>List Item</h4>
    <p>Some text here.</p>
  </li>
  <li>
    <h4>List Item</h4>
    <p>Some text here.</p>
  </li>
       
  <-- еще элементы списка -->
</ol>

<ol>

<li>

</li>

<li>

</li>

<-- еще элементы списка -->

</ol>

И CSS:

ol {
  counter-reset: section;
}
 
li { 
  list-style-type: none;
  font-size: 1.5rem;
  padding: 30px;
  margin-bottom: 15px;
  background: #0e0fee;
  color: #fff;
}
 
li::before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  position: absolute;
  left: -75px;
  top: 50%;
  transform: translateY(-50%);
  padding: 12px;
  font-size: 2rem;
  width: 25px;
  height: 25px;
  text-align: center;
  color: #000;
  border-radius: 50%;
  border: 3px solid #000;
}

ol {

counter-reset: section;

}

li {

list-style-type: none;

font-size: 1.5rem;

padding: 30px;

margin-bottom: 15px;

background: #0e0fee;

color: #fff;

}

li::before {

content: counter(section);

counter-increment: section;

display: inline-block;

position: absolute;

left: -75px;

top: 50%;

transform: translateY(-50%);

padding: 12px;

font-size: 2rem;

width: 25px;

height: 25px;

text-align: center;

color: #000;

border-radius: 50%;

border: 3px solid #000;

}

В результате мы получаем:

Ограничения

Важно отметить, что на данный момент псевдоклассы доступны не на все 100%. Чтобы это выяснить я провел быстрый тест: я установил NVDA и открыл демо из-под Chrome 50, Firefox 45 и Internet Explorer 11.

Я обнаружил, что при использовании Internet Explorer экранный диктор не произносил сгенерированный контент. На данный момент большинство экранных дикторов нормально распознают такой контент. Однако чтобы понимать, что можно генерировать с помощью псевдоэлементов и что нельзя, данные ограничения знать просто необходимо.

Примеры CSS счетчиков

Мы изучили основы работы с CSS счетчиками, и теперь можно показать пару примеров их потенциального применения. В первую очередь CSS счетчики часто используются в онлайн версиях газет. Зачастую они будут располагаться в сайдбарах:

Wall Street Journal

Handelsblatt

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

SpikeNode

Примеры с лишним HTML кодом

Выше мы привели два примера онлайн версий изданий, которые используют CSS счетчики. Теперь давайте рассмотрим еще два примера, но теперь вместо счетчиков используется излишний HTML код (хотя контент в нем доступен):

Washington Post

Guardian

Заключение

В этой небольшой статье мы научились стилизовать нумерованные списки с помощью CSS счетчиков. Подведем итог:

CSS счетчики отлично подходят под любой проект с динамическими нумерованными списками и пользовательскими стилями. Однако данный метод не на 100% доступен. Необходимо понимать его слабые стороны и использовать только в подходящих случаях.

Для создания счетчика необходимо задать два свойства (counter-reset,counter-increment) и одну функцию (counter() или counters())).

Счетчик отображается через псевдоэлемент. В работе счетчика участвует свойство content, а оно доступно только из-под псевдоэлемента.

Вы когда-нибудь использовали CSS счетчики в своих проектах? Если да, смело делитесь своей работой!

Автор: George Martsoukos

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Метки: css3