recursal/MDN huggingface dataset:
categories
==========

|  |  |
| --- | --- |
| Type | `Array` of `String`s |
| Mandatory | No |
| Example | 
```json
"categories": ["music"]
```
 |

`categories` - это массив строк, определяющих имена категорий, к которым, предположительно, относится приложение. Нет стандартного списка возможных значений, но W3C поддерживает список известных категорий.

**Примечание:** `categories` используются только в качестве подсказок для каталогов или магазинов, содержащих веб-приложения. Как и поисковые системы и meta ключевые слова, каталоги и магазины могут игнорировать их.

> 
> \*\*Примечание:\*\*значения `categories` изменяются в каталогах и магазинах перед обработкой на нижний регистр, поэтому «Новости» и «новости» рассматриваются как одно и то же значение. Разработчикам рекомендуется использовать строчные буквы в первую очередь.
> 
> 
> 

Пример
------


```json
"categories": ["books", "education", "medical"]
```

Спецификации
------------

| Specification |
| --- |
| Web App Manifest - Application Information # categories-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
scope
=====

|  |  |
| --- | --- |
| Type | `String` |
| Mandatory | No |
| Example | 
```json
"scope": "/app/"
```
 |

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

Если область относительный URL, базовым URL будет URL манифеста.

Примеры
-------

Если область относительная, URL манифеста используется как базовый URL:


```json
"scope": "/app/"
```


Следующая область ограничивает навигацию текущим сайтом:


```json
"scope": "https://example.com/"
```


Наконец, в следующем примере навигация ограничена подкаталогом текущего сайта:


```json
"scope": "https://example.com/subdirectory/"
```

Спецификации
------------

| Specification |
| --- |
| Web Application Manifest # scope-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
screenshots
===========

|  |  |
| --- | --- |
| Type | `Object` |
| Mandatory | No |
| Example | 
```json
"screenshots": [
  {
    "src": "screenshot.webp",
    "sizes": "1280x720",
    "type": "image/webp"
  }
]
```
 |

`screenshots` определяет массив снимков экрана, предназначенных для демонстрации приложения. Эти изображения предназначены для использования в прогрессивных веб-приложениях магазинов.

Пример
------


```json
"screenshots" : [
  {
    "src": "screenshot1.webp",
    "sizes": "1280x720",
    "type": "image/webp"
  },
  {
    "src": "screenshot2.webp",
    "sizes": "1280x720",
    "type": "image/webp"
  }
]
```

Спецификации
------------

| Specification |
| --- |
| Web App Manifest - Application Information # screenshots-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
prefer\_related\_applications
=============================

|  |  |
| --- | --- |
| Type | `Boolean` |
| Mandatory | No |
| Example | 
```json
"prefer\_related\_applications": true
```
 |

`prefer_related_applications` является значением типа `boolean`, которое указывает, что приложения, перечисленные в `related_applications`, должны быть предпочтительнее веб-приложения. Если для `prefer_related_applications` установлено значение `true`, пользовательский агент может предложить установить одно из связанных приложений вместо этого веб-приложения.

Если опущено, `prefer_related_applications` по умолчанию `false`.

Пример
------


```json
"prefer\_related\_applications": true
```

Спецификации
------------

| Specification |
| --- |
| Web Application Manifest # prefer\_related\_applications-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Использование ARIA
==================

Роли
----

### Роли виджета (en-US)

* Button
* Checkbox
* Dialog
* Gridcell
* Link
* Log
* Marquee
* Menuitem
* Menuitemcheckbox
* Menuitemradio
* Option
* Progressbar
* Radio
* Scrollbar
* Slider
* Spinbutton
* status
* Tab
* Tabpanel
* textbox
* Timer
* Tooltip
* Treeitem
* switch (en-US)
### Композиционные роли

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

* Combobox
* Grid (including row, gridcell, rowheader, columnheader roles)
* Listbox (including option role)
* Menu
* Menubar
* Radiogroup (see radio role)
* Tablist (including tab and tabpanel roles)
* Tree
* Treegrid
### Document structure roles

* Article
* Definition
* Directory
* Document
* Group
* Heading
* Img
* List
* Listitem
* Math
* Note
* Presentation
* Region
* Separator
* Toolbar
### Landmark roles

* Application
* Banner
* Complementary
* Contentinfo
* Form
* Main
* Navigation
* Search
States and properties
---------------------

### Widget attributes

* aria-autocomplete
* aria-checked
* aria-current
* aria-disabled
* aria-expanded
* aria-haspopup
* aria-hidden
* aria-invalid
* aria-label (en-US)
* aria-level
* aria-multiline
* aria-multiselectable
* aria-orientation
* aria-pressed
* aria-readonly
* aria-required
* aria-selected
* aria-sort
* aria-valuemax
* aria-valuemin
* aria-valuenow
* aria-valuetext
### Live region attributes

* aria-live
* aria-relevant
* aria-atomic
* aria-busy
### Drag & drop attributes

* aria-dropeffect
* aria-dragged
### Relationship attributes

* aria-activedescendant
* aria-controls
* aria-describedby (en-US)
* aria-flowto
* aria-labelledby (en-US)
* aria-owns
* aria-posinset
* aria-setsize
Цветовой контраст
=================

Описание проблемы
-----------------

Цветовой контраст между фоном и содержимым переднего плана (обычно текстом) должен быть минимальным, чтобы обеспечить удобство чтения. Хорошо иметь крутой дизайн на своём сайте, но он бесполезен, если ваши пользователи не могут прочитать контент.

Пример хорошего контраста:
 ![An example of good color contrast consisting of the words good contrast with a light purple background.](/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast/screen_shot_2019-02-04_at_5.31.23_pm.png)

Пример плохого контраста:
 ![An example of bad color contrast consisting of the words bad contrast with a dark purple background.](/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast/screen_shot_2019-02-04_at_5.31.34_pm.png)

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

Связанные с WCAG критерии успеха
--------------------------------

1.4.3 Минимальный контраст (AA)

Цветовой контраст между фоном и содержимым переднего плана должен быть минимальным, чтобы обеспечить удобочитаемость:

* Текст и его фон должны иметь контрастность не менее 4.5.1.
* Текст заголовка (или просто крупный текст) должен иметь соотношение не менее 3.1. Крупный текст определяется как минимум 18pt или 14pt полужирный.

1.4.6 Улучшенный контраст (AAA)

Это следует и основывается на критерии 1.4.3.

* Текст и его фон должны иметь контрастность не менее 7.1.
* Текст заголовка (или просто крупный текст) должен иметь соотношение не менее 4.5.1.

1.4.11 Нетекстовый контраст (AA) (добавлен в 2.1)

Минимальное соотношение цветовой контрастности для компонентов пользовательского интерфейса и графических объектов должно составлять 3 к 1.

Решение
-------

При выборе цветовой схемы для вашего сайта, выберите цвета переднего плана и фона, которые имеют хороший контраст. Сделайте цветовой контраст настолько хорошим, насколько это возможно в рамках ваших проектных ограничений — в идеале используйте рейтинг AAA (см. 1.4.6 выше), или в крайнем случае, соответствуйте рейтингу AA (см. 1.4.3 выше).

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

Чтобы проверить свой контраст при выборе цвета, используйте такой инструмент, как Color Contrast Checker от WebAIM.

Вы также можете проверить цветовой контраст на лету с помощью инструментов разработчика Firefox — см. наше руководство Инспектор доступности, и в частности раздел Цветовой контраст.

Смотрите также
--------------

* Цвет и цветовой контраст
* Понимание нетекстового контраста
SVGGraphicsElement
==================

Интерфейс **`SVGGraphicsElement`** представляет элементы SVG, основной целью которых является прямое отображение графики в группу.

**Примечание:** Этот интерфейс был введён в SVG 2 и заменяет интерфейсы `SVGLocatable` и `SVGTransformable` из SVG 1.1.

Свойства
--------

*Этот элемент наследует свойства от своего родителя, `SVGElement` (en-US).*

`SVGGraphicsElement.transform` Только для чтения 

An `SVGAnimatedTransformList` (en-US) reflecting the computed value of the `transform` property and its corresponding `transform` attribute of the given element.

Методы
------

*Этот элемент наследует методы своего родителя, `SVGElement` (en-US).*

`SVGGraphicsElement.getBBox()` (en-US)

Returns a `DOMRect` (en-US) representing the computed bounding box of the current element.

`SVGGraphicsElement.getCTM()`

Returns a `DOMMatrix` (en-US) representing the matrix that transforms the current element's coordinate system to its SVG viewport's coordinate system.

`SVGGraphicsElement.getScreenCTM()`

Returns a `DOMMatrix` (en-US) representing the matrix that transforms the current element's coordinate system to the coordinate system of the SVG viewport for the SVG document fragment.

Спецификации
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGGraphicsElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Network Information API
=======================

**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

API Network Information позволяет определить тип интернет-подключения системы (`'wifi'`, `'cellular'` и т.д.). Эту информацию можно использовать, к примеру, для того, чтобы предоставлять контент большего либо меньшего разрешения в зависимости от качества соединения. Весь API состоит из интерфейса `NetworkInformation`, добавленного в глобальный объект `Navigator` как свойство `Navigator.connection`.

**Примечание:** Эта возможность доступна в Web Workers

Примеры
-------

### Определение изменения соединения

Данный пример отслеживает изменение подключения пользователя.


```js
var connection =
  navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    "Connection type changed from " + type + " to " + connection.effectiveType,
  );
  type = connection.effectiveType;
}

connection.addEventListener("change", updateConnectionStatus);
```

### Предварительная загрузка крупных ресурсов

The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the `preloadVideo` flag is set to false. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of `NetworkInformation.type` (en-US). Regardless of the `type` value you can get an estimate of connection speed through the `NetworkInformation.effectiveType` (en-US) property.


```js
let preloadVideo = true;
var connection =
  navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}
```

Интерфейсы
----------

`NetworkInformation`

Даёт возможность получить информацию о сетевом соединении, а также возможность получать события при изменении типа соединения. Невозможно создавать экземпляры данного интерфейса, для получения доступа используйте `Navigator`.

Спецификации
------------

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

Совместимость с браузерами
--------------------------

### api.NetworkInformation

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.Navigator.connection

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Online and offline events (en-US)
* `window.navigator.connection`
BeforeUnloadEvent
=================

Событие **`beforeunload`** (en: перед\_выгрузкой) происходит (непосредственно) перед выгрузкой окна, документа и их ресурсов.

Если присвоено ненулевое значение свойству `returnValue` Event, всплывает диалоговое окно: "Вы действительно хотите покинуть эту страницу?" (см. пример ниже). Если значение не присвоено, то событие не отображается. В некоторых случаях диалоговое окно всплывает только после взаимодействия пользователя с фреймом или любым встроенным фреймом. См. детали Browser compatibility

|  |  |
| --- | --- |
| Всплывающие окна | Нет |
| Возможность отмены | Да |
| Целевые Объекты | defaultView |
| Интерфейс | `Event` |

Примеры
-------


```js
window.addEventListener("beforeunload", function (event) {
  event.returnValue = "\\o/";
});

//is equivalent to
window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
});
```


Webkit-based browsers не следуют спецификации диалоговых окон . Самый кросс-браузерный работающий пример выглядит примерно так: см. ниже.


```js
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\\o/";

  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage; //Webkit, Safari, Chrome etc.
});
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-beforeunloadevent-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `DOMContentLoaded (en-US)`
* `readystatechange (en-US)`
* `load (en-US)`
* `beforeunload (en-US)`
* `unload (en-US)`
* Выгрузка Документов - Запрос на выгрузку документа
Gamepad API
===========

API Gamepad - это простой и последовательный способ для разработчиков получать доступ к сигналам с геймпадов и других игровых контроллеров и реагировать на них. Он содержит три интерфейса, два события и одну специализированную функцию, чтобы реагировать на подключение и отключение геймпадов, а также получать доступ к другой информации о самих геймпадах и о том, какие кнопки и другие элементы управления в настоящее время нажимаются.

Интерфейсы
----------

`Gamepad`

Представляет собой геймпад/контроллер, подключённый к компьютеру.

`GamepadButton`

Представляет собой кнопку одного из подключённых контроллеров

`GamepadEvent`

Объект события, представляющий запущенные события, связанные с геймпадами.

### Экспериментальные расширения геймпада

`GamepadHapticActuator` (en-US)

Представляет собой аппаратное обеспечение в контроллере, предназначенное для обеспечения тактильной обратной связи с пользователем (если таковая имеется), чаще всего вибрационное оборудование.

`GamepadPose` (en-US)

Представляет собой позу контроллера (например, положение и ориентацию в трёхмерном пространстве) в случае контроллера WebVR. Это не используется в более новом стандарте WebXR.

Сморите также extensions to the Gamepad interface (расширения интерфейса геймпада) для функций, которые позволяют получить доступ к вышеуказанной информации.

### Расширения для других интерфейсов

#### Навигатор

`Navigator.getGamepads()`

Расширение объекта `Navigator`, возвращающее массив объектов `Gamepad` по одному для каждого подключённого геймпада.

#### События окна

`Window.ongamepadconnected` (en-US)

Представляет собой обработчик событий, который будет выполняться при подключении геймпада (когда срабатывает событие `gamepadconnected (en-US)`).

`Window.ongamepaddisconnected` (en-US)

Представляет собой обработчик событий, который будет выполняться при отключении геймпада (когда срабатывает событие `gamepaddisconnected (en-US)`).

Учебные пособия и руководства
-----------------------------

* Using the Gamepad API
* Implementing controls using the Gamepad API
Спецификации
------------

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Прочтите также
--------------

* The Gamepad API, авторы: Тед Мельчарек и Роберт Найман
* Simple API demo page (source)
DOMStringList
=============

Тип возвращаемый некоторыми API, который содержит список DOMString (строки).

Свойства
--------

`DOMStringList.length` (en-US) Только для чтения 

Возвращает длину списка.

Методы
------

`DOMStringList.item()` (en-US)

Возвращает `DOMString`.

`DOMStringList.contains()` (en-US)

Возвращает `Boolean` с указанием, есть ли данная строка в списке.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-domstringlist-interface |
WindowClient
============

Интерфейс `WindowClient` ServiceWorker API (en-US) представляет область действия клиента сервис-воркера, который представляет собой документ в контексте просмотра, управляемый активным исполнителем. Клиент сервис-воркера самостоятельно выбирает и использует сервис-воркера для собственной загрузки и загрузки подресурсов.

Методы
------

*`WindowClient` наследует методы от своего родительского интерфейса `Client` (en-US).*

`WindowClient.focus()` (en-US)

Фокусирует пользователя на текущем окне.

`WindowClient.navigate()` (en-US)

Загружает указанный URL-адрес на управляемую клиентскую страницу.

Свойства
--------

*`WindowClient` наследует методы от своего родительского интерфейса `Client` (en-US).*

`WindowClient.focused` (en-US) Только для чтения 

Логическое значение, указывающее, находится ли текущая страница в фокусе.

`WindowClient.visibilityState` (en-US) Только для чтения 

Указывает, отображается ли текущая страница. Это значение может быть одним из `"hidden" (скрыта)`, `"visible" (отображена)` или `"prerender" (предварительно отрисована)`.

Пример
------


```js
self.addEventListener("notificationclick", function (event) {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // Проверяем, открыто ли окно и
  // сфокусированы ли на нем
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == "/" && "focus" in client) {
            client.focus();
            break;
          }
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

Спецификации
------------

| Specification |
| --- |
| Service Workers # windowclient |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Использование сервис-воркеров (en-US)
* Пример базового кода сервис-воркеров
* Is ServiceWorker ready?
* Promises
* Использование веб-воркеров (en-US)
* Channel Messaging API (en-US)
FormData
========

XMLHttpRequest 2 добавляет поддержку для нового интерфейса FormData. Объекты FormData позволяют вам легко конструировать наборы пар ключ-значение, представляющие поля формы и их значения, которые в дальнейшем можно отправить с помощью метода `send()` (en-US).

FormData использует такой же формат на выходе, как если бы мы отправляли обыкновенную форму с encoding установленным в "multipart/form-data".

**Примечание:** О деталях использования FormData можно прочитать в статье Использование объекта FormData (en-US).

Конструктор
-----------

`FormData()`

Создаёт объект `FormData`.

Методы
------

`FormData.append()`

Добавляет новое значение существующего поля объекта `FormData`, либо создаёт его и присваивает значение.

`FormData.delete()`

Удаляет пару ключ-значение из объекта `FormData`.

`FormData.get()`

Возвращает первое значение ассоциированное с переданным ключом из объекта `FormData`.

`FormData.getAll()`

Возвращает массив всех значений ассоциированных с переданным ключом из объекта `FormData`.

`FormData.has()`

Возвращает булево значение касательно наличия в объекте `FormData` конкретной пары ключ-значение.

`FormData.set()`

Устанавливает новое значение для существующего ключа объекта `FormData`, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.

`FormData.keys()`

Возвращает `iterator` , который позволяет пройтись по всем ключам для каждой пары "ключ-значение" , содержащимся внутри объекта `FormData`

`FormData.entries()`

Возвращает `iterator` который позволяет пройтись по всем парам "ключ-значение", содержащимся внутри объекта `FormData`

`FormData.values()`

Возвращает `iterator` , который позволяет пройтись по всем значениям , содержащимся в объекте `FormData`


**Примечание:** Разница между `FormData.set()` и `FormData.append()` заключается в том, что если указанный ключ найден в объекте, `FormData.set()` перезапишет его новым значением, тогда как `FormData.append()` добавит новое значение в конец существующего. Смотрите дополнительные материалы с примерами.

Спецификация
------------

| Specification |
| --- |
| XMLHttpRequest Standard # interface-formdata |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Использование объектов FormData (en-US)
* `<form>`