О 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-приложений.
В качестве, примера можно привести:
Общие рекомендации по использованию
- Не подменять своими атрибутами нативные элементы.
- Не допускать конфликтов и подмен микроформатов. Не стоит забывать,
что в соответствии со спецификацией data- исключена из процесса
рендеринга юзерагентом. В общем, если говорить языком ООП — это private.
- Не использовать наличие/отсутствие таких атрибутов в качестве CSS hook'ов. Data- не для этого. Помните о семантике.
- Помните, что все больше плагинов будет использовать такие атрибуты.
Потому, лучше использовать свое собственное уникальное «пространство»
имен для таких вещей. Например, data-cssblast-height.
А вот здесь товарищи эксперементируют с попыткой добавления функциональности dataset к Element.prototype (квадратная вселенная IE отдыхает, т.к. не разрешает доступа к «фаршу» объекта Element).
Остается лишь надеяться, что это чудесное нововведение переживет публикацию новых драфтов.
| 
