[Перевод] Полное руководство по HTML-атрибутам data-*04.03.2020 13:09

Представляем вашему вниманию перевод статьи, посвящённой использованию атрибутов data-*. Это — атрибуты, которые можно применять для удобного хранения в стандартных HTML-элементах различной полезной информации. Эта информация, в частности, может применяться в JavaScript и CSS.

upspwjgfn8aucxgahze64e4yzbs.jpeg

Общие сведения


HTML-элементы могут иметь атрибуты, которые используются для решения самых разных задач — от предоставления данных ассистивным технологиям, до стилизации элементов.


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


Это плохо по многим причинам. HTML-код оказывается неправильно сформированным. И хотя подобное может и не иметь реальных негативных последствий, это лишает разработчика тёплого чувства вызываемого тем, что он создаёт валидный HTML-код. Но главная причина того, что так поступать не следует, заключается в том, что HTML — это язык, который постоянно развивается. В результате, если некий атрибут сегодня в языке не применяется, это не значит, что в будущем ничего не изменится.

Правда, если кому-то нужно использовать подобные атрибуты, у него есть совершенно нормальный способ это делать. Речь идёт о создании собственных атрибутов, названия которых начинаются с префикса data-. С этими атрибутами можно совершенно спокойно работать, применяя их так, как нужно программисту.

Синтаксис


Возможность создавать собственные HTML-атрибуты и записывать в них данные может оказаться крайне полезной. Это, как вы понимаете, возможно благодаря атрибутам data-*. Именно для этого такие атрибуты и предназначены. Выглядит это так: 











  •


    • Эти атрибуты, именно из-за того, что они всегда начинаются с префикса data-, часто называют атрибутами data-* или data-атрибутами. При формировании имён этих атрибутов сначала идёт слово data, потом — тире (-), а потом — оставшаяся часть имени, устроенная так, как нужно разработчику.

    Можно ли использовать атрибут, имеющий имя data?


    Вот пример кода, в котором используется атрибут с именем data:


    Атрибут с таким именем, вероятно, никому не повредит, но его применение не позволит пользоваться JavaScript-инструментами, которые мы рассмотрим ниже. В этом примере разработчик, фактически, создаёт некий собственный атрибут, что, как уже было сказано, делать не рекомендуется.

    Чего не стоит делать с атрибутами data-*


    В таких атрибутах не стоит хранить содержимое, которое должно быть доступно ассистивным технологиям. Если некие данные должны быть видимы на странице, или должны быть доступны средствам для чтения с экрана, их недостаточно просто поместить в атрибут data-*. Такие данные должны появиться и в обычной HTML-разметке.

    

    



    
  


    Вот материал о том, как скрывать элементы веб-страниц.

    Стилизация элементов с использованием атрибутов data-*


    В CSS можно выбирать HTML-элементы, основываясь на атрибутах и их значениях.

    /* Выбрать элемент с таким именем атрибута, имеющим такое значение */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}

/* Выбор можно ограничить элементом, классом, или чем-то другим */
button[data-type="download"] { }
.card[data-pad="extra"] { }


    Это может показаться интересным. Для стилизации в HTML/CSS используются, в основном, классы. И хотя классы — это замечательный инструмент (они отличаются средним уровнем специфичности, с ними можно работать с помощью удобных JavaScript-методов через свойство элементов classList), элемент может либо иметь, либо не иметь некоего класса (то есть, класс в элементе либо «включен», либо «выключен»). При использовании атрибутов data-* в распоряжении разработчика оказываются и возможности классов («включено/выключено»), и возможность выбора элементов, основываясь на значении атрибута, которое он имеет на том же уровне специфичности.

    /* Выбор элементов, у которых имеется указанный атрибут */
[data-size] { }

/* Выбор элемента, атрибут которого имеет заданное значение */
[data-state="open"],
[aria-expanded="true"] { }

/* Селектор "начинается с", использование которого приведёт к выбору элементов, атрибут которых содержит "3", а так же - что угодно другое, начинающееся с 3 - вроде "3.14" */
[data-version^="3"] { }
/* Селектор "содержит" указывает на то, что заданная строка должна содержаться где-то в значении свойства */
[data-company*="google"] { }


    Специфичность селекторов атрибутов


    Специфичность селекторов атрибутов такая же, как у классов. Специфичность часто рассматривают как значение, состоящее из 4 частей:

    • Встроенный стиль
    • ID
    • Классы и атрибуты
    • Теги


    В результате, если представить себе значение специфичности для элемента, который стилизуется только с использованием селектора атрибута, то оно будет выглядеть так: 0, 0, 1, 0. 

    А вот ещё один селектор: 

    div.card[data-foo="bar"] { }


    Он уже будет описываться значением 0, 0, 2, 1. Число 2 здесь появляется из-за того, что тут имеется и класс (.card), и атрибут ([data-foo="bar"]). А 1 здесь из-за того, что тут присутствует лишь один тег (div).

    Вот, чтобы было понятнее, иллюстрированная версия этих рассуждений.

    1305263f3c6d135e68278199eb18955c.png


    1 тег, 1 класс и 1 атрибут

    У селекторов атрибутов специфичность ниже, чем у идентификаторов (ID), но выше, чем у тегов (элементов). Их специфичность равна специфичности классов.

    Значения атрибутов, нечувствительные к регистру


    Если нужно, чтобы селекторы выбирали бы атрибуты, значения которых могут содержать строки, записанные с использованием разных комбинаций строчных и прописных букв, можно воспользоваться вариантом селектора, нечувствительным к регистру.

    /* Всё это соответствует следующему селектору

    

    

    

    
*/
[data-state="open" i] { }


    Такое поведение обеспечивает использование в селекторе символа i.

    Вывод данных, хранящихся в атрибутах data-*


    CSS позволяет извлекать значения атрибутов data-* и выводить их на странице.
     

    /* 
     */

[data-emoji]::before {
  content: attr(data-emoji); /* Возвращает ':-)' */
  margin-right: 5px;
}


    Примеры использования атрибутов data-* для стилизации элементов


    Атрибуты data-* можно использовать для указания того, сколько столбцов должно быть у grid-контейнера. Вот HTML-код: 

    
  
    
  
    
  
    
  
    

    


    
  
    
  
    
  
    
  
    
  
    
  
    

    


    
  
    
  
    
  
    
  


    Вот соответствующий CSS-код: 

    [data-columns] {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  margin: 0 0 1rem 0;
}

[data-columns] > div {
  height: 100px;
  background: white;
}

[data-columns="2"] {
  background: #64B5F6;
  grid-template-columns: repeat(2, 1fr);
}

[data-columns="3"] {
  background: #9CCC65;
  grid-template-columns: repeat(3, 1fr);
}

[data-columns="4"] {
  background: #FFB74D;
  grid-template-columns: repeat(4, 1fr);
}


    А вот — фрагмент результирующей страницы.

    0ad47631ecf3e078595063047808d3df.png


    Grid-контейнеры, настройка которых производится с помощью атрибутов data-*

    Поэкспериментировать с этим примером можно на CodePen.

    Работа с атрибутами data-* в JavaScript


    К значениям атрибутов data-* можно обращаться, как и к значениям других атрибутов, пользуясь методом getAtribute для чтения данных, и методом setAttribute для записи.

    // Чтение значения атрибута
let value = el.getAttribute("data-state");

// Запись значения атрибута.

// В data-state записывается значение "collapsed"
el.setAttribute("data-state", "collapsed");


    Однако атрибуты data-* имеют и собственный особый API. Предположим, у нас есть элемент с несколькими атрибутами data-* (что совершенно нормально):


    Если имеется ссылка на этот элемент, то читать и записывать значения его атрибутов можно так: 

    // Чтение
span.dataset.info; // 123
span.dataset.index; // 2

// Запись
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = ";-)";


    Обратите внимание на то, что в последней строке JS-кода используется запись имени атрибута в верблюжьем стиле. Система автоматически преобразует имена HTML-атрибутов, записанные в кебаб-стиле, в имена, записанные в верблюжьем стиле. То есть — data-this-little-piggy превращается в dataThisLittlePiggy.

    Этот API, конечно, не такой удобный, как API classList, поддерживающий понятные методы вроде add, remove, toggle и replace, но это, всё же, лучше чем ничего.

    В JavaScript можно работать и со встроенными в элементы наборами данных: 

    


    JSON-данные в атрибутах data-*
    

      
  
    •


    А почему бы не записать в атрибут data-* JSON-данные? Ведь это всего лишь строки, которые можно отформатировать как валидные JSON-данные (учитывая кавычки и прочее). При необходимости эти данные можно извлечь из атрибута и распарсить.

    const el = document.querySelector("li");

let json = el.dataset.person;
let data = JSON.parse(json);

console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person


    Об использовании атрибутов data-* в JavaScript


    Идея тут заключается в том, чтобы, пользуясь атрибутами data-*, размещать в HTML-коде данные, к которым можно обращаться из JavaScript для выполнения неких действий.

    Распространённый вариант реализации этого сценария направлен на организацию работы с базами данных. Предположим, у нас имеется кнопка Like:


    У этой кнопки может быть обработчик нажатия, выполняющий AJAX-запрос к серверу. Обработчик, если пользователь лайкнет что-то с помощью кнопки, увеличивает количество лайков в серверной базе данных. Обработчик знает о том, какую именно запись надо обновить, так как берёт сведения об этом из атрибута data-*.

    Итоги


    Вот, вот и вот — стандарты, связанные с селекторами атрибутов data-*. Здесь, на сайте Caniuse, можно узнать о поддержке атрибутов data-* браузерами. Если вы раньше не пользовались этими атрибутами, надеемся, этот материал дал вам пищу для размышлений.

    Уважаемые читатели! Как вы применяете HTML-атрибуты data-*?

    1ba550d25e8846ce8805de564da6aa63.png

    © Habrahabr.ru