HTML5 data-атрибуты (data-*) Автор: Марат Мамяшев

Веб-стандарты JavaScript DOM HTML 5

В HTML5 заявлена поддержка нового универсализированного типа атрибутирования в дескрипторах.

О data-

По сути, это своего рода пространство имен со стандартным синтаксисом «ключ="значение"», весь цимес которого состоит в том, что теперь пользователь может создавать свои собственные уникальные атрибуты прямо в HTML.

Синтаксис

Спецификация требует (почему, рассмотрим ниже), чтобы именование атрибутов велось строго в нижнем регистре и обязательно начиналось с префикса «data-», гарантирующего игнор со стороны юзерагента (например, <div data-my-site="cssblast.ru"></div>). Отдельные смысловые части (слова) в рамках именования должны быть разделены дефисом. Ни в коем случае не camelCase.

Польза

Польза от такого нововведения очевидна для любого, кто когда-либо писал расширенные приложения, содержащие AJAX и прочий JavaScript.

Более не нужно выдумывать сложносочиненные имена классов, постоянно конфликтующие с описательной или структурной стороной и генерировать rel, переводящие браузер в quirksmode, насилующий нежный валидатор WWW-консорциума.

В идеале

Поддерживать data- должен любой веб-браузер с заявленной поддержкой HTML5. На уровне JavaScript нам важно то, что в новом API заявлена поддержка свойства dataset, возвращающего объект DOMStringMap, для всех указанных data-атрибутов. При этом при обращении к атрибуту дефисы в имени должны быть переведены из hyphen-separated нотации в camelCase.

В идеале это должно выглядеть вот так:

<script>
// Посчитаем сайты
var sites = document.getElementById('sites');
var count = sites.dataset.count; // count = 1000;
// Выставим новое значение для скрипта галереи 
sites.dataset.perPage = count/100; //выставим новое значение для вывода по 10
</script>
<ul id="sites" data-count="1000" data-per-page="20">
<li>...<li>
<li>...<li>
<li>...<li>
</ul>

Удалить атрибут из DOM-элемента можно выставив значние null.

sites.dataset.perPage = null;

На самом деле

На момент написания этой статьи ни один из браузеров не поддерживает свойства dataset. Но уже сейчас можно использовать стандартные обходные пути:

Через getAttribute и setAttribute

<script>
// Посчитаем сайты
var sites = document.getElementById('sites');
var count= sites.getAttribute('data-count'); // deprecated = '1'
// Присвоим новое значение 
sites.setAttribute('data-count', count+2); // 3
</script>
<ul id="sites" data-count="1">
<li>...<li>
<li>...<li>
<li>...<li>
</ul>

Через новомодный и «полуподдерживаемый» метод querySelectorAll

// Аналогично, через прямое указание атрибута
document.querySelectorAll(’[data-count]’);
// Вытащить все помеченые к удалению
document.querySelectorAll(’[data-deprecated="1«]’);
<ul id="sites" data-count="1">
<li>...<li>
<li data-deprecated="1">...<li>
<li data-deprecated="1">...<li>
</ul>

Применение

Если собрать все виденные мною в сети примеры использования этого свойства воедино, то главным и единственным, пожалуй, назначением его выйдет именно хранение разного рода «метаданных» и их состояний (например, значений по-умолчанию) для RICH-приложений.

В качестве, примера можно привести:

• Хранение кастомных данных google-аналитики (Jason Karns)
• Реализация субтитров на JavaScript с <video> (Bruce Lawson)

Общие рекомендации по использованию

• Не подменять своими атрибутами нативные элементы.
• Не допускать конфликтов и подмен микроформатов. Не стоит забывать, что в соответствии со спецификацией data- исключена из процесса рендеринга юзерагентом. В общем, если говорить языком ООП — это private.
• Не использовать наличие/отсутствие таких атрибутов в качестве CSS hook'ов. Data- не для этого. Помните о семантике.
• Помните, что все больше плагинов будет использовать такие атрибуты. Потому, лучше использовать свое собственное уникальное «пространство» имен для таких вещей. Например, data-cssblast-height.

А вот здесь товарищи эксперементируют с попыткой добавления функциональности dataset к Element.prototype (квадратная вселенная IE отдыхает, т.к. не разрешает доступа к «фаршу» объекта Element).

Остается лишь надеяться, что это чудесное нововведение переживет публикацию новых драфтов.

Написано по мотивам статей html5doctor и Джона Резига.

Написать комментарий