Нумерованные списки на символах Юникода

Нумерованные списки на символах Юникода

От автора: нумерованные списки – одни из самых старых и семантически богатых элементов в 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 готового списка с кубиками:

Список выглядит следующим образом:

<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>

Стили:

/* 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

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree