doka-guide · TatianaFokina · Dec 12, 2023 · Dec 1, 2023 · Dec 1, 2023 · Dec 1, 2023
@@ -1,8 +1,10 @@
 ---
 title: "Атрибуты `data-*`"
-description: "Пользовательские HTM-атрибуты для хранения информации в разметке, стилизации при помощи CSS и обращения через JavaScript."
+description: "Пользовательские HTML-атрибуты для хранения информации в разметке, стилизации при помощи CSS и обращения через JavaScript."
 authors:
   - kranatoly
+contributors:
+  - skorobaeus
 keywords:
   - data-атрибуты
   - дата-атрибуты

@@ -8,8 +8,14 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
   <style>
-    * {
+    *, *::before, *::after {
       margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
     }
 
     body {
@@ -25,6 +31,10 @@
       font-weight: 500;
     }
 
+    p {
+      font-size: 18px;
+    }
+
     p + p {
       margin-top: 5px;
     }
@@ -56,7 +66,7 @@
       padding-top: 10px;
       margin-top: 30px;
       font-style: italic;
-      font-size: 14px;
+      font-size: 16px;
     }
   </style>
 </head>

@@ -10,11 +10,13 @@ authors:
   - solarrust
 editors:
   - tachisis
+contributors:
+  - skorobaeus
 keywords:
   - футер
 related:
   - css/position
-  - a11y/screenreaders
+  - a11y/role-contentinfo
   - css/flexbox-guide
 tags:
   - doka
@@ -24,22 +26,29 @@ tags:
 
 `<footer>` создаёт нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт.
 
+У `<footer>` есть роль [`contentinfo`](/a11y/role-contentinfo/). Благодаря роли пользователи [скринридеров](/a11y/screenreaders/) могут быстро перемещаться к этой области страницы с помощью специальных клавиш.
+
 ## Пример
 
 В нашем блоке со статьёй будет небольшой футер с указанием автора и его контактами:
 
 ```html
 <article>
   <h1>Бигфут</h1>
-  <p>Бигфут (от англ. Bigfoot, «большеногий») — название полумифического млекопитающего...</p>
+  <p>
+    Бигфут (от англ. Bigfoot, «большеногий») — название
+    полумифического млекопитающего...
+  </p>
   <footer>
     <p>Ольга Сасквоч</p>
-    <p>Почта: <a href="mailto:sasquatch@yandex.ru">sasquatch@yandex.ru</a>.</p>
+    <p>
+      Почта: <a href="mailto:sasquatch@yandex.ru">sasquatch@yandex.ru</a>.
+    </p>
   </footer>
 </article>
 ```
 
-<iframe title="Футер для статьи" src="demos/footer/" height="300"></iframe>
+<iframe title="Футер для статьи" src="demos/footer/" height="360"></iframe>
 
 ## Как понять
 

@@ -3,6 +3,8 @@ title: "`<search>`"
 description: "Один тег чтобы обернуть секцию с поиском или фильтром."
 authors:
   - andreysukhov
+contributors:
+  - skorobaeus
 related:
   - html/form
   - html/input

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-  <title>Простой svg-спрайт - SVG-спрайт — Дока</title>
+  <title>Простой svg-спрайт — SVG-спрайт — Дока</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -92,7 +92,7 @@
 <body>
   <main class="sprite-demo">
     <section class="sprite-demo__container">
-      <span class="sprite-demo__heading">Наведите курсор на иконку чтобы изменить её стиль</span>
+      <span class="sprite-demo__heading">Наведите курсор на иконку, чтобы изменить её стиль</span>
 
       <div class="sprite-demo__share">
       <button class="sprite-demo__btn">

@@ -3,6 +3,8 @@ title: "SVG-спрайт"
 description: "Что такое SVG-спрайты, как их создавать, когда применять и как они могут помочь вам в улучшении производительности вашего сайта."
 authors:
   - s-dudko
+contributors:
+  - skorobaeus
 keywords:
   - свг
   - векторная графика
@@ -24,7 +26,7 @@ SVG-спрайт — это файл, получаемый в результат
 
 В настоящее время в сети используется протокол HTTP/2, который позволяет открывать несколько параллельных соединений и снизить накладные расходы. Но всё равно важно следить за нагрузкой на сеть, так как пользователи могут столкнуться с ситуацией когда их интернет-соединение является медленным и скорость загрузки ресурсов может быть критичной.
 
-Часто SVG-графика используется для создания системы иконок и её последующего использования на сайте. Можно по-разному добавлять [SVG-иконки](/html/svg/#kak-podklyuchat) на сайт, но наиболее распространённым способом является добавление иконок прямо в разметку страницы, так как это позволяет стилизовать SVG при помощи CSS. При таком подходе можно столкнуться с ситуацией когда на одной или нескольких страницах приходиться дублировать разметку вставляя одну и те же SVG-иконку (например, иконку удаления или редактирования данных).
+Часто SVG-графика используется для создания системы иконок и её последующего использования на сайте. Можно по-разному добавлять [SVG-иконки](/html/svg/#kak-podklyuchat) на сайт, но наиболее распространённым способом является добавление иконок прямо в разметку страницы, так как это позволяет стилизовать SVG при помощи CSS. При таком подходе можно столкнуться с ситуацией когда на одной или нескольких страницах приходится дублировать разметку вставляя одну и те же SVG-иконку (например, иконку удаления или редактирования данных).
 
 ![Таблица пользователей с набором повторяющихся иконок](images/table-with-users-example.jpg)
 Таблица пользователей с набором повторяющихся иконок
@@ -43,7 +45,7 @@ SVG-спрайт — это файл, получаемый в результат
 </svg>
 ```
 
-Далее каждая SVG-иконка помешается внутрь тега [`<symbol>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol), который предоставляет возможность группировать элементы. При этом данные объекты не отображаются до тех пор пока на них не будут ссылаться при помощи тега [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use).
+Далее каждая SVG-иконка помещается внутрь тега [`<symbol>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol), который предоставляет возможность группировать элементы. При этом данные объекты не отображаются до тех пор пока на них не будут ссылаться при помощи тега [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use).
 
 Код ниже сокращён для удобства чтения.
 
@@ -111,15 +113,21 @@ SVG-спрайт — это файл, получаемый в результат
 В [спецификации SVG](https://www.w3.org/TR/SVG/linking.html#SVGFragmentIdentifiers) такой способ называется именованными фрагментами.
 
 ```xml
-<svg width="24" height="72" viewBox="0 0 24 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <view id="icon-first-view" viewBox="0 0 24 24"/>
-    <path d="M4 12V20C4 20.5304 ..."/>
-
-    <view id="icon-first-view" viewBox="0 24 24 24"/>
-    <path d="M4 12V20C4 20.5304 ..."/>
-
-    <view id="icon-first-view" viewBox="0 48 24 24"/>
-    <path d="M4 12V20C4 20.5304 ..."/>
+<svg
+  width="24"
+  height="72"
+  viewBox="0 0 24 72"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <view id="icon-first-view" viewBox="0 0 24 24"/>
+  <path d="M4 12V20C4 20.5304 ..."/>
+
+  <view id="icon-first-view" viewBox="0 24 24 24"/>
+  <path d="M4 12V20C4 20.5304 ..."/>
+
+  <view id="icon-first-view" viewBox="0 48 24 24"/>
+  <path d="M4 12V20C4 20.5304 ..."/>
 </svg>
 ```
 
@@ -183,7 +191,7 @@ SVG-спрайт — это файл, получаемый в результат
 
 <iframe title="Стек изображений" src="demos/stack/" height="150"></iframe>
 
-Существую разные способы использования SVG-спрайтов, каждый из которых имеет свои преимущества и недостатки. В одних случаях можно использовать иконки как фоновые изображение, но нельзя стилизовать их. В других наоборот. Важно знать различные способы применения SVG-спрайтов и их особенности, а также правильно применять их в той или иной задаче.
+Существуют разные способы использования SVG-спрайтов, каждый из которых имеет свои преимущества и недостатки. В одних случаях можно использовать иконки как фоновые изображение, но нельзя стилизовать их. В других наоборот. Важно знать различные способы применения SVG-спрайтов и их особенности, а также правильно применять их в той или иной задаче.
 
 ## Подсказки