Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu Close

Учимся считать с помощью CSS

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

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

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

HTML

<section>
	<p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
	<p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
	<p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p>
	<p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
	<p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
</section>

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

CSS

CSS-счетчики используют свойство counter-increment. Свойство не новое, появилось еще в спецификации CSS 2.1, для того чтобы его использовать, сначала нужно обнулить дефолтное значение счетчика, до того, как элементы, которые мы собираемся нумеровать, появятся на странице. Поэтому, удобнее всего будет определить счетчик в стиле элемента body, следующим образом:

body {
  counter-reset: steps;  
}

Эта строчка сбрасывает счетчик до нуля, а также присваивает ему имя steps.  Имя счетчика используется для дальнейшего обращения к нему, а также позволяет использовать несколько счетчиков на странице, присвоив им разные имена.

Далее нам понадобится псевдо-элемент  :before, для проставления нумерации в начале каждого параграфа. Для этого нам понадобятся свойства counter-increment и content. Можно проставить только числа, или же добавить к ним какой-нибудь текст, в нашем примере, перед номером будет идти текст “Step ”:

p:before {
  counter-increment: steps; 
  content: "Step " counter(steps) ": ";
}

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

p {
 color: #242424;
 font-family: arial, sans-serif;
 font-size: 16px;
 line-height: 20px;
}

p:before {
  counter-increment: steps; 
  content: "Step " counter(steps) ": ";
  font-weight: bold;
  font-size: 18px;
}

Результат можно посмотреть здесь.

Поддержка браузерами

Основная головная боль при работе с CSS – это поддержка тех или иных свойств различными браузерами. Но поскольку счетчики являются частью спецификации CSS 2.1, они поддерживаются всеми современными браузерами, как десктопными так  и мобильными. Исключение составляет IE7, однако, согласно последним статистическим данным, его использует около 0.8% пользователей, так что на его счет можно не беспокоиться.

Перевод статьи “Learn to count with CSS”, автор Sara Vieira.