Добавляет доку про inert (doka-guide#4747)

* Добавляет демку * Добавляет текст и демки * Добавляет ссылку * Удаляет пустую строку (╬▔皿▔)╯ * Удаляет пустую строку * Добавляет параграф текста * Принимает правочку Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com> --------- Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>
SergeyKrasnolobov · Oct 13, 2023 · e1865df · e1865df
1 parent c205305
commit e1865df
Show file tree

Hide file tree

Showing 3 changed files with 316 additions and 0 deletions.
diff --git a/html/inert/demos/inert-vs-disabled/index.html b/html/inert/demos/inert-vs-disabled/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Сравнение disabled и inert — Атрибут inert — Дока</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:wght@300;400;500&family=Roboto+Mono&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 16px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      gap: 50px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    p {
+      margin: 0 0 15px;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    h2 {
+      margin-bottom: 17px;
+      font-weight: 500;
+      font-size: 1.375rem;
+    }
+
+    code {
+      font-family: "Roboto Mono", monospace;
+    }
+
+    .container, .row {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .container {
+      gap: 50px;
+    }
+
+    .row {
+      align-items: start;
+    }
+
+    .button {
+      display: block;
+      min-width: 210px;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      padding: 9px 15px;
+      color: #000000;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:hover {
+      background-color: #FFFFFF;
+      cursor: pointer;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:focus-visible {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button:focus {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button-orange {
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="row">
+      <h2>Область с <code>inert</code> без стилей</h2>
+      <div inert>
+        <p>Текст, который видят, но не слышат и не могут скопировать.</p>
+        <button class="button button-orange">Неактивная кнопка</button>
+      </div>
+    </div>
+    <div class="row">
+      <h2>Кнопка с <code>disabled</code> без стилей</h2>
+      <button class="button button-orange" disabled>Неактивная кнопка</button>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/html/inert/demos/styled-inert-area/index.html b/html/inert/demos/styled-inert-area/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Базовый пример с кнопкой и текстом — Атрибут inert — Дока</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:wght@300;400;500&family=Roboto+Mono&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 16px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      gap: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    p {
+      margin: 0 0 15px;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+
+    h2 {
+      margin-bottom: 17px;
+      font-weight: 500;
+      font-size: 1.375rem;
+    }
+
+    code {
+      font-family: "Roboto Mono", monospace;
+    }
+
+    .container, .row {
+      display: flex;
+    }
+
+    .container {
+      flex-wrap: wrap;
+      gap: 40px;
+    }
+
+    .row {
+      flex-direction: column;
+    }
+
+    [inert], [inert] * {
+      opacity: 0.7;
+      pointer-events: none;
+      cursor: default;
+      user-select: none;
+    }
+
+    .button {
+      display: block;
+      min-width: 210px;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      padding: 9px 15px;
+      color: #000000;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:hover {
+      background-color: #FFFFFF;
+      cursor: pointer;
+      transition: background-color 0.2s linear;
+    }
+
+    .button:focus-visible {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button:focus {
+      border: 2px solid #FFFFFF;
+      outline: none;
+    }
+
+    .button-orange {
+      background-color: #FF8630;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="row">
+      <h2>Блок с <code>inert</code></h2>
+      <div inert>
+        <p>Текст, который нельзя скопировать и услышать.</p>
+        <button class="button button-orange">Неактивная кнопка</button>
+      </div>
+    </div>
+    <div class="row">
+      <h2>Кнопка без <code>inert</code></h2>
+      <p>Обычный текст.</p>
+      <button class="button button-orange">Активная кнопка</button>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/html/inert/index.md b/html/inert/index.md
@@ -0,0 +1,70 @@
+---
+title: "Атрибут `inert`"
+description: "Элемент бездельничает? Не беда, ведь есть inert."
+authors:
+  - tatianafokina
+keywords:
+  - неактивный компонент
+  - модалка
+  - диалог
+related:
+  - html/dialog
+  - html/disabled
+  - html/global-attrs
+tags:
+  - doka
+---
+
+## Кратко
+
+Глобальный атрибут, который делает элемент недоступными для браузеров и вспомогательных технологий. Слово `inert` можно перевести буквально как «инертный». То есть, элемент, который бездействует или ничего не делает 😴
+
+## Пример
+
+```html
+<p>Данные загружаются…</p>
+<form inert>
+  <fieldset>
+    <legend>Срок действия лицензии</legend>
+    <label for="start">Дата начала</label>
+    <input type="date" id="start">
+    <label for="end">Дата окончания</label>
+    <input type="date" id="end">
+    <button>Применить</button>
+  </fieldset>
+</form>
+```
+
+## Как пишется
+
+Добавьте к любому тегу `inert`. Это булевый атрибут, так что у него нет значений.
+
+`inert` удаляет элемент из порядка навигации и из [дерева доступности](/a11y/screenreaders/#derevo-dostupnosti). Это значит, что на него нельзя кликнуть, сделать фокус, ввести данные и найти через поиск по странице. [Скринридеры](/a11y/screenreaders/) не зачитывают содержимое таких элементов и не объявляют роли. Это напоминает поведение другого [глобального атрибута `disabled`](/html/disabled/), но между ними есть разница, — `inert` можно задать любому тегу или их группе.
+
+У `inert` по умолчанию нет стилей. Однако текст внутри блока или элемента с `inert` нельзя выделить, а в случае `disabled` можно. Если у кнопки есть кастомные стили при наведении и фокусе, то кнопка с `inert` их проигнорирует без дополнительных усилий в отличие от `disabled`.
+
+<iframe title="Сравнение disabled и inert" src="demos/inert-vs-disabled/" height="370"></iframe>
+
+Хотя `inert` можно использовать для всех тегов, для одиночных кнопок и других интерактивных элементов лучше задавать `disabled`. Случаи, в которых используют `inert`:
+
+- сделать временно неактивной область с подгружающимися элементами;
+- убрать содержимое страницы из порядка навигации, когда открыто модальное окно.
+
+Учитывайте, что для области с важными элементами лучше не использовать `inert`. К примеру, делать неактивной часть формы, пока не заполнена другая.
+
+Не забывайте стилизовать элементы с `inert`, когда это важно. Например, временно неактивная кнопка или поле. Если пропустите этот шаг, пользователям будет сложно найти визуальные отличия между активными и «инертными» элементами. При этом в случае модального окна стоит стилизовать `::backdrop`, а `inert` не трогать.
+
+```css
+[inert], [inert] * {
+  opacity: 0.7;
+  pointer-events: none;
+  cursor: default;
+  user-select: none;
+}
+```
+
+<iframe title="Стилизованная область с inert" src="demos/styled-inert-area/" height="300"></iframe>
+
+## Подсказки
+
+💡 Когда используете метод `.showModal()` для показа [`<dialog>`](/html/dialog/), браузеры добавят `inert` к остальному содержимому сами.