Добавляет доку про data-атрибуты (#4659)

* Дока data-атрибуты * Убрал пробелы * Немного редактирует * Правки после проверки редактором * Отображение демки * Поправил путь * Слегка редактирует * Правит отступы * Добавляет пустую строку * Уважает Ё --------- Co-authored-by: Alena Batitskaia <[email protected]>
doka-guide · Sep 27, 2023 · 2a7aebc · 2a7aebc
1 parent 45a3806
commit 2a7aebc
Show file tree

Hide file tree

Showing 3 changed files with 206 additions and 0 deletions.
diff --git a/html/data-attributes/demos/data-symbol/index.html b/html/data-attributes/demos/data-symbol/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Значение дата-атрибута на странице — Дата-атрибуты — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #000000;
+      font-family: "Roboto", sans-serif;
+      font-size: 24px;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    div {
+      width: 65%;
+      padding: 55px 40px;
+      text-align: center;
+      background-color: #2E9AFF;
+    }
+
+    @media (max-width: 768px) {
+      div {
+        width: 100%;
+        padding: 55px 30px;
+      }
+    }
+
+    [data-symbol]::before {
+      content: attr(data-symbol);
+    }
+  </style>
+</head>
+<body>
+  <div data-symbol="〷◠‿◠〷"></div>
+</body>
+</html>
diff --git a/html/data-attributes/index.md b/html/data-attributes/index.md
@@ -0,0 +1,139 @@
+---
+title: "Атрибуты `data-*`"
+description: "Пользовательские HTM-атрибуты для хранения информации в разметке, стилизации при помощи CSS и обращения через JavaScript."
+authors:
+  - kranatoly
+keywords:
+  - data-атрибуты
+  - дата-атрибуты
+related:
+  - js/element-dataset
+  - js/dom
+  - html/data
+tags:
+  - doka
+---
+
+## Кратко
+
+Дата-атрибут — это пользовательский атрибут на HTML-элементе, название которого начинается с `data-`. Это встроенная возможность стандарта HTML5. В дата-атрибутах можно хранить дополнительную информацию в стандартных HTML-элементах и работать с этой информацией в JavaScript при помощи собственного API.
+
+## Как понять
+
+Бывают случаи, когда существующих в HTML атрибутов может быть недостаточно. Нестандартные атрибуты могут пригодиться для передачи пользовательских данных из HTML в JavaScript, или чтобы _помечать_ HTML-элементы для JavaScript.
+
+Если создать случайный выдуманный атрибут, то могут возникнуть проблемы — в новых версиях языка HTML такие атрибуты могут появиться в стандарте и выполнять какую-либо функцию. Тем более не рекомендуется применять существующие атрибуты способами, на которые они не рассчитаны. Скорее всего, кроме подчёркивания линтером негативных последствий может и не быть, но и это считается плохой практикой.
+
+Однако, выход есть — в HTML5 появились дата-атрибуты. Они всегда начинаются с префикса `data-`. Также их называют атрибутами `data-*`.
+
+## Как пишется
+
+Атрибут должен начинаться с «data» (что в переводе означает «данные»), а после тире можно написать любое подходящее по смыслу слово.
+
+Используем атрибут `data-size` со значением `small`:
+
+```html
+<div class="attribute-div" title="attribute" data-size="small"></div>
+```
+
+Можно создавать атрибуты без значения:
+
+```html
+<div data-small></div>
+```
+
+Имя может быть длинным, из нескольких слов. Слова разделяются тире:
+
+```html
+<div data-long-size-atribute="small"></div>
+```
+
+## Стилизация HTML-элементов в CSS
+
+Дата-атрибуты можно использовать в качестве [селекторов по атрибуту](/css/attribute-selector/).
+
+Можно выбрать элементы, у которых есть нужный нам атрибут:
+
+```css
+[data-length] {}
+```
+
+Элементы, у которых атрибут имеет заданное значение:
+
+```css
+[data-age="46"] {}
+```
+
+Элементы со значениями атрибута, которые содержат, например, 6, и те, куда входит это значение (6.88 или 600):
+
+```css
+[data-id^="6"] {}
+```
+
+Элементы, где заданная строка содержится где-то в значении свойства:
+
+```css
+[data-format*="string"] {}
+```
+
+Если при выборе селектора указать ключ `i`, можно получить элементы с атрибутами, значения которых не чувствительны к регистру:
+
+```css
+[data-size="medium" i] {}
+```
+
+Он выберет все следующие элементы:
+
+```html
+<div data-size="medium"></div>
+<div data-size="MEDIUM"></div>
+<div data-size="Medium"></div>
+```
+
+С помощью CSS можно извлечь значение дата-атрибута и вывести его на страницу:
+
+```html
+<div data-symbol="〷◠‿◠〷"></div>
+```
+
+```css
+[data-symbol]::before {
+  content: attr(data-symbol)
+}
+```
+
+<iframe title="Значение дата-атрибута на странице" src="demos/data-symbol/" height="250"></iframe>
+
+## Работа с дата-атрибутами в JavaScript
+
+У дата-атрибутов есть свой собственный API. Читать и записывать значения дата-атрибутов элемента можно с помощью свойства [`dataset`](/js/element-dataset/). С его помощью можно также и добавлять новые дата-атрибуты к элементу.
+
+Можно обращаться к значениям атрибутов `data-*` также, как и к значениям других атрибутов: при помощи методов [`getAttribute`](/js/element-getattribute/) и `setAttribute` для чтения и записи данных соответственно.
+
+Прочитать значение атрибута:
+
+```js
+let attrValue = element.getAttribute('data-episode')
+```
+
+Записать новое значение 4 для атрибута `data-episode`:
+
+```js
+element.setAttribute('data-episode', '4')
+```
+
+## Делать не рекомендуется
+
+Атрибут просто с именем `data` не относится к дата-атрибутам, это обычный кастомный атрибут, который использовать не рекомендуется.
+
+```html
+<div data="noDataAtribute"></div>
+```
+
+Также, не стоит хранить в дата-атрибутах данные, которые должны быть видимы и доступны для [вспомогательных технологий](/a11y/#vspomogatelnye-tehnologii). К тому же, эти данные не индексируются поисковыми роботами.
+
+## Ограничения и краткий вывод
+
+Производительность чтения дата-атрибутов по сравнению с хранением этих данных в хранилищах данных JavaScript намного хуже, использование `dataset` ещё медленнее, чем чтение данных с помощью `getAttribute`.
+
+Для пользовательских метаданных, которые связаны с элементами, дата-атрибуты это отличное решение. На практике часто можно увидеть применение дата-атрибутов в автоматизированном тестировании. Стандартным для многих тестовых фреймворков является атрибут `data-testid`.
diff --git a/people/kranatoly/index.md b/people/kranatoly/index.md
@@ -0,0 +1,6 @@
+---
+name: 'Анатолий Кротов'
+url: https://github.com/KrAnatoly
+badges:
+  - first-contribution-small
+---