От автора: Эд Морган пишет: Все мы согласны с тем, что в разметке должен быть только контент и никаких украшений. Но к какой категории относятся иконки? Разве они не выполняют роль украшения? В следствие чего должны существовать только в CSS.
Мы можем представить себе иконки-украшения. Держу пари, что это самый распространенный тип иконок. Такие иконки располагаются рядом со словами или фразами, как часть общего дизайна. Я не могу здесь процитировать какой-либо научный труд на эту тематику, но лично я думаю, что иконки делают вещи более запоминающимися, такие вещи легче находить, они становятся понятны в разных культурах и т.д. Пример иконки:
Давайте создадим такую иконку по концепции из цитаты Эда: «они не должны присутствовать в разметке и должны прописываться только в CSS».
|
1 2 3 |
<button class="button button-follow"> Follow </button> |
|
1 2 3 4 |
.button-follow { padding-left: 70px; /* Normal left padding plus space for icon */ background: url(/images/icons/icon-follow.svg) no-repeat left center; } |
HTML код самый простой. Иконка выступает в роли украшения. Если изображение не загрузится, мы увидим все ту же кнопку. Даже если не загрузится код CSS, кнопка останется кнопкой. Кроме того, она абсолютно независима от JS. Если соблюдать технику прогрессивного улучшения, нам нужно было бы обернуть кнопку button в тег <form action=»/do/the/right/thing»> или использовать ссылку <a href=»/go/to/right/place»>, чтобы кнопка работала отдельно.
Или же можно сделать так:
|
1 2 3 4 5 6 7 8 9 |
.button-follow::before { content: ""; display: inline-block; vertical-align: middle; width: 1em; height: 1em; background: url(/images/icons/icon-follow.svg); background-size: cover; } |
Никаких изменений в HTML. С иконками-шрифтами все то же самое:
|
1 2 3 4 5 6 |
.button::before { font-family: "icon-font"; } .button-follow::before { content: "\e901"; } |
Псевдоэлементы доступны для скрин ридеров, однако с иконками они ведут себя странно, тем более в режиме «Private Use Area». Не говоря уже о проблемах со шрифтами-иконками.
В разметке…
Если вы захотите найти самый лучший способ использования шрифтов-иконок, скорее всего, вы придете к следующему:
|
1 |
<span class="icon icon-hamburger" aria-hidden="true"></span> |
Мы избавились от контейнера, и вот теперь в разметке присутствуют элементы украшения. Плохо ли это? Нет. Я люблю систему иконок на SVG, разметка тогда будет такая:
|
1 2 3 4 5 |
<svg class="icon icon-follow" aria-hidden="true"> <use xlink:href="#icon-follow" /> </svg> Follow </button> |
… а тег use, скорее всего, ссылается на тег symbol также где-то в HTML коде. Считаю ли я, что это плохо? Нет. В итоге мы получаем иконки без поддержки текста:
Эти иконки можно переделать:
|
1 2 3 4 5 |
<button aria-label="Save Now" class="button button-save"> <svg class="icon icon-save"> <use xlink:href="#icon-save" /> </svg> </button> |
Данный код немного отличается, но несильно. Одна иконка отображается в виде контента, другая в виде украшения – в этом нет ничего нового.
Это просто HTML
Тут разница в подходах, и не нужно придерживаться какого-то одного способа. В HTML много всего интересного. Можно ли отнести фавикон к элементам украшения? У меня есть скрипт Google Analytics, который никак не похож на контент. Мне пришлось добавить дополнительный div, чтобы использовать относительное позиционирование. Это никак не повлияло на код. Меня больше беспокоит захламление баз данных.
Я понял
Я понял, что такой подход помогает создавать определенные правила, помогает высечь концепции в камне, что делает интернет только лучше. Не используйте тег img для установки фонового изображения background-image.
Мне нравится идея использования разметки по смыслу. Выполняет ли разметка то, что вы от нее хотите? Вредит ли она доступности или помогает? Что происходит с производительностью? Удобно ли будет работать с таким кодом потом?
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
