Category: HTML

Почему лучше использовать SVG, а не шрифт для иконок и значков

На разных проектах часто нужно использовать пиктограммы, значки, одноцветные картинки (icon). Для этого создают отдельный шрифт, который использует векторные картинки вместо символов. Это дает простоту изменения размера и цвета значков. Но, если углубиться в детали, то для этих целей лучше подходит графический формат SVG.
Рассмотрим причины не хранить значки в шрифтах.

  1. Разделение представления

    Если хранить значки в том же файле шрифта, который используется для текста на сайте, то мы получаем минус один запрос при загрузке, но значки-пиктограммы нужно записывать в особую область шрифта (Private Unicode Area), которая в некоторых случаях подменяется другими символами и не поддерживается внекоторых устройствах. Также нужно обратить внимание, что некоторые браузеры не поддерживают @font-face (например Opera Mini).
    И если ваш шрифт не загрузился или недогрузился, то пользователи будут видеть непонятные символы виде квадратов с крестами на месте ожидаемой графики. Соответственно, для избежания подобных проблем, лучше использовать SVG или PNG.

  2. Разные технологии сглаживания в разных браузерах и ОС

    Chrome, самый популярный браузер сейчас, в достаточно многих случаях плохо сглаживает шрифты, особенно с мелкими деталями или маленького размера. Поэтому значки из шрифтов смотрятся хуже и по разному в разных окружениях, что не происходит с SVG, которые рендерется максимально одинаково в разных браузерах.

  3. Сгенерированный контент

    Если мы используем шрифтовые значки, то, соответственно, нужно вставлять код символа в контент или использовать свойство content, а это – не всегда возможно. Например, когда псевдо-элементы :before и :after уже используются для других целей или некоторые элементы не поддерживают добавления сгенерированного контента вообще (input).
    Таких проблем не возникает с картинками.

  4. Меньше проблем с позиционированием

    Если использовать шрифтовые значки, то часто возникают неточности и смещение картинки значка относительно контента. Причем эти проблемы возникают в разных браузерах в разных случаях, и сложно их исправлять кросбраузерно, не прибегая к хакам с line-height или абсолютным\относительным позиционированием.
    С картинками SVG все намного проще, можно использовать background-size: cover и одинаково изменять размер и позицию в разных браузерах.

  5. Разноцветные значки (а не одноцветные)

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

  6. Возможность анимации

    Динамические элементы сейчас важная составляющая пользовательского интерфейса, они позволяют улучшить впечатления пользователя, добавляют уникальность проекту. Теперь это возможно делать в SVG, хоть и пока есть много ограничений в плане кросбраузерности.

  7. Шрифт это не формат для изображений

    Только у меня возникает ощущение, что шрифтовые значки – это способ сделать проще, то что делается другим стандартным способом? А это обычно называется хаком (hack).
    Конечно, можно разводить полемику. Что символ в шрифте это векторное изображение, а значит его можно делать любым. Но это векторное изображение имеет четкое предназначение – отображать конкретный символ.
    Но и тут можно поспорить, что такое символ и зачем он нужен. Думаю, очевидно, что разные инструменты, предназначенные для разных вещей, могут использоваться в одних и тех же процессах, но это не делает их назначение другим.

Преимущества font-face для значков

Использование шрифтов для значков дает огромное удобство в работе с их цветами – всегда очень просто изменить цвет шрифта. Очень просто изменять отображение значка в соответствии с состояниями элемента (например :hover, :focus). Также у font-face лучшая кросбраузерная поддержка, по сравнению с SVG.

На сколько критичны эти преимущества? Тут конечно все неоднозначно. Но в большинстве случаев этими плюсами шрифтов можно пренебречь.

Например, добавив в SVG-спрайт еще несколько копий одного и того же объекта, но разных цветов, мы получим абсолютно не значимое изменение в размере. Gzip-сжатие, которое используется в 99% случаев, добавит несколько десятков байт к файлу без копий (обычно это 1-3%). Напомню SVG основан на XML, а это – обычный текст, который прекрасно сжимается.

А использования различных техник составления спрайтов упрощают работу с background-position (пример).
Но уже скоро можно будет использовать SVG Fragment Identifiers, чтоб избавиться от одинаковых объектов в спрайте.

Что же касается кросбраузерности, то основная проблема – IE8. Достаточно просто сохранить вместе с SVG еще и PNG копию файла и добавить отдельный CSS для IE8 или продублировать декларацию свойства background файлом PNG перед SVG. В автоматизации этого процесса может помочь Grunticon.

Можно сделать вывод – что лишь в особых случаях использование шрифтов для значков оправданно.

Разница между элементами <blockquote>, <cite> и <q>

Раньше использовали три элемента для цитирования в контенте, с не очевидной разницей:

  • <blockquote>
  • <q>
  • <cite>

Совсем в черновике спецификации HTML5 добавили четкости в использовании данных элементов.

Элемент <blockquote>

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Content inside a blockquote other than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

HTML 5.1 Nightly

То есть, с помощью блочного элемента <blockquote> выделяют семантически контент из других источников, причем сама цитата должна быть точной и обязательно иметь отсылку на источник, из которого взята внутри элемента <cite>.

Пример использования <blockquote> с <cite>
<blockquote>
    <p>
        As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, citations almost always appear as part of the quotation – it’s highly conventional.
    </p>
    <footer>
        <cite><a href="http://brucelawson.co.uk/2013/on-citing-quotations-again/">Bruce Lawson</a></cite>
    </footer>
</blockquote>

Элемент <cite>

The cite element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference, which may be in an abbreviated form as per the conventions used for the addition of citation metadata.

4.5.6 The cite element

Итак, строчный элемент <cite> – это отсылка (референс) на источник цитируемого контента (авторскую работу) и эта отсылка должна включать название работы, или имя автора, или просто URL, которые могут быть представлены в сокращенном виде.

У элементов <blockquote>, <q> есть атрибут cite, который может заменять сам элемент <cite>.

Элемент <q>

The q element represents some phrasing content quoted from another source.

Content inside a q element must be quoted from another source, whose address, if it has one, may be cited in the cite attribute. The source may be fictional, as when quoting characters in a novel or screenplay.

4.5.7 The q element

Смысл элемента <q> такой же, как и <blockquote>, но это фраза, а не цельный блок из контента. Также должен включать отсылку на источник в элементе или атрибуте cite.

Пример от W3C
<p>The W3C page <cite>About W3C</cite> says the W3C's mission is <q cite="http://www.w3.org/Consortium/">To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web</q>. I disagree with this mission.</p>
Выводы

Для цитирования логично отделенного блока контента используем <blockquote>,
для цитирования отрывка, фразы – <q>, при чем указываем автора, название или ссылку во вложенном элементе <cite>.

quote

Рекомендации по написанию HTML-кода начинающим web-разработчикам

Очевидные вещи, которые выделил для себя. Хотелось бы, чтоб грамотные люди дополнили этот небольшой список. Цель – сделать код и свой, и других – более красивым, валидным, легко понимаемым и семантически грамотным.

Использование тега <br />

В основном это бывает нужно, для улучшения восприятия текста, точнее для форматирования одного элемента. Поэтому, когда нам нужно разделить несколько элементов или просто, чтоб новый элемент был в новой строчке, нужно использовать блочный элемент (div, p, h1…, у которых по умолчанию css-свойство display:block, но при этом, старайтесь не плодить лишних элементов). И если нужно сделать отступ, не нужно вставлять десять <br>, а нужно описать в css свойство margin.

Использование атрибута style и свойство !important

Это нужно в исключительных случаях, когда место уникальное. Почти всегда нужно использовать css-класс со свойствами вынесенными в css-файл. И даже если вам нужно спрятать элемент (display:none), лучше создать универсальный класс, (например css: .hidden {display:none;}), и писать <span class=”error hidden”>.
В описании класса, если у вас не применяется какое-то свойство, не нужно писать !important, чаще всего достаточно впереди дописать родительский селектор, и желательно – class, а не id.

Устаревшие элементы и атрибуты HTML

<CENTER>, <FONT>, border, color, cellpadding, cellspacing, width (для таблиц)
Все они заменяются свойствами в CSS, поэтому не используйте вышеперечисленные элементы. Также, атрибут name для XHTML не валидный – его не нужно использовать (все делается через id).

Элемент <label>

Специально, чтоб описывать назначение инпута есть элемент <label> (в HTML5 для этой цели можно использовать атрибут placeholder). Поэтому везде, где есть input, почти всегда, должен быть <label for=”input_id”>.

Неразрывный пробел и перенос слов

Старайтесь предвидеть возможность переноса слов и, где это нужно, используйте &nbsp; чтобы предотвратить разрыв. Если контент динамический и нужно держать его одной строчкой, можно использовать css-свойство, которое предотвращает перенос слов в новую строку – white-space:nowrap;

Расположение кнопок

Справа должна быть наиболее вероятная для нажатия кнопка. (Например 1.Cancel 2.Ok), это не относится к выводу информации – впереди должно быть самое важное. Но поскольку пользователь проверяет все возможные действия, то не нужно заставлять его возвращаться назад, даже взглядом.

Названия колонок, кнопок, действий

Старайтесь придерживаются правила – отдельный элемент – новое предложение и соответственно – пишите его с заглавной буквы (Submit, Order now). Также не нужно писать целиком заглавными слово, предложение или абзац. Если это нужно, есть css-свойство text-transform:uppercase;

Подчеркивание и выделение

Не подчеркивайте никакие элементы кроме ссылок. Для выделения используйте <strong>, <em> с соответствующими им css-свойствами font-weight:bold, font-style:italic или изменяйте сам шрифт. Если семантически фрагмент не выделяется, а только визуально, используйте <span>.

Сюда не вошли, может, более очевидные вещи, такие как форматирование или как выбирать названия для id элементов, но это относиться, на мой взгляд, к стилю, а не к культуре написания кода. CSS может и не нужно всем знать досконально, но структуру HTML-документа должны понимать все разработчики.


Надеюсь, данная заметка будет полезна и дополнена/исправленна Вашими коментариями.