Стилизация нумерованных списков с помощью CSS

Продолжаем тему стилизации различных HTML-элементов. Сегодня это будут нумерованные списки. Если вы захотите изменить отображение цифр перед строками в нумерованном списке, то обнаружите, что сделать это при помощи CSS невозможно. Но также невозможно объяснить заказчикам, почему дизайнер нарисовал в фотошопе красивый список, а повторить его на web-странице в таком же виде не получается. Решение этой проблемы есть, и даже не одно.

В староглиняные времена во многих пластилиновых местностях для этого использовали дополнительный тег, внутри которого вручную или динамически прописывался счетчик. Что-то типа такого:Штатная нумерация списка убирается через list-style: none, а стиль цифр задается в описании класса list_num. Ужасное решение. Просто представьте, что в середину списка из десятков пунктов вдруг потребуется добавить новую строку. А если вложенный список? Не говоря уже об избыточности верстки. Ручная нумерация нумерованных списков - это зло. Точка.

Есть правильный путь - использование CSS-счетчиков и псевдоэлемента :before. Делается это следующим образом.В содержимое HTML не вносится никаких изменений. Нумерованный список остается списком, строчки остаются строчками. Значения счетчика проставляются автоматически без добавления мусорных элементов.Чуть более сложный пример с вложенными списками. Тут можно оставить одноуровневую нумерацию, а можно сделать красивую нумерацию с подпунктами. В стилях одиночный счетчик в контенте :before заменяется на функцию генерации строки с подпунктами и точкой-разделителем. Вложенность списков при этом может быть любая, для каждого уровня будет генерироваться свой номер, соответствующий его положению в списке.Верстка при этом остается красивой и логичной.Примеры нумерованных списков вы можете посмотреть на демонстрационной странице. К оформлению я добавил несколько эффектов, их вы можете посмотреть в исходном коде страницы. CSS-счетчики поддерживаются всеми современными браузерами, как мобильными, так и стационарными. Важное уточнение: CSS-счетчики не работают с атрибутами нумерованных списков типа изменения начала отсчета, направления нумерации и т.п., хотя некоторых из этих параметров можно задавать в стилях. Впрочем, они настолько редко используются, что этим неудобством можно пренебречь.

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.