Від автора: нумеровані списки – одні з найстаріших і семантично багатих елементів в 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-зображень з м’ячами чотирьох основних видів спорту всередині.
Ця техніка підійшла б для сайту гри, проте мені стало цікаво, як зробити те ж саме, але без зображень. Відповідь – використовувати символи Unicode від \2680 і до \2685 (6 сторін кубика). Я створив клас dicey і з допомогою псевдоселекторов nth-child та before позиціонував і вибрав символ Юнікоду для кожного елемента списку. Щоб згладити відмінності в браузерах, я додав посилання в бібліотеку Normalize.css.
Pen готового списку з кубиками:
Список виглядає наступним чином:
Стилі:
/* 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:
Демо маркірованого списку зверху з різними стилями іконок!
