Использование CSS счетчиков при вёрстке
Development, Java | Комментировать запись
В программировании счетчик – это переменная, содержащая значение, которое увеличивается в соответствии с настраиваемыми правилами. У счетчиков много вариантов применения: например, они помогают отслеживать циклы путем сохранения количества итераций. Обычно счетчики используются в языках программирования и традиционно не включаются в синтаксис каскадных таблиц стилей (CSS). До появления современного CSS отслеживание элементов для стилизации выполнялось либо вручную в разметке, либо с помощью JavaScript. Но теперь CSS предлагает хорошо поддерживаемые счетчики, которые могут отслеживать приращение без JavaScript.
В этом мануале вы узнаете, что такое счетчики CSS, и научитесь использовать их для нумерации элементов section в HTML документе и для подсчета количества строк в элементе table.
Требования
Для работы вам на локальном компьютере нужен HTML-файл index.html, к которому вы можете получить доступ из веб-браузера.
Читайте также: Подготовка HTML-проекта
Если вы новичок в HTML, попробуйте выполнить всю серию статей Создание веб-сайта с помощью HTML.
Автоматическая нумерация разделов сайта
Чтобы понять, как работают счетчики CSS, давайте сначала создадим таблицу стилей, с помощью которой позже мы сможем присвоить порядковый номер нескольким элементам section в HTML-документе. Используя счетчики, мы сможем последовательно нумеровать каждый новый раздел.
Сначала откройте файл index.html в текстовом редакторе:
nano index.html
Вставьте в этот файл следующий код HTML, чтобы создать семантическую структуру сайта (в нашем примере это будет короткая справка о рептилиях):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Introduction to CSS Counters</title>
<link rel="stylesheet" type="text/css" href="counter.css">
</head>
<body>
<section>
<h2>Ratings</h2>
Insert a table with reptile ratings on it...
</section>
<section>
<h2>Alligators</h2>
Insert facts about alligators here...
</section>
<section>
<h2>Turtles</h2>
Insert facts about turtles here...
</section>
<section>
<h2>Snakes</h2>
Insert facts about snakes here...
</section>
</body>
</html>
В этом коде с помощью элемента section мы создали 4 раздела сайта с заголовками h2. Мы также добавили в head элемент link, который связывает документ с файлом CSS counter.css (мы скоро создадим его).
Сохраните и закройте файл. Откройте index.html в своем браузере, и вы увидите:
Ratings
Insert a table with reptile ratings on it…
Alligators
Insert facts about alligators here…
Turtles
Insert facts about turtles here…
Snakes
Insert facts about snakes here…
Чтобы пронумеровать каждый раздел в этом HTML-документе, вы можете добавить к каждому заголовку h2 номер вручную, прямо в разметке:
...
<section>
<h2>1. Ratings</h2>
Insert a table with reptile ratings on it...
</section>
<section>
<h2>2. Alligators</h2>
Insert facts about alligators here...
</section>
...
Хотя это отличное решение, если на вашем сайте есть небольшое фиксированное количество разделов. Но если сайт содержит десятки или даже сотни разделов, нумеровать их вручную слишком сложно и долго. И задача становится только сложнее, если вам нужно изменить порядок разделов.
Чтобы автоматизировать нумерацию, вы можете использовать счетчики CSS.
Создайте файл counter.css в том же каталоге, что и index.html, и откройте его:
nano counter.css
Счетчики в CSS ведут себя как переменные в традиционных языках программирования. Чтобы использовать CSS счетчик, его нужно сначала инициализировать – присвоить имя и начальное значение.
Добавьте в свой файл следующий код:
body {
counter-reset: sectionCounter;
}
В этом коде мы использовали counter-reset для инициализации счетчика sectionCounter. На данный момент его значение равно 0.
Вы также можете явно объявить инициализированное значение, передав целое число свойству counter-reset после имени счетчика. Например:
counter-reset: sectionCounter 2
Это инициализирует счетчик sectionCounter с начальным значением 2. Если целочисленное значение не указано, используется значение счетчика по умолчанию – 0.
Теперь, когда мы инициализировали счетчик, можно настроить его приращение. Номер каждого раздела счетчик должен увеличить на 1. Для этого добавьте следующий выделенный код:
body {
counter-reset: sectionCounter;
}
section {
counter-increment: sectionCounter;
}
Тут мы присвоили всем элементам section свойство counter-increment. Теперь каждый раз, когда CSS встретит элемент section, он увеличит счетчик. Если задать свойству значение sectionCounter, значение счетчика sectionCounter будет увеличиваться. По умолчанию счетчик увеличивается на единицу, но если вы хотите указать другой шаг приращения, вы можете добавить целое число после sectionCounter (через пробел).
Теперь, когда счетчик инициализирован и логика приращения установлена, вы можете проверить его. Используйте свойство content, чтобы добавить значение к заголовку h2:
body {
counter-reset: sectionCounter;
}
section {
counter-increment: sectionCounter;
}
h2::before {
content: counter(sectionCounter) ". ";
}
Мы использовали псевдоэлемент ::before, чтобы добавить элемент перед каждым заголовком h2. Чтобы установить контент нового элемента, мы использовали свойство content в сочетании с функцией counter(). Эта функция возвращает значение sectionCounter в виде строки.
Читайте также: Работа со строками в JavaScript
Передача второй строки в content приведет к конкатенации строки, поэтому будет выведено значение sectionCounter, за которым следует точка и пробел.
Сохраните и закройте файл. Обновите страницу в браузере, и вы увидите пронумерованные заголовки разделов:
1. Ratings
Insert a table with reptile ratings on it…
2. Alligators
Insert facts about alligators here…
3. Turtles
Insert facts about turtles here…
4. Snakes
Insert facts about snakes here…
Еще один важный момент: этот счетчик невосприимчив к добавлению, удалению и изменению новых разделов, поэтому вам не придется заново нумеровать их, если вы измените их порядок.
Чтобы посмотреть, как это работает, откройте свой HTML-файл:
nano index.html
Поменяйте местами разделы Turtles и Snakes:
...
<body>
<section>
<h2>Ratings</h2>
Insert a table with reptile ratings on it...
</section>
<section>
<h2>Alligators</h2>
Insert facts about alligators here...
</section>
<section>
<h2>Snakes</h2>
Insert facts about snakes here...
</section>
<section>
<h2>Turtles</h2>
Insert facts about turtles here...
</section>
</body>
...
Сохраните и закройте файл. Перезагрузите браузер, и вы обнаружите такой результат:
1. Ratings
Insert a table with reptile ratings on it…
2. Alligators
Insert facts about alligators here…
3. Snakes
Insert facts about snakes here…
4. Turtles
Insert facts about turtles here…
…
В этом разделе вы использовали CSS счетчики для автоматизации нумерации разделов в HTML-документе. Далее мы рассмотрим пример использования элемента table для суммирования вычислений.
Подсчет количества строк в таблице
Счетчики CSS можно использовать не только для автоматизации нумерации в HTML документе, но и для любой задачи, которая включает периодическое увеличение. Чтобы посмотреть, как это работает, мы используем счетчики для определения количества строк в элементе table, а затем отобразим итоговую сумму в таблице.
Подсчет количества строк или элементов tr в table работает аналогично нумерации элементов section в предыдущей части руководства. Главное отличие – в том, что при подсчете общего количества важно общее значение, а при нумерации – значение для каждой отдельной строки.
Для начала вам понадобится таблица для работы. Откройте свой HTML-файл:
nano index.html
Добавьте следующее после раздела Ratings:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Introduction to CSS Counters</title>
<link rel="stylesheet" type="text/css" href="counter.css">
</head>
<body>
<section>
<h2>Ratings</h2>
<table border="1" cellpadding="5">
<thead>
<tr>
<th>Reptile</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alligator</td>
<td>9001</td>
</tr>
<tr>
<td>Turtle</td>
<td>223</td>
</tr>
<tr>
<td>Snake</td>
<td>3.14</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rows</th>
<th class="total"></th>
</tr>
</tfoot>
</table>
</section>
<section>
<h2>Alligators</h2>
Insert facts about alligators here...
</section>
...
Элемент table создает таблицу; элемент tr нужен для определения строк таблицы, а td – для заполнения строки данными. Обратите внимание на использование thead, tbody и tfoot. Эти элементы опциональны, но они группируют строки в семантические разделы, которые можно использовать для более точного нацеливания (в разделе tbody) и пропуска строк в верхнем или нижнем колонтитуле. Атрибуты border и cellpadding позволяют придать таблице базовый стиль.
Сохраните и выйдите из файла index.html. Обновите страницу в браузере, и вы увидите следующее:
1. Ratings
| Reptile | Rating |
|---|---|
| Alligator | 9001 |
| Turtle | 223 |
| Snake | 3.14 |
| Rows |
Insert a table with reptile ratings on it…
2. Alligators
Insert facts about alligators here…
3. Turtles
Insert facts about turtles here…
4. Snakes
Insert facts about snakes here…
Теперь откройте свой файл CSS:
nano counter.css
Как и ранее, вам нужно инициализировать счетчик с нулевым значением. Но на этот раз давайте назовем его rowCounter:
body {
counter-reset: sectionCounter;
counter-reset: rowCounter;
}
section {
counter-increment: sectionCounter;
}
h2::before {
content: counter(sectionCounter) ". ";
}
Для каждой строки или элемента tr в tbody нужно установить counter-increment:
body {
counter-reset: sectionCounter;
counter-reset: rowCounter;
}
section {
counter-increment: sectionCounter;
}
h2::before {
content: counter(sectionCounter) ". ";
}
table tbody tr {
counter-increment: rowCounter;
}
Селектор table tbody tr выбирает все элементы tr в tbody, а затем идет свойство counter-increment, но на этот раз со счетчиком rowCounter.
Теперь добавьте окончательное значение счетчика в столбец с классом total:
body {
counter-reset: sectionCounter;
counter-reset: rows;
}
section {
counter-increment: sectionCounter;
}
h2::before {
content: counter(sectionCounter) ". ";
}
table tbody tr {
counter-increment: rowCounter;
}
table .total::before {
content: counter(rowCounter);
}
Как и раньше, мы использовали псевдоэлемент ::before, чтобы добавить значение rowCounter в качестве новой строки. Поскольку он объявляется после увеличения счетчика, он сообщает общее количество строк.
Сохраните и закройте CSS файл, а затем перезагрузите страницу в браузере, чтобы проверить результат:
1. Ratings
| Reptile | Rating |
|---|---|
| Alligator | 9001 |
| Turtle | 223 |
| Snake | 3.14 |
| Rows | 3 |
Insert a table with reptile ratings on it…
2. Alligators
Insert facts about alligators here…
3. Turtles
Insert facts about turtles here…
4. Snakes
Insert facts about snakes here…
Теперь ваша таблица всегда будет сообщать, сколько строк в ней содержится. Добавление или удаление строк в разметке будет влиять на итоговое значение. Это работает даже при использовании JavaScript для управления DOM.
Читайте также: Изменение страницы с помощью DOM
Заключение
Счетчики в CSS позволяют отображать значения, которые увеличиваются с появлением в HTML-документе определенных элементов. Во многих случаях это может полностью устранить необходимость внедрения JavaScript на страницу, что делает счетчики идеальным решением для легких веб-проектов, которые не нуждаются в интерактивности. Однако обратите внимание: подобное использование CSS стирает грань между контентом и дизайном. Более крупные приложения нуждаются в четком разделении таких вещей, иначе ими трудно управлять. По этой причине использовать счетчики в более сложных приложениях JavaScript не рекомендуется.
Читайте также: Создание веб-сайта с помощью HTML
