Заметки за февраль 2014 года

Доступность SVG-пиктограмм

Когда вы используете inline-SVG без текстового пояснения (например, как пиктограмму на кнопке), то неплохо было бы снабдить это изображение заголовком. В SVG-документе есть описательные теги: <title>, <desc>, <metadata>. Для наших целей хорошо подходит тег <title>.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document title</title>
</head>
<body>
  <p>This is a test page</p>

  <button>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="32" height="32">
      <title>Next page</title>
      <polygon points="15,7 11,11 20,20 11,29 15,33 28,20"/>
    </svg>
  </button>

  <p>Actually, there is no next page here.</p>

</body>
</html>

Содержимое <title> не отображается, но может использоваться вспомогательными технологиями.

Содержимое <title> не отображается, но может использоваться вспомогательными технологиями

Более того, каждый графический элемент может иметь собственный заголовок.

Таким образом, нарушая все запреты о наличии только одного тега <title> на странице, мы получили абсолютно валидный документ с несколькими тегами.

На странице с валидной разметкой могут присутстовать несколько тегов <title>

Комментарии к заметке: 4

Преобразователь кода символа

В HTML, CSS и JavaScript для представления кода символа используются совершенно разные способы:

  • в HTML чаще всего используется код символа в десятичной системе исчисления, записанный как HTML-сущность (например, &#8212;);
  • в CSS используется код в шестнадцатеричной системе исчисления, которому предшествует символ \ (например, \2014);
  • в JS внутри строк используется код в шестнадцатеричной система исчисления, записанный как Unicode-символ (например, \u2014).

Для определения нужного значения я использую Entity Conversion Calculator . Он конвертирует HTML-сущность в код для CSS и JS. Так же с его помощью можно получить код известного символа во всех форматах.

Комментарии к заметке: 3

Редирект на другой URL с помощью mod_alias

В HTTP-сервере Apache для редиректов в основном используется mod_rewrite. Без сомнения, это очень мощный инструмент. Для редиректа с одного адреса на другой я чаще всего применяю mod_alias.

Для редиректа используется директива Redirect или RedirectMatch.

Первым опциональным аргументом идёт HTTP-статус код. Если он не задан явно, то считается равным 302 (временный редирекс). Вместо цифровых кодов можно применять ключевые слова: permanent (301), temp (302), seeother (303), gone (410). Технически, в качестве кода статуса можно использовать любое допустимое значение.

Redirect permanent /one /two

Следующими параметрам идут старый путь и новый адрес. Новый адрес может быть как в пределах текущего домена, так и полным URL включая протокол.


Redirect /path/file.txt /assets/data/file.txt
Redirect 301 /report-2013.pdf http://example.com/reports/2013/report.pdf

Итак, директивы mod_alias выглядят гораздо проще и понятнее по сравнению с аналогами в mod_rewrite и прекрасно подходят для простых редиректов.

Оставте свой комментарий

То, что скрыто комментарием

Содержимое HTML комментариев никогда не разбирается парсером документа. Однако, они не пропадают бесследно в пучине тегов. Все комментарии можно достать с помощью JavaScript.

Каждый элемент DOM-дерева имеет поле noteType , в котором указан его тип. Для комментария значения поля равно 8.


var children = document.getElementsByTagName("head")[0].childNodes;
var comments = Array.prototype.filter.call(children,
  function (node) { return node.nodeType == 8; });
var content = comments.map(function (node) { return node.nodeValue; });

Из-за того, что элементы комментариев нельзя получить с помощью .querySelectorAll() , сначала нужно найти родительский элемент, в котором они находятся, и только потом перебором всех детей получить содержимое нужных узлов.

Практическое применение

Условная загрузка

Шикарная идея применять комментарии для формирования разметки на стороне клиента материализовалась в виде проекта Адама Чамберза — Responsive Comments.

Блокам добавляется атрибут data-responsive-comment-media с медиа запросом или атрибут data-responsive-comment-supports с тестом Modernizr. В зависимости от выполнения указанного условия блоки будет появляться или скрывать. А так как изначально контент обвёрнут в комментарий, то это позволит избежать лишних запросов на сервер и лишних элементов в документе.

Поисковая оптимизация

Эксперимент на основе идеи прятать контент от поисковиков в комментариях и доставать его от туда уже на клиентской стороне полностью провалился. Поисковики не только разбирают HTML, то и запускают все скрипты как это делают настоящие браузеры. Это позволяет им индексировать динамически появляющийся контент.

Комментарии к заметке: 4