Как сделать счетчик в css

Начинаем работать с CSS-счётчиками

Для веб-разработчиков правильное представление информации стоит на первом месте. Одним из способов соответственного отображения информации — обозначить иерархию, отвечая на вопрос «что идёт первым?».

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

Это хорошо до определённой степени, но здесь имеются свои ограничения. Что, если мы хотим использовать буквы, римские цифры, греческие символы и др. Реализация чего-либо потребует использования пользовательских библиотек.

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

Сброс и инкремент счётчика

Прежде чем делать счётчики на CSS, вы должны знать, что счётчик включает в себя две вещи: сброс и инкремент. Сброс — это то, где мы сбрасываем счётчик или даём ему начальную точку. Инкремент фактически увеличивает счётчик. Давайте быстро набросаем нашу разметку.

Всё, что нам нужно — это базовая, но простая для понимания разметка. В нашем CSS-файле нужно определить сброс и инкремент.

Установим в качестве точки сброса. Для этого мы просто делаем следующее.

Замечание: counter-name может быть произвольным.

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

Обращаясь к указанной выше точке сброса, мы говорим счётчику через counter-increment начинать считать. В таком виде наш пример пока не работает.

Примечание. Я опустил стиль содержимого, чтобы свести наш CSS к минимуму.

Смещение индекса инкремента

counter-increment также может принимать положительное или отрицательное значение для изменения шага инкремента.

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

Изменение начальной точки счётчика

Передача целого числа после объявления counter-reset говорит браузеру изменить смещение начального значения.

Задав значение равным 2, мы начинаем счётчик с 3, вроде этого. Вы также должны знать, что значение counter-reset по умолчанию равно 0.

Обратная нумерация

Сам видел, что люди делают нечто вроде этого.

Использование других форматов

Кроме увеличения счётчика с числами, мы можем также использовать инкремент с буквами, греческими символами, римскими цифрами и др.

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

Как говорится, «одна картинка стоит тысячи слов». Этот график от CanIUse иллюстрирует, насколько широко поддерживаются счётчики в CSS. Они хорошо поддерживаются в Internet Explorer и Safari, что говорит о многом. Поэтому вам не стоит беспокоиться об использовании счётчиков, они массово поддерживаются браузерами.

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

Источник

Как сделать счетчик в css

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Анимация фона при прокрутке страницы

Анимируем SVG фигуры при прокрутке страницы.

Пример 3D помещения выставки

Экспериментальная 3D проекция помещения галереи.

Источник

CSS counters

Одной из редко используемых возможностей CSS2.1 являются счетчики. Описаны они в разделе спецификации, посвященной генерации контента. Что же это такое?

Приведу пример из спецификации, эмулирующий обычный нумерованый список с помощью счетчика и свойства content:

Первым правилом мы назначаем элементам OL счетчик с именем «item», затем для всех LI меняем значение свойства display на block, вместо значения по умолчанию (list-item), чем отключаем стандартные маркеры-цифры. Наконец, в последнем правиле, мы инкрементируем счетчик для каждого элемента списка, а само его значение показываем перед элементом c помощью функции counter() и свойства content. Всё просто.

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

ol >
li > item 1, level 1 li >
li > item 2, level 1 li >
li > item 3, level 1 li >
li > item 4, level 1
ol >
li > item 1, level 2 li >
li > item 2, level 2 li >
li > item 3, level 2 li >
ol >
li >
li > item 5, level 1 li >
ol >

мы получим вот такой список:

Функция counters() принимает два параметра, имя счетчика, значение которого нужно вывести и строку-разделитель между значениями вложенных счетчиков, в данном случае это точка. Также вторым параметром можно указывать любое из возможных значений атррибута list-style-type, т.е. none, disc, circle и square. В последних трех случаях список станет выглядеть так же как обычный ненумерованный список с маркерами соответствующего типа.

Но и это еще не всё

style >
div /* объявляем счетчик num-p */
div p /* для каждого p внутри div инкрементируем его */
div:after < /* выводим результат */
display:block;font-weight:bold;
content: «Всего абзацев: » counter(num-p) «.»;
>
style >
div >
p > Абзац 1 p >
p > Абзац 2 p >
p > Абзац 3 p >
p > Абзац 4 p >
div >

станет вот такая страница:

Здесь мы воспользовались псевдоэлементом :after элемента div, для вывода конечного значения привязанного к нему счетчика.

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

Ограничения

1. К сожалению, всеми нами горячо и страстно любимый браузер Intenet Explorer — не поддерживает CSS-счетчики вплоть до версии 7, как и свойство content. Но в 8-й, говорят поддержка будет.
2. Вывод суммарных счетчиков возможен только в псевдоэлементе :after, что ограничивает возможности дизайна.
3. Контент, сгенеренный с помощью css не может быть выбран/выделен пользователем.

Исходя из ограничений, описываемые возможности пока врядли найдут широкое применение, но думаю светлое будущее не за горами. Весь код был написан только для того, чтобы показать вам эти возможности 🙂

Upd. В написании топика и кода сильно помогла статья Meitar Moscovitz, там есть еще неплохие примеры.

Источник

CSS Счётчики

Пицца

Гамбургер

Хотдоги

Автоматическая нумерация с помощью счётчиков

CSS счётчики похожи на «переменные». Значения переменных могут быть увеличены с помощью правил CSS (которые будут отслеживать, сколько раз они используются).

Для работы со счетчиками CSS мы будем использовать следующие свойства:

В следующем примере создается счетчик для страницы (в селекторе body), затем увеличивается значение счетчика для каждого элемента

и добавляется «Section :» в начало каждого элемента

Пример

h2::before <
counter-increment: section;
content: «Section » counter(section) «: «;
>

Вложенные счётчики

В следующем примере создается один счетчик для страницы (section) и один счетчик для каждого элемента

(subsection). Счётчик «section» будет подсчитываться для каждого элемента

Пример

h1 <
counter-reset: subsection;
>

h1::before <
counter-increment: section;
content: «Section » counter(section) «. «;
>

h2::before <
counter-increment: subsection;
content: counter(section) «.» counter(subsection) » «;
>

Счетчик также может быть полезен для составления списков, поскольку в дочерних элементах автоматически создается новый экземпляр счетчика. Здесь мы используем функцию counters() для вставки строки между различными уровнями вложенных счетчиков:

Пример

ol <
counter-reset: section;
list-style-type: none;
>

li::before <
counter-increment: section;
content: counters(section,».») » «;
>

Источник

Руководство по CSS counter

Дата публикации: 2019-04-16

От автора: используйте свойство CSS counter, чтобы превратить любой элемент в нумерованный список. Аналогично тому, как работает тег упорядоченного списка ol. Это очень полезно, если вы создаете сайт документации, где вам нужно автоматически нумеровать заголовки или создавать оглавление.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Как работает свойство counter

Чтобы счетчик заработал, нужно сделать 3 вещи:

Определить и инициализировать счетчик

Обеспечить увеличение счетчика

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

Этот шаг состоит из 2 частей. Вам нужно определить счетчик и задать ему имя.

1a. Определение счетчика

Я назвал счетчик tidbit-counter. Мы задаем для него имя, чтобы иметь возможность вызвать его в дальнейшем.

1б. Инициализация счетчика

Дальше нам нужно инициализировать счетчик. По умолчанию его начальное значение — 0. Обратите внимание, что этот номер не отображается. Именно здесь вы устанавливаете «старт» счетчика. Так что, если бы я установил 20, то у меня был бы вывод 21, 22, 23… и т.д., предполагая, что шаг увеличения у меня 1 (подробнее об этом ниже).

Где применяется свойство counter-reset?

Вам нужно применить свойство counter-reset к родительскому элементу. Вот что произойдет, если вы примените его не к родителю.

И вот вывод. Как вы заметили, счетчик не увеличивается должным образом:

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

2. Увеличение значения счетчика

Вы установили счетчик. Теперь вы можете начать увеличивать его значение. Вот синтаксис для этого свойства:

Как вы заметили, он принимает целочисленный аргумент. Это означает, что вы не ограничены просто увеличением значения счетчика на 1. В приведенном ниже примере предполагается, что для counter-reset установлено 0.

И да, вы также можете передать отрицательное целое число, чтобы уменьшать значение счетчика. Хорошо, давайте посмотрим, как это будет реализовано:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

3. Вывод счетчика

Наконец, чтобы отобразить счетчик, нам нужно передать функцию counter в качестве значения для свойства content. Свойство content часто позволяет отображать значение в HTML через CSS. Вот синтаксис для нашей функции counter.

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

Полный список стилей вы можете найти здесь.

Несколько счетчиков

Вы также можете установить несколько счетчиков, просто задав другое имя счетчика.

Вложенный счетчик

Вы также можете установить вложенный счетчик. Вместо использования counter, вам нужно использовать форму множественного числа counters. counters принимает дополнительный аргумент:

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

Давайте рассмотрим пример:

counter или ol

CSS counter не заменяет ol. Если у вас есть нумерованный упорядоченный список, то вы все равно должны использовать

, потому что важно структурировать HTML, используя правильную семантику. Семантическая разметка имеет решающее значение для доступности и SEO.

Предпочтительно использовать ol

Вот пример, где я должен использовать ol. В данном случае я просто перечисляю несколько правил. Имеет смысл использовать упорядоченный список ol.

Источник