От автора: нумерованные списки – одни из самых старых и семантически богатых элементов в HTML. Когда вам нужно передать последовательность или рейтинг, используйте тег ol. По умолчанию тег ol отображает числа слева от пункта списка. С помощью свойства list-style-type нумерацию можно сменить на римские цифры или буквы алфавита. Любите экзотику, тогда можете взять числа из других культур, например, Иврит или Греция. Полный список доступных значений хорошо задокументирован и прост в использовании.
Недавно я подумал, что в некоторых нумерованных списках, которые объясняют особенности моей HTML5-игры Triple Score Bopzee, можно использовать игральную кость вместо чисел. Сперва я экспериментировал с уже знакомой техникой, где на селекторах li:before списка используется маленькое фоновое изображение. Одно из изменений – вместо list-style-type: none я использовал list-style-type: decimal и list-style-image. В качестве значения для последнего я передал 1х1 прозрачное GIF-изображение. Это небольшое изменение помогает пройти тест доступности, так как скрин ридеры будут видеть список с валидными числами.
Для демонстрации этой классической техники я создал Pen, в котором числа были в виде GIF-изображений с мячами четырех основных видов спорта внутри.
Эта техника подошла бы для сайта игры, однако мне стало интересно, как сделать то же самое, но без изображений. Ответ – использовать символы Юникода от \2680 и до \2685 (6 сторон кубика). Я создал класс dicey и с помощью псевдоселекторов nth-child и before позиционировал и выбрал символ Юникода для каждого элемента списка. Чтобы сгладить различия в браузерах, я добавил ссылку в библиотеку Normalize.css.
Pen готового списка с кубиками:
Список выглядит следующим образом:
|
1 2 3 4 5 6 7 8 |
<ol class="dicey"> <li>I rolled a one.</li> <li>I rolled a two.</li> <li>I rolled a three.</li> <li>I rolled a four.</li> <li>I rolled a five.</li> <li>I rolled a six.</li> </ol> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* Still use a decimal based list for a11y */ ol { margin-left:40px; list-style:decimal url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); } .dicey li:nth-child(1n):before {position:absolute;left:-1em;} /* Задаем реальные маркеры через символ Юникода на псевдоэлементе */ .dicey li:nth-child(1):before {content: "\2680";} .dicey li:nth-child(2):before {content: "\2681";} .dicey li:nth-child(3):before {content: "\2682";} .dicey li:nth-child(4):before {content: "\2683";} .dicey li:nth-child(5):before {content: "\2684";} .dicey li:nth-child(6):before {content: "\2685";} |
Я не указывал шрифт, который отображал бы символы Юникода. Результат был довольно неплохой, потому что сегодня каждый современный браузер и устройство с выходом в интернет имеют хотя бы один шрифт с обязательными символами из блока Юникода «Miscellaneous Symbols». Были некоторые различия в отображении, но это терпимо. Однако я понимал, что если мне нужен полный контроль, то мне нужно найти бесплатный веб-шрифт. Я нашел шрифт DejaVu, который просматривает поддерживаемые шрифты в таблице глифов для блока «Miscellaneous Symbols».
Как только я узнал название шрифта, я создал WebFont набор на Font Squirrel. Во время создания набора нужно выбрать опцию «No subsetting», чтобы шрифты содержали все символы Юникода, необходимые для иконок. Если же вы думаете о размере файла, то можете скачать шрифты TrueType и OpenType и зайти в генератор Font Squirrel WebFont в режиме эксперта и включить только символы Юникода от 2600 до 26FF (блок «Miscellaneous Symbols»).
Как только вы начнете копаться в Юникоде, веселья будет все больше и больше. Я потратил очень много времени, изучая иконки шрифта DejaVu (весь список). В шрифте я нашел символы игральных карт, астрологические символы, стрелки, точки, музыкальные символы, геометрические формы и еще кучу загогулин, которые я не могу описать. Я выбрал мои любимые и создал демо с разными списками.
А что же с маркированными списками?
Тегам ul можно задать те же символы Юникода, но нужно слегка подкорректировать эту технику. Демо:
Будущие способы
Есть новое CSS-правило @counter-style, с помощью которого можно будет с легкость создавать кастомные стили для счетчиков в нумерованных списках. Можно будет задавать используемые символы, диапазон списка и множество других настроек. Спецификация CSS Counter Styles Level 3 в настоящее время находится в статусе Candidate Recommendation на W3C, однако на май 2017 только Firefox поддерживает ее (с некоторыми ограничениями). Я думаю, что в Chrome, Edge и Safari скоро появится поддержка, однако в последней версии IE (11) поддержки не будет. Если вам нужно поддерживать этот браузер, то вам придется пользоваться методами, описанными в этом посте до тех пор, пока люди не перестанут пользоваться IE11 (может, году к 2020?).
Заметьте, что @counter-style не дает возможности стилизовать символ счетчика через CSS. Так что даже после массового принятия будут альтернативные решения наподобие нашего. Более подробно с @counter-style можно ознакомиться на MDN. Ниже представлено демо.
Демо работает только в Firefox:
Демо маркированного списка сверху с разными стилями иконок!
Автор: Steven Estrella
Источник: //css-tricks.com/
Редакция: Команда webformyself.
